handsontable 0.0.0-next-d96e9b5-20240220 → 0.0.0-next-d4816a9-20240221

package/editorManager.js

@@ -318,22 +318,18 @@ class EditorManager {
   }
 
   /**
-   * Controls selection's behavior after clicking `Enter`.
+   * Controls selection's behaviour after clicking `Enter`.
    *
    * @private
-   * @param {KeyboardEvent} event The keyboard event object.
+   * @param {boolean} isShiftPressed If `true`, then the selection will move up after hit enter.
    */
-  moveSelectionAfterEnter(event) {
-    const enterMoves = {
-      ...(typeof this.tableMeta.enterMoves === 'function' ? this.tableMeta.enterMoves(event) : this.tableMeta.enterMoves)
-    };
-    if (event.shiftKey) {
-      enterMoves.row = -enterMoves.row;
-      enterMoves.col = -enterMoves.col;
-    }
-    if (this.hot.selection.isMultiple()) {
-      this.selection.transformFocus(enterMoves.row, enterMoves.col);
+  moveSelectionAfterEnter(isShiftPressed) {
+    const enterMoves = typeof this.tableMeta.enterMoves === 'function' ? this.tableMeta.enterMoves(event) : this.tableMeta.enterMoves;
+    if (isShiftPressed) {
+      // move selection up
+      this.selection.transformStart(-enterMoves.row, -enterMoves.col);
     } else {
+      // move selection down (add a new row if needed)
       this.selection.transformStart(enterMoves.row, enterMoves.col, true);
     }
   }

package/editorManager.mjs

@@ -314,22 +314,18 @@ class EditorManager {
   }
 
   /**
-   * Controls selection's behavior after clicking `Enter`.
+   * Controls selection's behaviour after clicking `Enter`.
    *
    * @private
-   * @param {KeyboardEvent} event The keyboard event object.
+   * @param {boolean} isShiftPressed If `true`, then the selection will move up after hit enter.
    */
-  moveSelectionAfterEnter(event) {
-    const enterMoves = {
-      ...(typeof this.tableMeta.enterMoves === 'function' ? this.tableMeta.enterMoves(event) : this.tableMeta.enterMoves)
-    };
-    if (event.shiftKey) {
-      enterMoves.row = -enterMoves.row;
-      enterMoves.col = -enterMoves.col;
-    }
-    if (this.hot.selection.isMultiple()) {
-      this.selection.transformFocus(enterMoves.row, enterMoves.col);
+  moveSelectionAfterEnter(isShiftPressed) {
+    const enterMoves = typeof this.tableMeta.enterMoves === 'function' ? this.tableMeta.enterMoves(event) : this.tableMeta.enterMoves;
+    if (isShiftPressed) {
+      // move selection up
+      this.selection.transformStart(-enterMoves.row, -enterMoves.col);
     } else {
+      // move selection down (add a new row if needed)
       this.selection.transformStart(enterMoves.row, enterMoves.col, true);
     }
   }

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-d96e9b5-20240220";
+  const hotVersion = "0.0.0-next-d4816a9-20240221";
   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-d96e9b5-20240220";
+  const hotVersion = "0.0.0-next-d4816a9-20240221";
   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-d96e9b5-20240220",
+  "version": "0.0.0-next-d4816a9-20240221",
   "main": "index",
   "module": "index.mjs",
   "jsnext:main": "index.mjs",

package/pluginHooks.d.ts

@@ -133,7 +133,6 @@ export interface Events {
   afterSelectionByProp?: (row: number, prop: string, row2: number, prop2: string, preventScrolling: { value: boolean }, selectionLayerLevel: number) => void;
   afterSelectionEnd?: (row: number, column: number, row2: number, column2: number, selectionLayerLevel: number) => void;
   afterSelectionEndByProp?: (row: number, prop: string, row2: number, prop2: string, selectionLayerLevel: number) => void;
-  afterSelectionFocusSet?: (row: number, column: number, preventScrolling: { value: boolean }) => void;
   afterSelectRows?: (from: CellCoords, to: CellCoords, highlight: CellCoords) => void;
   afterSetCellMeta?: (row: number, column: number, key: string, value: any) => void;
   afterSetDataAtCell?: (changes: CellChange[], source?: ChangeSource) => void;

package/pluginHooks.js

@@ -650,9 +650,7 @@ const REGISTERED_HOOKS = [/* eslint-disable jsdoc/require-description-complete-s
  * @param {string} prop Selection start data source object property name.
  * @param {number} row2 Selection end visual row index.
  * @param {string} prop2 Selection end data source object property name.
- * @param {object} preventScrolling A reference to the observable object with the `value` property.
- *                                  Property `preventScrolling.value` expects a boolean value that
- *                                  Handsontable uses to control scroll behavior after selection.
+ * @param {object} preventScrolling Object with `value` property where its value change will be observed.
  * @param {number} selectionLayerLevel The number which indicates what selection layer is currently modified.
  * @example
  * ```js
@@ -702,46 +700,6 @@ const REGISTERED_HOOKS = [/* eslint-disable jsdoc/require-description-complete-s
  * @param {number} selectionLayerLevel The number which indicates what selection layer is currently modified.
  */
 'afterSelectionEndByProp',
-/**
- * Fired after the focus position within a selected range is changed.
- *
- * @since 14.2.0
- * @event Hooks#afterSelectionFocusSet
- * @param {number} row The focus visual row index position.
- * @param {number} column The focus visual column index position.
- * @param {object} preventScrolling A reference to the observable object with the `value` property.
- *                                  Property `preventScrolling.value` expects a boolean value that
- *                                  Handsontable uses to control scroll behavior after selection.
- * @example
- * ```js
- * ::: only-for javascript
- * new Handsontable(element, {
- *   afterSelectionFocusSet: (row, column, preventScrolling) => {
- *     // If set to `false` (default): when focused cell selection is outside the viewport,
- *     // Handsontable scrolls the viewport to that cell.
- *     // If set to `true`: when focused cell selection is outside the viewport,
- *     // Handsontable doesn't scroll the viewport.
- *     preventScrolling.value = true;
- *   }
- * })
- * ```
- * :::
- *
- * ::: only-for react
- * ```jsx
- * <HotTable
- *   afterSelectionFocusSet={(row, column, preventScrolling) => {
- *     // If set to `false` (default): when focused cell selection is outside the viewport,
- *     // Handsontable scrolls the viewport to that cell.
- *     // If set to `true`: when focused cell selection is outside the viewport,
- *     // Handsontable doesn't scroll the viewport.
- *     preventScrolling.value = true;
- *   }}
- * />
- * ```
- * :::
- */
-'afterSelectionFocusSet',
 /**
  * Fired before one or more columns are selected (e.g. During mouse header click or {@link Core#selectColumns} API call).
  *

package/pluginHooks.mjs

@@ -646,9 +646,7 @@ const REGISTERED_HOOKS = [/* eslint-disable jsdoc/require-description-complete-s
  * @param {string} prop Selection start data source object property name.
  * @param {number} row2 Selection end visual row index.
  * @param {string} prop2 Selection end data source object property name.
- * @param {object} preventScrolling A reference to the observable object with the `value` property.
- *                                  Property `preventScrolling.value` expects a boolean value that
- *                                  Handsontable uses to control scroll behavior after selection.
+ * @param {object} preventScrolling Object with `value` property where its value change will be observed.
  * @param {number} selectionLayerLevel The number which indicates what selection layer is currently modified.
  * @example
  * ```js
@@ -698,46 +696,6 @@ const REGISTERED_HOOKS = [/* eslint-disable jsdoc/require-description-complete-s
  * @param {number} selectionLayerLevel The number which indicates what selection layer is currently modified.
  */
 'afterSelectionEndByProp',
-/**
- * Fired after the focus position within a selected range is changed.
- *
- * @since 14.2.0
- * @event Hooks#afterSelectionFocusSet
- * @param {number} row The focus visual row index position.
- * @param {number} column The focus visual column index position.
- * @param {object} preventScrolling A reference to the observable object with the `value` property.
- *                                  Property `preventScrolling.value` expects a boolean value that
- *                                  Handsontable uses to control scroll behavior after selection.
- * @example
- * ```js
- * ::: only-for javascript
- * new Handsontable(element, {
- *   afterSelectionFocusSet: (row, column, preventScrolling) => {
- *     // If set to `false` (default): when focused cell selection is outside the viewport,
- *     // Handsontable scrolls the viewport to that cell.
- *     // If set to `true`: when focused cell selection is outside the viewport,
- *     // Handsontable doesn't scroll the viewport.
- *     preventScrolling.value = true;
- *   }
- * })
- * ```
- * :::
- *
- * ::: only-for react
- * ```jsx
- * <HotTable
- *   afterSelectionFocusSet={(row, column, preventScrolling) => {
- *     // If set to `false` (default): when focused cell selection is outside the viewport,
- *     // Handsontable scrolls the viewport to that cell.
- *     // If set to `true`: when focused cell selection is outside the viewport,
- *     // Handsontable doesn't scroll the viewport.
- *     preventScrolling.value = true;
- *   }}
- * />
- * ```
- * :::
- */
-'afterSelectionFocusSet',
 /**
  * Fired before one or more columns are selected (e.g. During mouse header click or {@link Core#selectColumns} API call).
  *

package/plugins/collapsibleColumns/collapsibleColumns.js

@@ -9,7 +9,6 @@ var _number = require("../../helpers/number");
 var _console = require("../../helpers/console");
 var _element = require("../../helpers/dom/element");
 var _event = require("../../helpers/dom/event");
-var _shortcutContexts = require("../../shortcutContexts");
 var _a11y = require("../../helpers/a11y");
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
@@ -309,17 +308,12 @@ class CollapsibleColumns extends _base.BasePlugin {
             col: columnIndex
           });
         }
-
-        // prevent default Enter behavior (move to the next row within a selection range)
-        return false;
       },
       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();
       },
-      group: SHORTCUTS_GROUP,
-      relativeToGroup: _shortcutContexts.EDITOR_EDIT_GROUP,
-      position: 'before'
+      group: SHORTCUTS_GROUP
     });
   }
 

package/plugins/collapsibleColumns/collapsibleColumns.mjs

@@ -18,7 +18,6 @@ import { rangeEach } from "../../helpers/number.mjs";
 import { warn } from "../../helpers/console.mjs";
 import { addClass, hasClass, removeClass, fastInnerText, removeAttribute, setAttribute } from "../../helpers/dom/element.mjs";
 import { stopImmediatePropagation } from "../../helpers/dom/event.mjs";
-import { EDITOR_EDIT_GROUP as SHORTCUTS_GROUP_EDITOR } from "../../shortcutContexts/index.mjs";
 import { A11Y_EXPANDED, A11Y_HIDDEN } from "../../helpers/a11y.mjs";
 export const PLUGIN_KEY = 'collapsibleColumns';
 export const PLUGIN_PRIORITY = 290;
@@ -306,17 +305,12 @@ export class CollapsibleColumns extends BasePlugin {
             col: columnIndex
           });
         }
-
-        // prevent default Enter behavior (move to the next row within a selection range)
-        return false;
       },
       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();
       },
-      group: SHORTCUTS_GROUP,
-      relativeToGroup: SHORTCUTS_GROUP_EDITOR,
-      position: 'before'
+      group: SHORTCUTS_GROUP
     });
   }
 

package/plugins/columnSorting/columnSorting.js

@@ -12,7 +12,6 @@ var _base = require("../base");
 var _translations = require("../../translations");
 var _pluginHooks = _interopRequireDefault(require("../../pluginHooks"));
 var _columnStatesManager = require("./columnStatesManager");
-var _shortcutContexts = require("../../shortcutContexts");
 var _utils = require("./utils");
 var _domHelpers = require("./domHelpers");
 var _rootComparator = require("./rootComparator");
@@ -250,17 +249,12 @@ class ColumnSorting extends _base.BasePlugin {
         if (highlight.row === -1 && highlight.col >= 0) {
           this.sort(this.getColumnNextConfig(highlight.col));
         }
-
-        // prevent default Enter behavior (move to the next row within a selection range)
-        return false;
       },
       runOnlyIf: () => {
         var _this$hot$getSelected;
         const highlight = (_this$hot$getSelected = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected === void 0 ? void 0 : _this$hot$getSelected.highlight;
         return highlight && this.hot.selection.isCellVisible(highlight) && highlight.isHeader();
       },
-      relativeToGroup: _shortcutContexts.EDITOR_EDIT_GROUP,
-      position: 'before',
       group: SHORTCUTS_GROUP
     });
   }

package/plugins/columnSorting/columnSorting.mjs

@@ -15,7 +15,6 @@ import { BasePlugin } from "../base/index.mjs";
 import { IndexesSequence, PhysicalIndexToValueMap as IndexToValueMap } from "../../translations/index.mjs";
 import Hooks from "../../pluginHooks.mjs";
 import { ColumnStatesManager } from "./columnStatesManager.mjs";
-import { EDITOR_EDIT_GROUP as SHORTCUTS_GROUP_EDITOR } from "../../shortcutContexts/index.mjs";
 import { HEADER_SPAN_CLASS, getNextSortOrder, areValidSortStates, getHeaderSpanElement, isFirstLevelColumnHeader, wasHeaderClickedProperly } from "./utils.mjs";
 import { getClassesToRemove, getClassesToAdd } from "./domHelpers.mjs";
 import { rootComparator } from "./rootComparator.mjs";
@@ -246,17 +245,12 @@ export class ColumnSorting extends BasePlugin {
         if (highlight.row === -1 && highlight.col >= 0) {
           this.sort(this.getColumnNextConfig(highlight.col));
         }
-
-        // prevent default Enter behavior (move to the next row within a selection range)
-        return false;
       },
       runOnlyIf: () => {
         var _this$hot$getSelected;
         const highlight = (_this$hot$getSelected = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected === void 0 ? void 0 : _this$hot$getSelected.highlight;
         return highlight && this.hot.selection.isCellVisible(highlight) && highlight.isHeader();
       },
-      relativeToGroup: SHORTCUTS_GROUP_EDITOR,
-      position: 'before',
       group: SHORTCUTS_GROUP
     });
   }

package/plugins/contextMenu/menu/defaultShortcutsList.js

@@ -9,26 +9,10 @@ exports.createDefaultShortcutsList = createDefaultShortcutsList;
  * @returns {KeyboardShortcut[]}
  */
 function createDefaultShortcutsList(menu) {
-  const {
-    hot,
-    hotMenu
-  } = menu;
   return [{
-    keys: [['Control/Meta', 'A']],
-    forwardToContext: hot.getShortcutManager().getContext('grid'),
+    keys: [['Tab'], ['Shift', 'Tab'], ['Control/Meta', 'A']],
+    forwardToContext: menu.hot.getShortcutManager().getContext('grid'),
     callback: () => menu.close(true)
-  }, {
-    keys: [['Tab'], ['Shift', 'Tab']],
-    callback: (event, keys) => {
-      const settings = hot.getSettings();
-      const tabMoves = typeof settings.tabMoves === 'function' ? settings.tabMoves(event) : settings.tabMoves;
-      if (keys.includes('shift')) {
-        hot.selection.transformStart(-tabMoves.row, -tabMoves.col);
-      } else {
-        hot.selection.transformStart(tabMoves.row, tabMoves.col);
-      }
-      menu.close(true);
-    }
   }, {
     keys: [['Escape']],
     callback: () => menu.close()
@@ -41,7 +25,7 @@ function createDefaultShortcutsList(menu) {
   }, {
     keys: [['ArrowRight']],
     callback: () => {
-      const selection = hotMenu.getSelectedLast();
+      const selection = menu.hotMenu.getSelectedLast();
       if (selection) {
         const subMenu = menu.openSubMenu(selection[0]);
         if (subMenu) {
@@ -52,7 +36,7 @@ function createDefaultShortcutsList(menu) {
   }, {
     keys: [['ArrowLeft']],
     callback: () => {
-      const selection = hotMenu.getSelectedLast();
+      const selection = menu.hotMenu.getSelectedLast();
       if (selection && menu.isSubMenu()) {
         menu.close();
         if (menu.isSubMenu()) {
@@ -69,11 +53,11 @@ function createDefaultShortcutsList(menu) {
   }, {
     keys: [['Enter'], ['Space']],
     callback: event => {
-      const selection = hotMenu.getSelectedLast();
+      const selection = menu.hotMenu.getSelectedLast();
       if (!selection) {
         return;
       }
-      if (hotMenu.getSourceDataAtRow(selection[0]).submenu) {
+      if (menu.hotMenu.getSourceDataAtRow(selection[0]).submenu) {
         menu.openSubMenu(selection[0]).getNavigator().toFirstItem();
       } else {
         menu.executeCommand(event);
@@ -83,9 +67,9 @@ function createDefaultShortcutsList(menu) {
   }, {
     keys: [['PageUp']],
     callback: () => {
-      const selection = hotMenu.getSelectedLast();
+      const selection = menu.hotMenu.getSelectedLast();
       if (selection) {
-        hotMenu.selection.transformStart(-hotMenu.countVisibleRows(), 0);
+        menu.hotMenu.selection.transformStart(-menu.hotMenu.countVisibleRows(), 0);
       } else {
         menu.getNavigator().toFirstItem();
       }
@@ -93,9 +77,9 @@ function createDefaultShortcutsList(menu) {
   }, {
     keys: [['PageDown']],
     callback: () => {
-      const selection = hotMenu.getSelectedLast();
+      const selection = menu.hotMenu.getSelectedLast();
       if (selection) {
-        hotMenu.selection.transformStart(hotMenu.countVisibleRows(), 0);
+        menu.hotMenu.selection.transformStart(menu.hotMenu.countVisibleRows(), 0);
       } else {
         menu.getNavigator().toLastItem();
       }

package/plugins/contextMenu/menu/defaultShortcutsList.mjs

@@ -5,26 +5,10 @@
  * @returns {KeyboardShortcut[]}
  */
 export function createDefaultShortcutsList(menu) {
-  const {
-    hot,
-    hotMenu
-  } = menu;
   return [{
-    keys: [['Control/Meta', 'A']],
-    forwardToContext: hot.getShortcutManager().getContext('grid'),
+    keys: [['Tab'], ['Shift', 'Tab'], ['Control/Meta', 'A']],
+    forwardToContext: menu.hot.getShortcutManager().getContext('grid'),
     callback: () => menu.close(true)
-  }, {
-    keys: [['Tab'], ['Shift', 'Tab']],
-    callback: (event, keys) => {
-      const settings = hot.getSettings();
-      const tabMoves = typeof settings.tabMoves === 'function' ? settings.tabMoves(event) : settings.tabMoves;
-      if (keys.includes('shift')) {
-        hot.selection.transformStart(-tabMoves.row, -tabMoves.col);
-      } else {
-        hot.selection.transformStart(tabMoves.row, tabMoves.col);
-      }
-      menu.close(true);
-    }
   }, {
     keys: [['Escape']],
     callback: () => menu.close()
@@ -37,7 +21,7 @@ export function createDefaultShortcutsList(menu) {
   }, {
     keys: [['ArrowRight']],
     callback: () => {
-      const selection = hotMenu.getSelectedLast();
+      const selection = menu.hotMenu.getSelectedLast();
       if (selection) {
         const subMenu = menu.openSubMenu(selection[0]);
         if (subMenu) {
@@ -48,7 +32,7 @@ export function createDefaultShortcutsList(menu) {
   }, {
     keys: [['ArrowLeft']],
     callback: () => {
-      const selection = hotMenu.getSelectedLast();
+      const selection = menu.hotMenu.getSelectedLast();
       if (selection && menu.isSubMenu()) {
         menu.close();
         if (menu.isSubMenu()) {
@@ -65,11 +49,11 @@ export function createDefaultShortcutsList(menu) {
   }, {
     keys: [['Enter'], ['Space']],
     callback: event => {
-      const selection = hotMenu.getSelectedLast();
+      const selection = menu.hotMenu.getSelectedLast();
       if (!selection) {
         return;
       }
-      if (hotMenu.getSourceDataAtRow(selection[0]).submenu) {
+      if (menu.hotMenu.getSourceDataAtRow(selection[0]).submenu) {
         menu.openSubMenu(selection[0]).getNavigator().toFirstItem();
       } else {
         menu.executeCommand(event);
@@ -79,9 +63,9 @@ export function createDefaultShortcutsList(menu) {
   }, {
     keys: [['PageUp']],
     callback: () => {
-      const selection = hotMenu.getSelectedLast();
+      const selection = menu.hotMenu.getSelectedLast();
       if (selection) {
-        hotMenu.selection.transformStart(-hotMenu.countVisibleRows(), 0);
+        menu.hotMenu.selection.transformStart(-menu.hotMenu.countVisibleRows(), 0);
       } else {
         menu.getNavigator().toFirstItem();
       }
@@ -89,9 +73,9 @@ export function createDefaultShortcutsList(menu) {
   }, {
     keys: [['PageDown']],
     callback: () => {
-      const selection = hotMenu.getSelectedLast();
+      const selection = menu.hotMenu.getSelectedLast();
       if (selection) {
-        hotMenu.selection.transformStart(hotMenu.countVisibleRows(), 0);
+        menu.hotMenu.selection.transformStart(menu.hotMenu.countVisibleRows(), 0);
       } else {
         menu.getNavigator().toLastItem();
       }

package/plugins/mergeCells/calculations/selection.js

@@ -36,6 +36,74 @@ class SelectionCalculations {
     this.hot = plugin.hot;
   }
 
+  /**
+   * "Snap" the delta value according to defined merged cells. (In other words, compensate the rowspan -
+   * e.g. Going up with `delta.row = -1` over a merged cell with `rowspan = 3`, `delta.row` should change to `-3`.).
+   *
+   * @param {object} delta The delta object containing `row` and `col` properties.
+   * @param {CellRange} selectionRange The selection range.
+   * @param {object} mergedCell A merged cell object.
+   */
+  snapDelta(delta, selectionRange, mergedCell) {
+    const cellCoords = selectionRange.to;
+    const newRow = cellCoords.row + delta.row;
+    const newColumn = cellCoords.col + delta.col;
+    if (delta.row) {
+      this.jumpOverMergedCell(delta, mergedCell, newRow);
+    } else if (delta.col) {
+      this.jumpOverMergedCell(delta, mergedCell, newColumn);
+    }
+  }
+
+  /**
+   * "Jump" over the merged cell (compensate for the indexes within the merged cell to get past it).
+   *
+   * @private
+   * @param {object} delta The delta object.
+   * @param {MergedCellCoords} mergedCell The merge cell object.
+   * @param {number} newIndex New row/column index, created with the delta.
+   */
+  jumpOverMergedCell(delta, mergedCell, newIndex) {
+    let flatDelta = delta.row || delta.col;
+    let includesIndex = null;
+    let firstIndex = null;
+    let lastIndex = null;
+    if (delta.row) {
+      includesIndex = mergedCell.includesVertically(newIndex);
+      firstIndex = mergedCell.row;
+      lastIndex = mergedCell.getLastRow();
+    } else if (delta.col) {
+      includesIndex = mergedCell.includesHorizontally(newIndex);
+      firstIndex = mergedCell.col;
+      lastIndex = mergedCell.getLastColumn();
+    }
+    if (flatDelta === 0) {
+      return;
+    } else if (flatDelta > 0) {
+      if (includesIndex && newIndex !== firstIndex) {
+        flatDelta += lastIndex - newIndex + 1;
+      }
+    } else if (includesIndex && newIndex !== lastIndex) {
+      flatDelta -= newIndex - firstIndex + 1;
+    }
+    if (delta.row) {
+      delta.row = flatDelta;
+    } else if (delta.col) {
+      delta.col = flatDelta;
+    }
+  }
+
+  /**
+   * Get a selection range with `to` property incremented by the provided delta.
+   *
+   * @param {CellRange} oldSelectionRange The base selection range.
+   * @param {object} delta The delta object with `row` and `col` properties.
+   * @returns {CellRange} A new `CellRange` object.
+   */
+  getUpdatedSelectionRange(oldSelectionRange, delta) {
+    return this.hot._createCellRange(oldSelectionRange.highlight, oldSelectionRange.from, this.hot._createCellCoords(oldSelectionRange.to.row + delta.row, oldSelectionRange.to.col + delta.col));
+  }
+
   /**
    * Generate an additional class name for the entirely-selected merged cells.
    *
@@ -68,7 +136,8 @@ class SelectionCalculations {
     const fullMergeAreaWithinSelection = startRow <= mergedCell.row && startColumn <= mergedCell.col && endRow >= mergeRowEnd && endColumn >= mergeColumnEnd;
     if (fullMergeAreaWithinSelection) {
       return `${this.fullySelectedMergedCellClassName}-${layerLevel}`;
-    } else if (this.isMergeCellFullySelected(mergedCell, this.plugin.hot.getSelectedRange())) {
+    } else if (this.plugin.selectionCalculations.isMergeCellFullySelected(mergedCell, this.plugin.hot.getSelectedRange())) {
+      // eslint-disable-line max-len
       return `${this.fullySelectedMergedCellClassName}-multiple`;
     }
   }

package/plugins/mergeCells/calculations/selection.mjs

@@ -33,6 +33,74 @@ class SelectionCalculations {
     this.hot = plugin.hot;
   }
 
+  /**
+   * "Snap" the delta value according to defined merged cells. (In other words, compensate the rowspan -
+   * e.g. Going up with `delta.row = -1` over a merged cell with `rowspan = 3`, `delta.row` should change to `-3`.).
+   *
+   * @param {object} delta The delta object containing `row` and `col` properties.
+   * @param {CellRange} selectionRange The selection range.
+   * @param {object} mergedCell A merged cell object.
+   */
+  snapDelta(delta, selectionRange, mergedCell) {
+    const cellCoords = selectionRange.to;
+    const newRow = cellCoords.row + delta.row;
+    const newColumn = cellCoords.col + delta.col;
+    if (delta.row) {
+      this.jumpOverMergedCell(delta, mergedCell, newRow);
+    } else if (delta.col) {
+      this.jumpOverMergedCell(delta, mergedCell, newColumn);
+    }
+  }
+
+  /**
+   * "Jump" over the merged cell (compensate for the indexes within the merged cell to get past it).
+   *
+   * @private
+   * @param {object} delta The delta object.
+   * @param {MergedCellCoords} mergedCell The merge cell object.
+   * @param {number} newIndex New row/column index, created with the delta.
+   */
+  jumpOverMergedCell(delta, mergedCell, newIndex) {
+    let flatDelta = delta.row || delta.col;
+    let includesIndex = null;
+    let firstIndex = null;
+    let lastIndex = null;
+    if (delta.row) {
+      includesIndex = mergedCell.includesVertically(newIndex);
+      firstIndex = mergedCell.row;
+      lastIndex = mergedCell.getLastRow();
+    } else if (delta.col) {
+      includesIndex = mergedCell.includesHorizontally(newIndex);
+      firstIndex = mergedCell.col;
+      lastIndex = mergedCell.getLastColumn();
+    }
+    if (flatDelta === 0) {
+      return;
+    } else if (flatDelta > 0) {
+      if (includesIndex && newIndex !== firstIndex) {
+        flatDelta += lastIndex - newIndex + 1;
+      }
+    } else if (includesIndex && newIndex !== lastIndex) {
+      flatDelta -= newIndex - firstIndex + 1;
+    }
+    if (delta.row) {
+      delta.row = flatDelta;
+    } else if (delta.col) {
+      delta.col = flatDelta;
+    }
+  }
+
+  /**
+   * Get a selection range with `to` property incremented by the provided delta.
+   *
+   * @param {CellRange} oldSelectionRange The base selection range.
+   * @param {object} delta The delta object with `row` and `col` properties.
+   * @returns {CellRange} A new `CellRange` object.
+   */
+  getUpdatedSelectionRange(oldSelectionRange, delta) {
+    return this.hot._createCellRange(oldSelectionRange.highlight, oldSelectionRange.from, this.hot._createCellCoords(oldSelectionRange.to.row + delta.row, oldSelectionRange.to.col + delta.col));
+  }
+
   /**
    * Generate an additional class name for the entirely-selected merged cells.
    *
@@ -65,7 +133,8 @@ class SelectionCalculations {
     const fullMergeAreaWithinSelection = startRow <= mergedCell.row && startColumn <= mergedCell.col && endRow >= mergeRowEnd && endColumn >= mergeColumnEnd;
     if (fullMergeAreaWithinSelection) {
       return `${this.fullySelectedMergedCellClassName}-${layerLevel}`;
-    } else if (this.isMergeCellFullySelected(mergedCell, this.plugin.hot.getSelectedRange())) {
+    } else if (this.plugin.selectionCalculations.isMergeCellFullySelected(mergedCell, this.plugin.hot.getSelectedRange())) {
+      // eslint-disable-line max-len
       return `${this.fullySelectedMergedCellClassName}-multiple`;
     }
   }