handsontable 14.6.1-next-689aaa6-20241016 → 15.0.0-next-4472a60-20241203

package/plugins/mergeCells/mergeCells.mjs

@@ -7,6 +7,11 @@ import "core-js/modules/es.set.is-subset-of.v2.js";
 import "core-js/modules/es.set.is-superset-of.v2.js";
 import "core-js/modules/es.set.symmetric-difference.v2.js";
 import "core-js/modules/es.set.union.v2.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/esnext.iterator.map.js";
+import "core-js/modules/esnext.iterator.reduce.js";
 function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
 function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
 function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
@@ -16,8 +21,8 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
 function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
 function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
-import { BasePlugin } from "../base/index.mjs";
-import Hooks from "../../pluginHooks.mjs";
+import { BasePlugin, defaultMainSettingSymbol } from "../base/index.mjs";
+import { Hooks } from "../../core/hooks/index.mjs";
 import MergedCellsCollection from "./cellsCollection.mjs";
 import MergedCellCoords from "./cellCoords.mjs";
 import AutofillCalculations from "./calculations/autofill.mjs";
@@ -26,7 +31,7 @@ import toggleMergeItem from "./contextMenuItem/toggleMerge.mjs";
 import { arrayEach } from "../../helpers/array.mjs";
 import { isObject } from "../../helpers/object.mjs";
 import { warn } from "../../helpers/console.mjs";
-import { rangeEach } from "../../helpers/number.mjs";
+import { rangeEach, clamp } from "../../helpers/number.mjs";
 import { getStyle } from "../../helpers/dom/element.mjs";
 import { isChrome } from "../../helpers/browser.mjs";
 import { FocusOrder } from "./focusOrder.mjs";
@@ -149,6 +154,13 @@ export class MergeCells extends BasePlugin {
   static get PLUGIN_PRIORITY() {
     return PLUGIN_PRIORITY;
   }
+  static get DEFAULT_SETTINGS() {
+    return {
+      [defaultMainSettingSymbol]: 'cells',
+      virtualized: false,
+      cells: []
+    };
+  }
   /**
    * Checks if the plugin is enabled in the handsontable settings. This method is executed in {@link Hooks#beforeInit}
    * hook and if it returns `true` then the {@link MergeCells#enablePlugin} method is called.
@@ -236,102 +248,108 @@ export class MergeCells extends BasePlugin {
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onModifyGetCellCoords).call(_this, ...args);
     });
-    this.addHook('afterIsMultipleSelection', function () {
+    this.addHook('modifyGetCoordsElement', function () {
       for (var _len12 = arguments.length, args = new Array(_len12), _key12 = 0; _key12 < _len12; _key12++) {
         args[_key12] = arguments[_key12];
       }
+      return _assertClassBrand(_MergeCells_brand, _this, _onModifyGetCellCoords).call(_this, ...args);
+    });
+    this.addHook('afterIsMultipleSelection', function () {
+      for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
+        args[_key13] = arguments[_key13];
+      }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterIsMultipleSelection).call(_this, ...args);
     });
     this.addHook('afterRenderer', function () {
       return _classPrivateFieldGet(_cellRenderer, _this).after(...arguments);
     });
     this.addHook('afterContextMenuDefaultOptions', function () {
-      for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
-        args[_key13] = arguments[_key13];
+      for (var _len14 = arguments.length, args = new Array(_len14), _key14 = 0; _key14 < _len14; _key14++) {
+        args[_key14] = arguments[_key14];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _addMergeActionsToContextMenu).call(_this, ...args);
     });
     this.addHook('afterGetCellMeta', function () {
-      for (var _len14 = arguments.length, args = new Array(_len14), _key14 = 0; _key14 < _len14; _key14++) {
-        args[_key14] = arguments[_key14];
+      for (var _len15 = arguments.length, args = new Array(_len15), _key15 = 0; _key15 < _len15; _key15++) {
+        args[_key15] = arguments[_key15];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterGetCellMeta).call(_this, ...args);
     });
     this.addHook('afterViewportRowCalculatorOverride', function () {
-      for (var _len15 = arguments.length, args = new Array(_len15), _key15 = 0; _key15 < _len15; _key15++) {
-        args[_key15] = arguments[_key15];
+      for (var _len16 = arguments.length, args = new Array(_len16), _key16 = 0; _key16 < _len16; _key16++) {
+        args[_key16] = arguments[_key16];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterViewportRowCalculatorOverride).call(_this, ...args);
     });
     this.addHook('afterViewportColumnCalculatorOverride', function () {
-      for (var _len16 = arguments.length, args = new Array(_len16), _key16 = 0; _key16 < _len16; _key16++) {
-        args[_key16] = arguments[_key16];
+      for (var _len17 = arguments.length, args = new Array(_len17), _key17 = 0; _key17 < _len17; _key17++) {
+        args[_key17] = arguments[_key17];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterViewportColumnCalculatorOverride).call(_this, ...args);
     });
     this.addHook('modifyAutofillRange', function () {
-      for (var _len17 = arguments.length, args = new Array(_len17), _key17 = 0; _key17 < _len17; _key17++) {
-        args[_key17] = arguments[_key17];
+      for (var _len18 = arguments.length, args = new Array(_len18), _key18 = 0; _key18 < _len18; _key18++) {
+        args[_key18] = arguments[_key18];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onModifyAutofillRange).call(_this, ...args);
     });
     this.addHook('afterCreateCol', function () {
-      for (var _len18 = arguments.length, args = new Array(_len18), _key18 = 0; _key18 < _len18; _key18++) {
-        args[_key18] = arguments[_key18];
+      for (var _len19 = arguments.length, args = new Array(_len19), _key19 = 0; _key19 < _len19; _key19++) {
+        args[_key19] = arguments[_key19];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterCreateCol).call(_this, ...args);
     });
     this.addHook('afterRemoveCol', function () {
-      for (var _len19 = arguments.length, args = new Array(_len19), _key19 = 0; _key19 < _len19; _key19++) {
-        args[_key19] = arguments[_key19];
+      for (var _len20 = arguments.length, args = new Array(_len20), _key20 = 0; _key20 < _len20; _key20++) {
+        args[_key20] = arguments[_key20];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterRemoveCol).call(_this, ...args);
     });
     this.addHook('afterCreateRow', function () {
-      for (var _len20 = arguments.length, args = new Array(_len20), _key20 = 0; _key20 < _len20; _key20++) {
-        args[_key20] = arguments[_key20];
+      for (var _len21 = arguments.length, args = new Array(_len21), _key21 = 0; _key21 < _len21; _key21++) {
+        args[_key21] = arguments[_key21];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterCreateRow).call(_this, ...args);
     });
     this.addHook('afterRemoveRow', function () {
-      for (var _len21 = arguments.length, args = new Array(_len21), _key21 = 0; _key21 < _len21; _key21++) {
-        args[_key21] = arguments[_key21];
+      for (var _len22 = arguments.length, args = new Array(_len22), _key22 = 0; _key22 < _len22; _key22++) {
+        args[_key22] = arguments[_key22];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterRemoveRow).call(_this, ...args);
     });
     this.addHook('afterChange', function () {
-      for (var _len22 = arguments.length, args = new Array(_len22), _key22 = 0; _key22 < _len22; _key22++) {
-        args[_key22] = arguments[_key22];
+      for (var _len23 = arguments.length, args = new Array(_len23), _key23 = 0; _key23 < _len23; _key23++) {
+        args[_key23] = arguments[_key23];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterChange).call(_this, ...args);
     });
     this.addHook('beforeDrawBorders', function () {
-      for (var _len23 = arguments.length, args = new Array(_len23), _key23 = 0; _key23 < _len23; _key23++) {
-        args[_key23] = arguments[_key23];
+      for (var _len24 = arguments.length, args = new Array(_len24), _key24 = 0; _key24 < _len24; _key24++) {
+        args[_key24] = arguments[_key24];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onBeforeDrawAreaBorders).call(_this, ...args);
     });
     this.addHook('afterDrawSelection', function () {
-      for (var _len24 = arguments.length, args = new Array(_len24), _key24 = 0; _key24 < _len24; _key24++) {
-        args[_key24] = arguments[_key24];
+      for (var _len25 = arguments.length, args = new Array(_len25), _key25 = 0; _key25 < _len25; _key25++) {
+        args[_key25] = arguments[_key25];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterDrawSelection).call(_this, ...args);
     });
     this.addHook('beforeRemoveCellClassNames', function () {
-      for (var _len25 = arguments.length, args = new Array(_len25), _key25 = 0; _key25 < _len25; _key25++) {
-        args[_key25] = arguments[_key25];
+      for (var _len26 = arguments.length, args = new Array(_len26), _key26 = 0; _key26 < _len26; _key26++) {
+        args[_key26] = arguments[_key26];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onBeforeRemoveCellClassNames).call(_this, ...args);
     });
     this.addHook('beforeBeginEditing', function () {
-      for (var _len26 = arguments.length, args = new Array(_len26), _key26 = 0; _key26 < _len26; _key26++) {
-        args[_key26] = arguments[_key26];
+      for (var _len27 = arguments.length, args = new Array(_len27), _key27 = 0; _key27 < _len27; _key27++) {
+        args[_key27] = arguments[_key27];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onBeforeBeginEditing).call(_this, ...args);
     });
     this.addHook('modifyRowHeightByOverlayName', function () {
-      for (var _len27 = arguments.length, args = new Array(_len27), _key27 = 0; _key27 < _len27; _key27++) {
-        args[_key27] = arguments[_key27];
+      for (var _len28 = arguments.length, args = new Array(_len28), _key28 = 0; _key28 < _len28; _key28++) {
+        args[_key28] = arguments[_key28];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onModifyRowHeightByOverlayName).call(_this, ...args);
     });
@@ -362,10 +380,9 @@ export class MergeCells extends BasePlugin {
    *  - [`mergeCells`](@/api/options.md#mergecells)
    */
   updatePlugin() {
-    const settings = this.hot.getSettings()[PLUGIN_KEY];
     this.disablePlugin();
     this.enablePlugin();
-    this.generateFromSettings(settings);
+    this.generateFromSettings();
     super.updatePlugin();
   }
 
@@ -450,13 +467,9 @@ export class MergeCells extends BasePlugin {
    * Generates the merged cells from the settings provided to the plugin.
    *
    * @private
-   * @param {Array|boolean} settings The settings provided to the plugin.
    */
-  generateFromSettings(settings) {
-    if (!Array.isArray(settings)) {
-      return;
-    }
-    const validSettings = settings.filter(mergeCellInfo => this.validateSetting(mergeCellInfo));
+  generateFromSettings() {
+    const validSettings = this.getSetting('cells').filter(mergeCellInfo => this.validateSetting(mergeCellInfo));
     const nonOverlappingSettings = this.mergedCellsCollection.filterOverlappingMergeCells(validSettings);
     const populatedNulls = [];
     nonOverlappingSettings.forEach(mergeCellInfo => {
@@ -898,7 +911,7 @@ export class MergeCells extends BasePlugin {
    */
 }
 function _onAfterInit() {
-  this.generateFromSettings(this.hot.getSettings()[PLUGIN_KEY]);
+  this.generateFromSettings();
   this.hot.render();
 }
 function _onAfterIsMultipleSelection(isMultiple) {
@@ -1092,13 +1105,16 @@ function _onBeforeSelectionHighlightSet() {
   }
 }
 /**
- * `modifyGetCellCoords` hook callback. Swaps the `getCell` coords with the merged parent coords.
+ * The `modifyGetCellCoords` hook callback allows forwarding all `getCell` calls that point in-between the merged cells
+ * to the root element of the cell.
  *
  * @param {number} row Row index.
  * @param {number} column Visual column index.
+ * @param {boolean} topmost Indicates if the requested element belongs to the topmost layer (any overlay) or not.
+ * @param {string} [source] String that identifies how this coords change will be processed.
  * @returns {Array|undefined} Visual coordinates of the merge.
  */
-function _onModifyGetCellCoords(row, column) {
+function _onModifyGetCellCoords(row, column, topmost, source) {
   if (row < 0 || column < 0) {
     return;
   }
@@ -1112,11 +1128,17 @@ function _onModifyGetCellCoords(row, column) {
     colspan,
     rowspan
   } = mergeParent;
-  return [
-  // Most top-left merged cell coords.
-  mergeRow, mergeColumn,
-  // Most bottom-right merged cell coords.
-  mergeRow + rowspan - 1, mergeColumn + colspan - 1];
+  const topStartRow = mergeRow;
+  const topStartColumn = mergeColumn;
+  const bottomEndRow = mergeRow + rowspan - 1;
+  const bottomEndColumn = mergeColumn + colspan - 1;
+  if (source === 'render' && this.getSetting('virtualized')) {
+    const overlayName = this.hot.view.getActiveOverlayName();
+    const firstRenderedRow = ['top', 'top_inline_start_corner'].includes(overlayName) ? 0 : this.hot.getFirstRenderedVisibleRow();
+    const firstRenderedColumn = ['inline_start', 'top_inline_start_corner', 'bottom_inline_start_corner'].includes(overlayName) ? 0 : this.hot.getFirstRenderedVisibleColumn();
+    return [clamp(firstRenderedRow, topStartRow, bottomEndRow), clamp(firstRenderedColumn, topStartColumn, bottomEndColumn), clamp(this.hot.getLastRenderedVisibleRow(), topStartRow, bottomEndRow), clamp(this.hot.getLastRenderedVisibleColumn(), topStartColumn, bottomEndColumn)];
+  }
+  return [topStartRow, topStartColumn, bottomEndRow, bottomEndColumn];
 }
 /**
  * `afterContextMenuDefaultOptions` hook callback.
@@ -1252,11 +1274,17 @@ function _onAfterGetCellMeta(row, col, cellProperties) {
  * @param {object} calc The row calculator object.
  */
 function _onAfterViewportRowCalculatorOverride(calc) {
+  if (this.getSetting('virtualized')) {
+    return;
+  }
   const nrOfColumns = this.hot.countCols();
   this.modifyViewportRowStart(calc, nrOfColumns);
   this.modifyViewportRowEnd(calc, nrOfColumns);
 }
 function _onAfterViewportColumnCalculatorOverride(calc) {
+  if (this.getSetting('virtualized')) {
+    return;
+  }
   const nrOfRows = this.hot.countRows();
   this.modifyViewportColumnStart(calc, nrOfRows);
   this.modifyViewportColumnEnd(calc, nrOfRows);
@@ -1415,8 +1443,8 @@ function _onModifyRowHeightByOverlayName(height, row, overlayType) {
   let firstColumn;
   let lastColumn;
   if (overlayType === 'master') {
-    firstColumn = this.hot.view.getFirstRenderedVisibleColumn();
-    lastColumn = this.hot.view.getLastRenderedVisibleColumn();
+    firstColumn = this.hot.getFirstRenderedVisibleColumn();
+    lastColumn = this.hot.getLastRenderedVisibleColumn();
   } else {
     const activeOverlay = this.hot.view.getOverlayByName(overlayType);
     firstColumn = this.hot.columnIndexMapper.getVisualFromRenderableIndex(activeOverlay.clone.wtTable.getFirstRenderedColumn());
@@ -1429,7 +1457,7 @@ function _onModifyRowHeightByOverlayName(height, row, overlayType) {
   const from = this.hot._createCellCoords(row, firstColumn);
   const to = this.hot._createCellCoords(row, lastColumn);
   const viewportRange = this.hot._createCellRange(from, from, to);
-  const mergedCellsWithinRange = this.mergedCellsCollection.getWithinRange(viewportRange);
+  const mergedCellsWithinRange = this.mergedCellsCollection.getWithinRange(viewportRange, true);
   const maxRowspan = mergedCellsWithinRange.reduce((acc, _ref) => {
     let {
       rowspan
@@ -1463,7 +1491,7 @@ function _onModifyRowHeightByOverlayName(height, row, overlayType) {
  * @returns {number}
  */
 function _sumCellsHeights(row, rowspan) {
-  const defaultHeight = this.hot.view._wt.wtSettings.getSettingPure('defaultRowHeight');
+  const defaultHeight = this.hot.view.getDefaultRowHeight();
   const autoRowSizePlugin = this.hot.getPlugin('autoRowSize');
   let height = 0;
   for (let i = row; i < row + rowspan; i++) {

package/plugins/mergeCells/renderer.js

@@ -31,7 +31,7 @@ function createMergeCellRenderer(plugin) {
    *
    * @private
    * @param {HTMLElement} TD The cell to be modified.
-   * @param {number} row Row index.
+   * @param {number} row Visual row index.
    * @param {number} col Visual column index.
    */
   function after(TD, row, col) {
@@ -49,13 +49,23 @@ function createMergeCellRenderer(plugin) {
       rowspan: origRowspan
     } = mergedCell;
     const [lastMergedRowIndex, lastMergedColumnIndex] = plugin.translateMergedCellToRenderable(origRow, origRowspan, origColumn, origColspan);
+    const isVirtualRenderingEnabled = plugin.getSetting('virtualized');
     const renderedRowIndex = rowMapper.getRenderableFromVisualIndex(row);
     const renderedColumnIndex = columnMapper.getRenderableFromVisualIndex(col);
     const maxRowSpan = lastMergedRowIndex - renderedRowIndex + 1; // Number of rendered columns.
     const maxColSpan = lastMergedColumnIndex - renderedColumnIndex + 1; // Number of rendered columns.
 
-    const notHiddenRow = rowMapper.getNearestNotHiddenIndex(origRow, 1);
-    const notHiddenColumn = columnMapper.getNearestNotHiddenIndex(origColumn, 1);
+    let notHiddenRow = rowMapper.getNearestNotHiddenIndex(origRow, 1);
+    let notHiddenColumn = columnMapper.getNearestNotHiddenIndex(origColumn, 1);
+    if (isVirtualRenderingEnabled) {
+      const overlayName = hot.view.getActiveOverlayName();
+      if (!['top', 'top_inline_start_corner'].includes(overlayName)) {
+        notHiddenRow = Math.max(notHiddenRow, hot.getFirstRenderedVisibleRow());
+      }
+      if (!['inline_start', 'top_inline_start_corner', 'bottom_inline_start_corner'].includes(overlayName)) {
+        notHiddenColumn = Math.max(notHiddenColumn, hot.getFirstRenderedVisibleColumn());
+      }
+    }
     const notHiddenRowspan = Math.min(origRowspan, maxRowSpan);
     const notHiddenColspan = Math.min(origColspan, maxColSpan);
     if (notHiddenRow === row && notHiddenColumn === col) {

package/plugins/mergeCells/renderer.mjs

@@ -27,7 +27,7 @@ export function createMergeCellRenderer(plugin) {
    *
    * @private
    * @param {HTMLElement} TD The cell to be modified.
-   * @param {number} row Row index.
+   * @param {number} row Visual row index.
    * @param {number} col Visual column index.
    */
   function after(TD, row, col) {
@@ -45,13 +45,23 @@ export function createMergeCellRenderer(plugin) {
       rowspan: origRowspan
     } = mergedCell;
     const [lastMergedRowIndex, lastMergedColumnIndex] = plugin.translateMergedCellToRenderable(origRow, origRowspan, origColumn, origColspan);
+    const isVirtualRenderingEnabled = plugin.getSetting('virtualized');
     const renderedRowIndex = rowMapper.getRenderableFromVisualIndex(row);
     const renderedColumnIndex = columnMapper.getRenderableFromVisualIndex(col);
     const maxRowSpan = lastMergedRowIndex - renderedRowIndex + 1; // Number of rendered columns.
     const maxColSpan = lastMergedColumnIndex - renderedColumnIndex + 1; // Number of rendered columns.
 
-    const notHiddenRow = rowMapper.getNearestNotHiddenIndex(origRow, 1);
-    const notHiddenColumn = columnMapper.getNearestNotHiddenIndex(origColumn, 1);
+    let notHiddenRow = rowMapper.getNearestNotHiddenIndex(origRow, 1);
+    let notHiddenColumn = columnMapper.getNearestNotHiddenIndex(origColumn, 1);
+    if (isVirtualRenderingEnabled) {
+      const overlayName = hot.view.getActiveOverlayName();
+      if (!['top', 'top_inline_start_corner'].includes(overlayName)) {
+        notHiddenRow = Math.max(notHiddenRow, hot.getFirstRenderedVisibleRow());
+      }
+      if (!['inline_start', 'top_inline_start_corner', 'bottom_inline_start_corner'].includes(overlayName)) {
+        notHiddenColumn = Math.max(notHiddenColumn, hot.getFirstRenderedVisibleColumn());
+      }
+    }
     const notHiddenRowspan = Math.min(origRowspan, maxRowSpan);
     const notHiddenColspan = Math.min(origColspan, maxColSpan);
     if (notHiddenRow === row && notHiddenColumn === col) {

package/plugins/multiColumnSorting/domHelpers.js

@@ -4,6 +4,8 @@ exports.__esModule = true;
 exports.getClassesToAdd = getClassesToAdd;
 exports.getClassesToRemove = getClassesToRemove;
 require("core-js/modules/es.array.push.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
 const COLUMN_ORDER_PREFIX = 'sort';
 
 /**

package/plugins/multiColumnSorting/domHelpers.mjs

@@ -1,4 +1,6 @@
 import "core-js/modules/es.array.push.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
 const COLUMN_ORDER_PREFIX = 'sort';
 
 /**

package/plugins/nestedHeaders/nestedHeaders.js

@@ -3,6 +3,8 @@
 exports.__esModule = true;
 require("core-js/modules/es.error.cause.js");
 require("core-js/modules/es.array.push.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.for-each.js");
 var _element = require("../../helpers/dom/element");
 var _number = require("../../helpers/number");
 var _templateLiteralTag = require("../../helpers/templateLiteralTag");
@@ -75,6 +77,7 @@ var _stateManager = /*#__PURE__*/new WeakMap();
 var _hidingIndexMapObserver = /*#__PURE__*/new WeakMap();
 var _focusInitialCoords = /*#__PURE__*/new WeakMap();
 var _isColumnsSelectionInProgress = /*#__PURE__*/new WeakMap();
+var _recentlyHighlightCoords = /*#__PURE__*/new WeakMap();
 var _NestedHeaders_brand = /*#__PURE__*/new WeakSet();
 class NestedHeaders extends _base.BasePlugin {
   constructor() {
@@ -109,6 +112,14 @@ class NestedHeaders extends _base.BasePlugin {
      * @type {boolean}
      */
     _classPrivateFieldInitSpec(this, _isColumnsSelectionInProgress, false);
+    /**
+     * Keeps the last highlight position made by column selection. The coords are necessary to scroll
+     * the viewport to the correct position when the nested header is clicked when the `navigableHeaders`
+     * option is disabled.
+     *
+     * @type {CellCoords | null}
+     */
+    _classPrivateFieldInitSpec(this, _recentlyHighlightCoords, null);
     /**
      * Custom helper for getting widths of the nested headers.
      *
@@ -529,9 +540,13 @@ function _updateFocusHighlightPosition() {
  * indexes are used.
  *
  * @param {number} visualColumn A visual column index to which the viewport will be scrolled.
+ * @param {{ value: 'auto' | 'start' | 'end' }} snapping If `'start'`, viewport is scrolled to show
+ * the cell on the left of the table. If `'end'`, viewport is scrolled to show the cell on the right of
+ * the table. When `'auto'`, the viewport is scrolled only when the column is outside of the viewport.
  * @returns {number}
  */
-function _onBeforeViewportScrollHorizontally(visualColumn) {
+function _onBeforeViewportScrollHorizontally(visualColumn, snapping) {
+  var _classPrivateFieldGet4;
   const selection = this.hot.getSelectedRangeLast();
   if (!selection) {
     return visualColumn;
@@ -539,20 +554,50 @@ function _onBeforeViewportScrollHorizontally(visualColumn) {
   const {
     highlight
   } = selection;
-  const isNestedHeadersRange = highlight.isHeader() && highlight.col >= 0;
+  const {
+    navigableHeaders
+  } = this.hot.getSettings();
+  const isSelectedByColumnHeader = this.hot.selection.isSelectedByColumnHeader();
+  const highlightRow = navigableHeaders ? highlight.row : (_classPrivateFieldGet4 = _classPrivateFieldGet(_recentlyHighlightCoords, this)) === null || _classPrivateFieldGet4 === void 0 ? void 0 : _classPrivateFieldGet4.row;
+  const highlightColumn = isSelectedByColumnHeader ? visualColumn : highlight.col;
+  const isNestedHeadersRange = highlightRow < 0 && highlightColumn >= 0;
+  _classPrivateFieldSet(_recentlyHighlightCoords, this, null);
   if (!isNestedHeadersRange) {
     return visualColumn;
   }
-  const firstColumn = this.hot.view.getFirstFullyVisibleColumn();
-  const lastColumn = this.hot.view.getLastFullyVisibleColumn();
-  const mostLeftColumnIndex = _classPrivateFieldGet(_stateManager, this).findLeftMostColumnIndex(highlight.row, highlight.col);
-  const mostRightColumnIndex = _classPrivateFieldGet(_stateManager, this).findRightMostColumnIndex(highlight.row, highlight.col);
+  const firstVisibleColumn = this.hot.getFirstFullyVisibleColumn();
+  const lastVisibleColumn = this.hot.getLastFullyVisibleColumn();
+  const viewportWidth = lastVisibleColumn - firstVisibleColumn + 1;
+  const mostLeftColumnIndex = _classPrivateFieldGet(_stateManager, this).findLeftMostColumnIndex(highlightRow, highlightColumn);
+  const mostRightColumnIndex = _classPrivateFieldGet(_stateManager, this).findRightMostColumnIndex(highlightRow, highlightColumn);
+  const headerWidth = mostRightColumnIndex - mostLeftColumnIndex + 1;
 
-  // do not scroll the viewport when the header is wider than the viewport
-  if (mostLeftColumnIndex < firstColumn && mostRightColumnIndex > lastColumn) {
-    return visualColumn;
+  // scroll the viewport always to the left when the header is wider than the viewport
+  if (mostLeftColumnIndex < firstVisibleColumn && mostRightColumnIndex > lastVisibleColumn) {
+    return mostLeftColumnIndex;
+  }
+  if (isSelectedByColumnHeader) {
+    let scrollColumnIndex = null;
+    if (mostLeftColumnIndex >= firstVisibleColumn && mostRightColumnIndex > lastVisibleColumn) {
+      if (headerWidth > viewportWidth) {
+        snapping.value = 'start';
+        scrollColumnIndex = mostLeftColumnIndex;
+      } else {
+        snapping.value = 'end';
+        scrollColumnIndex = mostRightColumnIndex;
+      }
+    } else if (mostLeftColumnIndex < firstVisibleColumn && mostRightColumnIndex <= lastVisibleColumn) {
+      if (headerWidth > viewportWidth) {
+        snapping.value = 'end';
+        scrollColumnIndex = mostRightColumnIndex;
+      } else {
+        snapping.value = 'start';
+        scrollColumnIndex = mostLeftColumnIndex;
+      }
+    }
+    return scrollColumnIndex;
   }
-  return mostLeftColumnIndex < firstColumn ? mostLeftColumnIndex : mostRightColumnIndex;
+  return mostLeftColumnIndex <= firstVisibleColumn ? mostLeftColumnIndex : mostRightColumnIndex;
 }
 /**
  * Allows to control which header DOM element will be used to highlight.
@@ -623,13 +668,13 @@ function _onBeforeCopy(data, copyableRanges, _ref2) {
     }
     for (let column = startCol; column <= endCol; column++) {
       for (let row = startRow; row <= endRow; row++) {
-        var _classPrivateFieldGet4;
+        var _classPrivateFieldGet5;
         const zeroBasedColumnHeaderLevel = rowsCount + row;
         const zeroBasedColumnIndex = column - startCol;
         if (zeroBasedColumnIndex === 0) {
           continue; // eslint-disable-line no-continue
         }
-        const isRoot = (_classPrivateFieldGet4 = _classPrivateFieldGet(_stateManager, this).getHeaderTreeNodeData(row, column)) === null || _classPrivateFieldGet4 === void 0 ? void 0 : _classPrivateFieldGet4.isRoot;
+        const isRoot = (_classPrivateFieldGet5 = _classPrivateFieldGet(_stateManager, this).getHeaderTreeNodeData(row, column)) === null || _classPrivateFieldGet5 === void 0 ? void 0 : _classPrivateFieldGet5.isRoot;
         if (isRoot === false) {
           data[zeroBasedColumnHeaderLevel][zeroBasedColumnIndex] = '';
         }
@@ -707,7 +752,7 @@ function _onAfterOnCellMouseDown(event, coords) {
  *                            a boolean value that allows or disallows changing the selection for that particular area.
  */
 function _onBeforeOnCellMouseOver(event, coords, TD, controller) {
-  if (!this.hot.view.isMouseDown()) {
+  if (!this.hot.view.isMouseDown() || controller.column) {
     return;
   }
   const headerNodeData = this._getHeaderTreeNodeDataByCoords(coords);
@@ -815,8 +860,9 @@ function _onModifyTransformStart(delta) {
  *
  * @param {CellCoords} from The coords object where the selection starts.
  * @param {CellCoords} to The coords object where the selection ends.
+ * @param {CellCoords} highlight The coords object where the focus is.
  */
-function _onBeforeSelectColumns(from, to) {
+function _onBeforeSelectColumns(from, to, highlight) {
   const headerLevel = from.row;
   const startNodeData = this._getHeaderTreeNodeDataByCoords({
     row: headerLevel,
@@ -826,6 +872,7 @@ function _onBeforeSelectColumns(from, to) {
     row: headerLevel,
     col: to.col
   });
+  _classPrivateFieldSet(_recentlyHighlightCoords, this, highlight.clone());
   if (to.col < from.col) {
     // Column selection from right to left
     if (startNodeData) {
@@ -910,10 +957,10 @@ function _onModifyColWidth(width, column) {
  * @returns {string} Returns the column header value to update.
  */
 function _onModifyColumnHeaderValue(value, visualColumnIndex, headerLevel) {
-  var _classPrivateFieldGet5;
+  var _classPrivateFieldGet6;
   const {
     label
-  } = (_classPrivateFieldGet5 = _classPrivateFieldGet(_stateManager, this).getHeaderTreeNodeData(headerLevel, visualColumnIndex)) !== null && _classPrivateFieldGet5 !== void 0 ? _classPrivateFieldGet5 : {
+  } = (_classPrivateFieldGet6 = _classPrivateFieldGet(_stateManager, this).getHeaderTreeNodeData(headerLevel, visualColumnIndex)) !== null && _classPrivateFieldGet6 !== void 0 ? _classPrivateFieldGet6 : {
     label: ''
   };
   return label;