handsontable 11.1.0 → 12.1.0

package/plugins/contextMenu/menu.js

@@ -1,5 +1,15 @@
 "use strict";
 
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
 exports.__esModule = true;
 exports.default = void 0;
 
@@ -45,12 +55,16 @@ var _mixed = require("../../helpers/mixed");
 
 var _object = require("../../helpers/object");
 
-var _unicode = require("../../helpers/unicode");
-
 var _localHooks = _interopRequireDefault(require("../../mixins/localHooks"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -58,12 +72,29 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
 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);
 
@@ -238,9 +269,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);
@@ -304,6 +333,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 (0, _element.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');
     }
@@ -510,16 +672,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.
      *
@@ -563,12 +755,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");
@@ -582,8 +778,16 @@ var Menu = /*#__PURE__*/function () {
   }, {
     key: "setPositionOnLeftOfCursor",
     value: function setPositionOnLeftOfCursor(cursor) {
-      var scrollbarWidth = (0, _element.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");
     }
     /**
@@ -614,7 +818,10 @@ var Menu = /*#__PURE__*/function () {
       if ((0, _utils.isSeparator)(cell) || (0, _utils.isDisabled)(cell) || (0, _utils.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);
       }
     }
     /**
@@ -824,101 +1031,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 ((0, _element.isInput)(event.target) && this.container.contains(event.target)) {
-        (0, _event.stopImmediatePropagation)(event);
-        return;
-      }
-
-      var selection = this.hotMenu.getSelectedLast();
-      var stopEvent = false;
-      this.keyEvent = true;
-
-      switch (event.keyCode) {
-        case _unicode.KEY_CODES.ESCAPE:
-          this.close();
-          stopEvent = true;
-          break;
-
-        case _unicode.KEY_CODES.ENTER:
-          if (selection) {
-            if (this.hotMenu.getSourceDataAtRow(selection[0]).submenu) {
-              stopEvent = true;
-            } else {
-              this.executeCommand(event);
-              this.close(true);
-            }
-          }
-
-          break;
-
-        case _unicode.KEY_CODES.ARROW_DOWN:
-          if (selection) {
-            this.selectNextCell(selection[0], selection[1]);
-          } else {
-            this.selectFirstCell();
-          }
-
-          stopEvent = true;
-          break;
-
-        case _unicode.KEY_CODES.ARROW_UP:
-          if (selection) {
-            this.selectPrevCell(selection[0], selection[1]);
-          } else {
-            this.selectLastCell();
-          }
-
-          stopEvent = true;
-          break;
-
-        case _unicode.KEY_CODES.ARROW_RIGHT:
-          if (selection) {
-            var menu = this.openSubMenu(selection[0]);
-
-            if (menu) {
-              menu.selectFirstCell();
-            }
-          }
-
-          stopEvent = true;
-          break;
-
-        case _unicode.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();
-        (0, _event.stopImmediatePropagation)(event);
-      }
-
-      this.keyEvent = false;
-    }
     /**
      * On after init listener.
      *
@@ -928,7 +1040,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;