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

package/plugins/filters/filters.mjs

@@ -70,6 +70,7 @@ const SHORTCUTS_GROUP = PLUGIN_KEY;
  * :::
  */
 var _menuFocusNavigator = /*#__PURE__*/new WeakMap();
+var _dropdownMenuTraces = /*#__PURE__*/new WeakMap();
 var _Filters_brand = /*#__PURE__*/new WeakSet();
 export class Filters extends BasePlugin {
   static get PLUGIN_KEY() {
@@ -133,6 +134,12 @@ export class Filters extends BasePlugin {
      * @type {MenuFocusNavigator|undefined}
      */
     _classPrivateFieldInitSpec(this, _menuFocusNavigator, void 0);
+    /**
+     * Traces the new menu instances to apply the focus navigation to the latest one.
+     *
+     * @type {WeakSet<Menu>}
+     */
+    _classPrivateFieldInitSpec(this, _dropdownMenuTraces, new WeakSet());
     this.hot.addHook('afterGetColHeader', (col, TH) => _assertClassBrand(_Filters_brand, this, _onAfterGetColHeader).call(this, col, TH));
   }
 
@@ -151,6 +158,7 @@ export class Filters extends BasePlugin {
    * Enables the plugin functionality for this Handsontable instance.
    */
   enablePlugin() {
+    var _this = this;
     if (this.enabled) {
       return;
     }
@@ -212,7 +220,13 @@ export class Filters extends BasePlugin {
       this.conditionUpdateObserver.addLocalHook('update', conditionState => _assertClassBrand(_Filters_brand, this, _updateComponents).call(this, conditionState));
     }
     this.components.forEach(component => component.show());
-    this.addHook('afterDropdownMenuDefaultOptions', defaultOptions => _assertClassBrand(_Filters_brand, this, _onAfterDropdownMenuDefaultOptions).call(this, defaultOptions));
+    this.addHook('afterDropdownMenuDefaultOptions', function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return _assertClassBrand(_Filters_brand, _this, _onAfterDropdownMenuDefaultOptions).call(_this, ...args);
+    });
+    this.addHook('beforeDropdownMenuShow', () => _assertClassBrand(_Filters_brand, this, _onBeforeDropdownMenuShow).call(this));
     this.addHook('afterDropdownMenuShow', () => _assertClassBrand(_Filters_brand, this, _onAfterDropdownMenuShow).call(this));
     this.addHook('afterDropdownMenuHide', () => _assertClassBrand(_Filters_brand, this, _onAfterDropdownMenuHide).call(this));
     this.addHook('afterChange', changes => _assertClassBrand(_Filters_brand, this, _onAfterChange).call(this, changes));
@@ -223,15 +237,15 @@ export class Filters extends BasePlugin {
       this.dropdownMenuPlugin.enablePlugin();
     }
     if (!_classPrivateFieldGet(_menuFocusNavigator, this) && this.dropdownMenuPlugin.enabled) {
-      const mainMenu = this.dropdownMenuPlugin.menu;
       const focusableItems = [
       // A fake menu item that once focused allows escaping from the focus navigation (using Tab keys)
       // to the menu navigation using arrow keys.
       {
         focus: () => {
-          const menuNavigator = mainMenu.getNavigator();
+          const menu = _classPrivateFieldGet(_menuFocusNavigator, this).getMenu();
+          const menuNavigator = menu.getNavigator();
           const lastSelectedMenuItem = _classPrivateFieldGet(_menuFocusNavigator, this).getLastMenuPage();
-          mainMenu.focus();
+          menu.focus();
           if (lastSelectedMenuItem > 0) {
             menuNavigator.setCurrentPage(lastSelectedMenuItem);
           } else {
@@ -242,7 +256,7 @@ export class Filters extends BasePlugin {
         let [, component] = _ref;
         return component.getElements();
       }).flat()];
-      _classPrivateFieldSet(_menuFocusNavigator, this, createMenuFocusController(mainMenu, focusableItems));
+      _classPrivateFieldSet(_menuFocusNavigator, this, createMenuFocusController(this.dropdownMenuPlugin.menu, focusableItems));
       const forwardToFocusNavigation = event => {
         _classPrivateFieldGet(_menuFocusNavigator, this).listen();
         event.preventDefault();
@@ -700,8 +714,8 @@ export class Filters extends BasePlugin {
       return indexes;
     }
     const menu = this.dropdownMenuPlugin.menu;
-    for (var _len = arguments.length, components = new Array(_len), _key = 0; _key < _len; _key++) {
-      components[_key] = arguments[_key];
+    for (var _len2 = arguments.length, components = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      components[_key2] = arguments[_key2];
     }
     arrayEach(components, component => {
       arrayEach(menu.menuItems, (item, index) => {
@@ -728,8 +742,8 @@ export class Filters extends BasePlugin {
     const menu = this.dropdownMenuPlugin.menu;
     const hotMenu = menu.hotMenu;
     const hiddenRows = hotMenu.getPlugin('hiddenRows');
-    for (var _len2 = arguments.length, components = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-      components[_key2 - 1] = arguments[_key2];
+    for (var _len3 = arguments.length, components = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+      components[_key3 - 1] = arguments[_key3];
     }
     const indexes = this.getIndexesOfComponents(...components);
     if (visible) {
@@ -747,8 +761,8 @@ export class Filters extends BasePlugin {
    * @param {...BaseComponent} components List of components.
    */
   hideComponents() {
-    for (var _len3 = arguments.length, components = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      components[_key3] = arguments[_key3];
+    for (var _len4 = arguments.length, components = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+      components[_key4] = arguments[_key4];
     }
     this.changeComponentsVisibility(false, ...components);
   }
@@ -760,8 +774,8 @@ export class Filters extends BasePlugin {
    * @param {...BaseComponent} components List of components.
    */
   showComponents() {
-    for (var _len4 = arguments.length, components = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-      components[_key4] = arguments[_key4];
+    for (var _len5 = arguments.length, components = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+      components[_key5] = arguments[_key5];
     }
     this.changeComponentsVisibility(true, ...components);
   }
@@ -807,6 +821,16 @@ function _onAfterDropdownMenuHide() {
   this.components.get('filter_by_condition').getSelectElement().closeOptions();
   this.components.get('filter_by_condition2').getSelectElement().closeOptions();
 }
+/**
+ * Hooks applies the new dropdown menu instance to the focus navigator.
+ */
+function _onBeforeDropdownMenuShow() {
+  const mainMenu = this.dropdownMenuPlugin.menu;
+  if (!_classPrivateFieldGet(_dropdownMenuTraces, this).has(mainMenu)) {
+    _classPrivateFieldGet(_menuFocusNavigator, this).setMenu(mainMenu);
+  }
+  _classPrivateFieldGet(_dropdownMenuTraces, this).add(mainMenu);
+}
 /**
  * After dropdown menu default options listener.
  *

package/plugins/filters/menu/focusController.js

@@ -32,10 +32,11 @@ function createMenuFocusController(mainMenu, menuItems) {
    * into the focus mode triggered by the TAB or SHIFT+TAB keys).
    */
   let lastSelectedMenuItem = -1;
+  let menuInstance;
   const focusNavigator = (0, _focusNavigator.createFocusNavigator)(menuItems);
   const updateNavigatorPosition = element => () => {
-    if (mainMenu.isOpened()) {
-      mainMenu.getKeyboardShortcutsCtrl().listen(SHORTCUTS_MENU_CONTEXT);
+    if (menuInstance.isOpened()) {
+      menuInstance.getKeyboardShortcutsCtrl().listen(SHORTCUTS_MENU_CONTEXT);
     }
     focusNavigator.setCurrentPage(menuItems.indexOf(element));
   };
@@ -48,11 +49,7 @@ function createMenuFocusController(mainMenu, menuItems) {
       element.addLocalHook('afterClose', updateNavigatorPosition(element));
     }
   });
-  mainMenu.addLocalHook('afterSelectionChange', selectedItem => {
-    if (!selectedItem.key.startsWith('filter_')) {
-      focusNavigator.clear();
-    }
-  });
+  setMenu(mainMenu);
 
   /**
    * Extends the menu and submenus with new keyboard shortcuts.
@@ -60,7 +57,7 @@ function createMenuFocusController(mainMenu, menuItems) {
    * @param {*} menu The menu (as main menu or submenu) instance.
    */
   function addKeyboardShortcuts(menu) {
-    const mainMenuShortcutsCtrl = mainMenu.getKeyboardShortcutsCtrl();
+    const mainMenuShortcutsCtrl = menuInstance.getKeyboardShortcutsCtrl();
     const currentMenuShortcutsCtrl = menu.getKeyboardShortcutsCtrl();
     focusNavigator.clear();
     currentMenuShortcutsCtrl.addCustomShortcuts([{
@@ -79,7 +76,7 @@ function createMenuFocusController(mainMenu, menuItems) {
     mainMenuShortcutsCtrl.addCustomShortcuts([{
       keys: [['Tab'], ['Shift', 'Tab']],
       callback: event => {
-        const menuNavigator = mainMenu.getNavigator();
+        const menuNavigator = menuInstance.getNavigator();
         if (menuNavigator.getCurrentPage() > -1) {
           lastSelectedMenuItem = menuNavigator.getCurrentPage();
         }
@@ -93,7 +90,7 @@ function createMenuFocusController(mainMenu, menuItems) {
     }, {
       keys: [['Escape']],
       callback: () => {
-        mainMenu.close();
+        menuInstance.close();
       }
     }, {
       keys: [['Enter'], ['Space']],
@@ -114,16 +111,39 @@ function createMenuFocusController(mainMenu, menuItems) {
       }
     }], SHORTCUTS_MENU_CONTEXT);
   }
-  mainMenu.addLocalHook('afterSubmenuOpen', addKeyboardShortcuts);
-  mainMenu.addLocalHook('afterOpen', addKeyboardShortcuts);
 
   /**
    * Focuses the menu and switches its shortcut context to that one which controls
    * the focus navigation.
    */
   function listen() {
-    mainMenu.focus();
-    mainMenu.getKeyboardShortcutsCtrl().listen(SHORTCUTS_MENU_CONTEXT);
+    menuInstance.focus();
+    menuInstance.getKeyboardShortcutsCtrl().listen(SHORTCUTS_MENU_CONTEXT);
+  }
+
+  /**
+   * Applies the focus controller to the new menu instance.
+   *
+   * @param {Menu} menu The new menu instance.
+   */
+  function setMenu(menu) {
+    menu.addLocalHook('afterSelectionChange', selectedItem => {
+      if (!selectedItem.key.startsWith('filter_')) {
+        focusNavigator.clear();
+      }
+    });
+    menu.addLocalHook('afterSubmenuOpen', addKeyboardShortcuts);
+    menu.addLocalHook('afterOpen', addKeyboardShortcuts);
+    menuInstance = menu;
+  }
+
+  /**
+   * Retrieves the current menu instance.
+   *
+   * @returns {Menu} The current menu instance.
+   */
+  function getMenu() {
+    return menuInstance;
   }
 
   /**
@@ -137,6 +157,8 @@ function createMenuFocusController(mainMenu, menuItems) {
   return {
     ...focusNavigator,
     listen,
+    setMenu,
+    getMenu,
     getLastMenuPage
   };
 }

package/plugins/filters/menu/focusController.mjs

@@ -28,10 +28,11 @@ export function createMenuFocusController(mainMenu, menuItems) {
    * into the focus mode triggered by the TAB or SHIFT+TAB keys).
    */
   let lastSelectedMenuItem = -1;
+  let menuInstance;
   const focusNavigator = createFocusNavigator(menuItems);
   const updateNavigatorPosition = element => () => {
-    if (mainMenu.isOpened()) {
-      mainMenu.getKeyboardShortcutsCtrl().listen(SHORTCUTS_MENU_CONTEXT);
+    if (menuInstance.isOpened()) {
+      menuInstance.getKeyboardShortcutsCtrl().listen(SHORTCUTS_MENU_CONTEXT);
     }
     focusNavigator.setCurrentPage(menuItems.indexOf(element));
   };
@@ -44,11 +45,7 @@ export function createMenuFocusController(mainMenu, menuItems) {
       element.addLocalHook('afterClose', updateNavigatorPosition(element));
     }
   });
-  mainMenu.addLocalHook('afterSelectionChange', selectedItem => {
-    if (!selectedItem.key.startsWith('filter_')) {
-      focusNavigator.clear();
-    }
-  });
+  setMenu(mainMenu);
 
   /**
    * Extends the menu and submenus with new keyboard shortcuts.
@@ -56,7 +53,7 @@ export function createMenuFocusController(mainMenu, menuItems) {
    * @param {*} menu The menu (as main menu or submenu) instance.
    */
   function addKeyboardShortcuts(menu) {
-    const mainMenuShortcutsCtrl = mainMenu.getKeyboardShortcutsCtrl();
+    const mainMenuShortcutsCtrl = menuInstance.getKeyboardShortcutsCtrl();
     const currentMenuShortcutsCtrl = menu.getKeyboardShortcutsCtrl();
     focusNavigator.clear();
     currentMenuShortcutsCtrl.addCustomShortcuts([{
@@ -75,7 +72,7 @@ export function createMenuFocusController(mainMenu, menuItems) {
     mainMenuShortcutsCtrl.addCustomShortcuts([{
       keys: [['Tab'], ['Shift', 'Tab']],
       callback: event => {
-        const menuNavigator = mainMenu.getNavigator();
+        const menuNavigator = menuInstance.getNavigator();
         if (menuNavigator.getCurrentPage() > -1) {
           lastSelectedMenuItem = menuNavigator.getCurrentPage();
         }
@@ -89,7 +86,7 @@ export function createMenuFocusController(mainMenu, menuItems) {
     }, {
       keys: [['Escape']],
       callback: () => {
-        mainMenu.close();
+        menuInstance.close();
       }
     }, {
       keys: [['Enter'], ['Space']],
@@ -110,16 +107,39 @@ export function createMenuFocusController(mainMenu, menuItems) {
       }
     }], SHORTCUTS_MENU_CONTEXT);
   }
-  mainMenu.addLocalHook('afterSubmenuOpen', addKeyboardShortcuts);
-  mainMenu.addLocalHook('afterOpen', addKeyboardShortcuts);
 
   /**
    * Focuses the menu and switches its shortcut context to that one which controls
    * the focus navigation.
    */
   function listen() {
-    mainMenu.focus();
-    mainMenu.getKeyboardShortcutsCtrl().listen(SHORTCUTS_MENU_CONTEXT);
+    menuInstance.focus();
+    menuInstance.getKeyboardShortcutsCtrl().listen(SHORTCUTS_MENU_CONTEXT);
+  }
+
+  /**
+   * Applies the focus controller to the new menu instance.
+   *
+   * @param {Menu} menu The new menu instance.
+   */
+  function setMenu(menu) {
+    menu.addLocalHook('afterSelectionChange', selectedItem => {
+      if (!selectedItem.key.startsWith('filter_')) {
+        focusNavigator.clear();
+      }
+    });
+    menu.addLocalHook('afterSubmenuOpen', addKeyboardShortcuts);
+    menu.addLocalHook('afterOpen', addKeyboardShortcuts);
+    menuInstance = menu;
+  }
+
+  /**
+   * Retrieves the current menu instance.
+   *
+   * @returns {Menu} The current menu instance.
+   */
+  function getMenu() {
+    return menuInstance;
   }
 
   /**
@@ -133,6 +153,8 @@ export function createMenuFocusController(mainMenu, menuItems) {
   return {
     ...focusNavigator,
     listen,
+    setMenu,
+    getMenu,
     getLastMenuPage
   };
 }