handsontable 15.2.0 → 15.3.0-next-6f5f494-20250424

package/CHANGELOG.md

@@ -9,6 +9,51 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 <!-- UNVERSIONED -->
 
+## [15.3.0] - 2025-04-29
+
+### Added
+- Added missing boolean type to the editor in the react wrapper [#11514](https://github.com/handsontable/handsontable/pull/11514)
+- Fixed comments for IME and add a new `beforeCompositionstart` hook. [#11521](https://github.com/handsontable/handsontable/pull/11521)
+- Added horizontal scroll to the Filter's by value component [#11561](https://github.com/handsontable/handsontable/pull/11561)
+- Add optional formula sanitization for csv export to prevent CSV Injection attacks [#11592](https://github.com/handsontable/handsontable/pull/11592)
+
+### Changed
+- Improved the initialization time of Handsontable with formulas enabled [#11474](https://github.com/handsontable/handsontable/pull/11474)
+- Changed the size of the manual row and row resize guide line [#11507](https://github.com/handsontable/handsontable/pull/11507)
+- Improve viewport scrolling behavior [#11577](https://github.com/handsontable/handsontable/pull/11577)
+
+### Fixed
+- Fixing issue with NestedRows plugin duplicating rows when moving children [#11362](https://github.com/handsontable/handsontable/pull/11362)
+- Fixed an issue with row resize line alignment and resize handle flickering [#11500](https://github.com/handsontable/handsontable/pull/11500)
+- Fixed an issue with autocomplete caret position after using scroll on a list of choices and dropdown width fixer [#11503](https://github.com/handsontable/handsontable/pull/11503)
+- Fixed copy, cut an paste actions on tables with a selection reaching outside of the rendered viewport. [#11504](https://github.com/handsontable/handsontable/pull/11504)
+- Fix submenu positiongin for all themes. [#11505](https://github.com/handsontable/handsontable/pull/11505)
+- Fixed a problem where re-enabling the Hidden Columns configuration caused an error to be thrown if a selection was a part of the hidden range. [#11508](https://github.com/handsontable/handsontable/pull/11508)
+- Fixed an issue with empty parentNode in the table getCords method [#11509](https://github.com/handsontable/handsontable/pull/11509)
+- Improved undo/redo working for removed rows/columns [#11515](https://github.com/handsontable/handsontable/pull/11515)
+- Fixed rows height calculations for merged cells on Safari [#11517](https://github.com/handsontable/handsontable/pull/11517)
+- Fixed missing (incorrect) render call after dataset change [#11529](https://github.com/handsontable/handsontable/pull/11529)
+- Fixed an issue with the mobile keyboard closing after clicking the filter search input on Android devices  [#11532](https://github.com/handsontable/handsontable/pull/11532)
+- Fixed a problem with multiple row header levels being rendered in reverse order. [#11533](https://github.com/handsontable/handsontable/pull/11533)
+- Fixed `TypeError` error for AutoRowSize plugin [#11537](https://github.com/handsontable/handsontable/pull/11537)
+- Allow changing the selection after filter is applied [#11538](https://github.com/handsontable/handsontable/pull/11538)
+- Fixed a problem with the autocomplete editor rendering very slowly when provided with a long list of choices. [#11552](https://github.com/handsontable/handsontable/pull/11552)
+- Fixed an issue with focus catcher accessibility [#11553](https://github.com/handsontable/handsontable/pull/11553)
+- Fixed `TypeError` for rows removal for bottom overlay [#11555](https://github.com/handsontable/handsontable/pull/11555)
+- Fixed calculating the first row height [#11557](https://github.com/handsontable/handsontable/pull/11557)
+- Fixed an issue with highlighting the cell  after call updateData [#11558](https://github.com/handsontable/handsontable/pull/11558)
+- Fixed unmerge cells action triggered form keyboard shortcut [#11559](https://github.com/handsontable/handsontable/pull/11559)
+- Fixed arrow left/right shortcuts for menu when the table was configured as `layoutDirection: rtl`. [#11562](https://github.com/handsontable/handsontable/pull/11562)
+- Fixed an issue with duplicate boolean values in filters [#11563](https://github.com/handsontable/handsontable/pull/11563)
+- Fixed an issue with data source for non-string values in the `name` property [#11565](https://github.com/handsontable/handsontable/pull/11565)
+- Fixed settings object not being updated after new hooks [#11566](https://github.com/handsontable/handsontable/pull/11566)
+- Fixed a problem with the table rendering all rows when it's configured to have `0px` height. [#11567](https://github.com/handsontable/handsontable/pull/11567)
+- Fixed copy/paste/cut functionalities for web components [#11572](https://github.com/handsontable/handsontable/pull/11572)
+- Fixed the `allowInvalid` option (both `true` and `false`) for the Dropdown Editor.  [#11587](https://github.com/handsontable/handsontable/pull/11587)
+- Fixed a problem with a deprecation warnings being thrown when using Context Menu's Undo and Redo items. [#11588](https://github.com/handsontable/handsontable/pull/11588)
+- Fixed an error being thrown when editing a Autocomplete-typed cells with a long list of choices rendered in a small container. [#11589](https://github.com/handsontable/handsontable/pull/11589)
+- Ensured that there's a single `@charset` entry in the classic theme's CSS files and that it's placed at the beginning of those files. [#11591](https://github.com/handsontable/handsontable/pull/11591)
+
 ## [15.2.0] - 2025-03-19
 
 ### Added
@@ -32,7 +77,6 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - Fixed the Context Menu's items' state rendering. [#11422](https://github.com/handsontable/handsontable/pull/11422)
 - Corrected the checkbox visibility in the no-theme variant. [#11427](https://github.com/handsontable/handsontable/pull/11427)
 - Fixed problems with the cell content reading with `imeFastEdit` enabled. [#11442](https://github.com/handsontable/handsontable/pull/11442)
-- Fixed a problem, where clicking on the Comments' editor element deselected the currently selected cells. [#11446](https://github.com/handsontable/handsontable/pull/11446)
 - Fixed `hasVerticalScroll` and `hasHorizontalScroll` methods. [#11455](https://github.com/handsontable/handsontable/pull/11455)
 - Fixed the editor border radius on mobile devices. [#11457](https://github.com/handsontable/handsontable/pull/11457)
 - Fixed the wrong height of the first row. [#11458](https://github.com/handsontable/handsontable/pull/11458)

package/README.md

@@ -81,7 +81,7 @@ You can also use [Yarn](https://yarnpkg.com/package/handsontable), [NuGet](https
 
   ```html
   <!-- Set the container's ID and apply the desired theme -->
-  <div id="handsontable-example" class="ht-theme-main-dark-auto"></div>
+  <div id="handsontable-grid" class="ht-theme-main-dark-auto"></div>
   ```
 
 ### Setup

package/base.js

@@ -45,8 +45,8 @@ Handsontable.hooks = _hooks.Hooks.getSingleton();
 Handsontable.CellCoords = _src.CellCoords;
 Handsontable.CellRange = _src.CellRange;
 Handsontable.packageName = 'handsontable';
-Handsontable.buildDate = "19/03/2025 09:41:49";
-Handsontable.version = "15.2.0";
+Handsontable.buildDate = "24/04/2025 11:28:31";
+Handsontable.version = "15.3.0-next-6f5f494-20250424";
 Handsontable.languages = {
   dictionaryKeys: _registry.dictionaryKeys,
   getLanguageDictionary: _registry.getLanguageDictionary,

package/base.mjs

@@ -35,8 +35,8 @@ Handsontable.hooks = Hooks.getSingleton();
 Handsontable.CellCoords = CellCoords;
 Handsontable.CellRange = CellRange;
 Handsontable.packageName = 'handsontable';
-Handsontable.buildDate = "19/03/2025 09:41:52";
-Handsontable.version = "15.2.0";
+Handsontable.buildDate = "24/04/2025 11:28:36";
+Handsontable.version = "15.3.0-next-6f5f494-20250424";
 Handsontable.languages = {
   dictionaryKeys,
   getLanguageDictionary,

package/core/focusCatcher/focusDetector.js

@@ -58,7 +58,7 @@ function createInputElement(hot) {
   input.name = '__htFocusCatcher';
   input.classList.add('htFocusCatcher');
   if (hot.getSettings().ariaTags) {
-    (0, _element.setAttribute)(input, [(0, _a11y.A11Y_PRESENTATION)(), (0, _a11y.A11Y_HIDDEN)()]);
+    (0, _element.setAttribute)(input, [(0, _a11y.A11Y_LABEL)('Focus catcher')]);
   }
   return input;
 }

package/core/focusCatcher/focusDetector.mjs

@@ -1,5 +1,5 @@
 import { setAttribute } from "../../helpers/dom/element.mjs";
-import { A11Y_PRESENTATION, A11Y_HIDDEN } from "../../helpers/a11y.mjs";
+import { A11Y_LABEL } 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
@@ -54,7 +54,7 @@ function createInputElement(hot) {
   input.name = '__htFocusCatcher';
   input.classList.add('htFocusCatcher');
   if (hot.getSettings().ariaTags) {
-    setAttribute(input, [A11Y_PRESENTATION(), A11Y_HIDDEN()]);
+    setAttribute(input, [A11Y_LABEL('Focus catcher')]);
   }
   return input;
 }

package/core/hooks/constants.js

@@ -336,6 +336,14 @@ const REGISTERED_HOOKS = exports.REGISTERED_HOOKS = [/* eslint-disable jsdoc/req
  * @returns {string[]|undefined} Can return an `Array` of `String`s. Each of these strings will act like class names to be removed from all the cells in the table.
  */
 'beforeRemoveCellClassNames',
+/**
+ * Hook fired after `compositionstart` event is handled.
+ *
+ * @event Hooks#beforeCompositionStart
+ * @since 15.3.0
+ * @param {Event} event A native `composition` event object.
+ */
+'beforeCompositionStart',
 /**
  * Fired after getting the cell settings.
  *

package/core/hooks/constants.mjs

@@ -333,6 +333,14 @@ export const REGISTERED_HOOKS = [/* eslint-disable jsdoc/require-description-com
  * @returns {string[]|undefined} Can return an `Array` of `String`s. Each of these strings will act like class names to be removed from all the cells in the table.
  */
 'beforeRemoveCellClassNames',
+/**
+ * Hook fired after `compositionstart` event is handled.
+ *
+ * @event Hooks#beforeCompositionStart
+ * @since 15.3.0
+ * @param {Event} event A native `composition` event object.
+ */
+'beforeCompositionStart',
 /**
  * Fired after getting the cell settings.
  *

package/core/hooks/index.d.ts

@@ -167,6 +167,7 @@ export interface Events {
   beforeColumnSort?: (currentSortConfig: ColumnSortingConfig[], destinationSortConfigs: ColumnSortingConfig[]) => void | boolean;
   beforeColumnWrap?: (isActionInterrupted: { value: boolean }, newCoords: CellCoords, isColumnFlipped: boolean) => void;
   beforeColumnUnfreeze?: (columnIndex: number, isUnfreezingPerformed: boolean) => void | boolean;
+  beforeCompositionStart?: (event: CompositionEvent) => void;
   beforeContextMenuSetItems?: (menuItems: ContextMenuMenuItemConfig[]) => void;
   beforeContextMenuShow?: (context: ContextMenu) => void;
   beforeCopy?: (data: CellValue[][], coords: RangeType[], copiedHeadersCount: { columnHeadersCount: number }) => void | boolean;

package/core/viewportScroll/scrollStrategies/columnHeaderScroll.js

@@ -2,6 +2,7 @@
 
 exports.__esModule = true;
 exports.columnHeaderScrollStrategy = columnHeaderScrollStrategy;
+var _utils = require("../utils");
 /**
  * Scroll strategy for column header selection.
  *
@@ -9,12 +10,13 @@ exports.columnHeaderScrollStrategy = columnHeaderScrollStrategy;
  * @returns {function(): function(CellCoords): void}
  */
 function columnHeaderScrollStrategy(hot) {
-  return _ref => {
-    let {
-      col
-    } = _ref;
+  return cellCoords => {
+    const scrollColumnTarget = (0, _utils.createScrollTargetCalculator)(hot).getComputedColumnTarget(cellCoords);
     hot.scrollViewportTo({
-      col
+      col: scrollColumnTarget
+    }, () => {
+      const hasColumnHeaders = !!hot.getSettings().colHeaders;
+      (0, _utils.scrollWindowToCell)(hot.getCell(hasColumnHeaders ? -1 : 0, scrollColumnTarget, true));
     });
   };
 }

package/core/viewportScroll/scrollStrategies/columnHeaderScroll.mjs

@@ -1,3 +1,4 @@
+import { scrollWindowToCell, createScrollTargetCalculator } from "../utils.mjs";
 /**
  * Scroll strategy for column header selection.
  *
@@ -5,12 +6,13 @@
  * @returns {function(): function(CellCoords): void}
  */
 export function columnHeaderScrollStrategy(hot) {
-  return _ref => {
-    let {
-      col
-    } = _ref;
+  return cellCoords => {
+    const scrollColumnTarget = createScrollTargetCalculator(hot).getComputedColumnTarget(cellCoords);
     hot.scrollViewportTo({
-      col
+      col: scrollColumnTarget
+    }, () => {
+      const hasColumnHeaders = !!hot.getSettings().colHeaders;
+      scrollWindowToCell(hot.getCell(hasColumnHeaders ? -1 : 0, scrollColumnTarget, true));
     });
   };
 }

package/core/viewportScroll/scrollStrategies/focusScroll.js

@@ -2,6 +2,7 @@
 
 exports.__esModule = true;
 exports.focusScrollStrategy = focusScrollStrategy;
+var _utils = require("../utils");
 /**
  * Scroll strategy for changed the focus position of the selection.
  *
@@ -10,6 +11,12 @@ exports.focusScrollStrategy = focusScrollStrategy;
  */
 function focusScrollStrategy(hot) {
   return cellCoords => {
-    hot.scrollViewportTo(cellCoords.toObject());
+    hot.scrollViewportTo(cellCoords.toObject(), () => {
+      const {
+        row,
+        col
+      } = hot.getSelectedRangeLast().highlight;
+      (0, _utils.scrollWindowToCell)(hot.getCell(row, col, true));
+    });
   };
 }

package/core/viewportScroll/scrollStrategies/focusScroll.mjs

@@ -1,3 +1,4 @@
+import { scrollWindowToCell } from "../utils.mjs";
 /**
  * Scroll strategy for changed the focus position of the selection.
  *
@@ -6,6 +7,12 @@
  */
 export function focusScrollStrategy(hot) {
   return cellCoords => {
-    hot.scrollViewportTo(cellCoords.toObject());
+    hot.scrollViewportTo(cellCoords.toObject(), () => {
+      const {
+        row,
+        col
+      } = hot.getSelectedRangeLast().highlight;
+      scrollWindowToCell(hot.getCell(row, col, true));
+    });
   };
 }

package/core/viewportScroll/scrollStrategies/multipleScroll.js

@@ -2,6 +2,7 @@
 
 exports.__esModule = true;
 exports.multipleScrollStrategy = multipleScrollStrategy;
+var _utils = require("../utils");
 /**
  * Scroll strategy for multiple selections.
  *
@@ -10,6 +11,17 @@ exports.multipleScrollStrategy = multipleScrollStrategy;
  */
 function multipleScrollStrategy(hot) {
   return cellCoords => {
-    hot.scrollViewportTo(cellCoords.toObject());
+    const scrollTargetCalc = (0, _utils.createScrollTargetCalculator)(hot);
+    const targetScroll = {
+      row: scrollTargetCalc.getComputedRowTarget(cellCoords),
+      col: scrollTargetCalc.getComputedColumnTarget(cellCoords)
+    };
+    hot.scrollViewportTo(targetScroll, () => {
+      const {
+        row,
+        col
+      } = targetScroll;
+      (0, _utils.scrollWindowToCell)(hot.getCell(row, col, true));
+    });
   };
 }

package/core/viewportScroll/scrollStrategies/multipleScroll.mjs

@@ -1,3 +1,4 @@
+import { scrollWindowToCell, createScrollTargetCalculator } from "../utils.mjs";
 /**
  * Scroll strategy for multiple selections.
  *
@@ -6,6 +7,17 @@
  */
 export function multipleScrollStrategy(hot) {
   return cellCoords => {
-    hot.scrollViewportTo(cellCoords.toObject());
+    const scrollTargetCalc = createScrollTargetCalculator(hot);
+    const targetScroll = {
+      row: scrollTargetCalc.getComputedRowTarget(cellCoords),
+      col: scrollTargetCalc.getComputedColumnTarget(cellCoords)
+    };
+    hot.scrollViewportTo(targetScroll, () => {
+      const {
+        row,
+        col
+      } = targetScroll;
+      scrollWindowToCell(hot.getCell(row, col, true));
+    });
   };
 }

package/core/viewportScroll/scrollStrategies/noncontiguousScroll.js

@@ -2,6 +2,7 @@
 
 exports.__esModule = true;
 exports.noncontiguousScrollStrategy = noncontiguousScrollStrategy;
+var _utils = require("../utils");
 /**
  * Scroll strategy for non-contiguous selections.
  *
@@ -10,6 +11,17 @@ exports.noncontiguousScrollStrategy = noncontiguousScrollStrategy;
  */
 function noncontiguousScrollStrategy(hot) {
   return cellCoords => {
-    hot.scrollViewportTo(cellCoords.toObject());
+    const scrollTargetCalc = (0, _utils.createScrollTargetCalculator)(hot);
+    const targetScroll = {
+      row: scrollTargetCalc.getComputedRowTarget(cellCoords),
+      col: scrollTargetCalc.getComputedColumnTarget(cellCoords)
+    };
+    hot.scrollViewportTo(targetScroll, () => {
+      const {
+        row,
+        col
+      } = targetScroll;
+      (0, _utils.scrollWindowToCell)(hot.getCell(row, col, true));
+    });
   };
 }

package/core/viewportScroll/scrollStrategies/noncontiguousScroll.mjs

@@ -1,3 +1,4 @@
+import { scrollWindowToCell, createScrollTargetCalculator } from "../utils.mjs";
 /**
  * Scroll strategy for non-contiguous selections.
  *
@@ -6,6 +7,17 @@
  */
 export function noncontiguousScrollStrategy(hot) {
   return cellCoords => {
-    hot.scrollViewportTo(cellCoords.toObject());
+    const scrollTargetCalc = createScrollTargetCalculator(hot);
+    const targetScroll = {
+      row: scrollTargetCalc.getComputedRowTarget(cellCoords),
+      col: scrollTargetCalc.getComputedColumnTarget(cellCoords)
+    };
+    hot.scrollViewportTo(targetScroll, () => {
+      const {
+        row,
+        col
+      } = targetScroll;
+      scrollWindowToCell(hot.getCell(row, col, true));
+    });
   };
 }

package/core/viewportScroll/scrollStrategies/rowHeaderScroll.js

@@ -2,6 +2,7 @@
 
 exports.__esModule = true;
 exports.rowHeaderScrollStrategy = rowHeaderScrollStrategy;
+var _utils = require("../utils");
 /**
  * Scroll strategy for row header selection.
  *
@@ -9,12 +10,13 @@ exports.rowHeaderScrollStrategy = rowHeaderScrollStrategy;
  * @returns {function(): function(CellCoords): void}
  */
 function rowHeaderScrollStrategy(hot) {
-  return _ref => {
-    let {
-      row
-    } = _ref;
+  return cellCoords => {
+    const scrollRowTarget = (0, _utils.createScrollTargetCalculator)(hot).getComputedRowTarget(cellCoords);
     hot.scrollViewportTo({
-      row
+      row: scrollRowTarget
+    }, () => {
+      const hasRowHeaders = !!hot.getSettings().rowHeaders;
+      (0, _utils.scrollWindowToCell)(hot.getCell(scrollRowTarget, hasRowHeaders ? -1 : 0, true));
     });
   };
 }

package/core/viewportScroll/scrollStrategies/rowHeaderScroll.mjs

@@ -1,3 +1,4 @@
+import { scrollWindowToCell, createScrollTargetCalculator } from "../utils.mjs";
 /**
  * Scroll strategy for row header selection.
  *
@@ -5,12 +6,13 @@
  * @returns {function(): function(CellCoords): void}
  */
 export function rowHeaderScrollStrategy(hot) {
-  return _ref => {
-    let {
-      row
-    } = _ref;
+  return cellCoords => {
+    const scrollRowTarget = createScrollTargetCalculator(hot).getComputedRowTarget(cellCoords);
     hot.scrollViewportTo({
-      row
+      row: scrollRowTarget
+    }, () => {
+      const hasRowHeaders = !!hot.getSettings().rowHeaders;
+      scrollWindowToCell(hot.getCell(scrollRowTarget, hasRowHeaders ? -1 : 0, true));
     });
   };
 }

package/core/viewportScroll/scrollStrategies/singleScroll.js

@@ -2,11 +2,12 @@
 
 exports.__esModule = true;
 exports.singleScrollStrategy = singleScrollStrategy;
+var _utils = require("../utils");
 /**
  * Scroll strategy for single cell selection.
  *
  * @param {Core} hot Handsontable instance.
- * @returns {function(): function(CellCoords): { row: number, col: number } | void }
+ * @returns {function(): function(CellCoords): void}
  */
 function singleScrollStrategy(hot) {
   return cellCoords => {
@@ -15,20 +16,23 @@ function singleScrollStrategy(hot) {
       row,
       col
     } = cellCoords;
+    const scrollWindow = () => {
+      (0, _utils.scrollWindowToCell)(hot.getCell(row, col, true));
+    };
 
     // navigating through the column headers (when `navigableHeaders` is enabled)
     // scrolls the viewport horizontally only
     if (row < 0 && col >= 0) {
       hot.scrollViewportTo({
         col
-      });
+      }, scrollWindow);
 
       // navigating through the row headers (when `navigableHeaders` is enabled)
       // scrolls the viewport vertically only
     } else if (col < 0 && row >= 0) {
       hot.scrollViewportTo({
         row
-      });
+      }, scrollWindow);
 
       // navigating through the cells
     } else {
@@ -40,7 +44,7 @@ function singleScrollStrategy(hot) {
       hot.scrollViewportTo({
         row,
         col
-      });
+      }, scrollWindow);
     }
   };
 }

package/core/viewportScroll/scrollStrategies/singleScroll.mjs

@@ -1,8 +1,9 @@
+import { scrollWindowToCell } from "../utils.mjs";
 /**
  * Scroll strategy for single cell selection.
  *
  * @param {Core} hot Handsontable instance.
- * @returns {function(): function(CellCoords): { row: number, col: number } | void }
+ * @returns {function(): function(CellCoords): void}
  */
 export function singleScrollStrategy(hot) {
   return cellCoords => {
@@ -11,20 +12,23 @@ export function singleScrollStrategy(hot) {
       row,
       col
     } = cellCoords;
+    const scrollWindow = () => {
+      scrollWindowToCell(hot.getCell(row, col, true));
+    };
 
     // navigating through the column headers (when `navigableHeaders` is enabled)
     // scrolls the viewport horizontally only
     if (row < 0 && col >= 0) {
       hot.scrollViewportTo({
         col
-      });
+      }, scrollWindow);
 
       // navigating through the row headers (when `navigableHeaders` is enabled)
       // scrolls the viewport vertically only
     } else if (col < 0 && row >= 0) {
       hot.scrollViewportTo({
         row
-      });
+      }, scrollWindow);
 
       // navigating through the cells
     } else {
@@ -36,7 +40,7 @@ export function singleScrollStrategy(hot) {
       hot.scrollViewportTo({
         row,
         col
-      });
+      }, scrollWindow);
     }
   };
 }

package/core/viewportScroll/utils.js

@@ -0,0 +1,111 @@
+"use strict";
+
+exports.__esModule = true;
+exports.createScrollTargetCalculator = createScrollTargetCalculator;
+exports.scrollWindowToCell = scrollWindowToCell;
+var _element = require("../../helpers/dom/element");
+/**
+ * Scrolls the browser's viewport to the specified element.
+ *
+ * @param {HTMLElement} element The element to scroll.
+ */
+function scrollWindowToCell(element) {
+  if ((0, _element.isHTMLElement)(element)) {
+    element.scrollIntoView({
+      block: 'nearest',
+      inline: 'nearest'
+    });
+  }
+}
+
+/**
+ * Creates a scroll target calculator that calculates the target row and column best viewport
+ * scroll position based on the current selection.
+ *
+ * @param {Core} hotInstance The Handsontable instance.
+ * @returns {{ getComputedColumnTarget: Function, getComputedRowTarget: Function }}
+ */
+function createScrollTargetCalculator(hotInstance) {
+  const {
+    selection,
+    view
+  } = hotInstance;
+  const cellRange = hotInstance.getSelectedRangeLast();
+  const source = selection.getSelectionSource();
+  const firstVisibleColumn = view.getFirstFullyVisibleColumn();
+  const lastVisibleColumn = view.getLastFullyVisibleColumn();
+  const selectionFirstColumn = cellRange.getTopStartCorner().col;
+  const selectionLastColumn = cellRange.getBottomEndCorner().col;
+  const isSelectionOutsideStartViewport = selectionFirstColumn <= firstVisibleColumn;
+  const isSelectionOutsideEndViewport = selectionLastColumn >= lastVisibleColumn;
+  const firstVisibleRow = view.getFirstFullyVisibleRow();
+  const lastVisibleRow = view.getLastFullyVisibleRow();
+  const selectionFirstRow = cellRange.getTopStartCorner().row;
+  const selectionLastRow = cellRange.getBottomEndCorner().row;
+  const isSelectionOutsideTopViewport = selectionFirstRow <= firstVisibleRow;
+  const isSelectionOutsideBottomViewport = selectionLastRow >= lastVisibleRow;
+  return {
+    /**
+     * Calculates the target column for scrolling.
+     *
+     * @param {CellCoords} lastSelectionCoords The last selection coordinates.
+     * @returns {number}
+     */
+    getComputedColumnTarget(lastSelectionCoords) {
+      if (source === 'mouse' || source === 'keyboard') {
+        // For mouse or keyboard selection, always scroll to the last column
+        // defined by the last selection coords
+        return lastSelectionCoords.col;
+      }
+      if (isSelectionOutsideStartViewport && isSelectionOutsideEndViewport) {
+        // If the selection is outside both ends of the viewport, scroll to the
+        // column where the focused cell is located
+        return cellRange.highlight.col;
+      }
+      if (isSelectionOutsideStartViewport) {
+        // If the selection is outside the start (left) of the viewport, scroll to
+        // the first column of the selection range
+        return selectionFirstColumn;
+      }
+      if (isSelectionOutsideEndViewport) {
+        // If the selection is outside the end (right) of the viewport, scroll to
+        // the last column of the selection range
+        return selectionLastColumn;
+      }
+
+      // For other cases, scroll to the column defined by the last selection coords
+      return lastSelectionCoords.col;
+    },
+    /**
+     * Calculates the target row for scrolling.
+     *
+     * @param {CellCoords} lastSelectionCoords The last selection coordinates.
+     * @returns {number}
+     */
+    getComputedRowTarget(lastSelectionCoords) {
+      if (source === 'mouse' || source === 'keyboard') {
+        // For mouse or keyboard selection, always scroll to the last row
+        // defined by the coords
+        return lastSelectionCoords.row;
+      }
+      if (isSelectionOutsideTopViewport && isSelectionOutsideBottomViewport) {
+        // If the selection is outside both ends of the viewport, scroll to the
+        // row where the focused cell is located
+        return cellRange.highlight.row;
+      }
+      if (isSelectionOutsideTopViewport) {
+        // If the selection is outside the top of the viewport, scroll to
+        // the first row of the selection range
+        return selectionFirstRow;
+      }
+      if (isSelectionOutsideBottomViewport) {
+        // If the selection is outside the bottom of the viewport, scroll to
+        // the last row of the selection range
+        return selectionLastRow;
+      }
+
+      // For other cases, scroll to the row defined by the last selection coords
+      return lastSelectionCoords.row;
+    }
+  };
+}