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

package/plugins/contextMenu/menu/defaultShortcutsList.mjs

@@ -0,0 +1,84 @@
+/**
+ * Creates a keyboard shortcuts list with default keyboards binds.
+ *
+ * @param {Menu} menu The main menu instance.
+ * @returns {KeyboardShortcut[]}
+ */
+export function createDefaultShortcutsList(menu) {
+  return [{
+    keys: [['Tab'], ['Shift', 'Tab'], ['Control/Meta', 'A']],
+    forwardToContext: menu.hot.getShortcutManager().getContext('grid'),
+    callback: () => menu.close(true)
+  }, {
+    keys: [['Escape']],
+    callback: () => menu.close()
+  }, {
+    keys: [['ArrowDown']],
+    callback: () => menu.getNavigator().toNextItem()
+  }, {
+    keys: [['ArrowUp']],
+    callback: () => menu.getNavigator().toPreviousItem()
+  }, {
+    keys: [['ArrowRight']],
+    callback: () => {
+      const selection = menu.hotMenu.getSelectedLast();
+      if (selection) {
+        const subMenu = menu.openSubMenu(selection[0]);
+        if (subMenu) {
+          subMenu.getNavigator().toFirstItem();
+        }
+      }
+    }
+  }, {
+    keys: [['ArrowLeft']],
+    callback: () => {
+      const selection = menu.hotMenu.getSelectedLast();
+      if (selection && menu.isSubMenu()) {
+        menu.close();
+        if (menu.isSubMenu()) {
+          menu.parentMenu.hotMenu.listen();
+        }
+      }
+    }
+  }, {
+    keys: [['Control/Meta', 'ArrowUp'], ['Home']],
+    callback: () => menu.getNavigator().toFirstItem()
+  }, {
+    keys: [['Control/Meta', 'ArrowDown'], ['End']],
+    callback: () => menu.getNavigator().toLastItem()
+  }, {
+    keys: [['Enter'], ['Space']],
+    callback: event => {
+      const selection = menu.hotMenu.getSelectedLast();
+      if (!selection) {
+        return;
+      }
+      if (menu.hotMenu.getSourceDataAtRow(selection[0]).submenu) {
+        menu.openSubMenu(selection[0]).getNavigator().toFirstItem();
+      } else {
+        menu.executeCommand(event);
+        menu.close(true);
+      }
+    }
+  }, {
+    keys: [['PageUp']],
+    callback: () => {
+      const selection = menu.hotMenu.getSelectedLast();
+      if (selection) {
+        menu.hotMenu.selection.transformStart(-menu.hotMenu.countVisibleRows(), 0);
+      } else {
+        menu.getNavigator().toFirstItem();
+      }
+    }
+  }, {
+    keys: [['PageDown']],
+    callback: () => {
+      const selection = menu.hotMenu.getSelectedLast();
+      if (selection) {
+        menu.hotMenu.selection.transformStart(menu.hotMenu.countVisibleRows(), 0);
+      } else {
+        menu.getNavigator().toLastItem();
+      }
+    }
+  }];
+}

package/plugins/contextMenu/menu/menu.js

@@ -1,9 +1,11 @@
 "use strict";
 
+require("core-js/modules/es.error.cause.js");
 exports.__esModule = true;
 require("core-js/modules/es.array.push.js");
 var _positioner = require("./positioner");
-var _navigator = require("./navigator");
+var _navigator2 = require("./navigator");
+var _shortcuts = require("./shortcuts");
 var _predefinedItems = require("./../predefinedItems");
 var _utils = require("./utils");
 var _eventManager = _interopRequireDefault(require("../../../eventManager"));
@@ -15,11 +17,17 @@ var _function = require("../../../helpers/function");
 var _mixed = require("../../../helpers/mixed");
 var _object = require("../../../helpers/object");
 var _localHooks = _interopRequireDefault(require("../../../mixins/localHooks"));
+var _menuItemRenderer = require("./menuItemRenderer");
 var _a11y = require("../../../helpers/a11y");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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 _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; }
 const MIN_WIDTH = 215;
-const SHORTCUTS_CONTEXT = 'menu';
-const SHORTCUTS_GROUP = SHORTCUTS_CONTEXT;
 
 /**
  * @typedef MenuOptions
@@ -36,12 +44,33 @@ const SHORTCUTS_GROUP = SHORTCUTS_CONTEXT;
  * @private
  * @class Menu
  */
+var _navigator = /*#__PURE__*/new WeakMap();
+var _shortcutsCtrl = /*#__PURE__*/new WeakMap();
 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,
@@ -55,14 +84,20 @@ class Menu {
     this.eventManager = new _eventManager.default(this);
     this.container = this.createContainer(this.options.name);
     this.positioner = new _positioner.Positioner(this.options.keepInViewport);
-    this.navigator = new _navigator.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);
+      });
+    }
   }
 
   /**
@@ -88,6 +123,24 @@ 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.
    *
@@ -156,10 +209,11 @@ 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: (0, _menuItemRenderer.createMenuItemRenderer)(this.hot)
       }],
       renderAllRows: true,
       fragmentSelection: false,
@@ -167,6 +221,9 @@ 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);
@@ -189,6 +246,7 @@ class Menu {
         if (this.hotMenu.view.isMouseDown()) {
           preventScrolling.value = true;
         }
+        this.runLocalHooks('afterSelectionChange', this.getSelectedItem());
       },
       beforeOnCellMouseUp: event => {
         if (this.hasSelectedItem()) {
@@ -226,94 +284,14 @@ 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 => !(0, _element.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, (0, _navigator2.createMenuNavigator)(this.hotMenu));
+    _classPrivateFieldSet(this, _shortcutsCtrl, (0, _shortcuts.createKeyboardShortcutsCtrl)(this));
+    _classPrivateFieldGet(this, _shortcutsCtrl).listen();
+    this.focus();
+    if (this.isSubMenu()) {
+      this.addLocalHook('afterOpen', () => this.parentMenu.runLocalHooks('afterSubmenuOpen', this));
+    }
+    this.runLocalHooks('afterOpen', this);
   }
 
   /**
@@ -329,7 +307,7 @@ 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();
@@ -420,6 +398,19 @@ 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.
    */
@@ -505,61 +496,6 @@ 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);
-    }
-    (0, _element.empty)(TD);
-    (0, _element.addClass)(wrapper, 'htItemWrapper');
-    if (this.hot.getSettings().ariaTags) {
-      (0, _element.setAttribute)(TD, [(0, _a11y.A11Y_MENU_ITEM)(), (0, _a11y.A11Y_LABEL)(itemValue), ...((0, _utils.isItemDisabled)(item, this.hot) ? [(0, _a11y.A11Y_DISABLED)()] : []), ...((0, _utils.isItemSubMenu)(item) ? [(0, _a11y.A11Y_EXPANDED)(false)] : [])]);
-    }
-    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(hot, wrapper, row, col, prop, itemValue));
-    } else {
-      (0, _element.fastInnerHTML)(wrapper, itemValue);
-    }
-    if ((0, _utils.isItemDisabled)(item, this.hot)) {
-      (0, _element.addClass)(TD, 'htDisabled');
-      this.eventManager.addEventListener(TD, 'mouseenter', () => hot.deselectCell());
-    } else if ((0, _utils.isItemSelectionDisabled)(item)) {
-      (0, _element.addClass)(TD, 'htSelectionDisabled');
-      this.eventManager.addEventListener(TD, 'mouseenter', () => hot.deselectCell());
-    } else if ((0, _utils.isItemSubMenu)(item)) {
-      (0, _element.addClass)(TD, 'htSubmenu');
-      if ((0, _utils.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 {
-      (0, _element.removeClass)(TD, ['htSubmenu', 'htDisabled']);
-      if ((0, _utils.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.
    *
@@ -618,7 +554,7 @@ class Menu {
 
     // Replace the default accessibility tags with the context menu's
     if (this.hot.getSettings().ariaTags) {
-      (0, _element.setAttribute)(this.hotMenu.rootElement, [(0, _a11y.A11Y_MENU)()]);
+      (0, _element.setAttribute)(this.hotMenu.rootElement, [(0, _a11y.A11Y_MENU)(), (0, _a11y.A11Y_TABINDEX)(-1)]);
     }
   }