handsontable 0.0.0-next-b66c79f-20230713 → 0.0.0-next-08765b9-20230714

package/plugins/copyPaste/copyPaste.js

@@ -259,13 +259,13 @@ class CopyPaste extends _base.BasePlugin {
     } = this.hot.getSettings();
     if (typeof settings === 'object') {
       var _settings$pasteMode, _settings$uiContainer;
-      this.pasteMode = (_settings$pasteMode = settings.pasteMode) != null ? _settings$pasteMode : this.pasteMode;
+      this.pasteMode = (_settings$pasteMode = settings.pasteMode) !== null && _settings$pasteMode !== void 0 ? _settings$pasteMode : this.pasteMode;
       this.rowsLimit = isNaN(settings.rowsLimit) ? this.rowsLimit : settings.rowsLimit;
       this.columnsLimit = isNaN(settings.columnsLimit) ? this.columnsLimit : settings.columnsLimit;
       _classPrivateFieldSet(this, _enableCopyColumnHeaders, !!settings.copyColumnHeaders);
       _classPrivateFieldSet(this, _enableCopyColumnGroupHeaders, !!settings.copyColumnGroupHeaders);
       _classPrivateFieldSet(this, _enableCopyColumnHeadersOnly, !!settings.copyColumnHeadersOnly);
-      this.uiContainer = (_settings$uiContainer = settings.uiContainer) != null ? _settings$uiContainer : this.uiContainer;
+      this.uiContainer = (_settings$uiContainer = settings.uiContainer) !== null && _settings$uiContainer !== void 0 ? _settings$uiContainer : this.uiContainer;
     }
     this.addHook('afterContextMenuDefaultOptions', options => this.onAfterContextMenuDefaultOptions(options));
     this.addHook('afterOnCellMouseUp', () => this.onAfterOnCellMouseUp());
@@ -431,6 +431,10 @@ class CopyPaste extends _base.BasePlugin {
     if (!selectionRange) {
       return;
     }
+    if (selectionRange.isSingleHeader()) {
+      this.copyableRanges = [];
+      return;
+    }
     _classPrivateFieldGet(this, _copyableRangesFactory).setSelectedRange(selectionRange);
     const groupedRanges = new Map([['headers', null], ['cells', null]]);
     if (_classPrivateFieldGet(this, _copyMode) === 'column-headers-only') {
@@ -476,7 +480,8 @@ class CopyPaste extends _base.BasePlugin {
    * @private
    */
   getOrCreateFocusableElement() {
-    const editableElement = this.hot.getActiveEditor()?.TEXTAREA;
+    var _this$hot$getActiveEd;
+    const editableElement = (_this$hot$getActiveEd = this.hot.getActiveEditor()) === null || _this$hot$getActiveEd === void 0 ? void 0 : _this$hot$getActiveEd.TEXTAREA;
     if (editableElement) {
       this.focusableElement.setFocusableElement(editableElement);
     } else {
@@ -491,7 +496,8 @@ class CopyPaste extends _base.BasePlugin {
    * @returns {boolean}
    */
   isEditorOpened() {
-    return this.hot.getActiveEditor()?.isOpened();
+    var _this$hot$getActiveEd2;
+    return (_this$hot$getActiveEd2 = this.hot.getActiveEditor()) === null || _this$hot$getActiveEd2 === void 0 ? void 0 : _this$hot$getActiveEd2.isOpened();
   }
   /**
    * Prepares new values to populate them into datasource.
@@ -625,7 +631,7 @@ class CopyPaste extends _base.BasePlugin {
    * @private
    */
   onPaste(event) {
-    if (!this.hot.isListening() || this.isEditorOpened()) {
+    if (!this.hot.isListening() || this.isEditorOpened() || !this.hot.getSelected()) {
       return;
     }
     if (event && event.preventDefault) {
@@ -650,7 +656,7 @@ class CopyPaste extends _base.BasePlugin {
     if (typeof pastedData === 'string') {
       pastedData = (0, _SheetClip.parse)(pastedData);
     }
-    if (pastedData && pastedData.length === 0) {
+    if (pastedData === void 0 || pastedData && pastedData.length === 0) {
       return;
     }
     if (this.hot.runHooks('beforePaste', pastedData, this.copyableRanges) === false) {

package/plugins/copyPaste/copyPaste.mjs

@@ -253,13 +253,13 @@ export class CopyPaste extends BasePlugin {
     } = this.hot.getSettings();
     if (typeof settings === 'object') {
       var _settings$pasteMode, _settings$uiContainer;
-      this.pasteMode = (_settings$pasteMode = settings.pasteMode) != null ? _settings$pasteMode : this.pasteMode;
+      this.pasteMode = (_settings$pasteMode = settings.pasteMode) !== null && _settings$pasteMode !== void 0 ? _settings$pasteMode : this.pasteMode;
       this.rowsLimit = isNaN(settings.rowsLimit) ? this.rowsLimit : settings.rowsLimit;
       this.columnsLimit = isNaN(settings.columnsLimit) ? this.columnsLimit : settings.columnsLimit;
       _classPrivateFieldSet(this, _enableCopyColumnHeaders, !!settings.copyColumnHeaders);
       _classPrivateFieldSet(this, _enableCopyColumnGroupHeaders, !!settings.copyColumnGroupHeaders);
       _classPrivateFieldSet(this, _enableCopyColumnHeadersOnly, !!settings.copyColumnHeadersOnly);
-      this.uiContainer = (_settings$uiContainer = settings.uiContainer) != null ? _settings$uiContainer : this.uiContainer;
+      this.uiContainer = (_settings$uiContainer = settings.uiContainer) !== null && _settings$uiContainer !== void 0 ? _settings$uiContainer : this.uiContainer;
     }
     this.addHook('afterContextMenuDefaultOptions', options => this.onAfterContextMenuDefaultOptions(options));
     this.addHook('afterOnCellMouseUp', () => this.onAfterOnCellMouseUp());
@@ -425,6 +425,10 @@ export class CopyPaste extends BasePlugin {
     if (!selectionRange) {
       return;
     }
+    if (selectionRange.isSingleHeader()) {
+      this.copyableRanges = [];
+      return;
+    }
     _classPrivateFieldGet(this, _copyableRangesFactory).setSelectedRange(selectionRange);
     const groupedRanges = new Map([['headers', null], ['cells', null]]);
     if (_classPrivateFieldGet(this, _copyMode) === 'column-headers-only') {
@@ -470,7 +474,8 @@ export class CopyPaste extends BasePlugin {
    * @private
    */
   getOrCreateFocusableElement() {
-    const editableElement = this.hot.getActiveEditor()?.TEXTAREA;
+    var _this$hot$getActiveEd;
+    const editableElement = (_this$hot$getActiveEd = this.hot.getActiveEditor()) === null || _this$hot$getActiveEd === void 0 ? void 0 : _this$hot$getActiveEd.TEXTAREA;
     if (editableElement) {
       this.focusableElement.setFocusableElement(editableElement);
     } else {
@@ -485,7 +490,8 @@ export class CopyPaste extends BasePlugin {
    * @returns {boolean}
    */
   isEditorOpened() {
-    return this.hot.getActiveEditor()?.isOpened();
+    var _this$hot$getActiveEd2;
+    return (_this$hot$getActiveEd2 = this.hot.getActiveEditor()) === null || _this$hot$getActiveEd2 === void 0 ? void 0 : _this$hot$getActiveEd2.isOpened();
   }
   /**
    * Prepares new values to populate them into datasource.
@@ -619,7 +625,7 @@ export class CopyPaste extends BasePlugin {
    * @private
    */
   onPaste(event) {
-    if (!this.hot.isListening() || this.isEditorOpened()) {
+    if (!this.hot.isListening() || this.isEditorOpened() || !this.hot.getSelected()) {
       return;
     }
     if (event && event.preventDefault) {
@@ -644,7 +650,7 @@ export class CopyPaste extends BasePlugin {
     if (typeof pastedData === 'string') {
       pastedData = parse(pastedData);
     }
-    if (pastedData && pastedData.length === 0) {
+    if (pastedData === void 0 || pastedData && pastedData.length === 0) {
       return;
     }
     if (this.hot.runHooks('beforePaste', pastedData, this.copyableRanges) === false) {

package/plugins/customBorders/customBorders.js

@@ -13,6 +13,9 @@ var _utils = require("./utils");
 var _selection = require("../../selection");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 const PLUGIN_KEY = 'customBorders';
 exports.PLUGIN_KEY = PLUGIN_KEY;
 const PLUGIN_PRIORITY = 90;
@@ -74,21 +77,22 @@ const PLUGIN_PRIORITY = 90;
  */
 exports.PLUGIN_PRIORITY = PLUGIN_PRIORITY;
 class CustomBorders extends _base.BasePlugin {
+  constructor() {
+    super(...arguments);
+    /**
+     * Saved borders.
+     *
+     * @private
+     * @type {Array}
+     */
+    _defineProperty(this, "savedBorders", []);
+  }
   static get PLUGIN_KEY() {
     return PLUGIN_KEY;
   }
   static get PLUGIN_PRIORITY() {
     return PLUGIN_PRIORITY;
   }
-
-  /**
-   * Saved borders.
-   *
-   * @private
-   * @type {Array}
-   */
-  savedBorders = [];
-
   /**
    * Checks if the plugin is enabled in the handsontable settings. This method is executed in {@link Hooks#beforeInit}
    * hook and if it returns `true` then the {@link CustomBorders#enablePlugin} method is called.
@@ -163,14 +167,11 @@ class CustomBorders extends _base.BasePlugin {
     const selectionType = (0, _selection.detectSelectionType)(selectionRanges);
     const selectionSchemaNormalizer = (0, _selection.normalizeSelectionFactory)(selectionType);
     (0, _array.arrayEach)(selectionRanges, selection => {
-      const [rowStart, columnStart, rowEnd, columnEnd] = selectionSchemaNormalizer(selection);
-      for (let row = rowStart; row <= rowEnd; row += 1) {
-        for (let col = columnStart; col <= columnEnd; col += 1) {
-          (0, _array.arrayEach)(borderKeys, borderKey => {
-            this.prepareBorderFromCustomAdded(row, col, normBorder, (0, _utils.toInlinePropName)(borderKey));
-          });
-        }
-      }
+      selectionSchemaNormalizer(selection).forAll((row, col) => {
+        (0, _array.arrayEach)(borderKeys, borderKey => {
+          this.prepareBorderFromCustomAdded(row, col, normBorder, (0, _utils.toInlinePropName)(borderKey));
+        });
+      });
     });
 
     /*
@@ -210,16 +211,13 @@ class CustomBorders extends _base.BasePlugin {
     const selectionSchemaNormalizer = (0, _selection.normalizeSelectionFactory)(selectionType);
     const selectedBorders = [];
     (0, _array.arrayEach)(selectionRanges, selection => {
-      const [rowStart, columnStart, rowEnd, columnEnd] = selectionSchemaNormalizer(selection);
-      for (let row = rowStart; row <= rowEnd; row += 1) {
-        for (let col = columnStart; col <= columnEnd; col += 1) {
-          (0, _array.arrayEach)(this.savedBorders, border => {
-            if (border.row === row && border.col === col) {
-              selectedBorders.push((0, _utils.denormalizeBorder)(border));
-            }
-          });
-        }
-      }
+      selectionSchemaNormalizer(selection).forAll((row, col) => {
+        (0, _array.arrayEach)(this.savedBorders, border => {
+          if (border.row === row && border.col === col) {
+            selectedBorders.push((0, _utils.denormalizeBorder)(border));
+          }
+        });
+      });
     });
     return selectedBorders;
   }
@@ -610,7 +608,8 @@ class CustomBorders extends _base.BasePlugin {
     let check = false;
     (0, _array.arrayEach)(this.hot.selection.highlight.customSelections, customSelection => {
       if (border.id === customSelection.settings.id) {
-        (0, _object.objectEach)(customSelection.instanceBorders, borderObject => {
+        const borders = this.hot.view._wt.selectionManager.getBorderInstances(customSelection);
+        (0, _array.arrayEach)(borders, borderObject => {
           borderObject.toggleHiddenClass(place, remove); // TODO this also bad?
         });
 
@@ -644,7 +643,8 @@ class CustomBorders extends _base.BasePlugin {
           customSelection.visualCellRange = cellRange;
           customSelection.commit();
           if (place) {
-            (0, _object.objectEach)(customSelection.instanceBorders, borderObject => {
+            const borders = this.hot.view._wt.selectionManager.getBorderInstances(customSelection);
+            (0, _array.arrayEach)(borders, borderObject => {
               borderObject.changeBorderStyle(place, border);
             });
           }
@@ -712,6 +712,13 @@ class CustomBorders extends _base.BasePlugin {
         return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_BORDERS);
       },
       disabled() {
+        const range = this.getSelectedRangeLast();
+        if (!range) {
+          return true;
+        }
+        if (range.isSingleHeader()) {
+          return true;
+        }
         return this.selection.isSelectedByCorner();
       },
       submenu: {

package/plugins/customBorders/customBorders.mjs

@@ -1,7 +1,10 @@
 import "core-js/modules/es.array.push.js";
 import "core-js/modules/es.error.cause.js";
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import { BasePlugin } from "../base/index.mjs";
-import { hasOwnProperty, objectEach, deepClone } from "../../helpers/object.mjs";
+import { hasOwnProperty, deepClone } from "../../helpers/object.mjs";
 import { rangeEach } from "../../helpers/number.mjs";
 import { arrayEach, arrayReduce, arrayMap } from "../../helpers/array.mjs";
 import * as C from "../../i18n/constants.mjs";
@@ -67,21 +70,22 @@ export const PLUGIN_PRIORITY = 90;
  * ```
  */
 export class CustomBorders extends BasePlugin {
+  constructor() {
+    super(...arguments);
+    /**
+     * Saved borders.
+     *
+     * @private
+     * @type {Array}
+     */
+    _defineProperty(this, "savedBorders", []);
+  }
   static get PLUGIN_KEY() {
     return PLUGIN_KEY;
   }
   static get PLUGIN_PRIORITY() {
     return PLUGIN_PRIORITY;
   }
-
-  /**
-   * Saved borders.
-   *
-   * @private
-   * @type {Array}
-   */
-  savedBorders = [];
-
   /**
    * Checks if the plugin is enabled in the handsontable settings. This method is executed in {@link Hooks#beforeInit}
    * hook and if it returns `true` then the {@link CustomBorders#enablePlugin} method is called.
@@ -156,14 +160,11 @@ export class CustomBorders extends BasePlugin {
     const selectionType = detectSelectionType(selectionRanges);
     const selectionSchemaNormalizer = normalizeSelectionFactory(selectionType);
     arrayEach(selectionRanges, selection => {
-      const [rowStart, columnStart, rowEnd, columnEnd] = selectionSchemaNormalizer(selection);
-      for (let row = rowStart; row <= rowEnd; row += 1) {
-        for (let col = columnStart; col <= columnEnd; col += 1) {
-          arrayEach(borderKeys, borderKey => {
-            this.prepareBorderFromCustomAdded(row, col, normBorder, toInlinePropName(borderKey));
-          });
-        }
-      }
+      selectionSchemaNormalizer(selection).forAll((row, col) => {
+        arrayEach(borderKeys, borderKey => {
+          this.prepareBorderFromCustomAdded(row, col, normBorder, toInlinePropName(borderKey));
+        });
+      });
     });
 
     /*
@@ -203,16 +204,13 @@ export class CustomBorders extends BasePlugin {
     const selectionSchemaNormalizer = normalizeSelectionFactory(selectionType);
     const selectedBorders = [];
     arrayEach(selectionRanges, selection => {
-      const [rowStart, columnStart, rowEnd, columnEnd] = selectionSchemaNormalizer(selection);
-      for (let row = rowStart; row <= rowEnd; row += 1) {
-        for (let col = columnStart; col <= columnEnd; col += 1) {
-          arrayEach(this.savedBorders, border => {
-            if (border.row === row && border.col === col) {
-              selectedBorders.push(denormalizeBorder(border));
-            }
-          });
-        }
-      }
+      selectionSchemaNormalizer(selection).forAll((row, col) => {
+        arrayEach(this.savedBorders, border => {
+          if (border.row === row && border.col === col) {
+            selectedBorders.push(denormalizeBorder(border));
+          }
+        });
+      });
     });
     return selectedBorders;
   }
@@ -603,7 +601,8 @@ export class CustomBorders extends BasePlugin {
     let check = false;
     arrayEach(this.hot.selection.highlight.customSelections, customSelection => {
       if (border.id === customSelection.settings.id) {
-        objectEach(customSelection.instanceBorders, borderObject => {
+        const borders = this.hot.view._wt.selectionManager.getBorderInstances(customSelection);
+        arrayEach(borders, borderObject => {
           borderObject.toggleHiddenClass(place, remove); // TODO this also bad?
         });
 
@@ -637,7 +636,8 @@ export class CustomBorders extends BasePlugin {
           customSelection.visualCellRange = cellRange;
           customSelection.commit();
           if (place) {
-            objectEach(customSelection.instanceBorders, borderObject => {
+            const borders = this.hot.view._wt.selectionManager.getBorderInstances(customSelection);
+            arrayEach(borders, borderObject => {
               borderObject.changeBorderStyle(place, border);
             });
           }
@@ -705,6 +705,13 @@ export class CustomBorders extends BasePlugin {
         return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_BORDERS);
       },
       disabled() {
+        const range = this.getSelectedRangeLast();
+        if (!range) {
+          return true;
+        }
+        if (range.isSingleHeader()) {
+          return true;
+        }
         return this.selection.isSelectedByCorner();
       },
       submenu: {

package/plugins/customBorders/utils.js

@@ -74,11 +74,11 @@ function createDefaultHtBorder() {
 function normalizeBorder(border) {
   if ((0, _mixed.isDefined)(border.start) || (0, _mixed.isDefined)(border.left)) {
     var _border$start;
-    border.start = (_border$start = border.start) != null ? _border$start : border.left;
+    border.start = (_border$start = border.start) !== null && _border$start !== void 0 ? _border$start : border.left;
   }
   if ((0, _mixed.isDefined)(border.end) || (0, _mixed.isDefined)(border.right)) {
     var _border$end;
-    border.end = (_border$end = border.end) != null ? _border$end : border.right;
+    border.end = (_border$end = border.end) !== null && _border$end !== void 0 ? _border$end : border.right;
   }
   delete border.left;
   delete border.right;
@@ -251,5 +251,5 @@ const physicalToInlinePropNames = new Map([['left', 'start'], ['right', 'end']])
  */
 function toInlinePropName(propName) {
   var _physicalToInlineProp;
-  return (_physicalToInlineProp = physicalToInlinePropNames.get(propName)) != null ? _physicalToInlineProp : propName;
+  return (_physicalToInlineProp = physicalToInlinePropNames.get(propName)) !== null && _physicalToInlineProp !== void 0 ? _physicalToInlineProp : propName;
 }

package/plugins/customBorders/utils.mjs

@@ -58,11 +58,11 @@ export function createDefaultHtBorder() {
 export function normalizeBorder(border) {
   if (isDefined(border.start) || isDefined(border.left)) {
     var _border$start;
-    border.start = (_border$start = border.start) != null ? _border$start : border.left;
+    border.start = (_border$start = border.start) !== null && _border$start !== void 0 ? _border$start : border.left;
   }
   if (isDefined(border.end) || isDefined(border.right)) {
     var _border$end;
-    border.end = (_border$end = border.end) != null ? _border$end : border.right;
+    border.end = (_border$end = border.end) !== null && _border$end !== void 0 ? _border$end : border.right;
   }
   delete border.left;
   delete border.right;
@@ -235,5 +235,5 @@ const physicalToInlinePropNames = new Map([['left', 'start'], ['right', 'end']])
  */
 export function toInlinePropName(propName) {
   var _physicalToInlineProp;
-  return (_physicalToInlineProp = physicalToInlinePropNames.get(propName)) != null ? _physicalToInlineProp : propName;
+  return (_physicalToInlineProp = physicalToInlinePropNames.get(propName)) !== null && _physicalToInlineProp !== void 0 ? _physicalToInlineProp : propName;
 }

package/plugins/dropdownMenu/dropdownMenu.d.ts

@@ -18,7 +18,7 @@ export class DropdownMenu extends BasePlugin {
 
   constructor(hotInstance: Core);
   isEnabled(): boolean;
-  open(event: Event): void;
+  open(position: { left: number, top: number } | Event, offset?: { above?: number, below?: number, left?: number, right?: number }): void;
   close(): void;
   executeCommand(commandName: string, ...params: any): void;
 }

package/plugins/dropdownMenu/dropdownMenu.js

@@ -3,7 +3,9 @@
 exports.__esModule = true;
 var _base = require("../base");
 var _array = require("../../helpers/array");
+var _object = require("../../helpers/object");
 var _commandExecutor = _interopRequireDefault(require("../contextMenu/commandExecutor"));
+var _utils = require("../contextMenu/utils");
 var _eventManager = _interopRequireDefault(require("../../eventManager"));
 var _element = require("../../helpers/dom/element");
 var _itemsFactory = _interopRequireDefault(require("../contextMenu/itemsFactory"));
@@ -21,6 +23,7 @@ exports.PLUGIN_KEY = PLUGIN_KEY;
 const PLUGIN_PRIORITY = 230;
 exports.PLUGIN_PRIORITY = PLUGIN_PRIORITY;
 const BUTTON_CLASS_NAME = 'changeType';
+const SHORTCUTS_GROUP = PLUGIN_KEY;
 
 /* eslint-disable jsdoc/require-description-complete-sentence */
 /**
@@ -157,6 +160,7 @@ class DropdownMenu extends _base.BasePlugin {
     if (typeof settings.callback === 'function') {
       this.commandExecutor.setCommonCallback(settings.callback);
     }
+    this.registerShortcuts();
     super.enablePlugin();
     this.callOnPluginsReady(() => {
       this.hot.runHooks('afterDropdownMenuDefaultOptions', predefinedItems);
@@ -207,9 +211,68 @@ class DropdownMenu extends _base.BasePlugin {
     if (this.menu) {
       this.menu.destroy();
     }
+    this.unregisterShortcuts();
     super.disablePlugin();
   }
 
+  /**
+   * Register shortcuts responsible for toggling dropdown menu.
+   *
+   * @private
+   */
+  registerShortcuts() {
+    const context = this.hot.getShortcutManager().getContext('grid');
+    const callback = () => {
+      const {
+        highlight
+      } = this.hot.getSelectedRangeLast();
+      if ((highlight.isHeader() && highlight.row === -1 || highlight.isCell()) && highlight.col >= 0) {
+        this.hot.selectColumns(highlight.col, highlight.col, -1);
+        const {
+          from
+        } = this.hot.getSelectedRangeLast();
+        const offset = (0, _utils.getDocumentOffsetByElement)(this.menu.container, this.hot.rootDocument);
+        const target = this.hot.getCell(-1, from.col, true);
+        const rect = target.getBoundingClientRect();
+        this.open({
+          left: rect.left + offset.left,
+          top: rect.top + target.offsetHeight + offset.top
+        }, {
+          left: rect.width
+        });
+        this.hot._registerTimeout(() => {
+          this.menu.selectFirstCell();
+        });
+      }
+    };
+    context.addShortcuts([{
+      keys: [['Shift', 'Alt', 'ArrowDown'], ['Shift', 'Enter']],
+      callback,
+      runOnlyIf: () => {
+        var _this$hot$getSelected;
+        return ((_this$hot$getSelected = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected === void 0 ? void 0 : _this$hot$getSelected.highlight.isHeader()) && !this.menu.isOpened();
+      },
+      group: SHORTCUTS_GROUP
+    }, {
+      keys: [['Shift', 'Alt', 'ArrowDown']],
+      callback,
+      runOnlyIf: () => {
+        var _this$hot$getSelected2;
+        return ((_this$hot$getSelected2 = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected2 === void 0 ? void 0 : _this$hot$getSelected2.highlight.isCell()) && !this.menu.isOpened();
+      },
+      group: SHORTCUTS_GROUP
+    }]);
+  }
+
+  /**
+   * Unregister shortcuts responsible for toggling dropdown menu.
+   *
+   * @private
+   */
+  unregisterShortcuts() {
+    this.hot.getShortcutManager().getContext('grid').removeShortcutsByGroup(SHORTCUTS_GROUP);
+  }
+
   /**
    * Registers the DOM listeners.
    *
@@ -222,23 +285,30 @@ class DropdownMenu extends _base.BasePlugin {
   /**
    * Opens menu and re-position it based on the passed coordinates.
    *
-   * @param {object|Event} position An object with `pageX` and `pageY` properties which contains values relative to
-   *                                the top left of the fully rendered content area in the browser or with `clientX`
-   *                                and `clientY`  properties which contains values relative to the upper left edge
-   *                                of the content area (the viewport) of the browser window. This object is structurally
-   *                                compatible with native mouse event so it can be used either.
+   * @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.
    * @fires Hooks#beforeDropdownMenuShow
    * @fires Hooks#afterDropdownMenuShow
    */
-
   open(position) {
-    if (!this.menu) {
+    var _this$menu;
+    let offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      above: 0,
+      below: 0,
+      left: 0,
+      right: 0
+    };
+    if ((_this$menu = this.menu) !== null && _this$menu !== void 0 && _this$menu.isOpened()) {
       return;
     }
     this.menu.open();
-    if (position.width) {
-      this.menu.setOffset('left', position.width);
-    }
+    (0, _object.objectEach)(offset, (value, key) => {
+      this.menu.setOffset(key, value);
+    });
     this.menu.setPosition(position);
   }
 
@@ -246,10 +316,8 @@ class DropdownMenu extends _base.BasePlugin {
    * Closes dropdown menu.
    */
   close() {
-    if (!this.menu) {
-      return;
-    }
-    this.menu.close();
+    var _this$menu2;
+    (_this$menu2 = this.menu) === null || _this$menu2 === void 0 ? void 0 : _this$menu2.close();
   }
 
   /**
@@ -314,26 +382,14 @@ class DropdownMenu extends _base.BasePlugin {
    */
   onTableClick(event) {
     event.stopPropagation();
-    if ((0, _element.hasClass)(event.target, BUTTON_CLASS_NAME) && !this.menu.isOpened()) {
-      let offsetTop = 0;
-      let offsetLeft = 0;
-      if (this.hot.rootDocument !== this.menu.container.ownerDocument) {
-        const {
-          frameElement
-        } = this.hot.rootWindow;
-        const {
-          top,
-          left
-        } = frameElement.getBoundingClientRect();
-        offsetTop = top;
-        offsetLeft = left;
-      }
+    if ((0, _element.hasClass)(event.target, BUTTON_CLASS_NAME)) {
+      const offset = (0, _utils.getDocumentOffsetByElement)(this.menu.container, this.hot.rootDocument);
       const rect = event.target.getBoundingClientRect();
       this.open({
-        left: rect.left + offsetLeft,
-        top: rect.top + event.target.offsetHeight + 3 + offsetTop,
-        width: rect.width,
-        height: rect.height
+        left: rect.left + offset.left,
+        top: rect.top + event.target.offsetHeight + 3 + offset.top
+      }, {
+        left: rect.width
       });
     }
   }
@@ -372,6 +428,7 @@ class DropdownMenu extends _base.BasePlugin {
     const button = this.hot.rootDocument.createElement('button');
     button.className = BUTTON_CLASS_NAME;
     button.type = 'button';
+    button.tabIndex = -1;
 
     // prevent page reload on button click
     button.onclick = function () {