handsontable 0.0.0-next-1c936db-20240912 → 0.0.0-next-1f21f59-20240912

package/helpers/mixed.js

@@ -134,7 +134,7 @@ const domMessages = {
 function _injectProductInfo(key, element) {
   const hasValidType = !isEmpty(key);
   const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
-  const hotVersion = "0.0.0-next-1c936db-20240912";
+  const hotVersion = "0.0.0-next-1f21f59-20240912";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';

package/helpers/mixed.mjs

@@ -124,7 +124,7 @@ const domMessages = {
 export function _injectProductInfo(key, element) {
   const hasValidType = !isEmpty(key);
   const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
-  const hotVersion = "0.0.0-next-1c936db-20240912";
+  const hotVersion = "0.0.0-next-1f21f59-20240912";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';

package/package.json

@@ -10,7 +10,7 @@
     "url": "https://github.com/handsontable/handsontable/issues"
   },
   "author": "Handsoncode <hello@handsontable.com>",
-  "version": "0.0.0-next-1c936db-20240912",
+  "version": "0.0.0-next-1f21f59-20240912",
   "main": "index",
   "module": "index.mjs",
   "jsnext:main": "index.mjs",

package/plugins/contextMenu/contextMenu.js

@@ -237,6 +237,13 @@ class ContextMenu extends _base.BasePlugin {
     }
     this.prepareMenuItems();
     this.menu.open();
+    const themeHasTableBorder = this.menu.tableBorderWidth > 0;
+    if (!themeHasTableBorder) {
+      offset.below += 1;
+      offset.right += 1;
+      offset.above -= 1;
+      offset.left -= 1;
+    }
     (0, _object.objectEach)(offset, (value, key) => {
       this.menu.setOffset(key, value);
     });

package/plugins/contextMenu/contextMenu.mjs

@@ -233,6 +233,13 @@ export class ContextMenu extends BasePlugin {
     }
     this.prepareMenuItems();
     this.menu.open();
+    const themeHasTableBorder = this.menu.tableBorderWidth > 0;
+    if (!themeHasTableBorder) {
+      offset.below += 1;
+      offset.right += 1;
+      offset.above -= 1;
+      offset.left -= 1;
+    }
     objectEach(offset, (value, key) => {
       this.menu.setOffset(key, value);
     });

package/plugins/contextMenu/menu/menu.js

@@ -47,7 +47,21 @@ const MIN_WIDTH = 215;
  */
 var _navigator = /*#__PURE__*/new WeakMap();
 var _shortcutsCtrl = /*#__PURE__*/new WeakMap();
+var _tableBorderWidth = /*#__PURE__*/new WeakMap();
 class Menu {
+  /**
+   * Getter for the table border width.
+   * This getter retrieves the border width of the table used in the menu.
+   *
+   * @returns {number} The border width of the table in pixels.
+   */
+  get tableBorderWidth() {
+    if (_classPrivateFieldGet(_tableBorderWidth, this) === undefined && this.hotMenu) {
+      _classPrivateFieldSet(_tableBorderWidth, this, parseInt((0, _element.getComputedStyle)(this.hotMenu.view._wt.wtTable.TABLE).borderWidth, 10));
+    }
+    return _classPrivateFieldGet(_tableBorderWidth, this);
+  }
+
   /**
    * @param {Core} hotInstance Handsontable instance.
    * @param {MenuOptions} [options] Menu options.
@@ -120,6 +134,12 @@ class Menu {
      * @type {KeyboardShortcutsMenuController}
      */
     _classPrivateFieldInitSpec(this, _shortcutsCtrl, void 0);
+    /**
+     * The border width of the table used in the menu.
+     *
+     * @type {number}
+     */
+    _classPrivateFieldInitSpec(this, _tableBorderWidth, void 0);
     this.hot = hotInstance;
     this.options = options || {
       parent: null,
@@ -276,7 +296,7 @@ class Menu {
           this.openSubMenu(coords.row);
         }
       },
-      rowHeights: row => filteredItems[row].name === _predefinedItems.SEPARATOR ? 1 : 23,
+      rowHeights: row => filteredItems[row].name === _predefinedItems.SEPARATOR ? 1 : undefined,
       afterOnCellContextMenu: event => {
         event.preventDefault();
 
@@ -541,6 +561,31 @@ class Menu {
     this.positioner.setElement(this.container).updatePosition(coords);
   }
 
+  /**
+   * Updates the dimensions of the menu based on its content.
+   * This method calculates the real height of the menu by summing up the heights of its items,
+   * and adjusts the width and height of the menu's holder and hider elements accordingly.
+   */
+  updateMenuDimensions() {
+    const {
+      wtTable
+    } = this.hotMenu.view._wt;
+    const data = this.hotMenu.getSettings().data;
+    const hiderStyle = wtTable.hider.style;
+    const holderStyle = wtTable.holder.style;
+    const currentHiderWidth = parseInt(hiderStyle.width, 10);
+    const realHeight = (0, _array.arrayReduce)(data, (accumulator, value, index) => {
+      const itemCell = this.hotMenu.getCell(index, 0);
+      const currentRowHeight = itemCell ? (0, _element.outerHeight)(this.hotMenu.getCell(index, 0)) : 0;
+      return accumulator + (value.name === _predefinedItems.SEPARATOR ? 1 : currentRowHeight);
+    }, 0);
+
+    // Additional 3px to menu's size because of additional border around its `table.htCore`.
+    holderStyle.width = `${currentHiderWidth + 3}px`;
+    holderStyle.height = `${realHeight + 3}px`;
+    hiderStyle.height = holderStyle.height;
+  }
+
   /**
    * Create container/wrapper for handsontable.
    *
@@ -583,19 +628,7 @@ class Menu {
    * @private
    */
   onAfterInit() {
-    const {
-      wtTable
-    } = this.hotMenu.view._wt;
-    const data = this.hotMenu.getSettings().data;
-    const hiderStyle = wtTable.hider.style;
-    const holderStyle = wtTable.holder.style;
-    const currentHiderWidth = parseInt(hiderStyle.width, 10);
-    const realHeight = (0, _array.arrayReduce)(data, (accumulator, value) => accumulator + (value.name === _predefinedItems.SEPARATOR ? 1 : 26), 0);
-
-    // Additional 3px to menu's size because of additional border around its `table.htCore`.
-    holderStyle.width = `${currentHiderWidth + 3}px`;
-    holderStyle.height = `${realHeight + 3}px`;
-    hiderStyle.height = holderStyle.height;
+    this.updateMenuDimensions();
 
     // Replace the default accessibility tags with the context menu's
     if (this.hot.getSettings().ariaTags) {

package/plugins/contextMenu/menu/menu.mjs

@@ -16,7 +16,7 @@ import { filterSeparators, hasSubMenu, isItemHidden, normalizeSelection, isItemS
 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 { addClass, isChildOf, getComputedStyle, getParentWindow, hasClass, setAttribute, outerHeight } 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";
@@ -43,7 +43,21 @@ const MIN_WIDTH = 215;
  */
 var _navigator = /*#__PURE__*/new WeakMap();
 var _shortcutsCtrl = /*#__PURE__*/new WeakMap();
+var _tableBorderWidth = /*#__PURE__*/new WeakMap();
 export class Menu {
+  /**
+   * Getter for the table border width.
+   * This getter retrieves the border width of the table used in the menu.
+   *
+   * @returns {number} The border width of the table in pixels.
+   */
+  get tableBorderWidth() {
+    if (_classPrivateFieldGet(_tableBorderWidth, this) === undefined && this.hotMenu) {
+      _classPrivateFieldSet(_tableBorderWidth, this, parseInt(getComputedStyle(this.hotMenu.view._wt.wtTable.TABLE).borderWidth, 10));
+    }
+    return _classPrivateFieldGet(_tableBorderWidth, this);
+  }
+
   /**
    * @param {Core} hotInstance Handsontable instance.
    * @param {MenuOptions} [options] Menu options.
@@ -116,6 +130,12 @@ export class Menu {
      * @type {KeyboardShortcutsMenuController}
      */
     _classPrivateFieldInitSpec(this, _shortcutsCtrl, void 0);
+    /**
+     * The border width of the table used in the menu.
+     *
+     * @type {number}
+     */
+    _classPrivateFieldInitSpec(this, _tableBorderWidth, void 0);
     this.hot = hotInstance;
     this.options = options || {
       parent: null,
@@ -272,7 +292,7 @@ export class Menu {
           this.openSubMenu(coords.row);
         }
       },
-      rowHeights: row => filteredItems[row].name === SEPARATOR ? 1 : 23,
+      rowHeights: row => filteredItems[row].name === SEPARATOR ? 1 : undefined,
       afterOnCellContextMenu: event => {
         event.preventDefault();
 
@@ -537,6 +557,31 @@ export class Menu {
     this.positioner.setElement(this.container).updatePosition(coords);
   }
 
+  /**
+   * Updates the dimensions of the menu based on its content.
+   * This method calculates the real height of the menu by summing up the heights of its items,
+   * and adjusts the width and height of the menu's holder and hider elements accordingly.
+   */
+  updateMenuDimensions() {
+    const {
+      wtTable
+    } = this.hotMenu.view._wt;
+    const data = this.hotMenu.getSettings().data;
+    const hiderStyle = wtTable.hider.style;
+    const holderStyle = wtTable.holder.style;
+    const currentHiderWidth = parseInt(hiderStyle.width, 10);
+    const realHeight = arrayReduce(data, (accumulator, value, index) => {
+      const itemCell = this.hotMenu.getCell(index, 0);
+      const currentRowHeight = itemCell ? outerHeight(this.hotMenu.getCell(index, 0)) : 0;
+      return accumulator + (value.name === SEPARATOR ? 1 : currentRowHeight);
+    }, 0);
+
+    // Additional 3px to menu's size because of additional border around its `table.htCore`.
+    holderStyle.width = `${currentHiderWidth + 3}px`;
+    holderStyle.height = `${realHeight + 3}px`;
+    hiderStyle.height = holderStyle.height;
+  }
+
   /**
    * Create container/wrapper for handsontable.
    *
@@ -579,19 +624,7 @@ export class Menu {
    * @private
    */
   onAfterInit() {
-    const {
-      wtTable
-    } = this.hotMenu.view._wt;
-    const data = this.hotMenu.getSettings().data;
-    const hiderStyle = wtTable.hider.style;
-    const holderStyle = wtTable.holder.style;
-    const currentHiderWidth = parseInt(hiderStyle.width, 10);
-    const realHeight = arrayReduce(data, (accumulator, value) => accumulator + (value.name === SEPARATOR ? 1 : 26), 0);
-
-    // Additional 3px to menu's size because of additional border around its `table.htCore`.
-    holderStyle.width = `${currentHiderWidth + 3}px`;
-    holderStyle.height = `${realHeight + 3}px`;
-    hiderStyle.height = holderStyle.height;
+    this.updateMenuDimensions();
 
     // Replace the default accessibility tags with the context menu's
     if (this.hot.getSettings().ariaTags) {

package/plugins/filters/filters.js

@@ -803,7 +803,9 @@ function _onAfterChange(changes) {
   }
 }
 function _onAfterDropdownMenuShow() {
+  const menu = this.dropdownMenuPlugin.menu;
   this.restoreComponents(Array.from(this.components.values()));
+  menu.updateMenuDimensions();
 }
 /**
  * After dropdown menu hide listener.

package/plugins/filters/filters.mjs

@@ -796,7 +796,9 @@ function _onAfterChange(changes) {
   }
 }
 function _onAfterDropdownMenuShow() {
+  const menu = this.dropdownMenuPlugin.menu;
   this.restoreComponents(Array.from(this.components.values()));
+  menu.updateMenuDimensions();
 }
 /**
  * After dropdown menu hide listener.