handsontable 17.1.0 → 18.0.0-rc2

package/plugins/dropdownMenu/dropdownMenu.js

@@ -113,12 +113,7 @@ var /**
    * @private
    * @param {number} col Visual column index.
    * @param {HTMLTableCellElement} TH Header's TH element.
-   */ _onAfterGetColHeader = /*#__PURE__*/ new WeakSet(), /**
-   * On menu before open listener.
-   *
-   * @private
-   * @fires Hooks#beforeDropdownMenuShow
-   */ _onMenuBeforeOpen = /*#__PURE__*/ new WeakSet(), /**
+   */ _onAfterGetColHeader = /*#__PURE__*/ new WeakMap(), /**
    * On menu after open listener.
    *
    * @private
@@ -140,19 +135,25 @@ var /**
    *
    * @param {number} visualColumn Visual column index.
    * @returns {number | null}
-   */ _onBeforeViewportScrollHorizontally = /*#__PURE__*/ new WeakSet(), /**
+   */ _onBeforeViewportScrollHorizontally = /*#__PURE__*/ new WeakMap(), /**
    * Hook sets the internal flag to `true` when the button is clicked.
    *
    * @param {MouseEvent} event The mouse event object.
-   */ _onBeforeOnCellMouseDown = /*#__PURE__*/ new WeakSet();
+   */ _onBeforeOnCellMouseDown = /*#__PURE__*/ new WeakMap();
 class DropdownMenu extends _base.BasePlugin {
-    static get PLUGIN_KEY() {
+    /**
+   * Returns the plugin key used to identify this plugin in Handsontable settings.
+   */ static get PLUGIN_KEY() {
         return PLUGIN_KEY;
     }
-    static get PLUGIN_PRIORITY() {
+    /**
+   * Returns the priority order used to determine the order in which plugins are initialized.
+   */ static get PLUGIN_PRIORITY() {
         return PLUGIN_PRIORITY;
     }
-    static get PLUGIN_DEPS() {
+    /**
+   * Returns the list of plugin dependencies required before this plugin can be initialized.
+   */ static get PLUGIN_DEPS() {
         return [
             'plugin:AutoColumnSize'
         ];
@@ -181,7 +182,7 @@ class DropdownMenu extends _base.BasePlugin {
    *
    * @returns {boolean}
    */ isEnabled() {
-        return this.hot.getSettings()[PLUGIN_KEY];
+        return !!this.hot.getSettings()[PLUGIN_KEY];
     }
     /**
    * Enables the plugin functionality for this Handsontable instance.
@@ -193,16 +194,17 @@ class DropdownMenu extends _base.BasePlugin {
             return;
         }
         this.itemsFactory = new _itemsFactory.ItemsFactory(this.hot, DropdownMenu.DEFAULT_ITEMS);
-        this.addHook('beforeOnCellMouseDown', (...args)=>_class_private_method_get(this, _onBeforeOnCellMouseDown, onBeforeOnCellMouseDown).call(this, ...args));
-        this.addHook('beforeViewportScrollHorizontally', (...args)=>_class_private_method_get(this, _onBeforeViewportScrollHorizontally, onBeforeViewportScrollHorizontally).call(this, ...args));
+        this.addHook('beforeOnCellMouseDown', _class_private_field_get(this, _onBeforeOnCellMouseDown));
+        this.addHook('beforeViewportScrollHorizontally', _class_private_field_get(this, _onBeforeViewportScrollHorizontally));
         this.addHook('beforeDialogShow', ()=>this.close());
         const settings = this.hot.getSettings()[PLUGIN_KEY];
+        const settingsObj = settings;
         const predefinedItems = {
             items: this.itemsFactory.getItems(settings)
         };
         this.registerEvents();
-        if (typeof settings.callback === 'function') {
-            this.commandExecutor.setCommonCallback(settings.callback);
+        if (typeof settingsObj.callback === 'function') {
+            this.commandExecutor.setCommonCallback(settingsObj.callback);
         }
         this.registerShortcuts();
         super.enablePlugin();
@@ -216,17 +218,19 @@ class DropdownMenu extends _base.BasePlugin {
             this.menu = new _menu.Menu(this.hot, {
                 className: 'htDropdownMenu',
                 keepInViewport: true,
-                container: settings.uiContainer || this.hot.rootPortalElement
+                container: (typeof settings === 'object' ? settingsObj.uiContainer : null) || this.hot.rootPortalElement
             });
             this.hot.runHooks('beforeDropdownMenuSetItems', menuItems);
             this.menu.setMenuItems(menuItems);
-            this.menu.addLocalHook('beforeOpen', ()=>_class_private_method_get(this, _onMenuBeforeOpen, onMenuBeforeOpen).call(this));
             this.menu.addLocalHook('afterOpen', ()=>_class_private_method_get(this, _onMenuAfterOpen, onMenuAfterOpen).call(this));
             this.menu.addLocalHook('afterSubmenuOpen', (subMenuInstance)=>_class_private_method_get(this, _onSubMenuAfterOpen, onSubMenuAfterOpen).call(this, subMenuInstance));
             this.menu.addLocalHook('afterClose', ()=>_class_private_method_get(this, _onMenuAfterClose, onMenuAfterClose).call(this));
-            this.menu.addLocalHook('executeCommand', (...params)=>this.executeCommand.call(this, ...params));
+            this.menu.addLocalHook('executeCommand', (commandName, ...params)=>this.executeCommand(commandName, ...params));
             // Register all commands. Predefined and added by user or by plugins
-            (0, _array.arrayEach)(menuItems, (command)=>this.commandExecutor.registerCommand(command.key, command));
+            (0, _array.arrayEach)(menuItems, (command)=>{
+                const cmd = command;
+                this.commandExecutor.registerCommand(cmd.key, command);
+            });
         });
     }
     /**
@@ -256,30 +260,38 @@ class DropdownMenu extends _base.BasePlugin {
    */ registerShortcuts() {
         const gridContext = this.hot.getShortcutManager().getContext('grid');
         const callback = ()=>{
-            const { highlight } = this.hot.getSelectedRangeActive();
-            const highlightedHeaderElement = highlight.isHeader() ? this.hot.getCell(highlight.row, highlight.col, true) : null;
-            const isBottomMostHeaderSelected = highlight.isHeader() && highlight.col >= 0 && (0, _element.isBottomMostColumnHeader)(highlightedHeaderElement);
-            const isHiddenNestedPlaceholderSelected = highlight.isHeader() && highlight.col >= 0 && highlightedHeaderElement && (0, _element.hasClass)(highlightedHeaderElement, 'hiddenHeader');
+            const activeRange = this.hot.getSelectedRangeActive();
+            if (!activeRange) {
+                return;
+            }
+            const { highlight } = activeRange;
+            const highlightedHeaderElement = highlight.isHeader() ? this.hot.getCell(highlight.row ?? 0, highlight.col ?? 0, true) : null;
+            const isBottomMostHeaderSelected = highlight.isHeader() && (highlight.col ?? -1) >= 0 && !!highlightedHeaderElement && (0, _element.isBottomMostColumnHeader)(highlightedHeaderElement);
+            const isHiddenNestedPlaceholderSelected = highlight.isHeader() && (highlight.col ?? -1) >= 0 && highlightedHeaderElement && (0, _element.hasClass)(highlightedHeaderElement, 'hiddenHeader');
             const isValidSelection = isBottomMostHeaderSelected || isHiddenNestedPlaceholderSelected || highlight.isCell();
-            if (isValidSelection && highlight.col >= 0) {
-                let headerRow = isBottomMostHeaderSelected || isHiddenNestedPlaceholderSelected ? highlight.row : -1;
-                this.hot.selectColumns(highlight.col, highlight.col, headerRow);
-                const { from } = this.hot.getSelectedRangeActive();
-                const offset = (0, _utils.getDocumentOffsetByElement)(this.menu.container, this.hot.rootDocument);
-                let target = this.hot.getCell(headerRow, from.col, true)?.querySelector(`.${BUTTON_CLASS_NAME}`);
+            if (isValidSelection && (highlight.col ?? -1) >= 0) {
+                let headerRow = isBottomMostHeaderSelected || isHiddenNestedPlaceholderSelected ? highlight.row ?? -1 : -1;
+                this.hot.selectColumns(highlight.col ?? 0, highlight.col ?? 0, headerRow);
+                const refreshedRange = this.hot.getSelectedRangeActive();
+                if (!refreshedRange) {
+                    return;
+                }
+                const { from } = refreshedRange;
+                const offset = (0, _utils.getDocumentOffsetByElement)(this.menu?.container ?? this.hot.rootElement, this.hot.rootDocument);
+                let target = this.hot.getCell(headerRow, from.col ?? 0, true)?.querySelector(`.${BUTTON_CLASS_NAME}`);
                 if (!target) {
                     for(let row = -this.hot.view.getColumnHeadersCount(); row <= -1; row++){
-                        const candidate = this.hot.getCell(row, from.col, true)?.querySelector(`.${BUTTON_CLASS_NAME}`);
+                        const candidate = this.hot.getCell(row, from.col ?? 0, true)?.querySelector(`.${BUTTON_CLASS_NAME}`);
                         if (candidate) {
                             target = candidate;
                             headerRow = row;
-                            this.hot.selectColumns(highlight.col, highlight.col, headerRow);
+                            this.hot.selectColumns(highlight.col ?? 0, highlight.col ?? 0, headerRow);
                             break;
                         }
                     }
                 }
                 if (!target && isHiddenNestedPlaceholderSelected) {
-                    for(let column = from.col - 1; column >= 0; column--){
+                    for(let column = (from.col ?? 0) - 1; column >= 0; column--){
                         const candidateHeader = this.hot.getCell(headerRow, column, true);
                         if (!candidateHeader || (0, _element.hasClass)(candidateHeader, 'hiddenHeader')) {
                             continue; // eslint-disable-line no-continue
@@ -295,22 +307,32 @@ class DropdownMenu extends _base.BasePlugin {
                 if (!target) {
                     return;
                 }
+                if (!(0, _element.isHTMLElement)(target)) {
+                    return;
+                }
                 const buttonRect = _class_private_method_get(this, _getButtonRect, getButtonRect).call(this, target);
+                const th = target.closest('th');
+                // For rowspanned headers the button may be mispositioned when the htRowspanHeader
+                // CSS class is not yet applied. Anchor to the TH's inner bottom (clientHeight, no
+                // borders) and use below:-1 so the positioner's +1 cancels out, placing the menu
+                // flush with the TH content bottom.
+                const isRowspanned = th && Number.parseInt(th.getAttribute('rowspan') ?? '1', 10) > 1;
+                const menuTop = isRowspanned ? th.getBoundingClientRect().top + th.clientHeight : buttonRect.bottom;
                 this.open({
                     left: buttonRect.left + offset.left,
-                    top: buttonRect.bottom + offset.top
+                    top: menuTop + offset.top
                 }, {
                     left: buttonRect.width,
                     right: 0,
                     above: 0,
-                    below: 3
+                    below: isRowspanned ? -1 : 3
                 });
                 // Make sure the first item is selected (role=menuitem). Otherwise, screen readers
                 // will block the Esc key for the whole menu.
-                this.menu.getNavigator().toFirstItem();
+                this.menu?.getNavigator()?.toFirstItem();
             }
         };
-        gridContext.addShortcuts([
+        gridContext?.addShortcuts([
             {
                 keys: [
                     [
@@ -326,9 +348,9 @@ class DropdownMenu extends _base.BasePlugin {
                 callback,
                 runOnlyIf: ()=>{
                     const highlight = this.hot.getSelectedRangeActive()?.highlight;
-                    const highlightedHeaderElement = highlight?.isHeader() ? this.hot.getCell(highlight.row, highlight.col, true) : null;
-                    const isHiddenNestedPlaceholderSelected = highlight?.isHeader() && highlight.col >= 0 && highlightedHeaderElement && (0, _element.hasClass)(highlightedHeaderElement, 'hiddenHeader');
-                    return highlight && !this.menu.isOpened() && highlight.isHeader() && (this.hot.selection.isCellVisible(highlight) || isHiddenNestedPlaceholderSelected);
+                    const highlightedHeaderElement = highlight?.isHeader() ? this.hot.getCell(highlight.row ?? 0, highlight.col ?? 0, true) : null;
+                    const isHiddenNestedPlaceholderSelected = highlight?.isHeader() && (highlight.col ?? -1) >= 0 && highlightedHeaderElement && (0, _element.hasClass)(highlightedHeaderElement, 'hiddenHeader');
+                    return !!(highlight && !this.menu?.isOpened() && highlight.isHeader() && (this.hot.selection.isCellVisible(highlight) || isHiddenNestedPlaceholderSelected));
                 },
                 captureCtrl: true,
                 group: SHORTCUTS_GROUP
@@ -344,7 +366,7 @@ class DropdownMenu extends _base.BasePlugin {
                 callback,
                 runOnlyIf: ()=>{
                     const highlight = this.hot.getSelectedRangeActive()?.highlight;
-                    return highlight && this.hot.selection.isCellVisible(highlight) && highlight.isCell() && !this.menu.isOpened();
+                    return !!(highlight && this.hot.selection.isCellVisible(highlight) && highlight.isCell() && !this.menu?.isOpened());
                 },
                 group: SHORTCUTS_GROUP
             }
@@ -355,7 +377,7 @@ class DropdownMenu extends _base.BasePlugin {
    *
    * @private
    */ unregisterShortcuts() {
-        this.hot.getShortcutManager().getContext('grid').removeShortcutsByGroup(SHORTCUTS_GROUP);
+        this.hot.getShortcutManager().getContext('grid')?.removeShortcutsByGroup(SHORTCUTS_GROUP);
     }
     /**
    * Registers the DOM listeners.
@@ -365,14 +387,13 @@ class DropdownMenu extends _base.BasePlugin {
         this.eventManager.addEventListener(this.hot.rootElement, 'click', (event)=>_class_private_method_get(this, _onTableClick, onTableClick).call(this, event));
     }
     /**
-   * Opens menu and re-position it based on the passed coordinates.
+   * Opens the menu and positions it based on the passed coordinates.
    *
    * @param {{ top: number, left: number }|Event} position An object with `top` and `left` properties
-   * which contains coordinates relative to the browsers viewport (without included scroll offsets).
-   * Or if the native event is passed the menu will be positioned based on the `pageX` and `pageY`
-   * coordinates.
-   * @param {{ above: number, below: number, left: number, right: number }} offset An object allows applying
-   * the offset to the menu position.
+   * (coordinates relative to the browser viewport, without scroll offsets), or a native browser
+   * `Event` instance (e.g., a `MouseEvent`).
+   * @param {{ above: number, below: number, left: number, right: number }} offset An object that applies
+   * an offset to the menu position.
    * @fires Hooks#beforeDropdownMenuShow
    * @fires Hooks#afterDropdownMenuShow
    * @example
@@ -391,11 +412,15 @@ class DropdownMenu extends _base.BasePlugin {
         if (this.menu?.isOpened()) {
             return;
         }
-        this.menu.open();
+        // Fire the user-facing hook before any menu state is committed. If a listener calls
+        // `updateSettings({ dropdownMenu })`, the plugin reinitializes synchronously, and the
+        // open flow below proceeds on the fresh `this.menu` instance with the new items.
+        this.hot.runHooks('beforeDropdownMenuShow', this);
+        this.menu?.open();
         (0, _object.objectEach)(offset, (value, key)=>{
-            this.menu.setOffset(key, value);
+            this.menu?.setOffset(key, value);
         });
-        this.menu.setPosition(position);
+        this.menu?.setPosition(position);
     }
     /**
    * Closes dropdown menu.
@@ -437,11 +462,12 @@ class DropdownMenu extends _base.BasePlugin {
    * @private
    * @param {boolean} listen Turn on listening when value is set to true, otherwise turn it off.
    */ setListening(listen = true) {
-        if (this.menu.isOpened()) {
+        if (this.menu?.isOpened()) {
+            const hotMenu = this.menu.hotMenu;
             if (listen) {
-                this.menu.hotMenu.listen();
+                hotMenu.listen();
             } else {
-                this.menu.hotMenu.unlisten();
+                hotMenu.unlisten();
             }
         }
     }
@@ -454,8 +480,19 @@ class DropdownMenu extends _base.BasePlugin {
         }
         super.destroy();
     }
-    constructor(hotInstance){
-        super(hotInstance), _class_private_method_init(this, _addCustomShortcuts), _class_private_method_init(this, _onTableClick), _class_private_method_init(this, _getButtonRect), _class_private_method_init(this, _onAfterGetColHeader), _class_private_method_init(this, _onMenuBeforeOpen), _class_private_method_init(this, _onMenuAfterOpen), _class_private_method_init(this, _onSubMenuAfterOpen), _class_private_method_init(this, _onMenuAfterClose), _class_private_method_init(this, _onBeforeViewportScrollHorizontally), _class_private_method_init(this, _onBeforeOnCellMouseDown), _class_private_field_init(this, _isButtonClicked, {
+    /**
+   * Initializes the plugin and registers the column header hook needed to inject the dropdown button.
+   */ constructor(hotInstance){
+        super(hotInstance), _class_private_method_init(this, _addCustomShortcuts), _class_private_method_init(this, _onTableClick), _class_private_method_init(this, _getButtonRect), _class_private_method_init(this, _onMenuAfterOpen), _class_private_method_init(this, _onSubMenuAfterOpen), _class_private_method_init(this, _onMenuAfterClose), _class_private_field_init(this, _isButtonClicked, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onAfterGetColHeader, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onBeforeViewportScrollHorizontally, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onBeforeOnCellMouseDown, {
             writable: true,
             value: void 0
         }), /**
@@ -473,13 +510,62 @@ class DropdownMenu extends _base.BasePlugin {
    *
    * @private
    * @type {Menu}
-   */ this.menu = null, _class_private_field_set(this, _isButtonClicked, false);
+   */ this.menu = null, _class_private_field_set(this, _isButtonClicked, false), _class_private_field_set(this, _onAfterGetColHeader, (col, TH)=>{
+            if (col < 0 || !(0, _element.isBottomMostColumnHeader)(TH)) {
+                return;
+            }
+            const existingButton = TH.querySelector(`.${BUTTON_CLASS_NAME}`);
+            // Plugin enabled and buttons already exists, return.
+            if (this.enabled && existingButton) {
+                return;
+            }
+            // Plugin disabled and buttons still exists, so remove them.
+            if (!this.enabled) {
+                if (existingButton) {
+                    existingButton.parentNode?.removeChild(existingButton);
+                }
+                return;
+            }
+            const button = this.hot.rootDocument.createElement('button');
+            button.className = BUTTON_CLASS_NAME;
+            button.type = 'button';
+            button.tabIndex = -1;
+            if (this.hot.getSettings().ariaTags) {
+                (0, _element.setAttribute)(button, [
+                    (0, _a11y.A11Y_HIDDEN)(),
+                    (0, _a11y.A11Y_LABEL)(' ')
+                ]);
+                (0, _element.setAttribute)(TH, [
+                    (0, _a11y.A11Y_HASPOPUP)('menu')
+                ]);
+            }
+            // prevent page reload on button click
+            button.onclick = function() {
+                return false;
+            };
+            const relativeContainer = TH.firstChild;
+            if (!relativeContainer) {
+                return;
+            }
+            const colHeaderSpan = relativeContainer.querySelector('.colHeader');
+            if (colHeaderSpan) {
+                relativeContainer.insertBefore(button, colHeaderSpan.nextSibling);
+            } else {
+                relativeContainer.appendChild(button);
+            }
+        }), _class_private_field_set(this, _onBeforeViewportScrollHorizontally, (visualColumn)=>{
+            return _class_private_field_get(this, _isButtonClicked) ? null : visualColumn;
+        }), _class_private_field_set(this, _onBeforeOnCellMouseDown, (event)=>{
+            if ((0, _element.hasClass)((0, _element.eventTargetEl)(event), BUTTON_CLASS_NAME)) {
+                _class_private_field_set(this, _isButtonClicked, true);
+            }
+        });
         // One listener for enable/disable functionality
-        this.hot.addHook('afterGetColHeader', (col, TH)=>_class_private_method_get(this, _onAfterGetColHeader, onAfterGetColHeader).call(this, col, TH));
+        this.hot.addHook('afterGetColHeader', _class_private_field_get(this, _onAfterGetColHeader));
     }
 }
 function addCustomShortcuts(menuInstance) {
-    menuInstance.getKeyboardShortcutsCtrl().addCustomShortcuts([
+    menuInstance.getKeyboardShortcutsCtrl()?.addCustomShortcuts([
         {
             keys: [
                 [
@@ -492,9 +578,10 @@ function addCustomShortcuts(menuInstance) {
     ]);
 }
 function onTableClick(event) {
-    if ((0, _element.hasClass)(event.target, BUTTON_CLASS_NAME)) {
-        const offset = (0, _utils.getDocumentOffsetByElement)(this.menu.container, this.hot.rootDocument);
-        const buttonRect = _class_private_method_get(this, _getButtonRect, getButtonRect).call(this, event.target);
+    const target = (0, _element.eventTargetEl)(event);
+    if ((0, _element.hasClass)(target, BUTTON_CLASS_NAME)) {
+        const offset = (0, _utils.getDocumentOffsetByElement)(this.menu?.container ?? this.hot.rootElement, this.hot.rootDocument);
+        const buttonRect = _class_private_method_get(this, _getButtonRect, getButtonRect).call(this, target);
         event.stopPropagation();
         _class_private_field_set(this, _isButtonClicked, false);
         this.open({
@@ -533,53 +620,6 @@ function getButtonRect(button) {
         height: rect.height
     };
 }
-function onAfterGetColHeader(col, TH) {
-    if (col < 0 || !(0, _element.isBottomMostColumnHeader)(TH)) {
-        return;
-    }
-    const existingButton = TH.querySelector(`.${BUTTON_CLASS_NAME}`);
-    // Plugin enabled and buttons already exists, return.
-    if (this.enabled && existingButton) {
-        return;
-    }
-    // Plugin disabled and buttons still exists, so remove them.
-    if (!this.enabled) {
-        if (existingButton) {
-            existingButton.parentNode.removeChild(existingButton);
-        }
-        return;
-    }
-    const button = this.hot.rootDocument.createElement('button');
-    button.className = BUTTON_CLASS_NAME;
-    button.type = 'button';
-    button.tabIndex = -1;
-    if (this.hot.getSettings().ariaTags) {
-        (0, _element.setAttribute)(button, [
-            (0, _a11y.A11Y_HIDDEN)(),
-            (0, _a11y.A11Y_LABEL)(' ')
-        ]);
-        (0, _element.setAttribute)(TH, [
-            (0, _a11y.A11Y_HASPOPUP)('menu')
-        ]);
-    }
-    // prevent page reload on button click
-    button.onclick = function() {
-        return false;
-    };
-    const relativeContainer = TH.firstChild;
-    if (!relativeContainer) {
-        return;
-    }
-    const colHeaderSpan = relativeContainer.querySelector('.colHeader');
-    if (colHeaderSpan) {
-        relativeContainer.insertBefore(button, colHeaderSpan.nextSibling);
-    } else {
-        relativeContainer.appendChild(button);
-    }
-}
-function onMenuBeforeOpen() {
-    this.hot.runHooks('beforeDropdownMenuShow', this);
-}
 function onMenuAfterOpen() {
     this.hot.runHooks('afterDropdownMenuShow', this);
     _class_private_method_get(this, _addCustomShortcuts, addCustomShortcuts).call(this, this.menu);
@@ -591,14 +631,6 @@ function onMenuAfterClose() {
     this.hot.listen();
     this.hot.runHooks('afterDropdownMenuHide', this);
 }
-function onBeforeViewportScrollHorizontally(visualColumn) {
-    return _class_private_field_get(this, _isButtonClicked) ? null : visualColumn;
-}
-function onBeforeOnCellMouseDown(event) {
-    if ((0, _element.hasClass)(event.target, BUTTON_CLASS_NAME)) {
-        _class_private_field_set(this, _isButtonClicked, true);
-    }
-}
 DropdownMenu.SEPARATOR = {
     name: _predefinedItems.SEPARATOR
 };