handsontable 11.1.0 → 12.1.0

package/plugins/contextMenu/menu.mjs

@@ -1,3 +1,9 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 import "core-js/modules/es.function.name.js";
 import "core-js/modules/web.timers.js";
 import "core-js/modules/es.object.keys.js";
@@ -7,6 +13,11 @@ import "core-js/modules/es.regexp.to-string.js";
 import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/es.string.replace.js";
 import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
@@ -21,20 +32,36 @@ import Core from "../../core.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, getScrollbarWidth, isChildOf, isInput, removeClass, getParentWindow, hasClass } from "../../helpers/dom/element.mjs";
-import { stopImmediatePropagation, isRightClick } from "../../helpers/dom/event.mjs";
+import { addClass, empty, fastInnerHTML, isChildOf, isInput, removeClass, getParentWindow, hasClass } 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, hasOwnProperty } from "../../helpers/object.mjs";
-import { KEY_CODES } from "../../helpers/unicode.mjs";
 import localHooks from "../../mixins/localHooks.mjs";
 var MIN_WIDTH = 215;
+var SHORTCUTS_CONTEXT = 'menu';
+var SHORTCUTS_GROUP = SHORTCUTS_CONTEXT;
+/**
+ * @typedef MenuOptions
+ * @property {Menu} [parent=null] Instance of {@link Menu}.
+ * @property {string} [name=null] Name of the menu.
+ * @property {string} [className=''] Custom class name.
+ * @property {boolean} [keepInViewport=true] Determine if should be kept in viewport.
+ * @property {boolean} [standalone] Enabling closing menu when clicked element is not belongs to menu itself.
+ * @property {number} [minWidth=MIN_WIDTH] The minimum width.
+ * @property {HTMLElement} [container] The container.
+ */
+
 /**
  * @private
  * @class Menu
  */
 
 var Menu = /*#__PURE__*/function () {
+  /**
+   * @param {Core} hotInstance Handsontable instance.
+   * @param {MenuOptions} [options] Menu options.
+   */
   function Menu(hotInstance, options) {
     _classCallCheck(this, Menu);
 
@@ -209,9 +236,7 @@ var Menu = /*#__PURE__*/function () {
         fragmentSelection: false,
         outsideClickDeselects: false,
         disableVisualSelection: 'area',
-        beforeKeyDown: function beforeKeyDown(event) {
-          return _this2.onBeforeKeyDown(event);
-        },
+        layoutDirection: this.hot.isRtl() ? 'rtl' : 'ltr',
         afterOnCellMouseOver: function afterOnCellMouseOver(event, coords) {
           if (_this2.isAllSubMenusClosed()) {
             delayedOpenSubMenu(coords.row);
@@ -275,6 +300,139 @@ var Menu = /*#__PURE__*/function () {
       });
       this.hotMenu.init();
       this.hotMenu.listen();
+      var shortcutManager = this.hotMenu.getShortcutManager();
+      var menuContext = shortcutManager.addContext(SHORTCUTS_GROUP);
+      var config = {
+        group: SHORTCUTS_CONTEXT
+      };
+
+      var menuContextConfig = _objectSpread(_objectSpread({}, config), {}, {
+        runOnlyIf: function runOnlyIf(event) {
+          return isInput(event.target) === false || _this2.container.contains(event.target) === false;
+        }
+      }); // Default shortcuts for Handsontable should not be handled. Changing context will help with that.
+
+
+      shortcutManager.setActiveContextName('menu');
+      menuContext.addShortcuts([{
+        keys: [['Escape']],
+        callback: function callback() {
+          _this2.keyEvent = true;
+
+          _this2.close();
+
+          _this2.keyEvent = false;
+        }
+      }, {
+        keys: [['ArrowDown']],
+        callback: function callback() {
+          var selection = _this2.hotMenu.getSelectedLast();
+
+          _this2.keyEvent = true;
+
+          if (selection) {
+            _this2.selectNextCell(selection[0], selection[1]);
+          } else {
+            _this2.selectFirstCell();
+          }
+
+          _this2.keyEvent = false;
+        }
+      }, {
+        keys: [['ArrowUp']],
+        callback: function callback() {
+          var selection = _this2.hotMenu.getSelectedLast();
+
+          _this2.keyEvent = true;
+
+          if (selection) {
+            _this2.selectPrevCell(selection[0], selection[1]);
+          } else {
+            _this2.selectLastCell();
+          }
+
+          _this2.keyEvent = false;
+        }
+      }, {
+        keys: [['ArrowRight']],
+        callback: function callback() {
+          var selection = _this2.hotMenu.getSelectedLast();
+
+          _this2.keyEvent = true;
+
+          if (selection) {
+            var menu = _this2.openSubMenu(selection[0]);
+
+            if (menu) {
+              menu.selectFirstCell();
+            }
+          }
+
+          _this2.keyEvent = false;
+        }
+      }, {
+        keys: [['ArrowLeft']],
+        callback: function callback() {
+          var selection = _this2.hotMenu.getSelectedLast();
+
+          _this2.keyEvent = true;
+
+          if (selection && _this2.isSubMenu()) {
+            _this2.close();
+
+            if (_this2.parentMenu) {
+              _this2.parentMenu.hotMenu.listen();
+            }
+          }
+
+          _this2.keyEvent = false;
+        }
+      }, {
+        keys: [['Enter']],
+        callback: function callback(event) {
+          var selection = _this2.hotMenu.getSelectedLast();
+
+          _this2.keyEvent = true;
+
+          if (!_this2.hotMenu.getSourceDataAtRow(selection[0]).submenu) {
+            _this2.executeCommand(event);
+
+            _this2.close(true);
+          }
+
+          _this2.keyEvent = false;
+        }
+      }, {
+        keys: [['PageUp']],
+        callback: function callback() {
+          var selection = _this2.hotMenu.getSelectedLast();
+
+          _this2.keyEvent = true;
+
+          if (selection) {
+            _this2.hotMenu.selection.transformStart(-_this2.hotMenu.countVisibleRows(), 0);
+          } else {
+            _this2.selectFirstCell();
+          }
+
+          _this2.keyEvent = false;
+        }
+      }, {
+        keys: [['PageDown']],
+        callback: function callback() {
+          var selection = _this2.hotMenu.getSelectedLast();
+
+          _this2.keyEvent = true;
+
+          if (selection) {
+            _this2.hotMenu.selection.transformStart(_this2.hotMenu.countVisibleRows(), 0);
+          } else {
+            _this2.selectLastCell();
+          }
+
+          _this2.keyEvent = false;
+        }
+      }], menuContextConfig);
       this.blockMainTableCallbacks();
       this.runLocalHooks('afterOpen');
     }
@@ -481,16 +639,46 @@ var Menu = /*#__PURE__*/function () {
           this.setPositionBelowCursor(cursor);
         }
 
-        if (cursor.fitsOnRight(this.container)) {
-          this.setPositionOnRightOfCursor(cursor);
+        if (this.hot.isLtr()) {
+          this.setHorizontalPositionForLtr(cursor);
         } else {
-          this.setPositionOnLeftOfCursor(cursor);
+          this.setHorizontalPositionForRtl(cursor);
         }
       } else {
         this.setPositionBelowCursor(cursor);
         this.setPositionOnRightOfCursor(cursor);
       }
     }
+    /**
+     * Set menu horizontal position for RTL mode.
+     *
+     * @param {Cursor} cursor `Cursor` object.
+     */
+
+  }, {
+    key: "setHorizontalPositionForRtl",
+    value: function setHorizontalPositionForRtl(cursor) {
+      if (cursor.fitsOnLeft(this.container)) {
+        this.setPositionOnLeftOfCursor(cursor);
+      } else {
+        this.setPositionOnRightOfCursor(cursor);
+      }
+    }
+    /**
+     * Set menu horizontal position for LTR mode.
+     *
+     * @param {Cursor} cursor `Cursor` object.
+     */
+
+  }, {
+    key: "setHorizontalPositionForLtr",
+    value: function setHorizontalPositionForLtr(cursor) {
+      if (cursor.fitsOnRight(this.container)) {
+        this.setPositionOnRightOfCursor(cursor);
+      } else {
+        this.setPositionOnLeftOfCursor(cursor);
+      }
+    }
     /**
      * Set menu position above cursor object.
      *
@@ -534,12 +722,16 @@ var Menu = /*#__PURE__*/function () {
   }, {
     key: "setPositionOnRightOfCursor",
     value: function setPositionOnRightOfCursor(cursor) {
-      var left;
+      var left = cursor.left;
 
       if (this.isSubMenu()) {
-        left = 1 + cursor.left + cursor.cellWidth;
+        var _this$parentMenu$cont = this.parentMenu.container.getBoundingClientRect(),
+            parentMenuRight = _this$parentMenu$cont.right; // move the sub menu by the width of the parent's border (usually by 1-2 pixels)
+
+
+        left += cursor.cellWidth + parentMenuRight - (cursor.left + cursor.cellWidth);
       } else {
-        left = this.offset.right + 1 + cursor.left;
+        left += this.offset.right;
       }
 
       this.container.style.left = "".concat(left, "px");
@@ -553,8 +745,16 @@ var Menu = /*#__PURE__*/function () {
   }, {
     key: "setPositionOnLeftOfCursor",
     value: function setPositionOnLeftOfCursor(cursor) {
-      var scrollbarWidth = getScrollbarWidth(this.hot.rootDocument);
-      var left = this.offset.left + cursor.left - this.container.offsetWidth + scrollbarWidth + 4;
+      var left = this.offset.left + cursor.left - this.container.offsetWidth;
+
+      if (this.isSubMenu()) {
+        var _this$parentMenu$cont2 = this.parentMenu.container.getBoundingClientRect(),
+            parentMenuLeft = _this$parentMenu$cont2.left; // move the sub menu by the width of the parent's border (usually by 1-2 pixels)
+
+
+        left -= cursor.left - parentMenuLeft;
+      }
+
       this.container.style.left = "".concat(left, "px");
     }
     /**
@@ -585,7 +785,10 @@ var Menu = /*#__PURE__*/function () {
       if (isSeparator(cell) || isDisabled(cell) || isSelectionDisabled(cell)) {
         this.selectPrevCell(lastRow, 0);
       } else {
-        this.hotMenu.selectCell(lastRow, 0);
+        // disable default "scroll-to-cell" option and instead of that...
+        this.hotMenu.selectCell(lastRow, 0, undefined, undefined, false); // ...scroll to the cell with "snap to the bottom" option
+
+        this.hotMenu.scrollViewportTo(lastRow, 0, true, false);
       }
     }
     /**
@@ -795,101 +998,6 @@ var Menu = /*#__PURE__*/function () {
         this._afterScrollCallback = null;
       }
     }
-    /**
-     * On before key down listener.
-     *
-     * @private
-     * @param {Event} event The keyaboard event object.
-     */
-
-  }, {
-    key: "onBeforeKeyDown",
-    value: function onBeforeKeyDown(event) {
-      // For input elements, prevent event propagation. It allows entering text into an input
-      // element freely - without steeling the key events from the menu module (#6506, #6549).
-      if (isInput(event.target) && this.container.contains(event.target)) {
-        stopImmediatePropagation(event);
-        return;
-      }
-
-      var selection = this.hotMenu.getSelectedLast();
-      var stopEvent = false;
-      this.keyEvent = true;
-
-      switch (event.keyCode) {
-        case KEY_CODES.ESCAPE:
-          this.close();
-          stopEvent = true;
-          break;
-
-        case KEY_CODES.ENTER:
-          if (selection) {
-            if (this.hotMenu.getSourceDataAtRow(selection[0]).submenu) {
-              stopEvent = true;
-            } else {
-              this.executeCommand(event);
-              this.close(true);
-            }
-          }
-
-          break;
-
-        case KEY_CODES.ARROW_DOWN:
-          if (selection) {
-            this.selectNextCell(selection[0], selection[1]);
-          } else {
-            this.selectFirstCell();
-          }
-
-          stopEvent = true;
-          break;
-
-        case KEY_CODES.ARROW_UP:
-          if (selection) {
-            this.selectPrevCell(selection[0], selection[1]);
-          } else {
-            this.selectLastCell();
-          }
-
-          stopEvent = true;
-          break;
-
-        case KEY_CODES.ARROW_RIGHT:
-          if (selection) {
-            var menu = this.openSubMenu(selection[0]);
-
-            if (menu) {
-              menu.selectFirstCell();
-            }
-          }
-
-          stopEvent = true;
-          break;
-
-        case KEY_CODES.ARROW_LEFT:
-          if (selection && this.isSubMenu()) {
-            this.close();
-
-            if (this.parentMenu) {
-              this.parentMenu.hotMenu.listen();
-            }
-
-            stopEvent = true;
-          }
-
-          break;
-
-        default:
-          break;
-      }
-
-      if (stopEvent) {
-        event.preventDefault();
-        stopImmediatePropagation(event);
-      }
-
-      this.keyEvent = false;
-    }
     /**
      * On after init listener.
      *
@@ -899,7 +1007,7 @@ var Menu = /*#__PURE__*/function () {
   }, {
     key: "onAfterInit",
     value: function onAfterInit() {
-      var wtTable = this.hotMenu.view.wt.wtTable;
+      var wtTable = this.hotMenu.view._wt.wtTable;
       var data = this.hotMenu.getSettings().data;
       var hiderStyle = wtTable.hider.style;
       var holderStyle = wtTable.holder.style;

package/plugins/contextMenu/predefinedItems/columnLeft.js

@@ -26,6 +26,8 @@ exports.default = columnLeftItem;
 
 var _utils = require("../utils");
 
+var _mixed = require("../../../helpers/mixed");
+
 var C = _interopRequireWildcard(require("../../../i18n/constants"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -45,13 +47,19 @@ function columnLeftItem() {
     name: function name() {
       return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_INSERT_LEFT);
     },
-    callback: function callback(key, normalizedSelection) {
+    callback: function callback() {
       var isSelectedByCorner = this.selection.isSelectedByCorner();
-      var columnLeft = 0;
+      var columnLeft = this.isRtl() ? this.countCols() : 0;
 
       if (!isSelectedByCorner) {
-        var latestSelection = normalizedSelection[Math.max(normalizedSelection.length - 1, 0)];
-        columnLeft = latestSelection.start.col;
+        var selectedRange = this.getSelectedRangeLast(); // If there is no selection we have clicked on the corner and there is no data.
+
+        if ((0, _mixed.isDefined)(selectedRange)) {
+          var _selectedRange$getTop = selectedRange.getTopLeftCorner(),
+              col = _selectedRange$getTop.col;
+
+          columnLeft = this.isRtl() ? col + 1 : col;
+        }
       }
 
       this.alter('insert_col', columnLeft, 1, 'ContextMenu.columnLeft');

package/plugins/contextMenu/predefinedItems/columnLeft.mjs

@@ -1,4 +1,5 @@
 import { getValidSelection } from "../utils.mjs";
+import { isDefined } from "../../../helpers/mixed.mjs";
 import * as C from "../../../i18n/constants.mjs";
 export var KEY = 'col_left';
 /**
@@ -11,13 +12,19 @@ export default function columnLeftItem() {
     name: function name() {
       return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_INSERT_LEFT);
     },
-    callback: function callback(key, normalizedSelection) {
+    callback: function callback() {
       var isSelectedByCorner = this.selection.isSelectedByCorner();
-      var columnLeft = 0;
+      var columnLeft = this.isRtl() ? this.countCols() : 0;
 
       if (!isSelectedByCorner) {
-        var latestSelection = normalizedSelection[Math.max(normalizedSelection.length - 1, 0)];
-        columnLeft = latestSelection.start.col;
+        var selectedRange = this.getSelectedRangeLast(); // If there is no selection we have clicked on the corner and there is no data.
+
+        if (isDefined(selectedRange)) {
+          var _selectedRange$getTop = selectedRange.getTopLeftCorner(),
+              col = _selectedRange$getTop.col;
+
+          columnLeft = this.isRtl() ? col + 1 : col;
+        }
       }
 
       this.alter('insert_col', columnLeft, 1, 'ContextMenu.columnLeft');

package/plugins/contextMenu/predefinedItems/columnRight.js

@@ -47,19 +47,19 @@ function columnRightItem() {
     name: function name() {
       return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_INSERT_RIGHT);
     },
-    callback: function callback(key, normalizedSelection) {
+    callback: function callback() {
       var isSelectedByCorner = this.selection.isSelectedByCorner();
-      var columnRight = 0;
+      var columnRight = this.isRtl() ? 0 : this.countCols();
 
-      if (isSelectedByCorner) {
-        columnRight = this.countCols();
-      } else {
-        var _latestSelection$end;
+      if (!isSelectedByCorner) {
+        var selectedRange = this.getSelectedRangeLast(); // If there is no selection we have clicked on the corner and there is no data.
 
-        var latestSelection = normalizedSelection[Math.max(normalizedSelection.length - 1, 0)];
-        var selectedColumn = latestSelection === null || latestSelection === void 0 ? void 0 : (_latestSelection$end = latestSelection.end) === null || _latestSelection$end === void 0 ? void 0 : _latestSelection$end.col; // If there is no selection we have clicked on the corner and there is no data.
+        if ((0, _mixed.isDefined)(selectedRange)) {
+          var _selectedRange$getTop = selectedRange.getTopRightCorner(),
+              col = _selectedRange$getTop.col;
 
-        columnRight = (0, _mixed.isDefined)(selectedColumn) ? selectedColumn + 1 : 0;
+          columnRight = this.isRtl() ? col : col + 1;
+        }
       }
 
       this.alter('insert_col', columnRight, 1, 'ContextMenu.columnRight');

package/plugins/contextMenu/predefinedItems/columnRight.mjs

@@ -12,19 +12,19 @@ export default function columnRightItem() {
     name: function name() {
       return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_INSERT_RIGHT);
     },
-    callback: function callback(key, normalizedSelection) {
+    callback: function callback() {
       var isSelectedByCorner = this.selection.isSelectedByCorner();
-      var columnRight = 0;
+      var columnRight = this.isRtl() ? 0 : this.countCols();
 
-      if (isSelectedByCorner) {
-        columnRight = this.countCols();
-      } else {
-        var _latestSelection$end;
+      if (!isSelectedByCorner) {
+        var selectedRange = this.getSelectedRangeLast(); // If there is no selection we have clicked on the corner and there is no data.
 
-        var latestSelection = normalizedSelection[Math.max(normalizedSelection.length - 1, 0)];
-        var selectedColumn = latestSelection === null || latestSelection === void 0 ? void 0 : (_latestSelection$end = latestSelection.end) === null || _latestSelection$end === void 0 ? void 0 : _latestSelection$end.col; // If there is no selection we have clicked on the corner and there is no data.
+        if (isDefined(selectedRange)) {
+          var _selectedRange$getTop = selectedRange.getTopRightCorner(),
+              col = _selectedRange$getTop.col;
 
-        columnRight = isDefined(selectedColumn) ? selectedColumn + 1 : 0;
+          columnRight = this.isRtl() ? col : col + 1;
+        }
       }
 
       this.alter('insert_col', columnRight, 1, 'ContextMenu.columnRight');

package/plugins/contextMenu/utils.js

@@ -43,8 +43,8 @@ var _separator = require("./predefinedItems/separator");
 function normalizeSelection(selRanges) {
   return (0, _array.arrayMap)(selRanges, function (range) {
     return {
-      start: range.getTopLeftCorner(),
-      end: range.getBottomRightCorner()
+      start: range.getTopStartCorner(),
+      end: range.getBottomEndCorner()
     };
   });
 }

package/plugins/contextMenu/utils.mjs

@@ -16,8 +16,8 @@ import { KEY as SEPARATOR } from "./predefinedItems/separator.mjs";
 export function normalizeSelection(selRanges) {
   return arrayMap(selRanges, function (range) {
     return {
-      start: range.getTopLeftCorner(),
-      end: range.getBottomRightCorner()
+      start: range.getTopStartCorner(),
+      end: range.getBottomEndCorner()
     };
   });
 }