handsontable 0.0.0-next-9059914-20231025 → 0.0.0-next-21d91d0-20231025

package/shortcuts/context.js

@@ -1,6 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
+exports.isContextObject = isContextObject;
 require("core-js/modules/es.error.cause.js");
 require("core-js/modules/es.array.push.js");
 var _uniqueMap = require("../utils/dataStructures/uniqueMap");
@@ -9,6 +10,18 @@ var _mixed = require("../helpers/mixed");
 var _function = require("../helpers/function");
 var _object = require("../helpers/object");
 var _templateLiteralTag = require("../helpers/templateLiteralTag");
+const __kindOf = Symbol('shortcut-context');
+
+/**
+ * Checks if the provided object is a context object.
+ *
+ * @param {*} objectToCheck An object to check.
+ * @returns {boolean}
+ */
+function isContextObject(objectToCheck) {
+  return (0, _object.isObject)(objectToCheck) && objectToCheck.__kindOf === __kindOf;
+}
+
 /* eslint-disable jsdoc/require-description-complete-sentence */
 /**
  * The `ShortcutContext` API lets you store and manage [keyboard shortcuts](@/guides/accessories-and-menus/keyboard-shortcuts.md) in a given [context](@/guides/accessories-and-menus/keyboard-shortcuts.md#keyboard-shortcut-contexts).
@@ -36,13 +49,13 @@ const createContext = name => {
    * @param {Function} options.callback The shortcut's action
    * @param {object} options.group A group of shortcuts to which the shortcut belongs
    * @param {object} [options.runOnlyIf] A condition on which the shortcut's action runs
-   * @param {object} [options.stopPropagation=true] If set to `true`: stops the event's propagation
+   * @param {object} [options.stopPropagation=false] If set to `true`: stops the event's propagation
    * @param {object} [options.captureCtrl=false] If set to `true`: captures the state of the Control/Meta modifier key
    * @param {object} [options.preventDefault=true] If set to `true`: prevents the default behavior
    * @param {object} [options.position='after'] The order in which the shortcut's action runs:
    * `'before'` or `'after'` the `relativeToGroup` group of actions
    * @param {object} [options.relativeToGroup] The name of a group of actions, used to determine an action's `position`
-   *
+   * @param {object} [options.forwardToContext] The context object where the event will be forwarded to.
    */
   const addShortcut = function () {
     let {
@@ -54,7 +67,8 @@ const createContext = name => {
       preventDefault = true,
       stopPropagation = false,
       relativeToGroup,
-      position
+      position,
+      forwardToContext
     } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     if ((0, _mixed.isUndefined)(group)) {
       throw new Error('You need to define the shortcut\'s group.');
@@ -78,6 +92,9 @@ const createContext = name => {
     if ((0, _mixed.isDefined)(relativeToGroup)) {
       [newShortcut.relativeToGroup, newShortcut.position] = [relativeToGroup, position];
     }
+    if (isContextObject(forwardToContext)) {
+      newShortcut.forwardToContext = forwardToContext;
+    }
     keys.forEach(keyCombination => {
       const normalizedKeys = (0, _utils.normalizeKeys)(keyCombination);
       const hasKeyCombination = SHORTCUTS.hasItem(normalizedKeys);
@@ -109,11 +126,12 @@ const createContext = name => {
    * @param {Function} [options.callback] A shortcut's action
    * @param {object} [options.group] A group of shortcuts to which a shortcut belongs
    * @param {object} [options.runOnlyIf] A condition on which a shortcut's action runs
-   * @param {object} [options.stopPropagation=true] If set to `true`: stops the event's propagation
+   * @param {object} [options.stopPropagation=false] If set to `true`: stops the event's propagation
    * @param {object} [options.preventDefault=true] If set to `true`: prevents the default behavior
    * @param {object} [options.position='after'] The order in which a shortcut's action runs:
    * `'before'` or `'after'` a `relativeToGroup` group of actions
    * @param {object} [options.relativeToGroup] The name of a group of actions, used to determine an action's `position`
+   * @param {object} [options.forwardToContext] The context object where the event will be forwarded to.
    */
   const addShortcuts = function (shortcuts) {
     let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -189,6 +207,7 @@ const createContext = name => {
     return SHORTCUTS.hasItem(normalizedKeys);
   };
   return {
+    __kindOf,
     addShortcut,
     addShortcuts,
     getShortcuts,

package/shortcuts/context.mjs

@@ -4,8 +4,20 @@ import { createUniqueMap } from "../utils/dataStructures/uniqueMap.mjs";
 import { normalizeKeys, getKeysList } from "./utils.mjs";
 import { isUndefined, isDefined } from "../helpers/mixed.mjs";
 import { isFunction } from "../helpers/function.mjs";
-import { objectEach } from "../helpers/object.mjs";
+import { objectEach, isObject } from "../helpers/object.mjs";
 import { toSingleLine } from "../helpers/templateLiteralTag.mjs";
+const __kindOf = Symbol('shortcut-context');
+
+/**
+ * Checks if the provided object is a context object.
+ *
+ * @param {*} objectToCheck An object to check.
+ * @returns {boolean}
+ */
+export function isContextObject(objectToCheck) {
+  return isObject(objectToCheck) && objectToCheck.__kindOf === __kindOf;
+}
+
 /* eslint-disable jsdoc/require-description-complete-sentence */
 /**
  * The `ShortcutContext` API lets you store and manage [keyboard shortcuts](@/guides/accessories-and-menus/keyboard-shortcuts.md) in a given [context](@/guides/accessories-and-menus/keyboard-shortcuts.md#keyboard-shortcut-contexts).
@@ -33,13 +45,13 @@ export const createContext = name => {
    * @param {Function} options.callback The shortcut's action
    * @param {object} options.group A group of shortcuts to which the shortcut belongs
    * @param {object} [options.runOnlyIf] A condition on which the shortcut's action runs
-   * @param {object} [options.stopPropagation=true] If set to `true`: stops the event's propagation
+   * @param {object} [options.stopPropagation=false] If set to `true`: stops the event's propagation
    * @param {object} [options.captureCtrl=false] If set to `true`: captures the state of the Control/Meta modifier key
    * @param {object} [options.preventDefault=true] If set to `true`: prevents the default behavior
    * @param {object} [options.position='after'] The order in which the shortcut's action runs:
    * `'before'` or `'after'` the `relativeToGroup` group of actions
    * @param {object} [options.relativeToGroup] The name of a group of actions, used to determine an action's `position`
-   *
+   * @param {object} [options.forwardToContext] The context object where the event will be forwarded to.
    */
   const addShortcut = function () {
     let {
@@ -51,7 +63,8 @@ export const createContext = name => {
       preventDefault = true,
       stopPropagation = false,
       relativeToGroup,
-      position
+      position,
+      forwardToContext
     } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     if (isUndefined(group)) {
       throw new Error('You need to define the shortcut\'s group.');
@@ -75,6 +88,9 @@ export const createContext = name => {
     if (isDefined(relativeToGroup)) {
       [newShortcut.relativeToGroup, newShortcut.position] = [relativeToGroup, position];
     }
+    if (isContextObject(forwardToContext)) {
+      newShortcut.forwardToContext = forwardToContext;
+    }
     keys.forEach(keyCombination => {
       const normalizedKeys = normalizeKeys(keyCombination);
       const hasKeyCombination = SHORTCUTS.hasItem(normalizedKeys);
@@ -106,11 +122,12 @@ export const createContext = name => {
    * @param {Function} [options.callback] A shortcut's action
    * @param {object} [options.group] A group of shortcuts to which a shortcut belongs
    * @param {object} [options.runOnlyIf] A condition on which a shortcut's action runs
-   * @param {object} [options.stopPropagation=true] If set to `true`: stops the event's propagation
+   * @param {object} [options.stopPropagation=false] If set to `true`: stops the event's propagation
    * @param {object} [options.preventDefault=true] If set to `true`: prevents the default behavior
    * @param {object} [options.position='after'] The order in which a shortcut's action runs:
    * `'before'` or `'after'` a `relativeToGroup` group of actions
    * @param {object} [options.relativeToGroup] The name of a group of actions, used to determine an action's `position`
+   * @param {object} [options.forwardToContext] The context object where the event will be forwarded to.
    */
   const addShortcuts = function (shortcuts) {
     let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -186,6 +203,7 @@ export const createContext = name => {
     return SHORTCUTS.hasItem(normalizedKeys);
   };
   return {
+    __kindOf,
     addShortcut,
     addShortcuts,
     getShortcuts,

package/shortcuts/manager.js

@@ -3,11 +3,11 @@
 exports.__esModule = true;
 require("core-js/modules/es.error.cause.js");
 var _uniqueMap = require("../utils/dataStructures/uniqueMap");
+var _event = require("../helpers/dom/event");
 var _context = require("./context");
 var _recorder = require("./recorder");
 var _templateLiteralTag = require("../helpers/templateLiteralTag");
 /* eslint-disable jsdoc/require-description-complete-sentence */
-
 /**
  * The `ShortcutManager` API lets you store and manage [keyboard shortcut contexts](@/guides/accessories-and-menus/keyboard-shortcuts.md#keyboard-shortcut-contexts) ([`ShortcutContext`](@/api/shortcutContext.md)).
  *
@@ -103,12 +103,18 @@ const createShortcutManager = _ref => {
   let isCtrlKeySilenced = false;
 
   /**
-   * Internal key recorder.
+   * A callback function for listening events from the recorder.
    *
-   * @private
+   * @param {KeyboardEvent} event The keyboard event.
+   * @param {string[]} keys Names of the shortcut's keys,
+   * (coming from [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)),
+   * in lowercase or uppercase, unified across browsers.
+   * @param {object | string} context The context object or name.
+   * @returns {boolean}
    */
-  const keyRecorder = (0, _recorder.useRecorder)(ownerWindow, handleEvent, beforeKeyDown, afterKeyDown, (event, keys) => {
-    const activeContext = getContext(getActiveContextName());
+  const recorderCallback = function (event, keys) {
+    let context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : getActiveContextName();
+    const activeContext = (0, _context.isContextObject)(context) ? context : getContext(context);
     let isExecutionCancelled = false;
     if (!activeContext.hasShortcut(keys)) {
       return isExecutionCancelled;
@@ -122,7 +128,8 @@ const createShortcutManager = _ref => {
         runOnlyIf,
         preventDefault,
         stopPropagation,
-        captureCtrl
+        captureCtrl,
+        forwardToContext
       } = shortcuts[index];
       if (runOnlyIf(event) !== false) {
         isCtrlKeySilenced = captureCtrl;
@@ -132,15 +139,26 @@ const createShortcutManager = _ref => {
           event.preventDefault();
         }
         if (stopPropagation) {
+          (0, _event.stopImmediatePropagation)(event);
           event.stopPropagation();
         }
         if (isExecutionCancelled) {
           break;
         }
+        if (forwardToContext) {
+          recorderCallback(event, keys, forwardToContext);
+        }
       }
     }
     return isExecutionCancelled;
-  });
+  };
+
+  /**
+   * Internal key recorder.
+   *
+   * @private
+   */
+  const keyRecorder = (0, _recorder.useRecorder)(ownerWindow, handleEvent, beforeKeyDown, afterKeyDown, recorderCallback);
   keyRecorder.mount();
   return {
     addContext,

package/shortcuts/manager.mjs

@@ -1,6 +1,7 @@
 import "core-js/modules/es.error.cause.js";
 import { createUniqueMap } from "../utils/dataStructures/uniqueMap.mjs";
-import { createContext } from "./context.mjs";
+import { stopImmediatePropagation } from "../helpers/dom/event.mjs";
+import { createContext, isContextObject } from "./context.mjs";
 import { useRecorder } from "./recorder.mjs";
 import { toSingleLine } from "../helpers/templateLiteralTag.mjs";
 /* eslint-disable jsdoc/require-description-complete-sentence */
@@ -99,12 +100,18 @@ export const createShortcutManager = _ref => {
   let isCtrlKeySilenced = false;
 
   /**
-   * Internal key recorder.
+   * A callback function for listening events from the recorder.
    *
-   * @private
+   * @param {KeyboardEvent} event The keyboard event.
+   * @param {string[]} keys Names of the shortcut's keys,
+   * (coming from [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)),
+   * in lowercase or uppercase, unified across browsers.
+   * @param {object | string} context The context object or name.
+   * @returns {boolean}
    */
-  const keyRecorder = useRecorder(ownerWindow, handleEvent, beforeKeyDown, afterKeyDown, (event, keys) => {
-    const activeContext = getContext(getActiveContextName());
+  const recorderCallback = function (event, keys) {
+    let context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : getActiveContextName();
+    const activeContext = isContextObject(context) ? context : getContext(context);
     let isExecutionCancelled = false;
     if (!activeContext.hasShortcut(keys)) {
       return isExecutionCancelled;
@@ -118,7 +125,8 @@ export const createShortcutManager = _ref => {
         runOnlyIf,
         preventDefault,
         stopPropagation,
-        captureCtrl
+        captureCtrl,
+        forwardToContext
       } = shortcuts[index];
       if (runOnlyIf(event) !== false) {
         isCtrlKeySilenced = captureCtrl;
@@ -128,15 +136,26 @@ export const createShortcutManager = _ref => {
           event.preventDefault();
         }
         if (stopPropagation) {
+          stopImmediatePropagation(event);
           event.stopPropagation();
         }
         if (isExecutionCancelled) {
           break;
         }
+        if (forwardToContext) {
+          recorderCallback(event, keys, forwardToContext);
+        }
       }
     }
     return isExecutionCancelled;
-  });
+  };
+
+  /**
+   * Internal key recorder.
+   *
+   * @private
+   */
+  const keyRecorder = useRecorder(ownerWindow, handleEvent, beforeKeyDown, afterKeyDown, recorderCallback);
   keyRecorder.mount();
   return {
     addContext,

package/shortcuts/recorder.js

@@ -87,7 +87,7 @@ function useRecorder(ownerWindow, handleEvent, beforeKeyDown, afterKeyDown, call
     if (event.keyCode === 229 || result === false || (0, _event.isImmediatePropagationStopped)(event)) {
       return;
     }
-    const pressedKey = (0, _utils.normalizeEventKey)(event.key);
+    const pressedKey = (0, _utils.normalizeEventKey)(event);
     let extraModifierKeys = [];
     if (!isModifierKey(pressedKey)) {
       extraModifierKeys = getPressedModifierKeys(event);
@@ -108,7 +108,7 @@ function useRecorder(ownerWindow, handleEvent, beforeKeyDown, afterKeyDown, call
    * @param {KeyboardEvent} event The event object
    */
   const onkeydownForModKeys = event => {
-    const pressedKey = (0, _utils.normalizeEventKey)(event.key);
+    const pressedKey = (0, _utils.normalizeEventKey)(event);
     if (isModifierKey(pressedKey)) {
       modifierKeysObserver.press(pressedKey);
     }
@@ -121,7 +121,7 @@ function useRecorder(ownerWindow, handleEvent, beforeKeyDown, afterKeyDown, call
    * @param {KeyboardEvent} event The event object
    */
   const onkeyupForModKeys = event => {
-    const pressedKey = (0, _utils.normalizeEventKey)(event.key);
+    const pressedKey = (0, _utils.normalizeEventKey)(event);
     if (isModifierKey(pressedKey)) {
       modifierKeysObserver.release(pressedKey);
     }

package/shortcuts/recorder.mjs

@@ -83,7 +83,7 @@ export function useRecorder(ownerWindow, handleEvent, beforeKeyDown, afterKeyDow
     if (event.keyCode === 229 || result === false || isImmediatePropagationStopped(event)) {
       return;
     }
-    const pressedKey = normalizeEventKey(event.key);
+    const pressedKey = normalizeEventKey(event);
     let extraModifierKeys = [];
     if (!isModifierKey(pressedKey)) {
       extraModifierKeys = getPressedModifierKeys(event);
@@ -104,7 +104,7 @@ export function useRecorder(ownerWindow, handleEvent, beforeKeyDown, afterKeyDow
    * @param {KeyboardEvent} event The event object
    */
   const onkeydownForModKeys = event => {
-    const pressedKey = normalizeEventKey(event.key);
+    const pressedKey = normalizeEventKey(event);
     if (isModifierKey(pressedKey)) {
       modifierKeysObserver.press(pressedKey);
     }
@@ -117,7 +117,7 @@ export function useRecorder(ownerWindow, handleEvent, beforeKeyDown, afterKeyDow
    * @param {KeyboardEvent} event The event object
    */
   const onkeyupForModKeys = event => {
-    const pressedKey = normalizeEventKey(event.key);
+    const pressedKey = normalizeEventKey(event);
     if (isModifierKey(pressedKey)) {
       modifierKeysObserver.release(pressedKey);
     }

package/shortcuts/utils.js

@@ -37,13 +37,27 @@ const getKeysList = normalizedKeys => {
 };
 
 /**
- * Normalize a `KeyboardEvent.key` property, to use it for keyboard shortcuts.
+ * The regex tests if the event.code matches to the pattern and it's used to extract letters and digits from
+ * the string.
+ */
+exports.getKeysList = getKeysList;
+const codeToKeyRegExp = new RegExp('^(?:Key|Digit)([A-Z0-9])$');
+
+/**
+ * Normalizes a keyboard event key value to a key before its modification. When the keyboard event
+ * is triggered with Alt, Control or Shift keys the `key` property contains modified key e.g. for Alt+L
+ * it will be `ł`. But that value is only valid for polish keyboard layout. To fix that limitations, for
+ * letters and digits the value is taken from the `code` property which holds original value before
+ * transformation.
  *
- * @param {string} key KeyboardEvent's key property.
+ * @param {Event} event The KeyboardEvent object.
  * @returns {string}
  */
-exports.getKeysList = getKeysList;
-const normalizeEventKey = key => {
-  return key.toLowerCase();
+const normalizeEventKey = _ref => {
+  let {
+    key,
+    code
+  } = _ref;
+  return (codeToKeyRegExp.test(code) ? code.replace(codeToKeyRegExp, '$1') : key).toLowerCase();
 };
 exports.normalizeEventKey = normalizeEventKey;

package/shortcuts/utils.mjs

@@ -33,11 +33,25 @@ export const getKeysList = normalizedKeys => {
 };
 
 /**
- * Normalize a `KeyboardEvent.key` property, to use it for keyboard shortcuts.
+ * The regex tests if the event.code matches to the pattern and it's used to extract letters and digits from
+ * the string.
+ */
+const codeToKeyRegExp = new RegExp('^(?:Key|Digit)([A-Z0-9])$');
+
+/**
+ * Normalizes a keyboard event key value to a key before its modification. When the keyboard event
+ * is triggered with Alt, Control or Shift keys the `key` property contains modified key e.g. for Alt+L
+ * it will be `ł`. But that value is only valid for polish keyboard layout. To fix that limitations, for
+ * letters and digits the value is taken from the `code` property which holds original value before
+ * transformation.
  *
- * @param {string} key KeyboardEvent's key property.
+ * @param {Event} event The KeyboardEvent object.
  * @returns {string}
  */
-export const normalizeEventKey = key => {
-  return key.toLowerCase();
+export const normalizeEventKey = _ref => {
+  let {
+    key,
+    code
+  } = _ref;
+  return (codeToKeyRegExp.test(code) ? code.replace(codeToKeyRegExp, '$1') : key).toLowerCase();
 };

package/tableView.js

@@ -9,6 +9,7 @@ var _event = require("./helpers/dom/event");
 var _src = _interopRequireDefault(require("./3rdparty/walkontable/src"));
 var _mouseEventHandler = require("./selection/mouseEventHandler");
 var _rootInstance = require("./utils/rootInstance");
+var _a11y = require("./helpers/a11y");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
@@ -259,6 +260,10 @@ class TableView {
     if (this.instance.getSettings().tableClassName) {
       (0, _element.addClass)(priv.table, this.instance.getSettings().tableClassName);
     }
+    if (this.settings.ariaTags) {
+      (0, _element.setAttribute)(priv.table, [(0, _a11y.A11Y_PRESENTATION)()]);
+      (0, _element.setAttribute)(rootElement, [(0, _a11y.A11Y_TREEGRID)(), (0, _a11y.A11Y_ROWCOUNT)(this.instance.countRows()), (0, _a11y.A11Y_COLCOUNT)(this.instance.countCols()), (0, _a11y.A11Y_MULTISELECTABLE)()]);
+    }
     this.THEAD = rootDocument.createElement('THEAD');
     priv.table.appendChild(this.THEAD);
     this.TBODY = rootDocument.createElement('TBODY');
@@ -312,11 +317,14 @@ class TableView {
     });
     this.eventManager.addEventListener(documentElement, 'mouseup', event => {
       if (selection.isInProgress() && (0, _event.isLeftClick)(event)) {
-        // is left mouse button
         selection.finish();
       }
       priv.mouseDown = false;
-      if ((0, _element.isOutsideInput)(rootDocument.activeElement) || !selection.isSelected() && !selection.isSelectedByAnyHeader() && !rootElement.contains(event.target) && !(0, _event.isRightClick)(event)) {
+      const isOutsideInputElement = (0, _element.isOutsideInput)(rootDocument.activeElement);
+      if (!isOutsideInputElement) {
+        return;
+      }
+      if (isOutsideInputElement || !selection.isSelected() && !selection.isSelectedByAnyHeader() && !rootElement.contains(event.target) && !(0, _event.isRightClick)(event)) {
         this.instance.unlisten();
       }
     });
@@ -550,6 +558,40 @@ class TableView {
     return this.countNotHiddenRowIndexes(visualFixedRowsBottom, 1);
   }
 
+  /**
+   * The function returns the number of renderable column indexes within the passed range of the visual indexes.
+   *
+   * @param {number} columnStart The column visual start index.
+   * @param {number} columnEnd The column visual end index.
+   * @returns {number}
+   */
+  countRenderableColumnsInRange(columnStart, columnEnd) {
+    let count = 0;
+    for (let column = columnStart; column <= columnEnd; column++) {
+      if (this.instance.columnIndexMapper.getRenderableFromVisualIndex(column) !== null) {
+        count += 1;
+      }
+    }
+    return count;
+  }
+
+  /**
+   * The function returns the number of renderable row indexes within the passed range of the visual indexes.
+   *
+   * @param {number} rowStart The row visual start index.
+   * @param {number} rowEnd The row visual end index.
+   * @returns {number}
+   */
+  countRenderableRowsInRange(rowStart, rowEnd) {
+    let count = 0;
+    for (let row = rowStart; row <= rowEnd; row++) {
+      if (this.instance.rowIndexMapper.getRenderableFromVisualIndex(row) !== null) {
+        count += 1;
+      }
+    }
+    return count;
+  }
+
   /**
    * Checks if at least one cell than belongs to the main table is not covered by the top, left or
    * bottom overlay.
@@ -570,6 +612,7 @@ class TableView {
   initializeWalkontable() {
     const priv = privatePool.get(this);
     const walkontableConfig = {
+      ariaTags: this.settings.ariaTags,
       rtlMode: this.instance.isRtl(),
       externalRowCalculator: this.instance.getPlugin('autoRowSize') && this.instance.getPlugin('autoRowSize').isEnabled(),
       table: priv.table,
@@ -769,20 +812,78 @@ class TableView {
       },
       beforeDraw: (force, skipRender) => this.beforeRender(force, skipRender),
       onDraw: force => this.afterRender(force),
-      onScrollVertically: () => this.instance.runHooks('afterScrollVertically'),
-      onScrollHorizontally: () => this.instance.runHooks('afterScrollHorizontally'),
+      onBeforeViewportScrollVertically: renderableRow => {
+        const rowMapper = this.instance.rowIndexMapper;
+        const areColumnHeadersSelected = renderableRow < 0;
+        let visualRow = renderableRow;
+        if (!areColumnHeadersSelected) {
+          visualRow = rowMapper.getVisualFromRenderableIndex(renderableRow);
+
+          // for an empty data return index as is
+          if (visualRow === null) {
+            return renderableRow;
+          }
+        }
+        visualRow = this.instance.runHooks('beforeViewportScrollVertically', visualRow);
+        this.instance.runHooks('beforeViewportScroll');
+        if (!areColumnHeadersSelected) {
+          return rowMapper.getRenderableFromVisualIndex(visualRow);
+        }
+        return visualRow;
+      },
+      onBeforeViewportScrollHorizontally: renderableColumn => {
+        const columnMapper = this.instance.columnIndexMapper;
+        const areRowHeadersSelected = renderableColumn < 0;
+        let visualColumn = renderableColumn;
+        if (!areRowHeadersSelected) {
+          visualColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn);
+
+          // for an empty data return index as is
+          if (visualColumn === null) {
+            return renderableColumn;
+          }
+        }
+        visualColumn = this.instance.runHooks('beforeViewportScrollHorizontally', visualColumn);
+        this.instance.runHooks('beforeViewportScroll');
+        if (!areRowHeadersSelected) {
+          return columnMapper.getRenderableFromVisualIndex(visualColumn);
+        }
+        return visualColumn;
+      },
+      onScrollVertically: () => {
+        this.instance.runHooks('afterScrollVertically');
+        this.instance.runHooks('afterScroll');
+      },
+      onScrollHorizontally: () => {
+        this.instance.runHooks('afterScrollHorizontally');
+        this.instance.runHooks('afterScroll');
+      },
       onBeforeRemoveCellClassNames: () => this.instance.runHooks('beforeRemoveCellClassNames'),
       onBeforeHighlightingRowHeader: (renderableRow, headerLevel, highlightMeta) => {
         const rowMapper = this.instance.rowIndexMapper;
-        const visualRow = rowMapper.getVisualFromRenderableIndex(renderableRow);
+        const areColumnHeadersSelected = renderableRow < 0;
+        let visualRow = renderableRow;
+        if (!areColumnHeadersSelected) {
+          visualRow = rowMapper.getVisualFromRenderableIndex(renderableRow);
+        }
         const newVisualRow = this.instance.runHooks('beforeHighlightingRowHeader', visualRow, headerLevel, highlightMeta);
-        return rowMapper.getRenderableFromVisualIndex(rowMapper.getNearestNotHiddenIndex(newVisualRow, 1));
+        if (!areColumnHeadersSelected) {
+          return rowMapper.getRenderableFromVisualIndex(rowMapper.getNearestNotHiddenIndex(newVisualRow, 1));
+        }
+        return newVisualRow;
       },
       onBeforeHighlightingColumnHeader: (renderableColumn, headerLevel, highlightMeta) => {
         const columnMapper = this.instance.columnIndexMapper;
-        const visualColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn);
+        const areRowHeadersSelected = renderableColumn < 0;
+        let visualColumn = renderableColumn;
+        if (!areRowHeadersSelected) {
+          visualColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn);
+        }
         const newVisualColumn = this.instance.runHooks('beforeHighlightingColumnHeader', visualColumn, headerLevel, highlightMeta);
-        return columnMapper.getRenderableFromVisualIndex(columnMapper.getNearestNotHiddenIndex(newVisualColumn, 1));
+        if (!areRowHeadersSelected) {
+          return columnMapper.getRenderableFromVisualIndex(columnMapper.getNearestNotHiddenIndex(newVisualColumn, 1));
+        }
+        return newVisualColumn;
       },
       onAfterDrawSelection: (currentRow, currentColumn, layerLevel) => {
         let cornersOfSelection;
@@ -790,10 +891,7 @@ class TableView {
         const selectedRange = this.instance.selection.getSelectedRange();
         const selectionRangeSize = selectedRange.size();
         if (selectionRangeSize > 0) {
-          // Selection layers are stored from the "oldest" to the "newest". We should calculate the offset.
-          // Please look at the `SelectedRange` class and it's method for getting selection's layer for more information.
-          const selectionOffset = (layerLevel !== null && layerLevel !== void 0 ? layerLevel : 0) + 1 - selectionRangeSize;
-          const selectionForLayer = selectedRange.peekByIndex(selectionOffset);
+          const selectionForLayer = selectedRange.peekByIndex(layerLevel !== null && layerLevel !== void 0 ? layerLevel : 0);
           cornersOfSelection = [selectionForLayer.from.row, selectionForLayer.from.col, selectionForLayer.to.row, selectionForLayer.to.col];
         }
         return this.instance.runHooks('afterDrawSelection', visualRowIndex, visualColumnIndex, cornersOfSelection, layerLevel);
@@ -946,7 +1044,7 @@ class TableView {
    */
   isSelectedOnlyCell() {
     var _this$instance$getSel, _this$instance$getSel2;
-    return (_this$instance$getSel = (_this$instance$getSel2 = this.instance.getSelectedRangeLast()) === null || _this$instance$getSel2 === void 0 ? void 0 : _this$instance$getSel2.isSingle()) !== null && _this$instance$getSel !== void 0 ? _this$instance$getSel : false;
+    return (_this$instance$getSel = (_this$instance$getSel2 = this.instance.getSelectedRangeLast()) === null || _this$instance$getSel2 === void 0 ? void 0 : _this$instance$getSel2.isSingleCell()) !== null && _this$instance$getSel !== void 0 ? _this$instance$getSel : false;
   }
 
   /**