handsontable 11.1.0 → 12.1.0

package/core.mjs

@@ -8,6 +8,19 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+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.includes.js";
 import "core-js/modules/es.array.sort.js";
 import "core-js/modules/es.array.splice.js";
 import "core-js/modules/es.number.is-integer.js";
@@ -26,25 +39,13 @@ import "core-js/modules/es.object.to-string.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.array.iterator.js";
+import "core-js/modules/es.map.js";
+import "core-js/modules/web.dom-collections.iterator.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
 import "core-js/modules/es.symbol.iterator.js";
-import "core-js/modules/es.array.iterator.js";
-import "core-js/modules/web.dom-collections.iterator.js";
 import "core-js/modules/es.function.name.js";
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-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 { addClass, empty, removeClass } from "./helpers/dom/element.mjs";
 import { isFunction } from "./helpers/function.mjs";
 import { isDefined, isUndefined, isRegExp, _injectProductInfo, isEmpty } from "./helpers/mixed.mjs";
@@ -64,14 +65,15 @@ import DataSource from "./dataSource.mjs";
 import { cellMethodLookupFactory, spreadsheetColumnLabel } from "./helpers/data.mjs";
 import { IndexMapper } from "./translations/index.mjs";
 import { registerAsRootInstance, hasValidParameter, isRootInstance } from "./utils/rootInstance.mjs";
-import { CellCoords, ViewportColumnsCalculator } from "./3rdparty/walkontable/src/index.mjs";
+import { ViewportColumnsCalculator } from "./3rdparty/walkontable/src/index.mjs";
 import Hooks from "./pluginHooks.mjs";
 import { hasLanguageDictionary, getValidLanguageCode, getTranslatedPhrase } from "./i18n/registry.mjs";
 import { warnUserAboutLanguageRegistration, normalizeLanguageCode } from "./i18n/utils.mjs";
-import { startObserving as keyStateStartObserving, stopObserving as keyStateStopObserving } from "./utils/keyStateObserver.mjs";
 import { Selection } from "./selection/index.mjs";
-import { MetaManager, DynamicCellMetaMod, replaceData } from "./dataMap/index.mjs";
+import { MetaManager, DynamicCellMetaMod, ExtendMetaPropertiesMod, replaceData } from "./dataMap/index.mjs";
 import { createUniqueMap } from "./utils/dataStructures/uniqueMap.mjs";
+import { createShortcutManager } from "./shortcuts/index.mjs";
+var SHORTCUTS_GROUP = 'gridDefault';
 var activeGuid = null;
 /* eslint-disable jsdoc/require-description-complete-sentence */
 
@@ -100,7 +102,8 @@ var activeGuid = null;
  */
 
 export default function Core(rootElement, userSettings) {
-  var _this = this;
+  var _userSettings$layoutD,
+      _this = this;
 
   var rootInstanceSymbol = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var preventScrollingToCell = false;
@@ -111,11 +114,6 @@ export default function Core(rootElement, userSettings) {
   var grid;
   var editorManager;
   var firstRun = true;
-  userSettings.language = getValidLanguageCode(userSettings.language);
-  var metaManager = new MetaManager(instance, userSettings, [DynamicCellMetaMod]);
-  var tableMeta = metaManager.getTableMeta();
-  var globalMeta = metaManager.getGlobalMeta();
-  var pluginsRegistry = createUniqueMap();
 
   if (hasValidParameter(rootInstanceSymbol)) {
     registerAsRootInstance(this);
@@ -178,7 +176,53 @@ export default function Core(rootElement, userSettings) {
    */
 
   this.executionSuspendedCounter = 0;
-  keyStateStartObserving(this.rootDocument);
+  var layoutDirection = (_userSettings$layoutD = userSettings === null || userSettings === void 0 ? void 0 : userSettings.layoutDirection) !== null && _userSettings$layoutD !== void 0 ? _userSettings$layoutD : 'inherit';
+  var rootElementDirection = ['rtl', 'ltr'].includes(layoutDirection) ? layoutDirection : this.rootWindow.getComputedStyle(this.rootElement).direction;
+  this.rootElement.setAttribute('dir', rootElementDirection);
+  /**
+   * Checks if the grid is rendered using the right-to-left layout direction.
+   *
+   * @since 12.0.0
+   * @memberof Core#
+   * @function isRtl
+   * @returns {boolean} True if RTL.
+   */
+
+  this.isRtl = function () {
+    return rootElementDirection === 'rtl';
+  };
+  /**
+   * Checks if the grid is rendered using the left-to-right layout direction.
+   *
+   * @since 12.0.0
+   * @memberof Core#
+   * @function isLtr
+   * @returns {boolean} True if LTR.
+   */
+
+
+  this.isLtr = function () {
+    return !instance.isRtl();
+  };
+  /**
+   * Returns 1 for LTR; -1 for RTL. Useful for calculations.
+   *
+   * @since 12.0.0
+   * @memberof Core#
+   * @function getDirectionFactor
+   * @returns {number} Returns 1 for LTR; -1 for RTL.
+   */
+
+
+  this.getDirectionFactor = function () {
+    return instance.isLtr() ? 1 : -1;
+  };
+
+  userSettings.language = getValidLanguageCode(userSettings.language);
+  var metaManager = new MetaManager(instance, userSettings, [DynamicCellMetaMod, ExtendMetaPropertiesMod]);
+  var tableMeta = metaManager.getTableMeta();
+  var globalMeta = metaManager.getGlobalMeta();
+  var pluginsRegistry = createUniqueMap();
   this.container = this.rootDocument.createElement('div');
   this.renderCall = false;
   rootElement.insertBefore(this.container, rootElement.firstChild);
@@ -216,19 +260,25 @@ export default function Core(rootElement, userSettings) {
   var visualToRenderableCoords = function visualToRenderableCoords(coords) {
     var visualRow = coords.row,
         visualColumn = coords.col;
-    return new CellCoords( // We just store indexes for rows and columns without headers.
+    return instance._createCellCoords( // We just store indexes for rows and columns without headers.
     visualRow >= 0 ? instance.rowIndexMapper.getRenderableFromVisualIndex(visualRow) : visualRow, visualColumn >= 0 ? instance.columnIndexMapper.getRenderableFromVisualIndex(visualColumn) : visualColumn);
   };
 
   var renderableToVisualCoords = function renderableToVisualCoords(coords) {
     var renderableRow = coords.row,
         renderableColumn = coords.col;
-    return new CellCoords( // We just store indexes for rows and columns without headers.
+    return instance._createCellCoords( // We just store indexes for rows and columns without headers.
     renderableRow >= 0 ? instance.rowIndexMapper.getVisualFromRenderableIndex(renderableRow) : renderableRow, renderableColumn >= 0 ? instance.columnIndexMapper.getVisualFromRenderableIndex(renderableColumn) : renderableColumn // eslint-disable-line max-len
     );
   };
 
   var selection = new Selection(tableMeta, {
+    rowIndexMapper: function rowIndexMapper() {
+      return instance.rowIndexMapper;
+    },
+    columnIndexMapper: function columnIndexMapper() {
+      return instance.columnIndexMapper;
+    },
     countCols: function countCols() {
       return instance.countCols();
     },
@@ -247,6 +297,15 @@ export default function Core(rootElement, userSettings) {
     countRowsTranslated: function countRowsTranslated() {
       return _this.view.countRenderableRows();
     },
+    getShortcutManager: function getShortcutManager() {
+      return instance.getShortcutManager();
+    },
+    createCellCoords: function createCellCoords(row, column) {
+      return instance._createCellCoords(row, column);
+    },
+    createCellRange: function createCellRange(highlight, from, to) {
+      return instance._createCellRange(highlight, from, to);
+    },
     visualToRenderableCoords: visualToRenderableCoords,
     renderableToVisualCoords: renderableToVisualCoords,
     isDisabledCellSelection: function isDisabledCellSelection(visualRow, visualColumn) {
@@ -275,11 +334,11 @@ export default function Core(rootElement, userSettings) {
     _this.runHooks('beforeSetRangeEnd', cellCoords);
 
     if (cellCoords.row < 0) {
-      cellCoords.row = _this.view.wt.wtTable.getFirstVisibleRow();
+      cellCoords.row = _this.view._wt.wtTable.getFirstVisibleRow();
     }
 
     if (cellCoords.col < 0) {
-      cellCoords.col = _this.view.wt.wtTable.getFirstVisibleColumn();
+      cellCoords.col = _this.view._wt.wtTable.getFirstVisibleColumn();
     }
   });
   this.selection.addLocalHook('afterSetRangeEnd', function (cellCoords) {
@@ -493,8 +552,8 @@ export default function Core(rootElement, userSettings) {
 
               selection.getSelectedRange().pop(); // I can't use transforms as they don't work in negative indexes.
 
-              selection.setRangeStartOnly(new CellCoords(currentFromRow + delta, currentFromColumn), true);
-              selection.setRangeEnd(new CellCoords(currentToRow + delta, currentToColumn)); // will call render() internally
+              selection.setRangeStartOnly(instance._createCellCoords(currentFromRow + delta, currentFromColumn), true);
+              selection.setRangeEnd(instance._createCellCoords(currentToRow + delta, currentToColumn)); // will call render() internally
             } else {
               instance._refreshBorders(); // it will call render and prepare methods
 
@@ -538,8 +597,8 @@ export default function Core(rootElement, userSettings) {
 
               selection.getSelectedRange().pop(); // I can't use transforms as they don't work in negative indexes.
 
-              selection.setRangeStartOnly(new CellCoords(_currentFromRow, _currentFromColumn + delta), true);
-              selection.setRangeEnd(new CellCoords(_currentToRow, _currentToColumn + delta)); // will call render() internally
+              selection.setRangeStartOnly(instance._createCellCoords(_currentFromRow, _currentFromColumn + delta), true);
+              selection.setRangeEnd(instance._createCellCoords(_currentToRow, _currentToColumn + delta)); // will call render() internally
             } else {
               instance._refreshBorders(); // it will call render and prepare methods
 
@@ -631,10 +690,10 @@ export default function Core(rootElement, userSettings) {
               }
 
               metaManager.removeColumn(physicalColumnIndex, groupAmount);
-              var fixedColumnsLeft = tableMeta.fixedColumnsLeft;
+              var fixedColumnsStart = tableMeta.fixedColumnsStart;
 
-              if (fixedColumnsLeft >= calcIndex + 1) {
-                tableMeta.fixedColumnsLeft -= Math.min(groupAmount, fixedColumnsLeft - calcIndex);
+              if (fixedColumnsStart >= calcIndex + 1) {
+                tableMeta.fixedColumnsStart -= Math.min(groupAmount, fixedColumnsStart - calcIndex);
               }
 
               if (Array.isArray(tableMeta.colHeaders)) {
@@ -1342,6 +1401,38 @@ export default function Core(rootElement, userSettings) {
       activeEditor.refreshValue();
     }
   }
+  /**
+   * Creates and returns the CellCoords object.
+   *
+   * @private
+   * @memberof Core#
+   * @function _createCellCoords
+   * @param {number} row The row index.
+   * @param {number} column The column index.
+   * @returns {CellCoords}
+   */
+
+
+  this._createCellCoords = function (row, column) {
+    return instance.view._wt.createCellCoords(row, column);
+  };
+  /**
+   * Creates and returns the CellRange object.
+   *
+   * @private
+   * @memberof Core#
+   * @function _createCellRange
+   * @param {CellCoords} highlight Defines the border around a cell where selection was started and to edit the cell
+   *                               when you press Enter. The highlight cannot point to headers (negative values).
+   * @param {CellCoords} from Initial coordinates.
+   * @param {CellCoords} to Final coordinates.
+   * @returns {CellRange}
+   */
+
+
+  this._createCellRange = function (highlight, from, to) {
+    return instance.view._wt.createCellRange(highlight, from, to);
+  };
   /**
    * Validate a single cell.
    *
@@ -1380,7 +1471,8 @@ export default function Core(rootElement, userSettings) {
       if (td && td.nodeName !== 'TH') {
         var renderableRow = instance.rowIndexMapper.getRenderableFromVisualIndex(row);
         var renderableColumn = instance.columnIndexMapper.getRenderableFromVisualIndex(col);
-        instance.view.wt.wtSettings.settings.cellRenderer(renderableRow, renderableColumn, td);
+
+        instance.view._wt.getSetting('cellRenderer', renderableRow, renderableColumn, td);
       }
 
       callback(valid);
@@ -1605,8 +1697,8 @@ export default function Core(rootElement, userSettings) {
       throw new Error('populateFromArray parameter `input` must be an array of arrays'); // API changed in 0.9-beta2, let's check if you use it correctly
     }
 
-    var c = typeof endRow === 'number' ? new CellCoords(endRow, endCol) : null;
-    return grid.populateFromArray(new CellCoords(row, column), input, c, source, method, direction, deltas);
+    var c = typeof endRow === 'number' ? instance._createCellCoords(endRow, endCol) : null;
+    return grid.populateFromArray(instance._createCellCoords(row, column), input, c, source, method, direction, deltas);
   };
   /**
    * Adds/removes data from the column. This method works the same as Array.splice for arrays.
@@ -1755,10 +1847,10 @@ export default function Core(rootElement, userSettings) {
 
     var changes = [];
     arrayEach(selection.getSelectedRange(), function (cellRange) {
-      var topLeft = cellRange.getTopLeftCorner();
-      var bottomRight = cellRange.getBottomRightCorner();
-      rangeEach(topLeft.row, bottomRight.row, function (row) {
-        rangeEach(topLeft.col, bottomRight.col, function (column) {
+      var topStart = cellRange.getTopStartCorner();
+      var bottomEnd = cellRange.getBottomEndCorner();
+      rangeEach(topStart.row, bottomEnd.row, function (row) {
+        rangeEach(topStart.col, bottomEnd.col, function (column) {
           if (!_this2.getCellMeta(row, column).readOnly) {
             changes.push([row, column, null]);
           }
@@ -2116,7 +2208,7 @@ export default function Core(rootElement, userSettings) {
       return;
     }
 
-    if (isSizeChanged || instance.view.wt.wtOverlays.scrollableElement === instance.rootWindow) {
+    if (isSizeChanged || instance.view._wt.wtOverlays.scrollableElement === instance.rootWindow) {
       instance.view.setLastSize(width, height);
       instance.render();
     }
@@ -2140,8 +2232,8 @@ export default function Core(rootElement, userSettings) {
    * To replace Handsontable's [`data`](@/api/options.md#data) and reset states, use the [`loadData()`](#loaddata) method.
    *
    * Read more:
-   * - [Binding to data &#8594;](@/guides/getting-started/binding-to-data.md)
-   * - [Saving data &#8594;](@/guides/getting-started/saving-data.md)
+   * - [Binding to data](@/guides/getting-started/binding-to-data.md)
+   * - [Saving data](@/guides/getting-started/saving-data.md)
    *
    * @memberof Core#
    * @function updateData
@@ -2184,8 +2276,8 @@ export default function Core(rootElement, userSettings) {
    * To replace Handsontable's [`data`](@/api/options.md#data) without resetting states, use the [`updateData()`](#updatedata) method.
    *
    * Read more:
-   * - [Binding to data &#8594;](@/guides/getting-started/binding-to-data.md)
-   * - [Saving data &#8594;](@/guides/getting-started/saving-data.md)
+   * - [Binding to data](@/guides/getting-started/binding-to-data.md)
+   * - [Saving data](@/guides/getting-started/saving-data.md)
    *
    * @memberof Core#
    * @function loadData
@@ -2299,7 +2391,7 @@ export default function Core(rootElement, userSettings) {
       return datamap.getAll();
     }
 
-    return datamap.getRange(new CellCoords(row, column), new CellCoords(row2, column2), datamap.DESTINATION_RENDERER);
+    return datamap.getRange(instance._createCellCoords(row, column), instance._createCellCoords(row2, column2), datamap.DESTINATION_RENDERER);
   };
   /**
    * Returns a string value of the selected range. Each column is separated by tab, each row is separated by a new
@@ -2316,7 +2408,7 @@ export default function Core(rootElement, userSettings) {
 
 
   this.getCopyableText = function (startRow, startCol, endRow, endCol) {
-    return datamap.getCopyableText(new CellCoords(startRow, startCol), new CellCoords(endRow, endCol));
+    return datamap.getCopyableText(instance._createCellCoords(startRow, startCol), instance._createCellCoords(endRow, endCol));
   };
   /**
    * Returns the data's copyable value at specified `row` and `column` index.
@@ -2346,7 +2438,7 @@ export default function Core(rootElement, userSettings) {
     return datamap.getSchema();
   };
   /**
-   * Use it if you need to change configuration after initialization. The `settings` argument is an object containing the new
+   * Use it if you need to change configuration after initialization. The `settings` argument is an object containing the changed
    * settings, declared the same way as in the initial settings object.
    *
    * __Note__, that although the `updateSettings` method doesn't overwrite the previously declared settings, it might reset
@@ -2355,9 +2447,12 @@ export default function Core(rootElement, userSettings) {
    * Since 8.0.0 passing `columns` or `data` inside `settings` objects will result in resetting states corresponding to rows and columns
    * (for example, row/column sequence, column width, row height, frozen columns etc.).
    *
+   * Since 12.0.0 passing `data` inside `settings` objects no longer results in resetting states corresponding to rows and columns
+   * (for example, row/column sequence, column width, row height, frozen columns etc.).
+   *
    * @memberof Core#
    * @function updateSettings
-   * @param {object} settings New settings object (see {@link Options}).
+   * @param {object} settings A settings object (see {@link Options}). Only provide the settings that are changed, not the whole settings object that was used for initialization.
    * @param {boolean} [init=false] Internally used for in initialization mode.
    * @example
    * ```js
@@ -2374,12 +2469,7 @@ export default function Core(rootElement, userSettings) {
 
   this.updateSettings = function (settings) {
     var init = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    // TODO: uncomment the next line with the next major version update
-    // Do not forget to re-enable the pending tests that cover the change:
-    //  * https://github.com/handsontable/handsontable/blob/9f62c282a1c951b27cd8406aa27105bd32b05bb6/handsontable/test/e2e/core/toPhysicalColumn.spec.js#L70
-    //  * https://github.com/handsontable/handsontable/blob/9f62c282a1c951b27cd8406aa27105bd32b05bb6/handsontable/test/e2e/core/toVisualColumn.spec.js#L70
-    // const dataUpdateFunction = (firstRun ? instance.loadData : instance.updateData).bind(this);
-    var dataUpdateFunction = instance.loadData.bind(this);
+    var dataUpdateFunction = (firstRun ? instance.loadData : instance.updateData).bind(this);
     var columnsAsFunc = false;
     var i;
     var j;
@@ -2398,19 +2488,15 @@ export default function Core(rootElement, userSettings) {
 
 
     for (i in settings) {
-      if (i === 'data') {
-        /* eslint-disable-next-line no-continue */
-        continue; // loadData will be triggered later
+      if (i === 'data') {// Do nothing. loadData will be triggered later
       } else if (i === 'language') {
         setLanguage(settings.language);
-        /* eslint-disable-next-line no-continue */
-
-        continue;
       } else if (i === 'className') {
         setClassName('className', settings.className);
       } else if (i === 'tableClassName' && instance.table) {
         setClassName('tableClassName', settings.tableClassName);
-        instance.view.wt.wtOverlays.syncOverlayTableClassNames();
+
+        instance.view._wt.wtOverlays.syncOverlayTableClassNames();
       } else if (Hooks.getSingleton().isRegistered(i) || Hooks.getSingleton().isDeprecated(i)) {
         if (isFunction(settings[i]) || Array.isArray(settings[i])) {
           settings[i].initialHook = true;
@@ -2513,8 +2599,9 @@ export default function Core(rootElement, userSettings) {
 
     if (!init) {
       if (instance.view) {
-        instance.view.wt.wtViewport.resetHasOversizedColumnHeadersMarked();
-        instance.view.wt.exportSettingsAsClassNames();
+        instance.view._wt.wtViewport.resetHasOversizedColumnHeadersMarked();
+
+        instance.view._wt.exportSettingsAsClassNames();
       }
 
       instance.runHooks('afterUpdateSettings', settings);
@@ -2529,12 +2616,13 @@ export default function Core(rootElement, userSettings) {
 
       instance._refreshBorders(null);
 
-      instance.view.wt.wtOverlays.adjustElementsSize();
+      instance.view._wt.wtOverlays.adjustElementsSize();
+
       editorManager.unlockEditor();
     }
 
     if (!init && instance.view && (currentHeight === '' || height === '' || height === void 0) && currentHeight !== height) {
-      instance.view.wt.wtOverlays.updateMainScrollableElements();
+      instance.view._wt.wtOverlays.updateMainScrollableElements();
     }
   };
   /**
@@ -2564,7 +2652,7 @@ export default function Core(rootElement, userSettings) {
    *
    * @memberof Core#
    * @function getSettings
-   * @returns {object} Object containing the current table settings.
+   * @returns {TableMeta} Object containing the current table settings.
    */
 
 
@@ -2658,7 +2746,7 @@ export default function Core(rootElement, userSettings) {
       return null;
     }
 
-    return instance.view.getCellAtCoords(new CellCoords(renderableRowIndex, renderableColumnIndex), topmost);
+    return instance.view.getCellAtCoords(instance._createCellCoords(renderableRowIndex, renderableColumnIndex), topmost);
   };
   /**
    * Returns the coordinates of the cell, provided as a HTML table cell element.
@@ -2676,7 +2764,7 @@ export default function Core(rootElement, userSettings) {
 
 
   this.getCoords = function (element) {
-    var renderableCoords = this.view.wt.wtTable.getCoords(element);
+    var renderableCoords = this.view._wt.wtTable.getCoords(element);
 
     if (renderableCoords === null) {
       return null;
@@ -2695,7 +2783,7 @@ export default function Core(rootElement, userSettings) {
       visualColumn = this.columnIndexMapper.getVisualFromRenderableIndex(renderableColumn);
     }
 
-    return new CellCoords(visualRow, visualColumn);
+    return instance._createCellCoords(visualRow, visualColumn);
   };
   /**
    * Returns the property name that corresponds with the given column index.
@@ -2837,7 +2925,7 @@ export default function Core(rootElement, userSettings) {
   this.getDataAtCol = function (column) {
     var _ref13;
 
-    return (_ref13 = []).concat.apply(_ref13, _toConsumableArray(datamap.getRange(new CellCoords(0, column), new CellCoords(tableMeta.data.length - 1, column), datamap.DESTINATION_RENDERER)));
+    return (_ref13 = []).concat.apply(_ref13, _toConsumableArray(datamap.getRange(instance._createCellCoords(0, column), instance._createCellCoords(tableMeta.data.length - 1, column), datamap.DESTINATION_RENDERER)));
   };
   /**
    * Given the object property name (e.g. `'first.name'` or `'0'`), returns an array of column's values from the table data.
@@ -2854,7 +2942,7 @@ export default function Core(rootElement, userSettings) {
   this.getDataAtProp = function (prop) {
     var _ref14;
 
-    var range = datamap.getRange(new CellCoords(0, datamap.propToCol(prop)), new CellCoords(tableMeta.data.length - 1, datamap.propToCol(prop)), datamap.DESTINATION_RENDERER);
+    var range = datamap.getRange(instance._createCellCoords(0, datamap.propToCol(prop)), instance._createCellCoords(tableMeta.data.length - 1, datamap.propToCol(prop)), datamap.DESTINATION_RENDERER);
     return (_ref14 = []).concat.apply(_ref14, _toConsumableArray(range));
   };
   /**
@@ -2881,7 +2969,7 @@ export default function Core(rootElement, userSettings) {
     if (row === void 0) {
       data = dataSource.getData();
     } else {
-      data = dataSource.getByRange(new CellCoords(row, column), new CellCoords(row2, column2));
+      data = dataSource.getByRange(instance._createCellCoords(row, column), instance._createCellCoords(row2, column2));
     }
 
     return data;
@@ -2910,7 +2998,7 @@ export default function Core(rootElement, userSettings) {
     if (row === void 0) {
       data = dataSource.getData(true);
     } else {
-      data = dataSource.getByRange(new CellCoords(row, column), new CellCoords(row2, column2), true);
+      data = dataSource.getByRange(instance._createCellCoords(row, column), instance._createCellCoords(row2, column2), true);
     }
 
     return data;
@@ -3027,7 +3115,7 @@ export default function Core(rootElement, userSettings) {
 
 
   this.getDataAtRow = function (row) {
-    var data = datamap.getRange(new CellCoords(row, 0), new CellCoords(row, this.countCols() - 1), datamap.DESTINATION_RENDERER);
+    var data = datamap.getRange(instance._createCellCoords(row, 0), instance._createCellCoords(row, this.countCols() - 1), datamap.DESTINATION_RENDERER);
     return data[0] || [];
   };
   /**
@@ -3790,7 +3878,8 @@ export default function Core(rootElement, userSettings) {
     return Math.min(maxCols, dataLen);
   };
   /**
-   * Returns the number of rendered rows (including rows partially or fully rendered outside viewport).
+   * Returns the number of rendered rows including rows that are partially or fully rendered
+   * outside the table viewport.
    *
    * @memberof Core#
    * @function countRenderedRows
@@ -3799,10 +3888,11 @@ export default function Core(rootElement, userSettings) {
 
 
   this.countRenderedRows = function () {
-    return instance.view.wt.drawn ? instance.view.wt.wtTable.getRenderedRowsCount() : -1;
+    return instance.view._wt.drawn ? instance.view._wt.wtTable.getRenderedRowsCount() : -1;
   };
   /**
-   * Returns the number of visible rows (rendered rows that fully fit inside viewport).
+   * Returns the number of rendered rows that are only visible in the table viewport.
+   * The rows that are partially visible are not counted.
    *
    * @memberof Core#
    * @function countVisibleRows
@@ -3811,10 +3901,11 @@ export default function Core(rootElement, userSettings) {
 
 
   this.countVisibleRows = function () {
-    return instance.view.wt.drawn ? instance.view.wt.wtTable.getVisibleRowsCount() : -1;
+    return instance.view._wt.drawn ? instance.view._wt.wtTable.getVisibleRowsCount() : -1;
   };
   /**
-   * Returns the number of rendered columns (including columns partially or fully rendered outside viewport).
+   * Returns the number of rendered rows including columns that are partially or fully rendered
+   * outside the table viewport.
    *
    * @memberof Core#
    * @function countRenderedCols
@@ -3823,10 +3914,11 @@ export default function Core(rootElement, userSettings) {
 
 
   this.countRenderedCols = function () {
-    return instance.view.wt.drawn ? instance.view.wt.wtTable.getRenderedColumnsCount() : -1;
+    return instance.view._wt.drawn ? instance.view._wt.wtTable.getRenderedColumnsCount() : -1;
   };
   /**
-   * Returns the number of visible columns. Returns -1 if table is not visible.
+   * Returns the number of rendered columns that are only visible in the table viewport.
+   * The columns that are partially visible are not counted.
    *
    * @memberof Core#
    * @function countVisibleCols
@@ -3835,7 +3927,7 @@ export default function Core(rootElement, userSettings) {
 
 
   this.countVisibleCols = function () {
-    return instance.view.wt.drawn ? instance.view.wt.wtTable.getVisibleColumnsCount() : -1;
+    return instance.view._wt.drawn ? instance.view._wt.wtTable.getVisibleColumnsCount() : -1;
   };
   /**
    * Returns the number of empty rows. If the optional ending parameter is `true`, returns the
@@ -4097,7 +4189,7 @@ export default function Core(rootElement, userSettings) {
 
   var getIndexToScroll = function getIndexToScroll(indexMapper, visualIndex) {
     // Looking for a visual index on the right and then (when not found) on the left.
-    return indexMapper.getFirstNotHiddenIndex(visualIndex, 1, true);
+    return indexMapper.getNearestNotHiddenIndex(visualIndex, 1, true);
   };
   /**
    * Scroll viewport to coordinates specified by the `row` and `column` arguments.
@@ -4108,8 +4200,10 @@ export default function Core(rootElement, userSettings) {
    * 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`, viewport is scrolled to show the cell on the bottom of the table.
-   * @param {boolean} [snapToRight=false] If `true`, viewport is scrolled to show the cell on the right side of the table.
+   * @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
    * 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.
@@ -4145,7 +4239,7 @@ export default function Core(rootElement, userSettings) {
     var isColumnInteger = Number.isInteger(renderableColumn);
 
     if (isRowInteger && isColumnInteger) {
-      return instance.view.scrollViewport(new CellCoords(renderableRow, renderableColumn), snapToTop, snapToRight, snapToBottom, snapToLeft);
+      return instance.view.scrollViewport(instance._createCellCoords(renderableRow, renderableColumn), snapToTop, snapToRight, snapToBottom, snapToLeft);
     }
 
     if (isRowInteger && isColumnInteger === false) {
@@ -4182,8 +4276,8 @@ export default function Core(rootElement, userSettings) {
     }
 
     dataSource = null;
+    this.getShortcutManager().destroy();
     metaManager.clearCache();
-    keyStateStopObserving();
 
     if (isRootInstance(instance)) {
       var licenseInfo = this.rootDocument.querySelector('#hot-display-license-info');
@@ -4351,7 +4445,7 @@ export default function Core(rootElement, userSettings) {
 
 
   this.hasHook = function (key) {
-    return Hooks.getSingleton().has(key, instance);
+    return Hooks.getSingleton().has(key, instance) || Hooks.getSingleton().has(key);
   };
   /**
    * Adds listener to specified hook name (only for this Handsontable instance). After the listener is triggered,
@@ -4579,6 +4673,337 @@ export default function Core(rootElement, userSettings) {
     return instance.isLtr() ? 1 : -1;
   };
 
+  var shortcutManager = createShortcutManager({
+    handleEvent: function handleEvent(event) {
+      var isListening = instance.isListening();
+      var isKeyboardEventWithKey = (event === null || event === void 0 ? void 0 : event.key) !== void 0;
+      return isListening && isKeyboardEventWithKey;
+    },
+    beforeKeyDown: function beforeKeyDown(event) {
+      return _this.runHooks('beforeKeyDown', event);
+    },
+    afterKeyDown: function afterKeyDown(event) {
+      if (_this.isDestroyed) {
+        // Handsontable could be destroyed after performing action (executing a callback).
+        return;
+      }
+
+      instance.runHooks('afterDocumentKeyDown', event);
+    },
+    ownerWindow: this.rootWindow
+  });
+  /**
+   * Returns instance of a manager responsible for handling shortcuts stored in some contexts. It run actions after
+   * pressing key combination in active Handsontable instance.
+   *
+   * @memberof Core#
+   * @since 12.0.0
+   * @function getShortcutManager
+   * @returns {ShortcutManager} Instance of {@link ShortcutManager}
+   */
+
+  this.getShortcutManager = function () {
+    return shortcutManager;
+  };
+
+  var gridContext = shortcutManager.addContext('grid');
+  var gridConfig = {
+    runOnlyIf: function runOnlyIf() {
+      return isDefined(instance.getSelected()) && instance.countRenderedRows() > 0 && instance.countRenderedCols() > 0;
+    },
+    group: SHORTCUTS_GROUP
+  };
+  shortcutManager.setActiveContextName('grid');
+  gridContext.addShortcuts([{
+    keys: [['Control/Meta', 'A']],
+    callback: function callback() {
+      instance.selectAll();
+    }
+  }, {
+    keys: [['Control/Meta', 'Enter']],
+    callback: function callback() {
+      var selectedRange = instance.getSelectedRange();
+      var _selectedRange$highli = selectedRange[selectedRange.length - 1].highlight,
+          highlightRow = _selectedRange$highli.row,
+          highlightColumn = _selectedRange$highli.col;
+      var valueToPopulate = instance.getDataAtCell(highlightRow, highlightColumn);
+      var cellValues = new Map();
+
+      for (var i = 0; i < selectedRange.length; i++) {
+        selectedRange[i].forAll(function (row, column) {
+          if (row >= 0 && column >= 0 && (row !== highlightRow || column !== highlightColumn)) {
+            var _instance$getCellMeta = instance.getCellMeta(row, column),
+                readOnly = _instance$getCellMeta.readOnly;
+
+            if (!readOnly) {
+              cellValues.set("".concat(row, "x").concat(column), [row, column, valueToPopulate]);
+            }
+          }
+        });
+      }
+
+      instance.setDataAtCell(Array.from(cellValues.values()));
+    },
+    runOnlyIf: function runOnlyIf() {
+      return instance.getSelectedRangeLast().getCellsCount() > 1;
+    }
+  }, {
+    keys: [['ArrowUp']],
+    callback: function callback() {
+      selection.transformStart(-1, 0);
+    }
+  }, {
+    keys: [['ArrowUp', 'Control/Meta']],
+    captureCtrl: true,
+    callback: function callback() {
+      selection.setRangeStart(instance._createCellCoords(instance.rowIndexMapper.getNearestNotHiddenIndex(0, 1), instance.getSelectedRangeLast().highlight.col));
+    }
+  }, {
+    keys: [['ArrowUp', 'Shift']],
+    callback: function callback() {
+      selection.transformEnd(-1, 0);
+    }
+  }, {
+    keys: [['ArrowUp', 'Shift', 'Control/Meta']],
+    captureCtrl: true,
+    callback: function callback() {
+      var _instance$getSelected = instance.getSelectedRangeLast(),
+          from = _instance$getSelected.from,
+          to = _instance$getSelected.to;
+
+      var row = instance.rowIndexMapper.getNearestNotHiddenIndex(0, 1);
+      selection.setRangeStart(from.clone());
+      selection.setRangeEnd(instance._createCellCoords(row, to.col));
+    },
+    runOnlyIf: function runOnlyIf() {
+      return !(instance.selection.isSelectedByCorner() || instance.selection.isSelectedByColumnHeader());
+    }
+  }, {
+    keys: [['ArrowDown']],
+    callback: function callback() {
+      selection.transformStart(1, 0);
+    }
+  }, {
+    keys: [['ArrowDown', 'Control/Meta']],
+    captureCtrl: true,
+    callback: function callback() {
+      selection.setRangeStart(instance._createCellCoords(instance.rowIndexMapper.getNearestNotHiddenIndex(instance.countRows() - 1, -1), instance.getSelectedRangeLast().highlight.col));
+    }
+  }, {
+    keys: [['ArrowDown', 'Shift']],
+    callback: function callback() {
+      selection.transformEnd(1, 0);
+    }
+  }, {
+    keys: [['ArrowDown', 'Shift', 'Control/Meta']],
+    captureCtrl: true,
+    callback: function callback() {
+      var _instance$getSelected2 = instance.getSelectedRangeLast(),
+          from = _instance$getSelected2.from,
+          to = _instance$getSelected2.to;
+
+      var row = instance.rowIndexMapper.getNearestNotHiddenIndex(instance.countRows() - 1, -1);
+      selection.setRangeStart(from.clone());
+      selection.setRangeEnd(instance._createCellCoords(row, to.col));
+    },
+    runOnlyIf: function runOnlyIf() {
+      return !(instance.selection.isSelectedByCorner() || instance.selection.isSelectedByColumnHeader());
+    }
+  }, {
+    keys: [['ArrowLeft']],
+    callback: function callback() {
+      selection.transformStart(0, -1 * instance.getDirectionFactor());
+    }
+  }, {
+    keys: [['ArrowLeft', 'Control/Meta']],
+    captureCtrl: true,
+    callback: function callback() {
+      var _instance$columnIndex;
+
+      var row = instance.getSelectedRangeLast().highlight.row;
+
+      var column = (_instance$columnIndex = instance.columnIndexMapper).getNearestNotHiddenIndex.apply(_instance$columnIndex, _toConsumableArray(instance.isRtl() ? [instance.countCols() - 1, -1] : [0, 1]));
+
+      selection.setRangeStart(instance._createCellCoords(row, column));
+    }
+  }, {
+    keys: [['ArrowLeft', 'Shift']],
+    callback: function callback() {
+      selection.transformEnd(0, -1 * instance.getDirectionFactor());
+    }
+  }, {
+    keys: [['ArrowLeft', 'Shift', 'Control/Meta']],
+    captureCtrl: true,
+    callback: function callback() {
+      var _instance$columnIndex2;
+
+      var _instance$getSelected3 = instance.getSelectedRangeLast(),
+          from = _instance$getSelected3.from,
+          to = _instance$getSelected3.to;
+
+      var column = (_instance$columnIndex2 = instance.columnIndexMapper).getNearestNotHiddenIndex.apply(_instance$columnIndex2, _toConsumableArray(instance.isRtl() ? [instance.countCols() - 1, -1] : [0, 1]));
+
+      selection.setRangeStart(from.clone());
+      selection.setRangeEnd(instance._createCellCoords(to.row, column));
+    },
+    runOnlyIf: function runOnlyIf() {
+      return !(instance.selection.isSelectedByCorner() || instance.selection.isSelectedByRowHeader());
+    }
+  }, {
+    keys: [['ArrowRight']],
+    callback: function callback() {
+      selection.transformStart(0, instance.getDirectionFactor());
+    }
+  }, {
+    keys: [['ArrowRight', 'Control/Meta']],
+    captureCtrl: true,
+    callback: function callback() {
+      var _instance$columnIndex3;
+
+      var row = instance.getSelectedRangeLast().highlight.row;
+
+      var column = (_instance$columnIndex3 = instance.columnIndexMapper).getNearestNotHiddenIndex.apply(_instance$columnIndex3, _toConsumableArray(instance.isRtl() ? [0, 1] : [instance.countCols() - 1, -1]));
+
+      selection.setRangeStart(instance._createCellCoords(row, column));
+    }
+  }, {
+    keys: [['ArrowRight', 'Shift']],
+    callback: function callback() {
+      selection.transformEnd(0, instance.getDirectionFactor());
+    }
+  }, {
+    keys: [['ArrowRight', 'Shift', 'Control/Meta']],
+    captureCtrl: true,
+    callback: function callback() {
+      var _instance$columnIndex4;
+
+      var _instance$getSelected4 = instance.getSelectedRangeLast(),
+          from = _instance$getSelected4.from,
+          to = _instance$getSelected4.to;
+
+      var column = (_instance$columnIndex4 = instance.columnIndexMapper).getNearestNotHiddenIndex.apply(_instance$columnIndex4, _toConsumableArray(instance.isRtl() ? [0, 1] : [instance.countCols() - 1, -1]));
+
+      selection.setRangeStart(from.clone());
+      selection.setRangeEnd(instance._createCellCoords(to.row, column));
+    },
+    runOnlyIf: function runOnlyIf() {
+      return !(instance.selection.isSelectedByCorner() || instance.selection.isSelectedByRowHeader());
+    }
+  }, {
+    keys: [['Home']],
+    captureCtrl: true,
+    callback: function callback() {
+      var fixedColumns = parseInt(instance.getSettings().fixedColumnsStart, 10);
+      var row = instance.getSelectedRangeLast().highlight.row;
+      var column = instance.columnIndexMapper.getNearestNotHiddenIndex(fixedColumns, 1);
+      selection.setRangeStart(instance._createCellCoords(row, column));
+    },
+    runOnlyIf: function runOnlyIf() {
+      return instance.view.isMainTableNotFullyCoveredByOverlays();
+    }
+  }, {
+    keys: [['Home', 'Shift']],
+    callback: function callback() {
+      selection.setRangeEnd(instance._createCellCoords(selection.selectedRange.current().from.row, instance.columnIndexMapper.getNearestNotHiddenIndex(0, 1)));
+    }
+  }, {
+    keys: [['Home', 'Control/Meta']],
+    captureCtrl: true,
+    callback: function callback() {
+      var fixedRows = parseInt(instance.getSettings().fixedRowsTop, 10);
+      var fixedColumns = parseInt(instance.getSettings().fixedColumnsStart, 10);
+      var row = instance.rowIndexMapper.getNearestNotHiddenIndex(fixedRows, 1);
+      var column = instance.columnIndexMapper.getNearestNotHiddenIndex(fixedColumns, 1);
+      selection.setRangeStart(instance._createCellCoords(row, column));
+    },
+    runOnlyIf: function runOnlyIf() {
+      return instance.view.isMainTableNotFullyCoveredByOverlays();
+    }
+  }, {
+    keys: [['End']],
+    captureCtrl: true,
+    callback: function callback() {
+      selection.setRangeStart(instance._createCellCoords(instance.getSelectedRangeLast().highlight.row, instance.columnIndexMapper.getNearestNotHiddenIndex(instance.countCols() - 1, -1)));
+    },
+    runOnlyIf: function runOnlyIf() {
+      return instance.view.isMainTableNotFullyCoveredByOverlays();
+    }
+  }, {
+    keys: [['End', 'Shift']],
+    callback: function callback() {
+      selection.setRangeEnd(instance._createCellCoords(selection.selectedRange.current().from.row, instance.columnIndexMapper.getNearestNotHiddenIndex(instance.countCols() - 1, -1)));
+    }
+  }, {
+    keys: [['End', 'Control/Meta']],
+    captureCtrl: true,
+    callback: function callback() {
+      var fixedRows = parseInt(instance.getSettings().fixedRowsBottom, 10);
+      var row = instance.rowIndexMapper.getNearestNotHiddenIndex(instance.countRows() - fixedRows - 1, -1);
+      var column = instance.columnIndexMapper.getNearestNotHiddenIndex(instance.countCols() - 1, -1);
+      selection.setRangeStart(instance._createCellCoords(row, column));
+    },
+    runOnlyIf: function runOnlyIf() {
+      return instance.view.isMainTableNotFullyCoveredByOverlays();
+    }
+  }, {
+    keys: [['PageUp']],
+    callback: function callback() {
+      selection.transformStart(-instance.countVisibleRows(), 0);
+    }
+  }, {
+    keys: [['PageUp', 'Shift']],
+    callback: function callback() {
+      var _instance$getSelected5 = instance.getSelectedRangeLast(),
+          to = _instance$getSelected5.to;
+
+      var nextRowIndexToSelect = Math.max(to.row - instance.countVisibleRows(), 0);
+      var row = instance.rowIndexMapper.getNearestNotHiddenIndex(nextRowIndexToSelect, 1);
+
+      if (row !== null) {
+        var coords = instance._createCellCoords(row, to.col);
+
+        var scrollPadding = to.row - instance.view.getFirstFullyVisibleRow();
+        var nextVerticalScroll = Math.max(coords.row - scrollPadding, 0);
+        selection.setRangeEnd(coords);
+        instance.scrollViewportTo(nextVerticalScroll);
+      }
+    }
+  }, {
+    keys: [['PageDown']],
+    callback: function callback() {
+      selection.transformStart(instance.countVisibleRows(), 0);
+    }
+  }, {
+    keys: [['PageDown', 'Shift']],
+    callback: function callback() {
+      var _instance$getSelected6 = instance.getSelectedRangeLast(),
+          to = _instance$getSelected6.to;
+
+      var nextRowIndexToSelect = Math.min(to.row + instance.countVisibleRows(), instance.countRows() - 1);
+      var row = instance.rowIndexMapper.getNearestNotHiddenIndex(nextRowIndexToSelect, -1);
+
+      if (row !== null) {
+        var coords = instance._createCellCoords(row, to.col);
+
+        var scrollPadding = to.row - instance.view.getFirstFullyVisibleRow();
+        var nextVerticalScroll = Math.min(coords.row - scrollPadding, instance.countRows() - 1);
+        selection.setRangeEnd(coords);
+        instance.scrollViewportTo(nextVerticalScroll);
+      }
+    }
+  }, {
+    keys: [['Tab']],
+    callback: function callback(event) {
+      var tabMoves = typeof tableMeta.tabMoves === 'function' ? tableMeta.tabMoves(event) : tableMeta.tabMoves;
+      selection.transformStart(tabMoves.row, tabMoves.col, true);
+    }
+  }, {
+    keys: [['Shift', 'Tab']],
+    callback: function callback(event) {
+      var tabMoves = typeof tableMeta.tabMoves === 'function' ? tableMeta.tabMoves(event) : tableMeta.tabMoves;
+      selection.transformStart(-tabMoves.row, -tabMoves.col);
+    }
+  }], gridConfig);
   getPluginsNames().forEach(function (pluginName) {
     var PluginClass = getPlugin(pluginName);
     pluginsRegistry.addItem(pluginName, new PluginClass(_this));