handsontable 0.0.0-next-ff8465d-20231006 → 0.0.0-next-b0a4ea2-20231024

package/plugins/contextMenu/menu/menu.mjs

@@ -1,21 +1,29 @@
 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 { Navigator } from "./navigator.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, isItemSelectionDisabled, isItemSeparator } from "./utils.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, empty, fastInnerHTML, isChildOf, isInput, removeClass, getParentWindow, hasClass, setAttribute } from "../../../helpers/dom/element.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 { A11Y_DISABLED, A11Y_EXPANDED, A11Y_LABEL, A11Y_MENU, A11Y_MENU_ITEM } from "../../../helpers/a11y.mjs";
+import { createMenuItemRenderer } from "./menuItemRenderer.mjs";
+import { A11Y_EXPANDED, A11Y_MENU, A11Y_TABINDEX } from "../../../helpers/a11y.mjs";
 const MIN_WIDTH = 215;
-const SHORTCUTS_CONTEXT = 'menu';
-const SHORTCUTS_GROUP = SHORTCUTS_CONTEXT;
 
 /**
  * @typedef MenuOptions
@@ -32,12 +40,33 @@ const SHORTCUTS_GROUP = SHORTCUTS_CONTEXT;
  * @private
  * @class Menu
  */
+var _navigator = /*#__PURE__*/new WeakMap();
+var _shortcutsCtrl = /*#__PURE__*/new WeakMap();
 export 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,
@@ -51,14 +80,20 @@ export class Menu {
     this.eventManager = new EventManager(this);
     this.container = this.createContainer(this.options.name);
     this.positioner = new Positioner(this.options.keepInViewport);
-    this.navigator = new Navigator();
     this.hotMenu = null;
     this.hotSubMenus = {};
     this.parentMenu = this.options.parent || null;
     this.menuItems = null;
     this.origOutsideClickDeselects = null;
-    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);
+      });
+    }
   }
 
   /**
@@ -84,6 +119,24 @@ 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.
    *
@@ -152,10 +205,11 @@ export class Menu {
       readOnly: true,
       editor: false,
       copyPaste: false,
+      hiddenRows: true,
       maxCols: 1,
       columns: [{
         data: 'name',
-        renderer: (hot, TD, row, col, prop, value) => this.menuItemRenderer(hot, TD, row, col, prop, value)
+        renderer: createMenuItemRenderer(this.hot)
       }],
       renderAllRows: true,
       fragmentSelection: false,
@@ -163,6 +217,9 @@ export class Menu {
       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);
@@ -185,6 +242,7 @@ export class Menu {
         if (this.hotMenu.view.isMouseDown()) {
           preventScrolling.value = true;
         }
+        this.runLocalHooks('afterSelectionChange', this.getSelectedItem());
       },
       beforeOnCellMouseUp: event => {
         if (this.hasSelectedItem()) {
@@ -222,94 +280,14 @@ export class Menu {
     this.hotMenu = new this.hot.constructor(this.container, settings);
     this.hotMenu.addHook('afterInit', () => this.onAfterInit());
     this.hotMenu.init();
-    this.hotMenu.listen();
-    this.navigator.setMenu(this.hotMenu);
-    const shortcutManager = this.hotMenu.getShortcutManager();
-    const menuContext = shortcutManager.addContext(SHORTCUTS_GROUP);
-    const config = {
-      group: SHORTCUTS_CONTEXT
-    };
-    const menuContextConfig = {
-      ...config,
-      runOnlyIf: event => !isInput(event.target) || !this.container.contains(event.target)
-    };
-
-    // Default shortcuts for Handsontable should not be handled. Changing context will help with that.
-    shortcutManager.setActiveContextName('menu');
-    menuContext.addShortcuts([{
-      keys: [['Tab'], ['Shift', 'Tab'], ['Control/Meta', 'A']],
-      forwardToContext: this.hot.getShortcutManager().getContext('grid'),
-      callback: () => this.close(true)
-    }, {
-      keys: [['Escape']],
-      callback: () => this.close(true)
-    }, {
-      keys: [['ArrowDown']],
-      callback: () => this.navigator.selectNext()
-    }, {
-      keys: [['ArrowUp']],
-      callback: () => this.navigator.selectPrev()
-    }, {
-      keys: [['ArrowRight']],
-      callback: () => {
-        const selection = this.hotMenu.getSelectedLast();
-        if (selection) {
-          const subMenu = this.openSubMenu(selection[0]);
-          if (subMenu) {
-            subMenu.navigator.selectFirst();
-          }
-        }
-      }
-    }, {
-      keys: [['ArrowLeft']],
-      callback: () => {
-        const selection = this.hotMenu.getSelectedLast();
-        if (selection && this.isSubMenu()) {
-          this.close();
-          if (this.isSubMenu()) {
-            this.parentMenu.hotMenu.listen();
-          }
-        }
-      }
-    }, {
-      keys: [['Control/Meta', 'ArrowUp'], ['Home']],
-      callback: () => this.navigator.selectFirst()
-    }, {
-      keys: [['Control/Meta', 'ArrowDown'], ['End']],
-      callback: () => this.navigator.selectLast()
-    }, {
-      keys: [['Enter'], ['Space']],
-      callback: event => {
-        const selection = this.hotMenu.getSelectedLast();
-        if (this.hotMenu.getSourceDataAtRow(selection[0]).submenu) {
-          this.openSubMenu(selection[0]).navigator.selectFirst();
-        } else {
-          this.executeCommand(event);
-          this.close(true);
-        }
-      }
-    }, {
-      keys: [['PageUp']],
-      callback: () => {
-        const selection = this.hotMenu.getSelectedLast();
-        if (selection) {
-          this.hotMenu.selection.transformStart(-this.hotMenu.countVisibleRows(), 0);
-        } else {
-          this.navigator.selectFirst();
-        }
-      }
-    }, {
-      keys: [['PageDown']],
-      callback: () => {
-        const selection = this.hotMenu.getSelectedLast();
-        if (selection) {
-          this.hotMenu.selection.transformStart(this.hotMenu.countVisibleRows(), 0);
-        } else {
-          this.navigator.selectLast();
-        }
-      }
-    }], menuContextConfig);
-    this.runLocalHooks('afterOpen');
+    _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);
   }
 
   /**
@@ -325,7 +303,7 @@ export class Menu {
     if (closeParent && this.isSubMenu()) {
       this.parentMenu.close();
     } else {
-      this.navigator.clear();
+      _classPrivateFieldGet(this, _navigator).clear();
       this.closeAllSubMenus();
       this.container.style.display = 'none';
       this.hotMenu.destroy();
@@ -416,6 +394,19 @@ 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.
    */
@@ -501,61 +492,6 @@ export class Menu {
     this.positioner.setElement(this.container).updatePosition(coords);
   }
 
-  /**
-   * 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');
-    let itemValue = value;
-    if (typeof itemValue === 'function') {
-      itemValue = itemValue.call(this.hot);
-    }
-    empty(TD);
-    addClass(wrapper, 'htItemWrapper');
-    if (this.hot.getSettings().ariaTags) {
-      setAttribute(TD, [A11Y_MENU_ITEM(), A11Y_LABEL(itemValue), ...(isItemDisabled(item, this.hot) ? [A11Y_DISABLED()] : []), ...(isItemSubMenu(item) ? [A11Y_EXPANDED(false)] : [])]);
-    }
-    TD.appendChild(wrapper);
-    if (isItemSeparator(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 (isItemDisabled(item, this.hot)) {
-      addClass(TD, 'htDisabled');
-      this.eventManager.addEventListener(TD, 'mouseenter', () => hot.deselectCell());
-    } else if (isItemSelectionDisabled(item)) {
-      addClass(TD, 'htSelectionDisabled');
-      this.eventManager.addEventListener(TD, 'mouseenter', () => hot.deselectCell());
-    } else if (isItemSubMenu(item)) {
-      addClass(TD, 'htSubmenu');
-      if (isItemSelectionDisabled(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 (isItemSelectionDisabled(item)) {
-        this.eventManager.addEventListener(TD, 'mouseenter', () => hot.deselectCell());
-      } else {
-        this.eventManager.addEventListener(TD, 'mouseenter', () => hot.selectCell(row, col, void 0, void 0, false, false));
-      }
-    }
-  }
-
   /**
    * Create container/wrapper for handsontable.
    *
@@ -614,7 +550,7 @@ export class Menu {
 
     // Replace the default accessibility tags with the context menu's
     if (this.hot.getSettings().ariaTags) {
-      setAttribute(this.hotMenu.rootElement, [A11Y_MENU()]);
+      setAttribute(this.hotMenu.rootElement, [A11Y_MENU(), A11Y_TABINDEX(-1)]);
     }
   }
 

package/plugins/contextMenu/menu/menuItemRenderer.js

@@ -0,0 +1,58 @@
+"use strict";
+
+exports.__esModule = true;
+exports.createMenuItemRenderer = createMenuItemRenderer;
+var _utils = require("./utils");
+var _element = require("../../../helpers/dom/element");
+var _a11y = require("../../../helpers/a11y");
+/**
+ * Creates the menu renderer function.
+ *
+ * @private
+ * @param {Core} mainTableHot The main table Handsontable instance.
+ * @returns {Function}
+ */
+function createMenuItemRenderer(mainTableHot) {
+  /**
+   * Menu item renderer.
+   *
+   * @private
+   * @param {Core} menuHot 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.
+   */
+  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;
+    (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)] : [])]);
+    }
+    TD.className = '';
+    TD.appendChild(wrapper);
+    if ((0, _utils.isItemSeparator)(item)) {
+      (0, _element.addClass)(TD, 'htSeparator');
+    } else if (typeof item.renderer === 'function') {
+      (0, _element.addClass)(TD, 'htCustomMenuRenderer');
+      TD.appendChild(item.renderer(menuHot, wrapper, row, col, prop, itemValue));
+    } else {
+      (0, _element.fastInnerHTML)(wrapper, itemValue);
+    }
+    if ((0, _utils.isItemDisabled)(item, mainTableHot)) {
+      (0, _element.addClass)(TD, 'htDisabled');
+    } else if ((0, _utils.isItemSelectionDisabled)(item)) {
+      (0, _element.addClass)(TD, 'htSelectionDisabled');
+    } else if ((0, _utils.isItemSubMenu)(item)) {
+      (0, _element.addClass)(TD, 'htSubmenu');
+    }
+  };
+}

package/plugins/contextMenu/menu/menuItemRenderer.mjs

@@ -0,0 +1,54 @@
+import { isItemSubMenu, isItemDisabled, isItemSelectionDisabled, isItemSeparator } 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";
+/**
+ * Creates the menu renderer function.
+ *
+ * @private
+ * @param {Core} mainTableHot The main table Handsontable instance.
+ * @returns {Function}
+ */
+export function createMenuItemRenderer(mainTableHot) {
+  /**
+   * Menu item renderer.
+   *
+   * @private
+   * @param {Core} menuHot 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.
+   */
+  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;
+    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)] : [])]);
+    }
+    TD.className = '';
+    TD.appendChild(wrapper);
+    if (isItemSeparator(item)) {
+      addClass(TD, 'htSeparator');
+    } else if (typeof item.renderer === 'function') {
+      addClass(TD, 'htCustomMenuRenderer');
+      TD.appendChild(item.renderer(menuHot, wrapper, row, col, prop, itemValue));
+    } else {
+      fastInnerHTML(wrapper, itemValue);
+    }
+    if (isItemDisabled(item, mainTableHot)) {
+      addClass(TD, 'htDisabled');
+    } else if (isItemSelectionDisabled(item)) {
+      addClass(TD, 'htSelectionDisabled');
+    } else if (isItemSubMenu(item)) {
+      addClass(TD, 'htSubmenu');
+    }
+  };
+}

package/plugins/contextMenu/menu/navigator.js

@@ -1,152 +1,27 @@
 "use strict";
 
 exports.__esModule = true;
-require("core-js/modules/es.error.cause.js");
+exports.createMenuNavigator = createMenuNavigator;
+var _paginator = require("../../../utils/paginator");
 var _utils = require("./utils");
-function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
-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 _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
-function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
-function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
-function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
-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 _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; } }
 /**
- * Helper class that supports navigating throughout the menu and submenus.
+ * Creates navigator for menus and submenus.
  *
- * @private
- * @class Navigator
+ * @param {Handsontable} hotMenu The Handsontable instance of the menu.
+ * @returns {Paginator}
  */
-var _hotMenu = /*#__PURE__*/new WeakMap();
-var _current = /*#__PURE__*/new WeakMap();
-var _prev = /*#__PURE__*/new WeakMap();
-var _visited = /*#__PURE__*/new WeakMap();
-var _updateMenuSelection = /*#__PURE__*/new WeakSet();
-class Navigator {
-  constructor() {
-    /**
-     * Selects the menu based on the internal state of the class.
-     */
-    _classPrivateMethodInitSpec(this, _updateMenuSelection);
-    /**
-     * The instance of the Handsontable as menu.
-     *
-     * @type {Handsontable}
-     */
-    _classPrivateFieldInitSpec(this, _hotMenu, {
-      writable: true,
-      value: void 0
-    });
-    /**
-     * The index of the current selected menu item.
-     *
-     * @type {number}
-     */
-    _classPrivateFieldInitSpec(this, _current, {
-      writable: true,
-      value: -1
-    });
-    /**
-     * The index of the previously selected menu item.
-     *
-     * @type {number}
-     */
-    _classPrivateFieldInitSpec(this, _prev, {
-      writable: true,
-      value: -1
-    });
-    /**
-     * The collection of the already visited menu item indexes. The collection allows for preventing
-     * infinite loops in cases when all menu items are disabled, or there is only one item available
-     * and the navigation is triggered.
-     *
-     * @type {Set<number>}
-     */
-    _classPrivateFieldInitSpec(this, _visited, {
-      writable: true,
-      value: new Set()
-    });
-  }
-  /**
-   * Sets the menu Handsontable instance.
-   *
-   * @param {Handsontable} hotMenu The menu Handsontable instance.
-   */
-  setMenu(hotMenu) {
-    _classPrivateFieldSet(this, _hotMenu, hotMenu);
-  }
-
-  /**
-   * Selects the first menu item in the menu.
-   */
-  selectFirst() {
-    _classPrivateFieldGet(this, _visited).clear();
-    _classPrivateFieldSet(this, _current, 0);
-    _classPrivateFieldSet(this, _prev, _classPrivateFieldGet(this, _current) - 1);
-    _classPrivateMethodGet(this, _updateMenuSelection, _updateMenuSelection2).call(this);
-  }
-
-  /**
-   * Selects the last menu item in the menu.
-   */
-  selectLast() {
-    _classPrivateFieldGet(this, _visited).clear();
-    _classPrivateFieldSet(this, _current, _classPrivateFieldGet(this, _hotMenu).countRows() - 1);
-    _classPrivateFieldSet(this, _prev, _classPrivateFieldGet(this, _current) + 1);
-    _classPrivateMethodGet(this, _updateMenuSelection, _updateMenuSelection2).call(this);
-  }
-
-  /**
-   * Selects the next menu item in the menu. The navigator tries to select the closes non-disabled menu
-   * item. When all next items are disabled the first (or next non-disabled) menu item is selected.
-   */
-  selectNext() {
-    _classPrivateFieldGet(this, _visited).clear();
-    _classPrivateFieldSet(this, _current, _classPrivateFieldGet(this, _current) + 1);
-    _classPrivateMethodGet(this, _updateMenuSelection, _updateMenuSelection2).call(this);
-  }
-
-  /**
-   * Selects the previous menu item in the menu. The navigator tries to select the closes non-disabled menu
-   * item. When all previous items are disabled the last (or previous non-disabled) menu item is selected.
-   */
-  selectPrev() {
-    _classPrivateFieldGet(this, _visited).clear();
-    _classPrivateFieldSet(this, _current, _classPrivateFieldGet(this, _current) - 1);
-    _classPrivateMethodGet(this, _updateMenuSelection, _updateMenuSelection2).call(this);
-  }
-
-  /**
-   * Clears the internal state to the initial values.
-   */
-  clear() {
-    _classPrivateFieldGet(this, _visited).clear();
-    _classPrivateFieldSet(this, _prev, -1);
-    _classPrivateFieldSet(this, _current, -1);
-  }
-}
-exports.Navigator = Navigator;
-function _updateMenuSelection2() {
-  const maxItems = _classPrivateFieldGet(this, _hotMenu).countRows() - 1;
-  if (_classPrivateFieldGet(this, _current) < 0) {
-    _classPrivateFieldSet(this, _current, maxItems);
-    _classPrivateFieldSet(this, _prev, maxItems);
-  }
-  if (_classPrivateFieldGet(this, _current) > maxItems) {
-    _classPrivateFieldSet(this, _current, 0);
-    _classPrivateFieldSet(this, _prev, -1);
-  }
-  if (_classPrivateFieldGet(this, _visited).has(_classPrivateFieldGet(this, _current))) {
-    return;
-  }
-  const cell = _classPrivateFieldGet(this, _hotMenu).getCell(_classPrivateFieldGet(this, _current), 0);
-  _classPrivateFieldGet(this, _visited).add(_classPrivateFieldGet(this, _current));
-  if (!cell || (0, _utils.isSeparator)(cell) || (0, _utils.isDisabled)(cell) || (0, _utils.isSelectionDisabled)(cell)) {
-    _classPrivateFieldSet(this, _current, _classPrivateFieldGet(this, _current) + (_classPrivateFieldGet(this, _current) > _classPrivateFieldGet(this, _prev) ? 1 : -1));
-    _classPrivateMethodGet(this, _updateMenuSelection, _updateMenuSelection2).call(this);
-  } else {
-    _classPrivateFieldGet(this, _hotMenu).selectCell(_classPrivateFieldGet(this, _current), 0);
-  }
-  _classPrivateFieldSet(this, _prev, _classPrivateFieldGet(this, _current));
+function createMenuNavigator(hotMenu) {
+  return (0, _paginator.createPaginator)({
+    size: () => hotMenu.countRows(),
+    onItemSelect(currentItem, directItemChange) {
+      const cell = hotMenu.getCell(currentItem, 0);
+      if (!cell || (0, _utils.isSeparator)(cell) || (0, _utils.isDisabled)(cell) || (0, _utils.isSelectionDisabled)(cell)) {
+        return false;
+      }
+      hotMenu.selectCell(currentItem, 0, ...(directItemChange ? [currentItem, 0, false, false] : []));
+    },
+    onClear() {
+      hotMenu.deselectCell();
+    }
+  });
 }