handsontable 13.1.0 → 14.0.0-next-d97b156-20231027

package/core.mjs

@@ -8,6 +8,7 @@ import { isMobileBrowser, isIpadOS } from "./helpers/browser.mjs";
 import EditorManager from "./editorManager.mjs";
 import EventManager from "./eventManager.mjs";
 import { deepClone, duckSchema, isObjectEqual, isObject, deepObjectSize, hasOwnProperty, createObjectPropListener, objectEach } from "./helpers/object.mjs";
+import { FocusManager } from "./focusManager.mjs";
 import { arrayMap, arrayEach, arrayReduce, getDifferenceOfArrays, stringToArray, pivot } from "./helpers/array.mjs";
 import { instanceToHTML } from "./utils/parseTable.mjs";
 import { getPlugin, getPluginsNames } from "./plugins/registry.mjs";
@@ -27,11 +28,21 @@ import { hasLanguageDictionary, getValidLanguageCode, getTranslatedPhrase } from
 import { warnUserAboutLanguageRegistration, normalizeLanguageCode } from "./i18n/utils.mjs";
 import { Selection } from "./selection/index.mjs";
 import { MetaManager, DynamicCellMetaMod, ExtendMetaPropertiesMod, replaceData } from "./dataMap/index.mjs";
+import { installFocusCatcher } from "./core/index.mjs";
 import { createUniqueMap } from "./utils/dataStructures/uniqueMap.mjs";
 import { createShortcutManager } from "./shortcuts/index.mjs";
-const SHORTCUTS_GROUP = 'gridDefault';
+import { registerAllShortcutContexts } from "./shortcutContexts/index.mjs";
 let activeGuid = null;
 
+/**
+ * Keeps the collection of the all Handsontable instances created on the same page. The
+ * list is then used to trigger the "afterUnlisten" hook when the "listen()" method was
+ * called on another instance.
+ *
+ * @type {Map<string, Core>}
+ */
+const foreignHotInstances = new Map();
+
 /**
  * A set of deprecated feature names.
  *
@@ -91,7 +102,8 @@ const deprecationWarns = new Set();
  * @param {boolean} [rootInstanceSymbol=false] Indicates if the instance is root of all later instances created.
  */
 export default function Core(rootElement, userSettings) {
-  var _userSettings$layoutD;
+  var _userSettings$layoutD,
+    _this = this;
   let rootInstanceSymbol = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   let preventScrollingToCell = false;
   let instance = this;
@@ -100,6 +112,7 @@ export default function Core(rootElement, userSettings) {
   let dataSource;
   let grid;
   let editorManager;
+  let focusManager;
   let firstRun = true;
   if (hasValidParameter(rootInstanceSymbol)) {
     registerAsRootInstance(this);
@@ -208,6 +221,8 @@ export default function Core(rootElement, userSettings) {
   }
   this.guid = `ht_${randomString()}`; // this is the namespace for global events
 
+  foreignHotInstances.set(this.guid, this);
+
   /**
    * Instance of index mapper which is responsible for managing the column indexes.
    *
@@ -256,14 +271,16 @@ export default function Core(rootElement, userSettings) {
   };
 
   let selection = new Selection(tableMeta, {
-    rowIndexMapper: () => instance.rowIndexMapper,
-    columnIndexMapper: () => instance.columnIndexMapper,
+    rowIndexMapper: instance.rowIndexMapper,
+    columnIndexMapper: instance.columnIndexMapper,
     countCols: () => instance.countCols(),
     countRows: () => instance.countRows(),
     propToCol: prop => datamap.propToCol(prop),
     isEditorOpened: () => instance.getActiveEditor() ? instance.getActiveEditor().isOpened() : false,
-    countColsTranslated: () => this.view.countRenderableColumns(),
-    countRowsTranslated: () => this.view.countRenderableRows(),
+    countRenderableColumns: () => this.view.countRenderableColumns(),
+    countRenderableRows: () => this.view.countRenderableRows(),
+    countRowHeaders: () => this.countRowHeaders(),
+    countColHeaders: () => this.countColHeaders(),
     getShortcutManager: () => instance.getShortcutManager(),
     createCellCoords: (row, column) => instance._createCellCoords(row, column),
     createCellRange: (highlight, from, to) => instance._createCellRange(highlight, from, to),
@@ -282,21 +299,6 @@ export default function Core(rootElement, userSettings) {
   };
   this.columnIndexMapper.addLocalHook('cacheUpdated', onIndexMapperCacheUpdate);
   this.rowIndexMapper.addLocalHook('cacheUpdated', onIndexMapperCacheUpdate);
-  this.selection.addLocalHook('beforeSetRangeStart', cellCoords => {
-    this.runHooks('beforeSetRangeStart', cellCoords);
-  });
-  this.selection.addLocalHook('beforeSetRangeStartOnly', cellCoords => {
-    this.runHooks('beforeSetRangeStartOnly', cellCoords);
-  });
-  this.selection.addLocalHook('beforeSetRangeEnd', cellCoords => {
-    this.runHooks('beforeSetRangeEnd', cellCoords);
-    if (cellCoords.row < 0) {
-      cellCoords.row = this.view._wt.wtTable.getFirstVisibleRow();
-    }
-    if (cellCoords.col < 0) {
-      cellCoords.col = this.view._wt.wtTable.getFirstVisibleColumn();
-    }
-  });
   this.selection.addLocalHook('afterSetRangeEnd', cellCoords => {
     const preventScrolling = createObjectPropListener(false);
     const selectionRange = this.selection.getSelectedRange();
@@ -308,8 +310,6 @@ export default function Core(rootElement, userSettings) {
     this.runHooks('afterSelection', from.row, from.col, to.row, to.col, preventScrolling, selectionLayerLevel);
     this.runHooks('afterSelectionByProp', from.row, instance.colToProp(from.col), to.row, instance.colToProp(to.col), preventScrolling, selectionLayerLevel); // eslint-disable-line max-len
 
-    const isSelectedByAnyHeader = this.selection.isSelectedByAnyHeader();
-    const currentSelectedRange = this.selection.selectedRange.current();
     let scrollToCell = true;
     if (preventScrollingToCell) {
       scrollToCell = false;
@@ -317,19 +317,42 @@ export default function Core(rootElement, userSettings) {
     if (preventScrolling.isTouched()) {
       scrollToCell = !preventScrolling.value;
     }
+    const currentSelectedRange = this.selection.selectedRange.current();
+    const isSelectedByAnyHeader = this.selection.isSelectedByAnyHeader();
     const isSelectedByRowHeader = this.selection.isSelectedByRowHeader();
     const isSelectedByColumnHeader = this.selection.isSelectedByColumnHeader();
     if (scrollToCell !== false) {
       if (!isSelectedByAnyHeader) {
         if (currentSelectedRange && !this.selection.isMultiple()) {
-          this.view.scrollViewport(visualToRenderableCoords(currentSelectedRange.from));
+          const {
+            row,
+            col
+          } = currentSelectedRange.from;
+          if (row < 0 && col >= 0) {
+            this.scrollViewportTo({
+              col
+            });
+          } else if (col < 0 && row >= 0) {
+            this.scrollViewportTo({
+              row
+            });
+          } else {
+            this.scrollViewportTo({
+              row,
+              col
+            });
+          }
         } else {
-          this.view.scrollViewport(visualToRenderableCoords(cellCoords));
+          this.scrollViewportTo(cellCoords.toObject());
         }
       } else if (isSelectedByRowHeader) {
-        this.view.scrollViewportVertically(instance.rowIndexMapper.getRenderableFromVisualIndex(cellCoords.row));
+        this.scrollViewportTo({
+          row: cellCoords.row
+        });
       } else if (isSelectedByColumnHeader) {
-        this.view.scrollViewportHorizontally(instance.columnIndexMapper.getRenderableFromVisualIndex(cellCoords.col));
+        this.scrollViewportTo({
+          col: cellCoords.col
+        });
       }
     }
 
@@ -364,30 +387,78 @@ export default function Core(rootElement, userSettings) {
       isMultiple.value = changedIsMultiple;
     }
   });
-  this.selection.addLocalHook('beforeModifyTransformStart', cellCoordsDelta => {
-    this.runHooks('modifyTransformStart', cellCoordsDelta);
-  });
-  this.selection.addLocalHook('afterModifyTransformStart', (coords, rowTransformDir, colTransformDir) => {
-    this.runHooks('afterModifyTransformStart', coords, rowTransformDir, colTransformDir);
-  });
-  this.selection.addLocalHook('beforeModifyTransformEnd', cellCoordsDelta => {
-    this.runHooks('modifyTransformEnd', cellCoordsDelta);
-  });
-  this.selection.addLocalHook('afterModifyTransformEnd', (coords, rowTransformDir, colTransformDir) => {
-    this.runHooks('afterModifyTransformEnd', coords, rowTransformDir, colTransformDir);
-  });
   this.selection.addLocalHook('afterDeselect', () => {
     editorManager.destroyEditor();
     this._refreshBorders();
     removeClass(this.rootElement, ['ht__selection--rows', 'ht__selection--columns']);
     this.runHooks('afterDeselect');
   });
-  this.selection.addLocalHook('insertRowRequire', totalRows => {
-    this.alter('insert_row_above', totalRows, 1, 'auto');
-  });
-  this.selection.addLocalHook('insertColRequire', totalCols => {
-    this.alter('insert_col_start', totalCols, 1, 'auto');
-  });
+  this.selection.addLocalHook('beforeHighlightSet', () => this.runHooks('beforeSelectionHighlightSet')).addLocalHook('beforeSetRangeStart', function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return _this.runHooks('beforeSetRangeStart', ...args);
+  }).addLocalHook('beforeSetRangeStartOnly', function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    return _this.runHooks('beforeSetRangeStartOnly', ...args);
+  }).addLocalHook('beforeSetRangeEnd', function () {
+    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      args[_key3] = arguments[_key3];
+    }
+    return _this.runHooks('beforeSetRangeEnd', ...args);
+  }).addLocalHook('beforeSelectColumns', function () {
+    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+      args[_key4] = arguments[_key4];
+    }
+    return _this.runHooks('beforeSelectColumns', ...args);
+  }).addLocalHook('afterSelectColumns', function () {
+    for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+      args[_key5] = arguments[_key5];
+    }
+    return _this.runHooks('afterSelectColumns', ...args);
+  }).addLocalHook('beforeSelectRows', function () {
+    for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+      args[_key6] = arguments[_key6];
+    }
+    return _this.runHooks('beforeSelectRows', ...args);
+  }).addLocalHook('afterSelectRows', function () {
+    for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
+      args[_key7] = arguments[_key7];
+    }
+    return _this.runHooks('afterSelectRows', ...args);
+  }).addLocalHook('beforeModifyTransformStart', function () {
+    for (var _len8 = arguments.length, args = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {
+      args[_key8] = arguments[_key8];
+    }
+    return _this.runHooks('modifyTransformStart', ...args);
+  }).addLocalHook('afterModifyTransformStart', function () {
+    for (var _len9 = arguments.length, args = new Array(_len9), _key9 = 0; _key9 < _len9; _key9++) {
+      args[_key9] = arguments[_key9];
+    }
+    return _this.runHooks('afterModifyTransformStart', ...args);
+  }).addLocalHook('beforeModifyTransformEnd', function () {
+    for (var _len10 = arguments.length, args = new Array(_len10), _key10 = 0; _key10 < _len10; _key10++) {
+      args[_key10] = arguments[_key10];
+    }
+    return _this.runHooks('modifyTransformEnd', ...args);
+  }).addLocalHook('afterModifyTransformEnd', function () {
+    for (var _len11 = arguments.length, args = new Array(_len11), _key11 = 0; _key11 < _len11; _key11++) {
+      args[_key11] = arguments[_key11];
+    }
+    return _this.runHooks('afterModifyTransformEnd', ...args);
+  }).addLocalHook('beforeRowWrap', function () {
+    for (var _len12 = arguments.length, args = new Array(_len12), _key12 = 0; _key12 < _len12; _key12++) {
+      args[_key12] = arguments[_key12];
+    }
+    return _this.runHooks('beforeRowWrap', ...args);
+  }).addLocalHook('beforeColumnWrap', function () {
+    for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
+      args[_key13] = arguments[_key13];
+    }
+    return _this.runHooks('beforeColumnWrap', ...args);
+  }).addLocalHook('insertRowRequire', totalRows => this.alter('insert_row_above', totalRows, 1, 'auto')).addLocalHook('insertColRequire', totalCols => this.alter('insert_col_start', totalCols, 1, 'auto'));
   grid = {
     /**
      * Inserts or removes rows and columns.
@@ -469,7 +540,9 @@ export default function Core(rootElement, userSettings) {
             const currentFromRow = currentFromRange === null || currentFromRange === void 0 ? void 0 : currentFromRange.row;
             const startVisualRowIndex = instance.toVisualRow(startRowPhysicalIndex);
             if (selection.isSelectedByCorner()) {
-              instance.selectAll();
+              selection.selectAll(true, true, {
+                disableHeadersHighlight: true
+              });
             } else if (isDefined(currentFromRow) && currentFromRow >= startVisualRowIndex) {
               // Moving the selection (if it exists) downward – it should be applied to the "old" row.
               // TODO: The logic here should be handled by selection module.
@@ -523,7 +596,9 @@ export default function Core(rootElement, userSettings) {
             const currentFromColumn = currentFromRange === null || currentFromRange === void 0 ? void 0 : currentFromRange.col;
             const startVisualColumnIndex = instance.toVisualColumn(startColumnPhysicalIndex);
             if (selection.isSelectedByCorner()) {
-              instance.selectAll();
+              selection.selectAll(true, true, {
+                disableHeadersHighlight: true
+              });
             } else if (isDefined(currentFromColumn) && currentFromColumn >= startVisualColumnIndex) {
               // Moving the selection (if it exists) rightward – it should be applied to the "old" column.
               // TODO: The logic here should be handled by selection module.
@@ -1013,6 +1088,10 @@ export default function Core(rootElement, userSettings) {
     this.updateSettings(tableMeta, true);
     this.view = new TableView(this);
     editorManager = EditorManager.getInstance(instance, tableMeta, selection);
+    focusManager = new FocusManager(instance);
+    if (isRootInstance(this)) {
+      installFocusCatcher(instance);
+    }
     instance.runHooks('init');
     this.forceFullRender = true; // used when data was changed
     this.view.render();
@@ -1426,6 +1505,11 @@ export default function Core(rootElement, userSettings) {
    */
   this.listen = function () {
     if (instance && !instance.isListening()) {
+      foreignHotInstances.forEach(foreignHot => {
+        if (instance !== foreignHot) {
+          foreignHot.unlisten();
+        }
+      });
       activeGuid = instance.guid;
       instance.runHooks('afterListen');
     }
@@ -1510,8 +1594,8 @@ export default function Core(rootElement, userSettings) {
    * @returns {Array} Returns removed portion of columns.
    */
   this.spliceCol = function (column, index, amount) {
-    for (var _len = arguments.length, elements = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
-      elements[_key - 3] = arguments[_key];
+    for (var _len14 = arguments.length, elements = new Array(_len14 > 3 ? _len14 - 3 : 0), _key14 = 3; _key14 < _len14; _key14++) {
+      elements[_key14 - 3] = arguments[_key14];
     }
     return datamap.spliceCol(column, index, amount, ...elements);
   };
@@ -1528,8 +1612,8 @@ export default function Core(rootElement, userSettings) {
    * @returns {Array} Returns removed portion of rows.
    */
   this.spliceRow = function (row, index, amount) {
-    for (var _len2 = arguments.length, elements = new Array(_len2 > 3 ? _len2 - 3 : 0), _key2 = 3; _key2 < _len2; _key2++) {
-      elements[_key2 - 3] = arguments[_key2];
+    for (var _len15 = arguments.length, elements = new Array(_len15 > 3 ? _len15 - 3 : 0), _key15 = 3; _key15 < _len15; _key15++) {
+      elements[_key15 - 3] = arguments[_key15];
     }
     return datamap.spliceRow(row, index, amount, ...elements);
   };
@@ -1626,6 +1710,9 @@ export default function Core(rootElement, userSettings) {
     }
     const changes = [];
     arrayEach(selection.getSelectedRange(), cellRange => {
+      if (cellRange.isSingleHeader()) {
+        return;
+      }
       const topStart = cellRange.getTopStartCorner();
       const bottomEnd = cellRange.getBottomEndCorner();
       rangeEach(topStart.row, bottomEnd.row, row => {
@@ -2923,8 +3010,8 @@ export default function Core(rootElement, userSettings) {
    */
   this.spliceCellsMeta = function (visualIndex) {
     let deleteAmount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    for (var _len3 = arguments.length, cellMetaRows = new Array(_len3 > 2 ? _len3 - 2 : 0), _key3 = 2; _key3 < _len3; _key3++) {
-      cellMetaRows[_key3 - 2] = arguments[_key3];
+    for (var _len16 = arguments.length, cellMetaRows = new Array(_len16 > 2 ? _len16 - 2 : 0), _key16 = 2; _key16 < _len16; _key16++) {
+      cellMetaRows[_key16 - 2] = arguments[_key16];
     }
     if (cellMetaRows.length > 0 && !Array.isArray(cellMetaRows[0])) {
       throw new Error('The 3rd argument (cellMetaRows) has to be passed as an array of cell meta objects array.');
@@ -3615,6 +3702,30 @@ export default function Core(rootElement, userSettings) {
     return instance.view._wt.drawn ? instance.view._wt.wtTable.getVisibleColumnsCount() : -1;
   };
 
+  /**
+   * Returns the number of rendered row headers.
+   *
+   * @since 14.0.0
+   * @memberof Core#
+   * @function countRowHeaders
+   * @returns {number} Number of row headers.
+   */
+  this.countRowHeaders = function () {
+    return this.view.getRowHeadersCount();
+  };
+
+  /**
+   * Returns the number of rendered column headers.
+   *
+   * @since 14.0.0
+   * @memberof Core#
+   * @function countColHeaders
+   * @returns {number} Number of column headers.
+   */
+  this.countColHeaders = function () {
+    return this.view.getColumnHeadersCount();
+  };
+
   /**
    * Returns the number of empty rows. If the optional ending parameter is `true`, returns the
    * number of empty rows at the bottom of the table.
@@ -3819,6 +3930,10 @@ export default function Core(rootElement, userSettings) {
    * hot.selectColumns('id');
    * // Select range of columns using visual indexes.
    * hot.selectColumns(1, 4);
+   * // Select range of columns using visual indexes and mark the first header as highlighted.
+   * hot.selectColumns(1, 2, -1);
+   * // Select range of columns using visual indexes and mark the second cell as highlighted.
+   * hot.selectColumns(2, 1, 1);
    * // Select range of columns using column properties.
    * hot.selectColumns('id', 'last_name');
    * ```
@@ -3829,11 +3944,15 @@ export default function Core(rootElement, userSettings) {
    * @param {number} startColumn The visual column index from which the selection starts.
    * @param {number} [endColumn=startColumn] The visual column index to which the selection finishes. If `endColumn`
    *                                         is not defined the column defined by `startColumn` will be selected.
+   * @param {number} [focusPosition=0] The argument allows changing the cell/header focus position.
+   *                                   The value can take visual row index from -N to N, where negative values
+   *                                   point to the headers and positive values point to the cell range.
    * @returns {boolean} `true` if selection was successful, `false` otherwise.
    */
   this.selectColumns = function (startColumn) {
     let endColumn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : startColumn;
-    return selection.selectColumns(startColumn, endColumn);
+    let focusPosition = arguments.length > 2 ? arguments[2] : undefined;
+    return selection.selectColumns(startColumn, endColumn, focusPosition);
   };
 
   /**
@@ -3843,8 +3962,12 @@ export default function Core(rootElement, userSettings) {
    * ```js
    * // Select row using visual index.
    * hot.selectRows(1);
-   * // Select range of rows using visual indexes.
+   * // select a range of rows, using visual indexes.
    * hot.selectRows(1, 4);
+   * // select a range of rows, using visual indexes, and mark the header as highlighted.
+   * hot.selectRows(1, 2, -1);
+   * // Select range of rows using visual indexes and mark the second cell as highlighted.
+   * hot.selectRows(2, 1, 1);
    * ```
    *
    * @memberof Core#
@@ -3853,11 +3976,15 @@ export default function Core(rootElement, userSettings) {
    * @param {number} startRow The visual row index from which the selection starts.
    * @param {number} [endRow=startRow] The visual row index to which the selection finishes. If `endRow`
    *                                   is not defined the row defined by `startRow` will be selected.
+   * @param {number} [focusPosition=0] The argument allows changing the cell/header focus position.
+   *                                   The value can take visual column index from -N to N, where negative values
+   *                                   point to the headers and positive values point to the cell range.
    * @returns {boolean} `true` if selection was successful, `false` otherwise.
    */
   this.selectRows = function (startRow) {
     let endRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : startRow;
-    return selection.selectRows(startRow, endRow);
+    let focusPosition = arguments.length > 2 ? arguments[2] : undefined;
+    return selection.selectRows(startRow, endRow, focusPosition);
   };
 
   /**
@@ -3876,9 +4003,16 @@ export default function Core(rootElement, userSettings) {
    * The previous selection is overwritten.
    *
    * ```js
-   * // select all cells in the table, including all headers
+   * // select all cells in the table, including all headers and the corner cell
    * hot.selectAll();
    *
+   * // select all cells in the table, including row headers but excluding the corner cell
+   * hot.selectAll(true, false);
+   *
+   * // select all cells in the table, including all headers and the corner cell, but move the focus
+   * // highlight to position -2, -1
+   * hot.selectAll(-2, -1);
+   *
    * // select all cells in the table, without headers
    * hot.selectAll(false);
    * ```
@@ -3886,15 +4020,25 @@ export default function Core(rootElement, userSettings) {
    * @since 0.38.2
    * @memberof Core#
    * @function selectAll
-   * @param {boolean} [includeHeaders=true] `true`: include all row, column and corner headers.
-   * `false`: don't include any headers.
+   * @param {boolean} [includeRowHeaders=false] `true` If the selection should include the row headers,
+   * `false` otherwise.
+   * @param {boolean} [includeColumnHeaders=false] `true` If the selection should include the column
+   * headers, `false` otherwise.
+   *
+   * @param {object} [options] Additional object with options.
+   * @param {{row: number, col: number} | boolean} [options.focusPosition] The argument allows changing the cell/header
+   * focus position. The value takes an object with a `row` and `col` properties from -N to N, where
+   * negative values point to the headers and positive values point to the cell range. If `false`, the focus
+   * position won't be changed.
+   * @param {boolean} [options.disableHeadersHighlight] If `true`, disables highlighting the headers even when
+   * the logical coordinates points on them.
    */
   this.selectAll = function () {
-    let includeHeaders = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-    const includeRowHeaders = includeHeaders && this.hasRowHeaders();
-    const includeColumnHeaders = includeHeaders && this.hasColHeaders();
+    let includeRowHeaders = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    let includeColumnHeaders = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : includeRowHeaders;
+    let options = arguments.length > 2 ? arguments[2] : undefined;
     preventScrollingToCell = true;
-    selection.selectAll(includeRowHeaders, includeColumnHeaders);
+    selection.selectAll(includeRowHeaders, includeColumnHeaders, options);
     preventScrollingToCell = false;
   };
   const getIndexToScroll = (indexMapper, visualIndex) => {
@@ -3903,55 +4047,117 @@ export default function Core(rootElement, userSettings) {
   };
 
   /**
-   * Scroll viewport to coordinates specified by the `row` and `column` arguments.
+   * Scroll viewport to coordinates specified by the `row` and/or `col` object properties.
+   *
+   * ```js
+   * // scroll the viewport to the visual row index (leave the horizontal scroll untouched)
+   * hot.scrollViewportTo({ row: 50 });
+   *
+   * // scroll the viewport to the passed coordinates so that the cell at 50, 50 will be snapped to
+   * // the bottom-end table's edge.
+   * hot.scrollViewportTo({
+   *   row: 50,
+   *   col: 50,
+   *   verticalSnap: 'bottom',
+   *   horizontalSnap: 'end',
+   * });
+   * ```
    *
    * @memberof Core#
    * @function scrollViewportTo
-   * @param {number} [row] Row index. If the last argument isn't defined we treat the index as a visual row index. Otherwise,
-   * we are using the index for numbering only this rows which may be rendered (we don't consider hidden rows).
-   * @param {number} [column] Column index. If the last argument isn't defined we treat the index as a visual column index.
-   * Otherwise, we are using the index for numbering only this columns which may be rendered (we don't consider hidden columns).
-   * @param {boolean} [snapToBottom=false] If `true`, the viewport is scrolled to show the cell at the bottom of the table.
-   * However, if the cell's height is greater than the table's viewport height, the cell is snapped to the top edge.
-   * @param {boolean} [snapToRight=false] If `true`, the viewport is scrolled to show the cell at the right side of the table.
-   * However, if the cell is wider than the table's viewport width, the cell is snapped to the left edge (or to the right edge, if the layout direction is set to `rtl`).
-   * @param {boolean} [considerHiddenIndexes=true] If `true`, we handle visual indexes, otherwise we handle only indexes which
+   * @param {object} options A dictionary containing the following parameters:
+   * @param {number} [options.row] Specifies the number of visual rows along the Y axis to scroll the viewport.
+   * @param {number} [options.col] Specifies the number of visual columns along the X axis to scroll the viewport.
+   * @param {'top' | 'bottom'} [options.verticalSnap] Determines to which edge of the table the viewport will be scrolled based on the passed coordinates.
+   * This option is a string which must take one of the following values:
+   * - `top`: The viewport will be scrolled to a row in such a way that it will be positioned on the top of the viewport;
+   * - `bottom`: The viewport will be scrolled to a row in such a way that it will be positioned on the bottom of the viewport;
+   * - If the property is not defined the vertical auto-snapping is enabled. Depending on where the viewport is scrolled from, a row will
+   * be positioned at the top or bottom of the viewport.
+   * @param {'start' | 'end'} [options.horizontalSnap] Determines to which edge of the table the viewport will be scrolled based on the passed coordinates.
+   * This option is a string which must take one of the following values:
+   * - `start`: The viewport will be scrolled to a column in such a way that it will be positioned on the start (left edge or right, if the layout direction is set to `rtl`) of the viewport;
+   * - `end`: The viewport will be scrolled to a column in such a way that it will be positioned on the end (right edge or left, if the layout direction is set to `rtl`) of the viewport;
+   * - If the property is not defined the horizontal auto-snapping is enabled. Depending on where the viewport is scrolled from, a column will
+   * be positioned at the start or end of the viewport.
+   * @param {boolean} [options.considerHiddenIndexes=true] If `true`, we handle visual indexes, otherwise we handle only indexes which
    * may be rendered when they are in the viewport (we don't consider hidden indexes as they aren't rendered).
-   * @returns {boolean} `true` if scroll was successful, `false` otherwise.
-   */
-  this.scrollViewportTo = function (row, column) {
-    let snapToBottom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    let snapToRight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-    let considerHiddenIndexes = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
-    const snapToTop = !snapToBottom;
-    const snapToLeft = !snapToRight;
+   * @returns {boolean} `true` if viewport was scrolled, `false` otherwise.
+   */
+  this.scrollViewportTo = function () {
+    let {
+      row,
+      col,
+      verticalSnap,
+      horizontalSnap,
+      considerHiddenIndexes
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let snapToTop;
+    let snapToBottom;
+    let snapToInlineStart;
+    let snapToInlineEnd;
+    if (verticalSnap !== undefined) {
+      snapToTop = verticalSnap === 'top';
+      snapToBottom = !snapToTop;
+    }
+    if (horizontalSnap !== undefined) {
+      snapToInlineStart = horizontalSnap === 'start';
+      snapToInlineEnd = !snapToInlineStart;
+    }
     let renderableRow = row;
-    let renderableColumn = column;
-    if (considerHiddenIndexes) {
-      const isRowInteger = Number.isInteger(row);
-      const isColumnInteger = Number.isInteger(column);
-      const visualRowToScroll = isRowInteger ? getIndexToScroll(this.rowIndexMapper, row) : void 0;
-      const visualColumnToScroll = isColumnInteger ? getIndexToScroll(this.columnIndexMapper, column) : void 0;
+    let renderableColumn = col;
+    if (considerHiddenIndexes === undefined || considerHiddenIndexes) {
+      const isValidRowGrid = Number.isInteger(row) && row >= 0;
+      const isValidColumnGrid = Number.isInteger(col) && col >= 0;
+      const visualRowToScroll = isValidRowGrid ? getIndexToScroll(this.rowIndexMapper, row) : undefined;
+      const visualColumnToScroll = isValidColumnGrid ? getIndexToScroll(this.columnIndexMapper, col) : undefined;
       if (visualRowToScroll === null || visualColumnToScroll === null) {
         return false;
       }
-      renderableRow = isRowInteger ? instance.rowIndexMapper.getRenderableFromVisualIndex(visualRowToScroll) : void 0;
-      renderableColumn = isColumnInteger ? instance.columnIndexMapper.getRenderableFromVisualIndex(visualColumnToScroll) : void 0;
+      renderableRow = isValidRowGrid ? instance.rowIndexMapper.getRenderableFromVisualIndex(visualRowToScroll) : row;
+      renderableColumn = isValidColumnGrid ? instance.columnIndexMapper.getRenderableFromVisualIndex(visualColumnToScroll) : col;
     }
     const isRowInteger = Number.isInteger(renderableRow);
     const isColumnInteger = Number.isInteger(renderableColumn);
-    if (isRowInteger && isColumnInteger) {
-      return instance.view.scrollViewport(instance._createCellCoords(renderableRow, renderableColumn), snapToTop, snapToRight, snapToBottom, snapToLeft);
+    if (isRowInteger && renderableRow >= 0 && isColumnInteger && renderableColumn >= 0) {
+      return instance.view.scrollViewport(instance._createCellCoords(renderableRow, renderableColumn), snapToTop, snapToInlineEnd, snapToBottom, snapToInlineStart);
     }
-    if (isRowInteger && isColumnInteger === false) {
+    if (isRowInteger && renderableRow >= 0 && (isColumnInteger && renderableColumn < 0 || !isColumnInteger)) {
       return instance.view.scrollViewportVertically(renderableRow, snapToTop, snapToBottom);
     }
-    if (isColumnInteger && isRowInteger === false) {
-      return instance.view.scrollViewportHorizontally(renderableColumn, snapToRight, snapToLeft);
+    if (isColumnInteger && renderableColumn >= 0 && (isRowInteger && renderableRow < 0 || !isRowInteger)) {
+      return instance.view.scrollViewportHorizontally(renderableColumn, snapToInlineEnd, snapToInlineStart);
     }
     return false;
   };
 
+  /**
+   * Scrolls the viewport to coordinates specified by the currently focused cell.
+   *
+   * @since 14.0.0
+   * @memberof Core#
+   * @fires Hooks#afterScroll
+   * @function scrollToFocusedCell
+   * @param {Function} callback The callback function to call after the viewport is scrolled.
+   */
+  this.scrollToFocusedCell = function () {
+    let callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : () => {};
+    if (!this.selection.isSelected()) {
+      return;
+    }
+    this.addHookOnce('afterScroll', callback);
+    const {
+      highlight
+    } = this.getSelectedRangeLast();
+    const isScrolled = this.scrollViewportTo(highlight.toObject());
+    if (isScrolled) {
+      this.view.render();
+    } else {
+      this.removeHook('afterScroll', callback);
+      this._registerImmediate(() => callback());
+    }
+  };
+
   /**
    * Removes the table from the DOM and destroys the instance of the Handsontable.
    *
@@ -3972,6 +4178,7 @@ export default function Core(rootElement, userSettings) {
     dataSource = null;
     this.getShortcutManager().destroy();
     metaManager.clearCache();
+    foreignHotInstances.delete(this.guid);
     if (isRootInstance(instance)) {
       const licenseInfo = this.rootDocument.querySelector('.hot-display-license-info');
       if (licenseInfo) {
@@ -4196,7 +4403,7 @@ export default function Core(rootElement, userSettings) {
    * @function getTranslatedPhrase
    * @since 0.35.0
    * @param {string} dictionaryKey Constant which is dictionary key.
-   * @param {*} extraArguments Arguments which will be handled by formatters.
+   * @param {*} [extraArguments] Arguments which will be handled by formatters.
    * @returns {string}
    */
   this.getTranslatedPhrase = function (dictionaryKey, extraArguments) {
@@ -4295,6 +4502,16 @@ export default function Core(rootElement, userSettings) {
     }
   };
 
+  /**
+   * Gets the instance of the EditorManager.
+   *
+   * @private
+   * @returns {EditorManager}
+   */
+  this._getEditorManager = function () {
+    return editorManager;
+  };
+
   /**
    * Check if currently it is RTL direction.
    *
@@ -4331,10 +4548,8 @@ export default function Core(rootElement, userSettings) {
     return instance.isLtr() ? 1 : -1;
   };
   const shortcutManager = createShortcutManager({
-    handleEvent(event) {
-      const isListening = instance.isListening();
-      const isKeyboardEventWithKey = (event === null || event === void 0 ? void 0 : event.key) !== void 0;
-      return isListening && isKeyboardEventWithKey;
+    handleEvent() {
+      return instance.isListening();
     },
     beforeKeyDown: event => {
       return this.runHooks('beforeKeyDown', event);
@@ -4367,270 +4582,23 @@ export default function Core(rootElement, userSettings) {
   this.getShortcutManager = function () {
     return shortcutManager;
   };
-  const gridContext = shortcutManager.addContext('grid');
-  const gridConfig = {
-    runOnlyIf: () => {
-      return isDefined(instance.getSelected()) && instance.countRenderedRows() > 0 && instance.countRenderedCols() > 0;
-    },
-    group: SHORTCUTS_GROUP
+
+  /**
+   * Return the Focus Manager responsible for managing the browser's focus in the table.
+   *
+   * @memberof Core#
+   * @since 14.0.0
+   * @function getFocusManager
+   * @returns {FocusManager}
+   */
+  this.getFocusManager = function () {
+    return focusManager;
   };
-  shortcutManager.setActiveContextName('grid');
-  gridContext.addShortcuts([{
-    keys: [['Control/Meta', 'A']],
-    callback: () => {
-      instance.selectAll();
-    }
-  }, {
-    keys: [['Control/Meta', 'Enter']],
-    callback: () => {
-      const selectedRange = instance.getSelectedRange();
-      const {
-        row: highlightRow,
-        col: highlightColumn
-      } = selectedRange[selectedRange.length - 1].highlight;
-      const valueToPopulate = instance.getDataAtCell(highlightRow, highlightColumn);
-      const cellValues = new Map();
-      for (let i = 0; i < selectedRange.length; i++) {
-        selectedRange[i].forAll((row, column) => {
-          if (row >= 0 && column >= 0 && (row !== highlightRow || column !== highlightColumn)) {
-            const {
-              readOnly
-            } = instance.getCellMeta(row, column);
-            if (!readOnly) {
-              cellValues.set(`${row}x${column}`, [row, column, valueToPopulate]);
-            }
-          }
-        });
-      }
-      instance.setDataAtCell(Array.from(cellValues.values()));
-    },
-    runOnlyIf: () => instance.getSelectedRangeLast().getCellsCount() > 1
-  }, {
-    keys: [['ArrowUp']],
-    callback: () => {
-      selection.transformStart(-1, 0);
-    }
-  }, {
-    keys: [['ArrowUp', 'Control/Meta']],
-    captureCtrl: true,
-    callback: () => {
-      selection.setRangeStart(instance._createCellCoords(instance.rowIndexMapper.getNearestNotHiddenIndex(0, 1), instance.getSelectedRangeLast().highlight.col));
-    }
-  }, {
-    keys: [['ArrowUp', 'Shift']],
-    callback: () => {
-      selection.transformEnd(-1, 0);
-    }
-  }, {
-    keys: [['ArrowUp', 'Shift', 'Control/Meta']],
-    captureCtrl: true,
-    callback: () => {
-      const {
-        from,
-        to
-      } = instance.getSelectedRangeLast();
-      const row = instance.rowIndexMapper.getNearestNotHiddenIndex(0, 1);
-      selection.setRangeStart(from.clone());
-      selection.setRangeEnd(instance._createCellCoords(row, to.col));
-    },
-    runOnlyIf: () => !(instance.selection.isSelectedByCorner() || instance.selection.isSelectedByColumnHeader())
-  }, {
-    keys: [['ArrowDown']],
-    callback: () => {
-      selection.transformStart(1, 0);
-    }
-  }, {
-    keys: [['ArrowDown', 'Control/Meta']],
-    captureCtrl: true,
-    callback: () => {
-      selection.setRangeStart(instance._createCellCoords(instance.rowIndexMapper.getNearestNotHiddenIndex(instance.countRows() - 1, -1), instance.getSelectedRangeLast().highlight.col));
-    }
-  }, {
-    keys: [['ArrowDown', 'Shift']],
-    callback: () => {
-      selection.transformEnd(1, 0);
-    }
-  }, {
-    keys: [['ArrowDown', 'Shift', 'Control/Meta']],
-    captureCtrl: true,
-    callback: () => {
-      const {
-        from,
-        to
-      } = instance.getSelectedRangeLast();
-      const row = instance.rowIndexMapper.getNearestNotHiddenIndex(instance.countRows() - 1, -1);
-      selection.setRangeStart(from.clone());
-      selection.setRangeEnd(instance._createCellCoords(row, to.col));
-    },
-    runOnlyIf: () => !(instance.selection.isSelectedByCorner() || instance.selection.isSelectedByColumnHeader())
-  }, {
-    keys: [['ArrowLeft']],
-    callback: () => {
-      selection.transformStart(0, -1 * instance.getDirectionFactor());
-    }
-  }, {
-    keys: [['ArrowLeft', 'Control/Meta']],
-    captureCtrl: true,
-    callback: () => {
-      const row = instance.getSelectedRangeLast().highlight.row;
-      const column = instance.columnIndexMapper.getNearestNotHiddenIndex(...(instance.isRtl() ? [instance.countCols() - 1, -1] : [0, 1]));
-      selection.setRangeStart(instance._createCellCoords(row, column));
-    }
-  }, {
-    keys: [['ArrowLeft', 'Shift']],
-    callback: () => {
-      selection.transformEnd(0, -1 * instance.getDirectionFactor());
-    }
-  }, {
-    keys: [['ArrowLeft', 'Shift', 'Control/Meta']],
-    captureCtrl: true,
-    callback: () => {
-      const {
-        from,
-        to
-      } = instance.getSelectedRangeLast();
-      const column = instance.columnIndexMapper.getNearestNotHiddenIndex(...(instance.isRtl() ? [instance.countCols() - 1, -1] : [0, 1]));
-      selection.setRangeStart(from.clone());
-      selection.setRangeEnd(instance._createCellCoords(to.row, column));
-    },
-    runOnlyIf: () => !(instance.selection.isSelectedByCorner() || instance.selection.isSelectedByRowHeader())
-  }, {
-    keys: [['ArrowRight']],
-    callback: () => {
-      selection.transformStart(0, instance.getDirectionFactor());
-    }
-  }, {
-    keys: [['ArrowRight', 'Control/Meta']],
-    captureCtrl: true,
-    callback: () => {
-      const row = instance.getSelectedRangeLast().highlight.row;
-      const column = instance.columnIndexMapper.getNearestNotHiddenIndex(...(instance.isRtl() ? [0, 1] : [instance.countCols() - 1, -1]));
-      selection.setRangeStart(instance._createCellCoords(row, column));
-    }
-  }, {
-    keys: [['ArrowRight', 'Shift']],
-    callback: () => {
-      selection.transformEnd(0, instance.getDirectionFactor());
-    }
-  }, {
-    keys: [['ArrowRight', 'Shift', 'Control/Meta']],
-    captureCtrl: true,
-    callback: () => {
-      const {
-        from,
-        to
-      } = instance.getSelectedRangeLast();
-      const column = instance.columnIndexMapper.getNearestNotHiddenIndex(...(instance.isRtl() ? [0, 1] : [instance.countCols() - 1, -1]));
-      selection.setRangeStart(from.clone());
-      selection.setRangeEnd(instance._createCellCoords(to.row, column));
-    },
-    runOnlyIf: () => !(instance.selection.isSelectedByCorner() || instance.selection.isSelectedByRowHeader())
-  }, {
-    keys: [['Home']],
-    captureCtrl: true,
-    callback: () => {
-      const fixedColumns = parseInt(instance.getSettings().fixedColumnsStart, 10);
-      const row = instance.getSelectedRangeLast().highlight.row;
-      const column = instance.columnIndexMapper.getNearestNotHiddenIndex(fixedColumns, 1);
-      selection.setRangeStart(instance._createCellCoords(row, column));
-    },
-    runOnlyIf: () => instance.view.isMainTableNotFullyCoveredByOverlays()
-  }, {
-    keys: [['Home', 'Shift']],
-    callback: () => {
-      selection.setRangeEnd(instance._createCellCoords(selection.selectedRange.current().from.row, instance.columnIndexMapper.getNearestNotHiddenIndex(0, 1)));
-    }
-  }, {
-    keys: [['Home', 'Control/Meta']],
-    captureCtrl: true,
-    callback: () => {
-      const fixedRows = parseInt(instance.getSettings().fixedRowsTop, 10);
-      const fixedColumns = parseInt(instance.getSettings().fixedColumnsStart, 10);
-      const row = instance.rowIndexMapper.getNearestNotHiddenIndex(fixedRows, 1);
-      const column = instance.columnIndexMapper.getNearestNotHiddenIndex(fixedColumns, 1);
-      selection.setRangeStart(instance._createCellCoords(row, column));
-    },
-    runOnlyIf: () => instance.view.isMainTableNotFullyCoveredByOverlays()
-  }, {
-    keys: [['End']],
-    captureCtrl: true,
-    callback: () => {
-      selection.setRangeStart(instance._createCellCoords(instance.getSelectedRangeLast().highlight.row, instance.columnIndexMapper.getNearestNotHiddenIndex(instance.countCols() - 1, -1)));
-    },
-    runOnlyIf: () => instance.view.isMainTableNotFullyCoveredByOverlays()
-  }, {
-    keys: [['End', 'Shift']],
-    callback: () => {
-      selection.setRangeEnd(instance._createCellCoords(selection.selectedRange.current().from.row, instance.columnIndexMapper.getNearestNotHiddenIndex(instance.countCols() - 1, -1)));
-    }
-  }, {
-    keys: [['End', 'Control/Meta']],
-    captureCtrl: true,
-    callback: () => {
-      const fixedRows = parseInt(instance.getSettings().fixedRowsBottom, 10);
-      const row = instance.rowIndexMapper.getNearestNotHiddenIndex(instance.countRows() - fixedRows - 1, -1);
-      const column = instance.columnIndexMapper.getNearestNotHiddenIndex(instance.countCols() - 1, -1);
-      selection.setRangeStart(instance._createCellCoords(row, column));
-    },
-    runOnlyIf: () => instance.view.isMainTableNotFullyCoveredByOverlays()
-  }, {
-    keys: [['PageUp']],
-    callback: () => {
-      selection.transformStart(-instance.countVisibleRows(), 0);
-    }
-  }, {
-    keys: [['PageUp', 'Shift']],
-    callback: () => {
-      const {
-        to
-      } = instance.getSelectedRangeLast();
-      const nextRowIndexToSelect = Math.max(to.row - instance.countVisibleRows(), 0);
-      const row = instance.rowIndexMapper.getNearestNotHiddenIndex(nextRowIndexToSelect, 1);
-      if (row !== null) {
-        const coords = instance._createCellCoords(row, to.col);
-        const scrollPadding = to.row - instance.view.getFirstFullyVisibleRow();
-        const nextVerticalScroll = Math.max(coords.row - scrollPadding, 0);
-        selection.setRangeEnd(coords);
-        instance.scrollViewportTo(nextVerticalScroll);
-      }
-    }
-  }, {
-    keys: [['PageDown']],
-    callback: () => {
-      selection.transformStart(instance.countVisibleRows(), 0);
-    }
-  }, {
-    keys: [['PageDown', 'Shift']],
-    callback: () => {
-      const {
-        to
-      } = instance.getSelectedRangeLast();
-      const nextRowIndexToSelect = Math.min(to.row + instance.countVisibleRows(), instance.countRows() - 1);
-      const row = instance.rowIndexMapper.getNearestNotHiddenIndex(nextRowIndexToSelect, -1);
-      if (row !== null) {
-        const coords = instance._createCellCoords(row, to.col);
-        const scrollPadding = to.row - instance.view.getFirstFullyVisibleRow();
-        const nextVerticalScroll = Math.min(coords.row - scrollPadding, instance.countRows() - 1);
-        selection.setRangeEnd(coords);
-        instance.scrollViewportTo(nextVerticalScroll);
-      }
-    }
-  }, {
-    keys: [['Tab']],
-    callback: event => {
-      const tabMoves = typeof tableMeta.tabMoves === 'function' ? tableMeta.tabMoves(event) : tableMeta.tabMoves;
-      selection.transformStart(tabMoves.row, tabMoves.col, true);
-    }
-  }, {
-    keys: [['Shift', 'Tab']],
-    callback: event => {
-      const tabMoves = typeof tableMeta.tabMoves === 'function' ? tableMeta.tabMoves(event) : tableMeta.tabMoves;
-      selection.transformStart(-tabMoves.row, -tabMoves.col);
-    }
-  }], gridConfig);
   getPluginsNames().forEach(pluginName => {
     const PluginClass = getPlugin(pluginName);
     pluginsRegistry.addItem(pluginName, new PluginClass(this));
   });
+  registerAllShortcutContexts(instance);
+  shortcutManager.setActiveContextName('grid');
   Hooks.getSingleton().run(instance, 'construct');
 }