handsontable 0.0.0-next-e697250-20230629 → 0.0.0-next-b02b3d1-20230710

package/base.js

@@ -44,8 +44,8 @@ Handsontable.hooks = _pluginHooks.default.getSingleton();
 Handsontable.CellCoords = _src.CellCoords;
 Handsontable.CellRange = _src.CellRange;
 Handsontable.packageName = 'handsontable';
-Handsontable.buildDate = "29/06/2023 12:29:38";
-Handsontable.version = "0.0.0-next-e697250-20230629";
+Handsontable.buildDate = "10/07/2023 08:56:32";
+Handsontable.version = "0.0.0-next-b02b3d1-20230710";
 Handsontable.languages = {
   dictionaryKeys: _registry.dictionaryKeys,
   getLanguageDictionary: _registry.getLanguageDictionary,

package/base.mjs

@@ -35,8 +35,8 @@ Handsontable.hooks = Hooks.getSingleton();
 Handsontable.CellCoords = CellCoords;
 Handsontable.CellRange = CellRange;
 Handsontable.packageName = 'handsontable';
-Handsontable.buildDate = "29/06/2023 12:29:52";
-Handsontable.version = "0.0.0-next-e697250-20230629";
+Handsontable.buildDate = "10/07/2023 08:56:52";
+Handsontable.version = "0.0.0-next-b02b3d1-20230710";
 Handsontable.languages = {
   dictionaryKeys: dictionaryKeys,
   getLanguageDictionary: getLanguageDictionary,

package/core/focusCatcher/focusDetector.js

@@ -0,0 +1,62 @@
+"use strict";
+
+exports.__esModule = true;
+exports.installFocusDetector = installFocusDetector;
+/**
+ * Installs a focus detector module. The module appends two input elements into the DOM side by side.
+ * When the first input is focused, then it means that a user entered to the component using the TAB key
+ * from the element above. When the second input is focused, a user enters to the component from
+ * the element below the table. Each action, once detected, triggers the specific hook.
+ *
+ * @param {Handsontable} hot The Handsontable instance.
+ * @param {{ onFocusFromTop: Function, onFocusFromBottom: Function }} hooks An object with defined callbacks to call.
+ * @returns {{ activate: Function, deactivate: Function }}
+ */
+function installFocusDetector(hot) {
+  var hooks = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var rootDocument = hot.rootDocument;
+  var rootElement = hot.rootElement;
+  var inputTrapTop = createInputElement(rootDocument);
+  var inputTrapBottom = createInputElement(rootDocument);
+  inputTrapTop.addEventListener('focus', function () {
+    return hooks === null || hooks === void 0 ? void 0 : hooks.onFocusFromTop();
+  });
+  inputTrapBottom.addEventListener('focus', function () {
+    return hooks === null || hooks === void 0 ? void 0 : hooks.onFocusFromBottom();
+  });
+  rootElement.firstChild.before(inputTrapTop);
+  rootElement.lastChild.after(inputTrapBottom);
+  return {
+    /**
+     * Activates the detector by resetting the tabIndex of the input elements.
+     */
+    activate: function activate() {
+      hot._registerTimeout(function () {
+        inputTrapTop.tabIndex = 0;
+        inputTrapBottom.tabIndex = 0;
+      }, 10);
+    },
+    /**
+     * Deactivates the detector by setting tabIndex to -1.
+     */
+    deactivate: function deactivate() {
+      hot._registerTimeout(function () {
+        inputTrapTop.tabIndex = -1;
+        inputTrapBottom.tabIndex = -1;
+      }, 10);
+    }
+  };
+}
+
+/**
+ * Creates a new HTML input element.
+ *
+ * @param {Document} rootDocument The owner document element.
+ * @returns {HTMLInputElement}
+ */
+function createInputElement(rootDocument) {
+  var input = rootDocument.createElement('input');
+  input.type = 'text';
+  input.classList.add('htFocusCatcher');
+  return input;
+}

package/core/focusCatcher/focusDetector.mjs

@@ -0,0 +1,58 @@
+/**
+ * Installs a focus detector module. The module appends two input elements into the DOM side by side.
+ * When the first input is focused, then it means that a user entered to the component using the TAB key
+ * from the element above. When the second input is focused, a user enters to the component from
+ * the element below the table. Each action, once detected, triggers the specific hook.
+ *
+ * @param {Handsontable} hot The Handsontable instance.
+ * @param {{ onFocusFromTop: Function, onFocusFromBottom: Function }} hooks An object with defined callbacks to call.
+ * @returns {{ activate: Function, deactivate: Function }}
+ */
+export function installFocusDetector(hot) {
+  var hooks = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var rootDocument = hot.rootDocument;
+  var rootElement = hot.rootElement;
+  var inputTrapTop = createInputElement(rootDocument);
+  var inputTrapBottom = createInputElement(rootDocument);
+  inputTrapTop.addEventListener('focus', function () {
+    return hooks === null || hooks === void 0 ? void 0 : hooks.onFocusFromTop();
+  });
+  inputTrapBottom.addEventListener('focus', function () {
+    return hooks === null || hooks === void 0 ? void 0 : hooks.onFocusFromBottom();
+  });
+  rootElement.firstChild.before(inputTrapTop);
+  rootElement.lastChild.after(inputTrapBottom);
+  return {
+    /**
+     * Activates the detector by resetting the tabIndex of the input elements.
+     */
+    activate: function activate() {
+      hot._registerTimeout(function () {
+        inputTrapTop.tabIndex = 0;
+        inputTrapBottom.tabIndex = 0;
+      }, 10);
+    },
+    /**
+     * Deactivates the detector by setting tabIndex to -1.
+     */
+    deactivate: function deactivate() {
+      hot._registerTimeout(function () {
+        inputTrapTop.tabIndex = -1;
+        inputTrapBottom.tabIndex = -1;
+      }, 10);
+    }
+  };
+}
+
+/**
+ * Creates a new HTML input element.
+ *
+ * @param {Document} rootDocument The owner document element.
+ * @returns {HTMLInputElement}
+ */
+function createInputElement(rootDocument) {
+  var input = rootDocument.createElement('input');
+  input.type = 'text';
+  input.classList.add('htFocusCatcher');
+  return input;
+}

package/core/focusCatcher/index.js

@@ -0,0 +1,133 @@
+"use strict";
+
+exports.__esModule = true;
+exports.installFocusCatcher = installFocusCatcher;
+var _shortcutContexts = require("../../shortcutContexts");
+var _focusDetector = require("./focusDetector");
+/**
+ * Installs a focus catcher module. The module observes when the table is focused and depending on
+ * from the which side it was focused on it selects a specified cell or releases the TAB navigation
+ * to the browser.
+ *
+ * @param {Core} hot The Handsontable instance.
+ */
+function installFocusCatcher(hot) {
+  var recentlyAddedFocusCoords;
+  var _installFocusDetector = (0, _focusDetector.installFocusDetector)(hot, {
+      onFocusFromTop: function onFocusFromTop() {
+        var _recentlyAddedFocusCo;
+        var mostTopStartCoords = (_recentlyAddedFocusCo = recentlyAddedFocusCoords) !== null && _recentlyAddedFocusCo !== void 0 ? _recentlyAddedFocusCo : getMostTopStartPosition(hot);
+        if (mostTopStartCoords) {
+          hot.runHooks('modifyFocusOnTabNavigation', 'from_above', mostTopStartCoords);
+          hot.selectCell(mostTopStartCoords.row, mostTopStartCoords.col);
+        }
+        hot.listen();
+      },
+      onFocusFromBottom: function onFocusFromBottom() {
+        var _recentlyAddedFocusCo2;
+        var mostBottomEndCoords = (_recentlyAddedFocusCo2 = recentlyAddedFocusCoords) !== null && _recentlyAddedFocusCo2 !== void 0 ? _recentlyAddedFocusCo2 : getMostBottomEndPosition(hot);
+        if (mostBottomEndCoords) {
+          hot.runHooks('modifyFocusOnTabNavigation', 'from_below', mostBottomEndCoords);
+          hot.selectCell(mostBottomEndCoords.row, mostBottomEndCoords.col);
+        }
+        hot.listen();
+      }
+    }),
+    activate = _installFocusDetector.activate,
+    deactivate = _installFocusDetector.deactivate;
+  hot.addHook('afterListen', function () {
+    return deactivate();
+  });
+  hot.addHook('afterUnlisten', function () {
+    return activate();
+  });
+  hot.addHook('afterSelection', function () {
+    var _hot$getSelectedRange;
+    recentlyAddedFocusCoords = (_hot$getSelectedRange = hot.getSelectedRangeLast()) === null || _hot$getSelectedRange === void 0 ? void 0 : _hot$getSelectedRange.highlight;
+  });
+  hot.getShortcutManager().getContext('grid').addShortcut({
+    keys: [['Tab'], ['Shift', 'Tab']],
+    callback: function callback(event) {
+      var _hot$getSelectedRange2;
+      var _hot$getSettings = hot.getSettings(),
+        disableTabNavigation = _hot$getSettings.disableTabNavigation,
+        autoWrapRow = _hot$getSettings.autoWrapRow;
+      if (disableTabNavigation) {
+        hot.deselectCell();
+        hot.unlisten();
+        return false;
+      }
+      var isSelected = hot.selection.isSelected();
+      var highlight = (_hot$getSelectedRange2 = hot.getSelectedRangeLast()) === null || _hot$getSelectedRange2 === void 0 ? void 0 : _hot$getSelectedRange2.highlight;
+      var mostTopStartCoords = getMostTopStartPosition(hot);
+      var mostBottomEndCoords = getMostBottomEndPosition(hot);
+
+      // For disabled `autoWrapRow` option set the row to the same position as the currently selected row.
+      if (!autoWrapRow) {
+        mostTopStartCoords.row = highlight.row;
+        mostBottomEndCoords.row = highlight.row;
+      }
+      if (event.shiftKey && (!isSelected || highlight.isEqual(mostTopStartCoords)) || !event.shiftKey && (!isSelected || highlight.isEqual(mostBottomEndCoords))) {
+        hot.deselectCell();
+        hot.unlisten();
+        return false;
+      }
+      return true;
+    },
+    runOnlyIf: function runOnlyIf() {
+      return !hot.getSettings().minSpareCols;
+    },
+    preventDefault: false,
+    stopPropagation: false,
+    position: 'before',
+    relativeToGroup: _shortcutContexts.GRID_GROUP,
+    group: 'focusCatcher'
+  });
+}
+
+/**
+ * Gets the coordinates of the most top-start cell or header (depends on the table settings and its size).
+ *
+ * @param {Core} hot The Handsontable instance.
+ * @returns {CellCoords|null}
+ */
+function getMostTopStartPosition(hot) {
+  var rowIndexMapper = hot.rowIndexMapper,
+    columnIndexMapper = hot.columnIndexMapper;
+  var _hot$getSettings2 = hot.getSettings(),
+    navigableHeaders = _hot$getSettings2.navigableHeaders;
+  var topRow = navigableHeaders && hot.countColHeaders() > 0 ? -hot.countColHeaders() : 0;
+  var startColumn = navigableHeaders && hot.countRowHeaders() > 0 ? -hot.countRowHeaders() : 0;
+  topRow = topRow === 0 ? rowIndexMapper.getVisualFromRenderableIndex(topRow) : topRow;
+  startColumn = startColumn === 0 ? columnIndexMapper.getVisualFromRenderableIndex(startColumn) : startColumn;
+  if (topRow === null || startColumn === null) {
+    return null;
+  }
+  return hot._createCellCoords(topRow, startColumn);
+}
+
+/**
+ * Gets the coordinates of the most bottom-end cell or header (depends on the table settings and its size).
+ *
+ * @param {Core} hot The Handsontable instance.
+ * @returns {CellCoords|null}
+ */
+function getMostBottomEndPosition(hot) {
+  var _rowIndexMapper$getVi, _columnIndexMapper$ge;
+  var rowIndexMapper = hot.rowIndexMapper,
+    columnIndexMapper = hot.columnIndexMapper;
+  var _hot$getSettings3 = hot.getSettings(),
+    navigableHeaders = _hot$getSettings3.navigableHeaders;
+  var bottomRow = rowIndexMapper.getRenderableIndexesLength() - 1;
+  var endColumn = columnIndexMapper.getRenderableIndexesLength() - 1;
+  if (bottomRow < 0) {
+    bottomRow = navigableHeaders && hot.countColHeaders() > 0 ? -1 : null;
+  }
+  if (endColumn < 0) {
+    endColumn = navigableHeaders && hot.countRowHeaders() > 0 ? -1 : null;
+  }
+  if (bottomRow === null || endColumn === null) {
+    return null;
+  }
+  return hot._createCellCoords((_rowIndexMapper$getVi = rowIndexMapper.getVisualFromRenderableIndex(bottomRow)) !== null && _rowIndexMapper$getVi !== void 0 ? _rowIndexMapper$getVi : bottomRow, (_columnIndexMapper$ge = columnIndexMapper.getVisualFromRenderableIndex(endColumn)) !== null && _columnIndexMapper$ge !== void 0 ? _columnIndexMapper$ge : endColumn);
+}

package/core/focusCatcher/index.mjs

@@ -0,0 +1,129 @@
+import { GRID_GROUP } from "../../shortcutContexts/index.mjs";
+import { installFocusDetector } from "./focusDetector.mjs";
+/**
+ * Installs a focus catcher module. The module observes when the table is focused and depending on
+ * from the which side it was focused on it selects a specified cell or releases the TAB navigation
+ * to the browser.
+ *
+ * @param {Core} hot The Handsontable instance.
+ */
+export function installFocusCatcher(hot) {
+  var recentlyAddedFocusCoords;
+  var _installFocusDetector = installFocusDetector(hot, {
+      onFocusFromTop: function onFocusFromTop() {
+        var _recentlyAddedFocusCo;
+        var mostTopStartCoords = (_recentlyAddedFocusCo = recentlyAddedFocusCoords) !== null && _recentlyAddedFocusCo !== void 0 ? _recentlyAddedFocusCo : getMostTopStartPosition(hot);
+        if (mostTopStartCoords) {
+          hot.runHooks('modifyFocusOnTabNavigation', 'from_above', mostTopStartCoords);
+          hot.selectCell(mostTopStartCoords.row, mostTopStartCoords.col);
+        }
+        hot.listen();
+      },
+      onFocusFromBottom: function onFocusFromBottom() {
+        var _recentlyAddedFocusCo2;
+        var mostBottomEndCoords = (_recentlyAddedFocusCo2 = recentlyAddedFocusCoords) !== null && _recentlyAddedFocusCo2 !== void 0 ? _recentlyAddedFocusCo2 : getMostBottomEndPosition(hot);
+        if (mostBottomEndCoords) {
+          hot.runHooks('modifyFocusOnTabNavigation', 'from_below', mostBottomEndCoords);
+          hot.selectCell(mostBottomEndCoords.row, mostBottomEndCoords.col);
+        }
+        hot.listen();
+      }
+    }),
+    activate = _installFocusDetector.activate,
+    deactivate = _installFocusDetector.deactivate;
+  hot.addHook('afterListen', function () {
+    return deactivate();
+  });
+  hot.addHook('afterUnlisten', function () {
+    return activate();
+  });
+  hot.addHook('afterSelection', function () {
+    var _hot$getSelectedRange;
+    recentlyAddedFocusCoords = (_hot$getSelectedRange = hot.getSelectedRangeLast()) === null || _hot$getSelectedRange === void 0 ? void 0 : _hot$getSelectedRange.highlight;
+  });
+  hot.getShortcutManager().getContext('grid').addShortcut({
+    keys: [['Tab'], ['Shift', 'Tab']],
+    callback: function callback(event) {
+      var _hot$getSelectedRange2;
+      var _hot$getSettings = hot.getSettings(),
+        disableTabNavigation = _hot$getSettings.disableTabNavigation,
+        autoWrapRow = _hot$getSettings.autoWrapRow;
+      if (disableTabNavigation) {
+        hot.deselectCell();
+        hot.unlisten();
+        return false;
+      }
+      var isSelected = hot.selection.isSelected();
+      var highlight = (_hot$getSelectedRange2 = hot.getSelectedRangeLast()) === null || _hot$getSelectedRange2 === void 0 ? void 0 : _hot$getSelectedRange2.highlight;
+      var mostTopStartCoords = getMostTopStartPosition(hot);
+      var mostBottomEndCoords = getMostBottomEndPosition(hot);
+
+      // For disabled `autoWrapRow` option set the row to the same position as the currently selected row.
+      if (!autoWrapRow) {
+        mostTopStartCoords.row = highlight.row;
+        mostBottomEndCoords.row = highlight.row;
+      }
+      if (event.shiftKey && (!isSelected || highlight.isEqual(mostTopStartCoords)) || !event.shiftKey && (!isSelected || highlight.isEqual(mostBottomEndCoords))) {
+        hot.deselectCell();
+        hot.unlisten();
+        return false;
+      }
+      return true;
+    },
+    runOnlyIf: function runOnlyIf() {
+      return !hot.getSettings().minSpareCols;
+    },
+    preventDefault: false,
+    stopPropagation: false,
+    position: 'before',
+    relativeToGroup: GRID_GROUP,
+    group: 'focusCatcher'
+  });
+}
+
+/**
+ * Gets the coordinates of the most top-start cell or header (depends on the table settings and its size).
+ *
+ * @param {Core} hot The Handsontable instance.
+ * @returns {CellCoords|null}
+ */
+function getMostTopStartPosition(hot) {
+  var rowIndexMapper = hot.rowIndexMapper,
+    columnIndexMapper = hot.columnIndexMapper;
+  var _hot$getSettings2 = hot.getSettings(),
+    navigableHeaders = _hot$getSettings2.navigableHeaders;
+  var topRow = navigableHeaders && hot.countColHeaders() > 0 ? -hot.countColHeaders() : 0;
+  var startColumn = navigableHeaders && hot.countRowHeaders() > 0 ? -hot.countRowHeaders() : 0;
+  topRow = topRow === 0 ? rowIndexMapper.getVisualFromRenderableIndex(topRow) : topRow;
+  startColumn = startColumn === 0 ? columnIndexMapper.getVisualFromRenderableIndex(startColumn) : startColumn;
+  if (topRow === null || startColumn === null) {
+    return null;
+  }
+  return hot._createCellCoords(topRow, startColumn);
+}
+
+/**
+ * Gets the coordinates of the most bottom-end cell or header (depends on the table settings and its size).
+ *
+ * @param {Core} hot The Handsontable instance.
+ * @returns {CellCoords|null}
+ */
+function getMostBottomEndPosition(hot) {
+  var _rowIndexMapper$getVi, _columnIndexMapper$ge;
+  var rowIndexMapper = hot.rowIndexMapper,
+    columnIndexMapper = hot.columnIndexMapper;
+  var _hot$getSettings3 = hot.getSettings(),
+    navigableHeaders = _hot$getSettings3.navigableHeaders;
+  var bottomRow = rowIndexMapper.getRenderableIndexesLength() - 1;
+  var endColumn = columnIndexMapper.getRenderableIndexesLength() - 1;
+  if (bottomRow < 0) {
+    bottomRow = navigableHeaders && hot.countColHeaders() > 0 ? -1 : null;
+  }
+  if (endColumn < 0) {
+    endColumn = navigableHeaders && hot.countRowHeaders() > 0 ? -1 : null;
+  }
+  if (bottomRow === null || endColumn === null) {
+    return null;
+  }
+  return hot._createCellCoords((_rowIndexMapper$getVi = rowIndexMapper.getVisualFromRenderableIndex(bottomRow)) !== null && _rowIndexMapper$getVi !== void 0 ? _rowIndexMapper$getVi : bottomRow, (_columnIndexMapper$ge = columnIndexMapper.getVisualFromRenderableIndex(endColumn)) !== null && _columnIndexMapper$ge !== void 0 ? _columnIndexMapper$ge : endColumn);
+}

package/core/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.keys.js");
+exports.__esModule = true;
+var _focusCatcher = require("./focusCatcher");
+Object.keys(_focusCatcher).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _focusCatcher[key]) return;
+  exports[key] = _focusCatcher[key];
+});

package/core/index.mjs

@@ -0,0 +1 @@
+export * from "./focusCatcher/index.mjs";

package/core.d.ts

@@ -131,7 +131,6 @@ export default class Core {
   rowIndexMapper: IndexMapper;
   runHooks(key: keyof Events, p1?: any, p2?: any, p3?: any, p4?: any, p5?: any, p6?: any): any;
   scrollViewportTo(row?: number, column?: number, snapToBottom?: boolean, snapToRight?: boolean, considerHiddenIndexes?: boolean): boolean;
-  scrollToFocusedCell(callback?: () => void): void;
   selectAll(includeRowHeaders?: boolean, includeColumnHeaders?: boolean, focusPosition?: { row?: number, col?: number }): void;
   selectCell(row: number, col: number, endRow?: number, endCol?: number, scrollToCell?: boolean, changeListener?: boolean): boolean;
   selectCellByProp(row: number, prop: string, endRow?: number, endProp?: string, scrollToCell?: boolean): boolean;

package/core.js

@@ -8,10 +8,11 @@ require("core-js/modules/es.function.name.js");
 exports.__esModule = true;
 exports.default = Core;
 require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.map.js");
 require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.set.js");
 require("core-js/modules/es.string.iterator.js");
 require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.set.js");
 require("core-js/modules/es.array.includes.js");
 require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.sort.js");
@@ -24,10 +25,10 @@ require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.regexp.exec.js");
 require("core-js/modules/es.string.replace.js");
 require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
 require("core-js/modules/es.array.from.js");
 require("core-js/modules/es.array.index-of.js");
 require("core-js/modules/es.array.reverse.js");
-require("core-js/modules/web.dom-collections.for-each.js");
 require("core-js/modules/web.timers.js");
 require("core-js/modules/web.immediate.js");
 var _element = require("./helpers/dom/element");
@@ -56,6 +57,7 @@ var _registry5 = require("./i18n/registry");
 var _utils = require("./i18n/utils");
 var _selection = require("./selection");
 var _dataMap = require("./dataMap");
+var _index3 = require("./core/index");
 var _uniqueMap = require("./utils/dataStructures/uniqueMap");
 var _shortcuts = require("./shortcuts");
 var _shortcutContexts = require("./shortcutContexts");
@@ -73,6 +75,15 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var 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>}
+ */
+var foreignHotInstances = new Map();
+
 /**
  * A set of deprecated feature names.
  *
@@ -250,6 +261,8 @@ function Core(rootElement, userSettings) {
   }
   this.guid = "ht_".concat((0, _string.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.
    *
@@ -1106,6 +1119,9 @@ function Core(rootElement, userSettings) {
     this.updateSettings(tableMeta, true);
     this.view = new _tableView.default(this);
     editorManager = _editorManager.default.getInstance(instance, tableMeta, selection);
+    if ((0, _rootInstance.isRootInstance)(this)) {
+      (0, _index3.installFocusCatcher)(instance);
+    }
     instance.runHooks('init');
     this.forceFullRender = true; // used when data was changed
     this.view.render();
@@ -1522,6 +1538,11 @@ function Core(rootElement, userSettings) {
    */
   this.listen = function () {
     if (instance && !instance.isListening()) {
+      foreignHotInstances.forEach(function (foreignHot) {
+        if (instance !== foreignHot) {
+          foreignHot.unlisten();
+        }
+      });
       activeGuid = instance.guid;
       instance.runHooks('afterListen');
     }
@@ -4124,35 +4145,6 @@ function Core(rootElement, userSettings) {
     return false;
   };
 
-  /**
-   * Scrolls the viewport to coordinates specified by the currently focused cell.
-   *
-   * @since 14.0.0
-   * @memberof Core#
-   * @function scrollToFocusedCell
-   * @param {Function} callback The callback function to call after the viewport is scrolled.
-   */
-  this.scrollToFocusedCell = function () {
-    var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {};
-    if (!this.selection.isSelected()) {
-      return;
-    }
-    this.addHookOnce('afterScroll', callback);
-    var _this$getSelectedRang = this.getSelectedRangeLast(),
-      highlight = _this$getSelectedRang.highlight;
-    var renderableRowIndex = this.rowIndexMapper.getRenderableFromVisualIndex(highlight.row);
-    var renderableColumnIndex = this.columnIndexMapper.getRenderableFromVisualIndex(highlight.col);
-    var isScrolled = this.view.scrollViewport(this._createCellCoords(renderableRowIndex, renderableColumnIndex));
-    if (isScrolled) {
-      this.view.render();
-    } else {
-      this.removeHook('afterScroll', callback);
-      this._registerImmediate(function () {
-        return callback();
-      });
-    }
-  };
-
   /**
    * Removes the table from the DOM and destroys the instance of the Handsontable.
    *
@@ -4173,6 +4165,7 @@ function Core(rootElement, userSettings) {
     dataSource = null;
     this.getShortcutManager().destroy();
     metaManager.clearCache();
+    foreignHotInstances.delete(this.guid);
     if ((0, _rootInstance.isRootInstance)(instance)) {
       var licenseInfo = this.rootDocument.querySelector('.hot-display-license-info');
       if (licenseInfo) {

package/core.mjs

@@ -10,10 +10,11 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.map.js";
 import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.set.js";
 import "core-js/modules/es.string.iterator.js";
 import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.set.js";
 import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.array.sort.js";
@@ -26,10 +27,10 @@ import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.regexp.exec.js";
 import "core-js/modules/es.string.replace.js";
 import "core-js/modules/es.array.filter.js";
+import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.array.from.js";
 import "core-js/modules/es.array.index-of.js";
 import "core-js/modules/es.array.reverse.js";
-import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/web.timers.js";
 import "core-js/modules/web.immediate.js";
 import "core-js/modules/es.symbol.js";
@@ -63,11 +64,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";
 import { registerAllShortcutContexts } from "./shortcutContexts/index.mjs";
 var 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>}
+ */
+var foreignHotInstances = new Map();
+
 /**
  * A set of deprecated feature names.
  *
@@ -245,6 +256,8 @@ export default function Core(rootElement, userSettings) {
   }
   this.guid = "ht_".concat(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.
    *
@@ -1101,6 +1114,9 @@ export default function Core(rootElement, userSettings) {
     this.updateSettings(tableMeta, true);
     this.view = new TableView(this);
     editorManager = EditorManager.getInstance(instance, tableMeta, selection);
+    if (isRootInstance(this)) {
+      installFocusCatcher(instance);
+    }
     instance.runHooks('init');
     this.forceFullRender = true; // used when data was changed
     this.view.render();
@@ -1517,6 +1533,11 @@ export default function Core(rootElement, userSettings) {
    */
   this.listen = function () {
     if (instance && !instance.isListening()) {
+      foreignHotInstances.forEach(function (foreignHot) {
+        if (instance !== foreignHot) {
+          foreignHot.unlisten();
+        }
+      });
       activeGuid = instance.guid;
       instance.runHooks('afterListen');
     }
@@ -4119,35 +4140,6 @@ export default function Core(rootElement, userSettings) {
     return false;
   };
 
-  /**
-   * Scrolls the viewport to coordinates specified by the currently focused cell.
-   *
-   * @since 14.0.0
-   * @memberof Core#
-   * @function scrollToFocusedCell
-   * @param {Function} callback The callback function to call after the viewport is scrolled.
-   */
-  this.scrollToFocusedCell = function () {
-    var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {};
-    if (!this.selection.isSelected()) {
-      return;
-    }
-    this.addHookOnce('afterScroll', callback);
-    var _this$getSelectedRang = this.getSelectedRangeLast(),
-      highlight = _this$getSelectedRang.highlight;
-    var renderableRowIndex = this.rowIndexMapper.getRenderableFromVisualIndex(highlight.row);
-    var renderableColumnIndex = this.columnIndexMapper.getRenderableFromVisualIndex(highlight.col);
-    var isScrolled = this.view.scrollViewport(this._createCellCoords(renderableRowIndex, renderableColumnIndex));
-    if (isScrolled) {
-      this.view.render();
-    } else {
-      this.removeHook('afterScroll', callback);
-      this._registerImmediate(function () {
-        return callback();
-      });
-    }
-  };
-
   /**
    * Removes the table from the DOM and destroys the instance of the Handsontable.
    *
@@ -4168,6 +4160,7 @@ export default function Core(rootElement, userSettings) {
     dataSource = null;
     this.getShortcutManager().destroy();
     metaManager.clearCache();
+    foreignHotInstances.delete(this.guid);
     if (isRootInstance(instance)) {
       var licenseInfo = this.rootDocument.querySelector('.hot-display-license-info');
       if (licenseInfo) {