handsontable 13.1.0 → 14.0.0-next-d97b156-20231027

package/cellTypes/checkboxType/checkboxType.js

@@ -3,11 +3,9 @@
 exports.__esModule = true;
 var _checkboxEditor = require("../../editors/checkboxEditor");
 var _checkboxRenderer = require("../../renderers/checkboxRenderer");
-const CELL_TYPE = 'checkbox';
-exports.CELL_TYPE = CELL_TYPE;
-const CheckboxCellType = {
+const CELL_TYPE = exports.CELL_TYPE = 'checkbox';
+const CheckboxCellType = exports.CheckboxCellType = {
   CELL_TYPE,
   editor: _checkboxEditor.CheckboxEditor,
   renderer: _checkboxRenderer.checkboxRenderer
-};
-exports.CheckboxCellType = CheckboxCellType;
+};

package/cellTypes/dateType/dateType.d.ts

@@ -1,17 +1,17 @@
 import { CellTypeObject } from '../base';
 import { DateEditor } from '../../editors/dateEditor';
-import { autocompleteRenderer } from '../../renderers/autocompleteRenderer';
+import { dateRenderer } from '../../renderers/dateRenderer';
 import { dateValidator } from '../../validators/dateValidator';
 
 export const CELL_TYPE: 'date';
 export interface DateCellType extends CellTypeObject {
   editor: typeof DateEditor;
-  renderer: typeof autocompleteRenderer;
+  renderer: typeof dateRenderer;
   validator: typeof dateValidator;
 }
 
 export namespace DateCellType {
   export { DateEditor as editor };
-  export { autocompleteRenderer as renderer };
+  export { dateRenderer as renderer };
   export { dateValidator as validator };
 }

package/cellTypes/dateType/dateType.js

@@ -2,15 +2,13 @@
 
 exports.__esModule = true;
 var _dateEditor = require("../../editors/dateEditor");
-var _autocompleteRenderer = require("../../renderers/autocompleteRenderer");
+var _dateRenderer = require("../../renderers/dateRenderer");
 var _dateValidator = require("../../validators/dateValidator");
-const CELL_TYPE = 'date';
-exports.CELL_TYPE = CELL_TYPE;
-const DateCellType = {
+const CELL_TYPE = exports.CELL_TYPE = 'date';
+const DateCellType = exports.DateCellType = {
   CELL_TYPE,
   editor: _dateEditor.DateEditor,
   // displays small gray arrow on right side of the cell
-  renderer: _autocompleteRenderer.autocompleteRenderer,
+  renderer: _dateRenderer.dateRenderer,
   validator: _dateValidator.dateValidator
-};
-exports.DateCellType = DateCellType;
+};

package/cellTypes/dateType/dateType.mjs

@@ -1,11 +1,11 @@
 import { DateEditor } from "../../editors/dateEditor/index.mjs";
-import { autocompleteRenderer } from "../../renderers/autocompleteRenderer/index.mjs";
+import { dateRenderer } from "../../renderers/dateRenderer/index.mjs";
 import { dateValidator } from "../../validators/dateValidator/index.mjs";
 export const CELL_TYPE = 'date';
 export const DateCellType = {
   CELL_TYPE,
   editor: DateEditor,
   // displays small gray arrow on right side of the cell
-  renderer: autocompleteRenderer,
+  renderer: dateRenderer,
   validator: dateValidator
 };

package/cellTypes/dropdownType/dropdownType.js

@@ -4,13 +4,11 @@ exports.__esModule = true;
 var _dropdownEditor = require("../../editors/dropdownEditor");
 var _autocompleteRenderer = require("../../renderers/autocompleteRenderer");
 var _autocompleteValidator = require("../../validators/autocompleteValidator");
-const CELL_TYPE = 'dropdown';
-exports.CELL_TYPE = CELL_TYPE;
-const DropdownCellType = {
+const CELL_TYPE = exports.CELL_TYPE = 'dropdown';
+const DropdownCellType = exports.DropdownCellType = {
   CELL_TYPE,
   editor: _dropdownEditor.DropdownEditor,
   // displays small gray arrow on right side of the cell
   renderer: _autocompleteRenderer.autocompleteRenderer,
   validator: _autocompleteValidator.autocompleteValidator
-};
-exports.DropdownCellType = DropdownCellType;
+};

package/cellTypes/handsontableType/handsontableType.d.ts

@@ -1,14 +1,14 @@
 import { CellTypeObject } from '../base';
 import { HandsontableEditor } from '../../editors/handsontableEditor';
-import { autocompleteRenderer } from '../../renderers/autocompleteRenderer';
+import { handsontableRenderer } from '../../renderers/handsontableRenderer';
 
 export const CELL_TYPE: 'handsontable';
 export interface HandsontableCellType extends CellTypeObject {
   editor: typeof HandsontableEditor;
-  renderer: typeof autocompleteRenderer;
+  renderer: typeof handsontableRenderer;
 }
 
 export namespace HandsontableCellType {
   export { HandsontableEditor as editor };
-  export { autocompleteRenderer as renderer };
+  export { handsontableRenderer as renderer };
 }

package/cellTypes/handsontableType/handsontableType.js

@@ -2,13 +2,11 @@
 
 exports.__esModule = true;
 var _handsontableEditor = require("../../editors/handsontableEditor");
-var _autocompleteRenderer = require("../../renderers/autocompleteRenderer");
-const CELL_TYPE = 'handsontable';
-exports.CELL_TYPE = CELL_TYPE;
-const HandsontableCellType = {
+var _handsontableRenderer = require("../../renderers/handsontableRenderer");
+const CELL_TYPE = exports.CELL_TYPE = 'handsontable';
+const HandsontableCellType = exports.HandsontableCellType = {
   CELL_TYPE,
   editor: _handsontableEditor.HandsontableEditor,
   // displays small gray arrow on right side of the cell
-  renderer: _autocompleteRenderer.autocompleteRenderer
-};
-exports.HandsontableCellType = HandsontableCellType;
+  renderer: _handsontableRenderer.handsontableRenderer
+};

package/cellTypes/handsontableType/handsontableType.mjs

@@ -1,9 +1,9 @@
 import { HandsontableEditor } from "../../editors/handsontableEditor/index.mjs";
-import { autocompleteRenderer } from "../../renderers/autocompleteRenderer/index.mjs";
+import { handsontableRenderer } from "../../renderers/handsontableRenderer/index.mjs";
 export const CELL_TYPE = 'handsontable';
 export const HandsontableCellType = {
   CELL_TYPE,
   editor: HandsontableEditor,
   // displays small gray arrow on right side of the cell
-  renderer: autocompleteRenderer
+  renderer: handsontableRenderer
 };

package/cellTypes/index.d.ts

@@ -5,6 +5,7 @@ import { DropdownCellType, CELL_TYPE as DROPDOWN_TYPE } from './dropdownType';
 import { HandsontableCellType, CELL_TYPE as HANDSONTABLE_TYPE } from './handsontableType';
 import { NumericCellType, CELL_TYPE as NUMERIC_TYPE } from './numericType';
 import { PasswordCellType, CELL_TYPE as PASSWORD_TYPE } from './passwordType';
+import { SelectCellType, CELL_TYPE as SELECT_TYPE } from './selectType';
 import { TextCellType, CELL_TYPE as TEXT_TYPE } from './textType';
 import { TimeCellType, CELL_TYPE as TIME_TYPE } from './timeType';
 
@@ -18,6 +19,7 @@ export interface CellTypes {
   handsontable: typeof HandsontableCellType;
   numeric: typeof NumericCellType;
   password: typeof PasswordCellType;
+  select: typeof SelectCellType;
   text: typeof TextCellType;
   time: typeof TimeCellType;
 }
@@ -35,6 +37,7 @@ export {
   HandsontableCellType, HANDSONTABLE_TYPE,
   NumericCellType, NUMERIC_TYPE,
   PasswordCellType, PASSWORD_TYPE,
+  SelectCellType, SELECT_TYPE,
   TextCellType, TEXT_TYPE,
   TimeCellType, TIME_TYPE
 };

package/cellTypes/index.js

@@ -23,6 +23,9 @@ exports.NUMERIC_TYPE = _numericType.CELL_TYPE;
 var _passwordType = require("./passwordType");
 exports.PasswordCellType = _passwordType.PasswordCellType;
 exports.PASSWORD_TYPE = _passwordType.CELL_TYPE;
+var _selectType = require("./selectType");
+exports.SelectCellType = _selectType.SelectCellType;
+exports.SELECT_TYPE = _selectType.CELL_TYPE;
 var _textType = require("./textType");
 exports.TextCellType = _textType.TextCellType;
 exports.TEXT_TYPE = _textType.CELL_TYPE;
@@ -46,6 +49,7 @@ function registerAllCellTypes() {
   (0, _registry.registerCellType)(_handsontableType.HandsontableCellType);
   (0, _registry.registerCellType)(_numericType.NumericCellType);
   (0, _registry.registerCellType)(_passwordType.PasswordCellType);
+  (0, _registry.registerCellType)(_selectType.SelectCellType);
   (0, _registry.registerCellType)(_textType.TextCellType);
   (0, _registry.registerCellType)(_timeType.TimeCellType);
 }

package/cellTypes/index.mjs

@@ -5,6 +5,7 @@ import { DropdownCellType, CELL_TYPE as DROPDOWN_TYPE } from "./dropdownType/ind
 import { HandsontableCellType, CELL_TYPE as HANDSONTABLE_TYPE } from "./handsontableType/index.mjs";
 import { NumericCellType, CELL_TYPE as NUMERIC_TYPE } from "./numericType/index.mjs";
 import { PasswordCellType, CELL_TYPE as PASSWORD_TYPE } from "./passwordType/index.mjs";
+import { SelectCellType, CELL_TYPE as SELECT_TYPE } from "./selectType/index.mjs";
 import { TextCellType, CELL_TYPE as TEXT_TYPE } from "./textType/index.mjs";
 import { TimeCellType, CELL_TYPE as TIME_TYPE } from "./timeType/index.mjs";
 import { registerCellType } from "./registry.mjs";
@@ -19,8 +20,9 @@ export function registerAllCellTypes() {
   registerCellType(HandsontableCellType);
   registerCellType(NumericCellType);
   registerCellType(PasswordCellType);
+  registerCellType(SelectCellType);
   registerCellType(TextCellType);
   registerCellType(TimeCellType);
 }
-export { AutocompleteCellType, AUTOCOMPLETE_TYPE, CheckboxCellType, CHECKBOX_TYPE, DateCellType, DATE_TYPE, DropdownCellType, DROPDOWN_TYPE, HandsontableCellType, HANDSONTABLE_TYPE, NumericCellType, NUMERIC_TYPE, PasswordCellType, PASSWORD_TYPE, TextCellType, TEXT_TYPE, TimeCellType, TIME_TYPE };
+export { AutocompleteCellType, AUTOCOMPLETE_TYPE, CheckboxCellType, CHECKBOX_TYPE, DateCellType, DATE_TYPE, DropdownCellType, DROPDOWN_TYPE, HandsontableCellType, HANDSONTABLE_TYPE, NumericCellType, NUMERIC_TYPE, PasswordCellType, PASSWORD_TYPE, SelectCellType, SELECT_TYPE, TextCellType, TEXT_TYPE, TimeCellType, TIME_TYPE };
 export { getCellType, getRegisteredCellTypeNames, getRegisteredCellTypes, hasCellType, registerCellType } from "./registry.mjs";

package/cellTypes/numericType/numericType.js

@@ -4,13 +4,11 @@ exports.__esModule = true;
 var _numericEditor = require("../../editors/numericEditor");
 var _numericRenderer = require("../../renderers/numericRenderer");
 var _numericValidator = require("../../validators/numericValidator");
-const CELL_TYPE = 'numeric';
-exports.CELL_TYPE = CELL_TYPE;
-const NumericCellType = {
+const CELL_TYPE = exports.CELL_TYPE = 'numeric';
+const NumericCellType = exports.NumericCellType = {
   CELL_TYPE,
   editor: _numericEditor.NumericEditor,
   renderer: _numericRenderer.numericRenderer,
   validator: _numericValidator.numericValidator,
   dataType: 'number'
-};
-exports.NumericCellType = NumericCellType;
+};

package/cellTypes/passwordType/passwordType.js

@@ -3,12 +3,10 @@
 exports.__esModule = true;
 var _passwordEditor = require("../../editors/passwordEditor");
 var _passwordRenderer = require("../../renderers/passwordRenderer");
-const CELL_TYPE = 'password';
-exports.CELL_TYPE = CELL_TYPE;
-const PasswordCellType = {
+const CELL_TYPE = exports.CELL_TYPE = 'password';
+const PasswordCellType = exports.PasswordCellType = {
   CELL_TYPE,
   editor: _passwordEditor.PasswordEditor,
   renderer: _passwordRenderer.passwordRenderer,
   copyable: false
-};
-exports.PasswordCellType = PasswordCellType;
+};

package/cellTypes/selectType/index.d.ts

@@ -0,0 +1 @@
+export * from './selectType';

package/cellTypes/selectType/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+exports.__esModule = true;
+var _selectType = require("./selectType");
+exports.CELL_TYPE = _selectType.CELL_TYPE;
+exports.SelectCellType = _selectType.SelectCellType;

package/cellTypes/selectType/index.mjs

@@ -0,0 +1 @@
+export { CELL_TYPE, SelectCellType } from "./selectType.mjs";

package/cellTypes/selectType/selectType.d.ts

@@ -0,0 +1,14 @@
+import { CellTypeObject } from '../base';
+import { SelectEditor } from '../../editors/selectEditor';
+import { selectRenderer } from '../../renderers/selectRenderer';
+
+export const CELL_TYPE: 'select';
+export interface SelectCellType extends CellTypeObject {
+  editor: typeof SelectEditor;
+  renderer: typeof selectRenderer;
+}
+
+export namespace SelectCellType {
+  export { SelectEditor as editor };
+  export { selectRenderer as renderer };
+}

package/cellTypes/selectType/selectType.js

@@ -0,0 +1,11 @@
+"use strict";
+
+exports.__esModule = true;
+var _selectEditor = require("../../editors/selectEditor");
+var _selectRenderer = require("../../renderers/selectRenderer");
+const CELL_TYPE = exports.CELL_TYPE = 'select';
+const SelectCellType = exports.SelectCellType = {
+  CELL_TYPE,
+  editor: _selectEditor.SelectEditor,
+  renderer: _selectRenderer.selectRenderer
+};

package/cellTypes/selectType/selectType.mjs

@@ -0,0 +1,8 @@
+import { SelectEditor } from "../../editors/selectEditor/index.mjs";
+import { selectRenderer } from "../../renderers/selectRenderer/index.mjs";
+export const CELL_TYPE = 'select';
+export const SelectCellType = {
+  CELL_TYPE,
+  editor: SelectEditor,
+  renderer: selectRenderer
+};

package/cellTypes/textType/textType.js

@@ -3,11 +3,9 @@
 exports.__esModule = true;
 var _textEditor = require("../../editors/textEditor");
 var _textRenderer = require("../../renderers/textRenderer");
-const CELL_TYPE = 'text';
-exports.CELL_TYPE = CELL_TYPE;
-const TextCellType = {
+const CELL_TYPE = exports.CELL_TYPE = 'text';
+const TextCellType = exports.TextCellType = {
   CELL_TYPE,
   editor: _textEditor.TextEditor,
   renderer: _textRenderer.textRenderer
-};
-exports.TextCellType = TextCellType;
+};

package/cellTypes/timeType/timeType.js

@@ -4,12 +4,10 @@ exports.__esModule = true;
 var _timeEditor = require("../../editors/timeEditor");
 var _timeRenderer = require("../../renderers/timeRenderer");
 var _timeValidator = require("../../validators/timeValidator");
-const CELL_TYPE = 'time';
-exports.CELL_TYPE = CELL_TYPE;
-const TimeCellType = {
+const CELL_TYPE = exports.CELL_TYPE = 'time';
+const TimeCellType = exports.TimeCellType = {
   CELL_TYPE,
   editor: _timeEditor.TimeEditor,
   renderer: _timeRenderer.timeRenderer,
   validator: _timeValidator.timeValidator
-};
-exports.TimeCellType = TimeCellType;
+};

package/common.d.ts

@@ -49,7 +49,7 @@ export interface RangeType {
 /**
  * The default sources for which the table triggers hooks.
  */
-export type ChangeSource = 'auto' | 'edit' | 'loadData' | 'populateFromArray' | 'spliceCol' |
+export type ChangeSource = 'auto' | 'edit' | 'loadData' | 'updateData' | 'populateFromArray' | 'spliceCol' |
                            'spliceRow' | 'timeValidate' | 'dateValidate' | 'validateCells' |
                            'Autofill.fill' | 'ContextMenu.clearColumn' | 'ContextMenu.columnLeft' |
                            'ContextMenu.columnRight' | 'ContextMenu.removeColumn' |

package/core/focusCatcher/focusDetector.js

@@ -0,0 +1,63 @@
+"use strict";
+
+exports.__esModule = true;
+exports.installFocusDetector = installFocusDetector;
+var _element = require("../../helpers/dom/element");
+var _a11y = require("../../helpers/a11y");
+/**
+ * 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 rootElement = hot.rootElement;
+  const inputTrapTop = createInputElement(hot);
+  const inputTrapBottom = createInputElement(hot);
+  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 {Handsontable} hot The Handsontable instance.
+ * @returns {HTMLInputElement}
+ */
+function createInputElement(hot) {
+  const rootDocument = hot.rootDocument;
+  const input = rootDocument.createElement('input');
+  input.type = 'text';
+  input.classList.add('htFocusCatcher');
+  if (hot.getSettings().ariaTags) {
+    (0, _element.setAttribute)(input, [(0, _a11y.A11Y_PRESENTATION)()]);
+  }
+  return input;
+}

package/core/focusCatcher/focusDetector.mjs

@@ -0,0 +1,59 @@
+import { setAttribute } from "../../helpers/dom/element.mjs";
+import { A11Y_PRESENTATION } from "../../helpers/a11y.mjs";
+/**
+ * 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 rootElement = hot.rootElement;
+  const inputTrapTop = createInputElement(hot);
+  const inputTrapBottom = createInputElement(hot);
+  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 {Handsontable} hot The Handsontable instance.
+ * @returns {HTMLInputElement}
+ */
+function createInputElement(hot) {
+  const rootDocument = hot.rootDocument;
+  const input = rootDocument.createElement('input');
+  input.type = 'text';
+  input.classList.add('htFocusCatcher');
+  if (hot.getSettings().ariaTags) {
+    setAttribute(input, [A11Y_PRESENTATION()]);
+  }
+  return input;
+}

package/core/focusCatcher/index.js

@@ -0,0 +1,148 @@
+"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();
+    }
+  });
+  const rowWrapState = {
+    wrapped: false,
+    flipped: false
+  };
+  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.addHook('beforeRowWrap', (isWrapEnabled, newCoords, isFlipped) => {
+    rowWrapState.wrapped = true;
+    rowWrapState.flipped = isFlipped;
+  });
+
+  /**
+   * Unselects the cell and deactivates the table.
+   */
+  function deactivateTable() {
+    rowWrapState.wrapped = false;
+    rowWrapState.flipped = false;
+    hot.deselectCell();
+    hot.unlisten();
+  }
+  hot.getShortcutManager().getContext('grid').addShortcut({
+    keys: [['Tab'], ['Shift', 'Tab']],
+    callback: event => {
+      const {
+        disableTabNavigation,
+        autoWrapRow
+      } = hot.getSettings();
+      if (disableTabNavigation || !hot.selection.isSelected() || autoWrapRow && rowWrapState.wrapped && rowWrapState.flipped || !autoWrapRow && rowWrapState.wrapped) {
+        if (autoWrapRow && rowWrapState.wrapped && rowWrapState.flipped) {
+          recentlyAddedFocusCoords = event.shiftKey ? getMostTopStartPosition(hot) : getMostBottomEndPosition(hot);
+        }
+        deactivateTable();
+        return false;
+      }
+
+      // if the selection is still within the table's range then prevent default action
+      event.preventDefault();
+    },
+    runOnlyIf: () => !hot.getSettings().minSpareCols,
+    preventDefault: false,
+    stopPropagation: false,
+    position: 'after',
+    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);
+}