handsontable 0.0.0-next-baf2fcf-20230809 → 0.0.0-next-be16baf-20230809

package/3rdparty/walkontable/src/table.js

@@ -1,8 +1,8 @@
 "use strict";
 
 exports.__esModule = true;
-require("core-js/modules/es.array.push.js");
 require("core-js/modules/es.error.cause.js");
+require("core-js/modules/es.array.push.js");
 var _element = require("../../../helpers/dom/element");
 var _function = require("../../../helpers/function");
 var _column = _interopRequireDefault(require("./filter/column"));
@@ -345,7 +345,7 @@ class Table {
       wtOverlays.refreshAll(); // `refreshAll()` internally already calls `refreshSelections()` method
       wtOverlays.adjustElementsSize();
     } else {
-      this.refreshSelections(runFastDraw);
+      this.dataAccessObject.selectionManager.setActiveOverlay(this.facadeGetter()).render(runFastDraw);
     }
     if (syncScroll) {
       wtOverlays.syncScrollWithMaster();
@@ -437,75 +437,6 @@ class Table {
     }
   }
 
-  /**
-   * @param {string} className The CSS class name to remove from the table cells.
-   */
-  removeClassFromCells(className) {
-    const nodes = this.TABLE.querySelectorAll(`.${className}`);
-    for (let i = 0, len = nodes.length; i < len; i++) {
-      (0, _element.removeClass)(nodes[i], className);
-    }
-  }
-
-  /**
-   * Refresh the table selection by re-rendering Selection instances connected with that instance.
-   *
-   * @param {boolean} fastDraw If fast drawing is enabled than additionally className clearing is applied.
-   */
-  refreshSelections(fastDraw) {
-    const {
-      wtSettings
-    } = this;
-    const {
-      selections
-    } = this.dataAccessObject;
-    if (!selections) {
-      return;
-    }
-    const highlights = Array.from(selections);
-    const len = highlights.length;
-    if (fastDraw) {
-      const classesToRemove = [];
-      for (let i = 0; i < len; i++) {
-        const {
-          highlightHeaderClassName,
-          highlightRowClassName,
-          highlightColumnClassName
-        } = highlights[i].settings;
-        const classNames = highlights[i].classNames;
-        const classNamesLength = classNames.length;
-        for (let j = 0; j < classNamesLength; j++) {
-          if (!classesToRemove.includes(classNames[j])) {
-            classesToRemove.push(classNames[j]);
-          }
-        }
-        if (highlightHeaderClassName && !classesToRemove.includes(highlightHeaderClassName)) {
-          classesToRemove.push(highlightHeaderClassName);
-        }
-        if (highlightRowClassName && !classesToRemove.includes(highlightRowClassName)) {
-          classesToRemove.push(highlightRowClassName);
-        }
-        if (highlightColumnClassName && !classesToRemove.includes(highlightColumnClassName)) {
-          classesToRemove.push(highlightColumnClassName);
-        }
-      }
-      const additionalClassesToRemove = wtSettings.getSetting('onBeforeRemoveCellClassNames');
-      if (Array.isArray(additionalClassesToRemove)) {
-        for (let i = 0; i < additionalClassesToRemove.length; i++) {
-          classesToRemove.push(additionalClassesToRemove[i]);
-        }
-      }
-      const classesToRemoveLength = classesToRemove.length;
-      for (let i = 0; i < classesToRemoveLength; i++) {
-        // there was no rerender, so we need to remove classNames by ourselves
-        this.removeClassFromCells(classesToRemove[i]);
-      }
-    }
-    for (let i = 0; i < len; i++) {
-      highlights[i].draw(this.facadeGetter(), fastDraw);
-    }
-  }
-
   /**
    * Get cell element at coords.
    * Negative coords.row or coords.col are used to retrieve header cells. If there are multiple header levels, the
@@ -627,14 +558,14 @@ class Table {
    */
   getRowHeader(row) {
     let level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    if (this.columnFilter.sourceColumnToVisibleRowHeadedColumn(0) === 0) {
-      return;
-    }
     const rowHeadersCount = this.wtSettings.getSetting('rowHeaders').length;
     if (level >= rowHeadersCount) {
       return;
     }
-    const TR = this.TBODY.childNodes[this.rowFilter.sourceToRendered(row)];
+    const renderedRow = this.rowFilter.sourceToRendered(row);
+    const visibleRow = renderedRow < 0 ? this.rowFilter.sourceRowToVisibleColHeadedRow(row) : renderedRow;
+    const parentElement = renderedRow < 0 ? this.THEAD : this.TBODY;
+    const TR = parentElement.childNodes[visibleRow];
     return TR === null || TR === void 0 ? void 0 : TR.childNodes[level];
   }
 
@@ -645,9 +576,6 @@ class Table {
    * @returns {HTMLTableCellElement[]}
    */
   getRowHeaders(row) {
-    if (this.columnFilter.sourceColumnToVisibleRowHeadedColumn(0) === 0) {
-      return [];
-    }
     const THs = [];
     const rowHeadersCount = this.wtSettings.getSetting('rowHeaders').length;
     for (let renderedRowIndex = 0; renderedRowIndex < rowHeadersCount; renderedRowIndex++) {

package/3rdparty/walkontable/src/table.mjs

@@ -1,9 +1,9 @@
-import "core-js/modules/es.array.push.js";
 import "core-js/modules/es.error.cause.js";
+import "core-js/modules/es.array.push.js";
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-import { hasClass, index, offset, removeClass, removeTextNodes, overlayContainsElement, closest, outerHeight, outerWidth, innerHeight, isVisible } from "../../../helpers/dom/element.mjs";
+import { hasClass, index, offset, removeTextNodes, overlayContainsElement, closest, outerHeight, outerWidth, innerHeight, isVisible } from "../../../helpers/dom/element.mjs";
 import { isFunction } from "../../../helpers/function.mjs";
 import ColumnFilter from "./filter/column.mjs";
 import RowFilter from "./filter/row.mjs";
@@ -341,7 +341,7 @@ class Table {
       wtOverlays.refreshAll(); // `refreshAll()` internally already calls `refreshSelections()` method
       wtOverlays.adjustElementsSize();
     } else {
-      this.refreshSelections(runFastDraw);
+      this.dataAccessObject.selectionManager.setActiveOverlay(this.facadeGetter()).render(runFastDraw);
     }
     if (syncScroll) {
       wtOverlays.syncScrollWithMaster();
@@ -433,75 +433,6 @@ class Table {
     }
   }
 
-  /**
-   * @param {string} className The CSS class name to remove from the table cells.
-   */
-  removeClassFromCells(className) {
-    const nodes = this.TABLE.querySelectorAll(`.${className}`);
-    for (let i = 0, len = nodes.length; i < len; i++) {
-      removeClass(nodes[i], className);
-    }
-  }
-
-  /**
-   * Refresh the table selection by re-rendering Selection instances connected with that instance.
-   *
-   * @param {boolean} fastDraw If fast drawing is enabled than additionally className clearing is applied.
-   */
-  refreshSelections(fastDraw) {
-    const {
-      wtSettings
-    } = this;
-    const {
-      selections
-    } = this.dataAccessObject;
-    if (!selections) {
-      return;
-    }
-    const highlights = Array.from(selections);
-    const len = highlights.length;
-    if (fastDraw) {
-      const classesToRemove = [];
-      for (let i = 0; i < len; i++) {
-        const {
-          highlightHeaderClassName,
-          highlightRowClassName,
-          highlightColumnClassName
-        } = highlights[i].settings;
-        const classNames = highlights[i].classNames;
-        const classNamesLength = classNames.length;
-        for (let j = 0; j < classNamesLength; j++) {
-          if (!classesToRemove.includes(classNames[j])) {
-            classesToRemove.push(classNames[j]);
-          }
-        }
-        if (highlightHeaderClassName && !classesToRemove.includes(highlightHeaderClassName)) {
-          classesToRemove.push(highlightHeaderClassName);
-        }
-        if (highlightRowClassName && !classesToRemove.includes(highlightRowClassName)) {
-          classesToRemove.push(highlightRowClassName);
-        }
-        if (highlightColumnClassName && !classesToRemove.includes(highlightColumnClassName)) {
-          classesToRemove.push(highlightColumnClassName);
-        }
-      }
-      const additionalClassesToRemove = wtSettings.getSetting('onBeforeRemoveCellClassNames');
-      if (Array.isArray(additionalClassesToRemove)) {
-        for (let i = 0; i < additionalClassesToRemove.length; i++) {
-          classesToRemove.push(additionalClassesToRemove[i]);
-        }
-      }
-      const classesToRemoveLength = classesToRemove.length;
-      for (let i = 0; i < classesToRemoveLength; i++) {
-        // there was no rerender, so we need to remove classNames by ourselves
-        this.removeClassFromCells(classesToRemove[i]);
-      }
-    }
-    for (let i = 0; i < len; i++) {
-      highlights[i].draw(this.facadeGetter(), fastDraw);
-    }
-  }
-
   /**
    * Get cell element at coords.
    * Negative coords.row or coords.col are used to retrieve header cells. If there are multiple header levels, the
@@ -623,14 +554,14 @@ class Table {
    */
   getRowHeader(row) {
     let level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    if (this.columnFilter.sourceColumnToVisibleRowHeadedColumn(0) === 0) {
-      return;
-    }
     const rowHeadersCount = this.wtSettings.getSetting('rowHeaders').length;
     if (level >= rowHeadersCount) {
       return;
     }
-    const TR = this.TBODY.childNodes[this.rowFilter.sourceToRendered(row)];
+    const renderedRow = this.rowFilter.sourceToRendered(row);
+    const visibleRow = renderedRow < 0 ? this.rowFilter.sourceRowToVisibleColHeadedRow(row) : renderedRow;
+    const parentElement = renderedRow < 0 ? this.THEAD : this.TBODY;
+    const TR = parentElement.childNodes[visibleRow];
     return TR === null || TR === void 0 ? void 0 : TR.childNodes[level];
   }
 
@@ -641,9 +572,6 @@ class Table {
    * @returns {HTMLTableCellElement[]}
    */
   getRowHeaders(row) {
-    if (this.columnFilter.sourceColumnToVisibleRowHeadedColumn(0) === 0) {
-      return [];
-    }
     const THs = [];
     const rowHeadersCount = this.wtSettings.getSetting('rowHeaders').length;
     for (let renderedRowIndex = 0; renderedRowIndex < rowHeadersCount; renderedRowIndex++) {

package/base.js

@@ -43,8 +43,8 @@ Handsontable.hooks = _pluginHooks.default.getSingleton();
 Handsontable.CellCoords = _src.CellCoords;
 Handsontable.CellRange = _src.CellRange;
 Handsontable.packageName = 'handsontable';
-Handsontable.buildDate = "09/08/2023 12:06:41";
-Handsontable.version = "0.0.0-next-baf2fcf-20230809";
+Handsontable.buildDate = "09/08/2023 12:40:58";
+Handsontable.version = "0.0.0-next-be16baf-20230809";
 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 = "09/08/2023 12:06:53";
-Handsontable.version = "0.0.0-next-baf2fcf-20230809";
+Handsontable.buildDate = "09/08/2023 12:41:07";
+Handsontable.version = "0.0.0-next-be16baf-20230809";
 Handsontable.languages = {
   dictionaryKeys,
   getLanguageDictionary,

package/common.d.ts

@@ -12,7 +12,7 @@ export type CellValue = any;
 /**
  * A cell change represented by `[row, column, prevValue, nextValue]`.
  */
-export type CellChange = [number, string | number | ColumnDataGetterSetterFunction, CellValue, CellValue];
+export type CellChange = [number, string | number, CellValue, CellValue];
 
 /**
  * A row object, one of the two ways to supply data to the table, the alternative being an array of values.

package/core/focusCatcher/focusDetector.js

@@ -0,0 +1,58 @@
+"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) {
+  let hooks = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const rootDocument = hot.rootDocument;
+  const rootElement = hot.rootElement;
+  const inputTrapTop = createInputElement(rootDocument);
+  const inputTrapBottom = createInputElement(rootDocument);
+  inputTrapTop.addEventListener('focus', () => hooks === null || hooks === void 0 ? void 0 : hooks.onFocusFromTop());
+  inputTrapBottom.addEventListener('focus', () => 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() {
+      hot._registerTimeout(() => {
+        inputTrapTop.tabIndex = 0;
+        inputTrapBottom.tabIndex = 0;
+      }, 10);
+    },
+    /**
+     * Deactivates the detector by setting tabIndex to -1.
+     */
+    deactivate() {
+      hot._registerTimeout(() => {
+        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) {
+  const input = rootDocument.createElement('input');
+  input.type = 'text';
+  input.classList.add('htFocusCatcher');
+  return input;
+}

package/core/focusCatcher/focusDetector.mjs

@@ -0,0 +1,54 @@
+/**
+ * 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) {
+  let hooks = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const rootDocument = hot.rootDocument;
+  const rootElement = hot.rootElement;
+  const inputTrapTop = createInputElement(rootDocument);
+  const inputTrapBottom = createInputElement(rootDocument);
+  inputTrapTop.addEventListener('focus', () => hooks === null || hooks === void 0 ? void 0 : hooks.onFocusFromTop());
+  inputTrapBottom.addEventListener('focus', () => 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() {
+      hot._registerTimeout(() => {
+        inputTrapTop.tabIndex = 0;
+        inputTrapBottom.tabIndex = 0;
+      }, 10);
+    },
+    /**
+     * Deactivates the detector by setting tabIndex to -1.
+     */
+    deactivate() {
+      hot._registerTimeout(() => {
+        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) {
+  const input = rootDocument.createElement('input');
+  input.type = 'text';
+  input.classList.add('htFocusCatcher');
+  return input;
+}

package/core/focusCatcher/index.js

@@ -0,0 +1,142 @@
+"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) {
+  let recentlyAddedFocusCoords;
+  const {
+    activate,
+    deactivate
+  } = (0, _focusDetector.installFocusDetector)(hot, {
+    onFocusFromTop() {
+      var _recentlyAddedFocusCo;
+      const 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() {
+      var _recentlyAddedFocusCo2;
+      const 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();
+    }
+  });
+  hot.addHook('afterListen', () => deactivate());
+  hot.addHook('afterUnlisten', () => activate());
+  hot.addHook('afterSelection', () => {
+    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: event => {
+      var _hot$getSelectedRange2;
+      const {
+        disableTabNavigation,
+        autoWrapRow
+      } = hot.getSettings();
+      if (disableTabNavigation) {
+        hot.deselectCell();
+        hot.unlisten();
+        return false;
+      }
+      const isSelected = hot.selection.isSelected();
+      const highlight = (_hot$getSelectedRange2 = hot.getSelectedRangeLast()) === null || _hot$getSelectedRange2 === void 0 ? void 0 : _hot$getSelectedRange2.highlight;
+      const mostTopStartCoords = getMostTopStartPosition(hot);
+      const 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: () => !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) {
+  const {
+    rowIndexMapper,
+    columnIndexMapper
+  } = hot;
+  const {
+    navigableHeaders
+  } = hot.getSettings();
+  let topRow = navigableHeaders && hot.countColHeaders() > 0 ? -hot.countColHeaders() : 0;
+  let startColumn = navigableHeaders && hot.countRowHeaders() > 0 ? -hot.countRowHeaders() : 0;
+  if (topRow === 0) {
+    topRow = rowIndexMapper.getVisualFromRenderableIndex(topRow);
+  }
+  if (startColumn === 0) {
+    startColumn = columnIndexMapper.getVisualFromRenderableIndex(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;
+  const {
+    rowIndexMapper,
+    columnIndexMapper
+  } = hot;
+  const {
+    navigableHeaders
+  } = hot.getSettings();
+  let bottomRow = rowIndexMapper.getRenderableIndexesLength() - 1;
+  let endColumn = columnIndexMapper.getRenderableIndexesLength() - 1;
+  if (bottomRow < 0) {
+    if (!navigableHeaders || hot.countColHeaders() === 0) {
+      return null;
+    }
+    bottomRow = -1;
+  }
+  if (endColumn < 0) {
+    if (!navigableHeaders || hot.countColHeaders() === 0) {
+      return null;
+    }
+    endColumn = -1;
+  }
+  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,138 @@
+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) {
+  let recentlyAddedFocusCoords;
+  const {
+    activate,
+    deactivate
+  } = installFocusDetector(hot, {
+    onFocusFromTop() {
+      var _recentlyAddedFocusCo;
+      const 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() {
+      var _recentlyAddedFocusCo2;
+      const 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();
+    }
+  });
+  hot.addHook('afterListen', () => deactivate());
+  hot.addHook('afterUnlisten', () => activate());
+  hot.addHook('afterSelection', () => {
+    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: event => {
+      var _hot$getSelectedRange2;
+      const {
+        disableTabNavigation,
+        autoWrapRow
+      } = hot.getSettings();
+      if (disableTabNavigation) {
+        hot.deselectCell();
+        hot.unlisten();
+        return false;
+      }
+      const isSelected = hot.selection.isSelected();
+      const highlight = (_hot$getSelectedRange2 = hot.getSelectedRangeLast()) === null || _hot$getSelectedRange2 === void 0 ? void 0 : _hot$getSelectedRange2.highlight;
+      const mostTopStartCoords = getMostTopStartPosition(hot);
+      const 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: () => !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) {
+  const {
+    rowIndexMapper,
+    columnIndexMapper
+  } = hot;
+  const {
+    navigableHeaders
+  } = hot.getSettings();
+  let topRow = navigableHeaders && hot.countColHeaders() > 0 ? -hot.countColHeaders() : 0;
+  let startColumn = navigableHeaders && hot.countRowHeaders() > 0 ? -hot.countRowHeaders() : 0;
+  if (topRow === 0) {
+    topRow = rowIndexMapper.getVisualFromRenderableIndex(topRow);
+  }
+  if (startColumn === 0) {
+    startColumn = columnIndexMapper.getVisualFromRenderableIndex(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;
+  const {
+    rowIndexMapper,
+    columnIndexMapper
+  } = hot;
+  const {
+    navigableHeaders
+  } = hot.getSettings();
+  let bottomRow = rowIndexMapper.getRenderableIndexesLength() - 1;
+  let endColumn = columnIndexMapper.getRenderableIndexesLength() - 1;
+  if (bottomRow < 0) {
+    if (!navigableHeaders || hot.countColHeaders() === 0) {
+      return null;
+    }
+    bottomRow = -1;
+  }
+  if (endColumn < 0) {
+    if (!navigableHeaders || hot.countColHeaders() === 0) {
+      return null;
+    }
+    endColumn = -1;
+  }
+  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,9 @@
+"use strict";
+
+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];
+});