handsontable 0.0.0-next-1af4e47-20241125 → 0.0.0-next-fcb9b77-20241126

package/dist/handsontable.js

@@ -25,8 +25,8 @@
  * INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM
  * USE OR INABILITY TO USE THIS SOFTWARE.
  *
- * Version: 0.0.0-next-1af4e47-20241125
- * Release date: 17/10/2024 (built at 25/11/2024 11:12:57)
+ * Version: 0.0.0-next-fcb9b77-20241126
+ * Release date: 17/10/2024 (built at 26/11/2024 09:17:24)
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -107,8 +107,8 @@ Handsontable.hooks = _hooks.Hooks.getSingleton();
 Handsontable.CellCoords = _src.CellCoords;
 Handsontable.CellRange = _src.CellRange;
 Handsontable.packageName = 'handsontable';
-Handsontable.buildDate = "25/11/2024 11:12:57";
-Handsontable.version = "0.0.0-next-1af4e47-20241125";
+Handsontable.buildDate = "26/11/2024 09:17:24";
+Handsontable.version = "0.0.0-next-fcb9b77-20241126";
 Handsontable.languages = {
   dictionaryKeys: _registry.dictionaryKeys,
   getLanguageDictionary: _registry.getLanguageDictionary,
@@ -4244,22 +4244,8 @@ function Core(rootElement, userSettings) {
     const {
       row,
       col,
-      verticalSnap,
-      horizontalSnap,
       considerHiddenIndexes
     } = (_options = options) !== null && _options !== void 0 ? _options : {};
-    let snapToTop;
-    let snapToBottom;
-    let snapToInlineStart;
-    let snapToInlineEnd;
-    if (verticalSnap !== undefined) {
-      snapToTop = verticalSnap === 'top';
-      snapToBottom = !snapToTop;
-    }
-    if (horizontalSnap !== undefined) {
-      snapToInlineStart = horizontalSnap === 'start';
-      snapToInlineEnd = !snapToInlineStart;
-    }
     let renderableRow = row;
     let renderableColumn = col;
     if (considerHiddenIndexes === undefined || considerHiddenIndexes) {
@@ -4276,13 +4262,13 @@ function Core(rootElement, userSettings) {
     const isRowInteger = Number.isInteger(renderableRow);
     const isColumnInteger = Number.isInteger(renderableColumn);
     if (isRowInteger && renderableRow >= 0 && isColumnInteger && renderableColumn >= 0) {
-      return instance.view.scrollViewport(instance._createCellCoords(renderableRow, renderableColumn), snapToTop, snapToInlineEnd, snapToBottom, snapToInlineStart);
+      return instance.view.scrollViewport(instance._createCellCoords(renderableRow, renderableColumn), options.horizontalSnap, options.verticalSnap);
     }
     if (isRowInteger && renderableRow >= 0 && (isColumnInteger && renderableColumn < 0 || !isColumnInteger)) {
-      return instance.view.scrollViewportVertically(renderableRow, snapToTop, snapToBottom);
+      return instance.view.scrollViewportVertically(renderableRow, options.verticalSnap);
     }
     if (isColumnInteger && renderableColumn >= 0 && (isRowInteger && renderableRow < 0 || !isRowInteger)) {
-      return instance.view.scrollViewportHorizontally(renderableColumn, snapToInlineEnd, snapToInlineStart);
+      return instance.view.scrollViewportHorizontally(renderableColumn, options.horizontalSnap);
     }
     return false;
   };
@@ -10023,7 +10009,7 @@ const domMessages = {
 function _injectProductInfo(key, element) {
   const hasValidType = !isEmpty(key);
   const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
-  const hotVersion = "0.0.0-next-1af4e47-20241125";
+  const hotVersion = "0.0.0-next-fcb9b77-20241126";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';
@@ -13403,6 +13389,10 @@ const REGISTERED_HOOKS = exports.REGISTERED_HOOKS = [/* eslint-disable jsdoc/req
  * @since 14.0.0
  * @event Hooks#beforeViewportScrollVertically
  * @param {number} visualRow Visual row index.
+ * @param {'auto' | 'top' | 'bottom'} [snapping='auto'] If `'top'`, viewport is scrolled to show
+ * the cell on the top of the table. If `'bottom'`, viewport is scrolled to show the cell on
+ * the bottom of the table. When `'auto'`, the viewport is scrolled only when the row is outside of
+ * the viewport.
  * @returns {number | boolean} Returns modified row index (or the same as passed in the method argument) to which
  * the viewport will be scrolled. If the returned value is `false`, the scrolling will be canceled.
  */
@@ -13414,6 +13404,9 @@ const REGISTERED_HOOKS = exports.REGISTERED_HOOKS = [/* eslint-disable jsdoc/req
  * @since 14.0.0
  * @event Hooks#beforeViewportScrollHorizontally
  * @param {number} visualColumn Visual column index.
+ * @param {'auto' | 'start' | 'end'} [snapping='auto'] 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 | boolean} Returns modified column index (or the same as passed in the method argument) to which
  * the viewport will be scrolled. If the returned value is `false`, the scrolling will be canceled.
  */
@@ -17828,38 +17821,43 @@ class TableView {
    * Scroll viewport to a cell.
    *
    * @param {CellCoords} coords Renderable cell coordinates.
-   * @param {boolean} [snapToTop] If `true`, viewport is scrolled to show the cell on the top of the table.
-   * @param {boolean} [snapToRight] If `true`, viewport is scrolled to show the cell on the right side of the table.
-   * @param {boolean} [snapToBottom] If `true`, viewport is scrolled to show the cell on the bottom side of the table.
-   * @param {boolean} [snapToLeft] If `true`, viewport is scrolled to show the cell on the left side of the table.
+   * @param {'auto' | 'start' | 'end'} [horizontalSnap] 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.
+   * @param {'auto' | 'top' | 'bottom'} [verticalSnap] If `'top'`, viewport is scrolled to show
+   * the cell on the top of the table. If `'bottom'`, viewport is scrolled to show the cell on the bottom of
+   * the table. When `'auto'`, the viewport is scrolled only when the row is outside of the viewport.
    * @returns {boolean}
    */
-  scrollViewport(coords, snapToTop, snapToRight, snapToBottom, snapToLeft) {
-    return this._wt.scrollViewport(coords, snapToTop, snapToRight, snapToBottom, snapToLeft);
+  scrollViewport(coords, horizontalSnap, verticalSnap) {
+    return this._wt.scrollViewport(coords, horizontalSnap, verticalSnap);
   }
 
   /**
    * Scroll viewport to a column.
    *
    * @param {number} column Renderable column index.
-   * @param {boolean} [snapToRight] If `true`, viewport is scrolled to show the cell on the right side of the table.
-   * @param {boolean} [snapToLeft] If `true`, viewport is scrolled to show the cell on the left side of the table.
+   * @param {'auto' | 'start' | 'end'} [snap] 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 {boolean}
    */
-  scrollViewportHorizontally(column, snapToRight, snapToLeft) {
-    return this._wt.scrollViewportHorizontally(column, snapToRight, snapToLeft);
+  scrollViewportHorizontally(column, snap) {
+    return this._wt.scrollViewportHorizontally(column, snap);
   }
 
   /**
    * Scroll viewport to a row.
    *
    * @param {number} row Renderable row index.
-   * @param {boolean} [snapToTop] If `true`, viewport is scrolled to show the cell on the top of the table.
-   * @param {boolean} [snapToBottom] If `true`, viewport is scrolled to show the cell on the bottom side of the table.
+   * @param {'auto' | 'top' | 'bottom'} [snap] If `'top'`, viewport is scrolled to show
+   * the cell on the top of the table. If `'bottom'`, viewport is scrolled to show the cell on
+   * the bottom of the table. When `'auto'`, the viewport is scrolled only when the row is outside of
+   * the viewport.
    * @returns {boolean}
    */
-  scrollViewportVertically(row, snapToTop, snapToBottom) {
-    return this._wt.scrollViewportVertically(row, snapToTop, snapToBottom);
+  scrollViewportVertically(row, snap) {
+    return this._wt.scrollViewportVertically(row, snap);
   }
 
   /**
@@ -18450,7 +18448,7 @@ class TableView {
       },
       beforeDraw: (force, skipRender) => this.beforeRender(force, skipRender),
       onDraw: force => this.afterRender(force),
-      onBeforeViewportScrollVertically: renderableRow => {
+      onBeforeViewportScrollVertically: (renderableRow, snapping) => {
         const rowMapper = this.hot.rowIndexMapper;
         const areColumnHeadersSelected = renderableRow < 0;
         let visualRow = renderableRow;
@@ -18462,14 +18460,14 @@ class TableView {
             return renderableRow;
           }
         }
-        visualRow = this.hot.runHooks('beforeViewportScrollVertically', visualRow);
+        visualRow = this.hot.runHooks('beforeViewportScrollVertically', visualRow, snapping);
         this.hot.runHooks('beforeViewportScroll');
         if (!areColumnHeadersSelected) {
           return rowMapper.getRenderableFromVisualIndex(visualRow);
         }
         return visualRow;
       },
-      onBeforeViewportScrollHorizontally: renderableColumn => {
+      onBeforeViewportScrollHorizontally: (renderableColumn, snapping) => {
         const columnMapper = this.hot.columnIndexMapper;
         const areRowHeadersSelected = renderableColumn < 0;
         let visualColumn = renderableColumn;
@@ -18481,7 +18479,7 @@ class TableView {
             return renderableColumn;
           }
         }
-        visualColumn = this.hot.runHooks('beforeViewportScrollHorizontally', visualColumn);
+        visualColumn = this.hot.runHooks('beforeViewportScrollHorizontally', visualColumn, snapping);
         this.hot.runHooks('beforeViewportScroll');
         if (!areRowHeadersSelected) {
           return columnMapper.getRenderableFromVisualIndex(visualColumn);
@@ -21700,14 +21698,14 @@ class WalkontableFacade {
     let topmost = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     return this._wot.getCell(coords, topmost);
   }
-  scrollViewport(coords, snapToTop, snapToRight, snapToBottom, snapToLeft) {
-    return this._wot.scrollViewport(coords, snapToTop, snapToRight, snapToBottom, snapToLeft);
+  scrollViewport(coords, horizontalSnap, verticalSnap) {
+    return this._wot.scrollViewport(coords, horizontalSnap, verticalSnap);
   }
-  scrollViewportHorizontally(column, snapToRight, snapToLeft) {
-    return this._wot.scrollViewportHorizontally(column, snapToRight, snapToLeft);
+  scrollViewportHorizontally(column, snapping) {
+    return this._wot.scrollViewportHorizontally(column, snapping);
   }
-  scrollViewportVertically(row, snapToTop, snapToBottom) {
-    return this._wot.scrollViewportVertically(row, snapToTop, snapToBottom);
+  scrollViewportVertically(row, snapping) {
+    return this._wot.scrollViewportVertically(row, snapping);
   }
   getViewport() {
     return this._wot.getViewport();
@@ -26958,47 +26956,43 @@ class CoreAbstract {
    * Scrolls the viewport to a cell (rerenders if needed).
    *
    * @param {CellCoords} coords The cell coordinates to scroll to.
-   * @param {boolean} [snapToTop] If `true`, viewport is scrolled to show the cell on the top of the table.
-   * @param {boolean} [snapToRight] If `true`, viewport is scrolled to show the cell on the right of the table.
-   * @param {boolean} [snapToBottom] If `true`, viewport is scrolled to show the cell on the bottom of the table.
-   * @param {boolean} [snapToLeft] If `true`, viewport is scrolled to show the cell on the left of the table.
+   * @param {'auto' | 'start' | 'end'} [horizontalSnap='auto'] 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.
+   * @param {'auto' | 'top' | 'bottom'} [verticalSnap='auto'] If `'top'`, viewport is scrolled to show
+   * the cell on the top of the table. If `'bottom'`, viewport is scrolled to show the cell on the bottom of
+   * the table. When `'auto'`, the viewport is scrolled only when the row is outside of the viewport.
    * @returns {boolean}
    */
-  scrollViewport(coords, snapToTop, snapToRight, snapToBottom, snapToLeft) {
-    if (coords.col < 0 || coords.row < 0) {
-      return false;
-    }
-    return this.wtScroll.scrollViewport(coords, snapToTop, snapToRight, snapToBottom, snapToLeft);
+  scrollViewport(coords, horizontalSnap, verticalSnap) {
+    return this.wtScroll.scrollViewport(coords, horizontalSnap, verticalSnap);
   }
 
   /**
    * Scrolls the viewport to a column (rerenders if needed).
    *
    * @param {number} column Visual column index.
-   * @param {boolean} [snapToRight] If `true`, viewport is scrolled to show the cell on the right of the table.
-   * @param {boolean} [snapToLeft] If `true`, viewport is scrolled to show the cell on the left of the table.
+   * @param {'auto' | 'start' | 'end'} [snapping='auto'] 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 {boolean}
    */
-  scrollViewportHorizontally(column, snapToRight, snapToLeft) {
-    if (column < 0) {
-      return false;
-    }
-    return this.wtScroll.scrollViewportHorizontally(column, snapToRight, snapToLeft);
+  scrollViewportHorizontally(column, snapping) {
+    return this.wtScroll.scrollViewportHorizontally(column, snapping);
   }
 
   /**
    * Scrolls the viewport to a row (rerenders if needed).
    *
    * @param {number} row Visual row index.
-   * @param {boolean} [snapToTop] If `true`, viewport is scrolled to show the cell on the top of the table.
-   * @param {boolean} [snapToBottom] If `true`, viewport is scrolled to show the cell on the bottom of the table.
+   * @param {'auto' | 'top' | 'bottom'} [snapping='auto'] If `'top'`, viewport is scrolled to show
+   * the cell on the top of the table. If `'bottom'`, viewport is scrolled to show the cell on
+   * the bottom of the table. When `'auto'`, the viewport is scrolled only when the row is outside of
+   * the viewport.
    * @returns {boolean}
    */
-  scrollViewportVertically(row, snapToTop, snapToBottom) {
-    if (row < 0) {
-      return false;
-    }
-    return this.wtScroll.scrollViewportVertically(row, snapToTop, snapToBottom);
+  scrollViewportVertically(row, snapping) {
+    return this.wtScroll.scrollViewportVertically(row, snapping);
   }
 
   /**
@@ -27177,6 +27171,7 @@ exports.__esModule = true;
 __webpack_require__(8);
 var _defineProperty2 = _interopRequireDefault(__webpack_require__(173));
 var _element = __webpack_require__(158);
+var _object = __webpack_require__(168);
 function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
 function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
 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"); }
@@ -27210,15 +27205,20 @@ class Scroll {
    * Scrolls viewport to a cell.
    *
    * @param {CellCoords} coords The cell coordinates.
-   * @param {boolean} [snapToTop] If `true`, viewport is scrolled to show the cell on the top of the table.
-   * @param {boolean} [snapToRight] If `true`, viewport is scrolled to show the cell on the right of the table.
-   * @param {boolean} [snapToBottom] If `true`, viewport is scrolled to show the cell on the bottom of the table.
-   * @param {boolean} [snapToLeft] If `true`, viewport is scrolled to show the cell on the left of the table.
+   * @param {'auto' | 'start' | 'end'} [horizontalSnap='auto'] 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.
+   * @param {'auto' | 'top' | 'bottom'} [verticalSnap='auto'] If `'top'`, viewport is scrolled to show
+   * the cell on the top of the table. If `'bottom'`, viewport is scrolled to show the cell on the bottom of
+   * the table. When `'auto'`, the viewport is scrolled only when the row is outside of the viewport.
    * @returns {boolean}
    */
-  scrollViewport(coords, snapToTop, snapToRight, snapToBottom, snapToLeft) {
-    const scrolledHorizontally = this.scrollViewportHorizontally(coords.col, snapToRight, snapToLeft);
-    const scrolledVertically = this.scrollViewportVertically(coords.row, snapToTop, snapToBottom);
+  scrollViewport(coords, horizontalSnap, verticalSnap) {
+    if (coords.col < 0 || coords.row < 0) {
+      return false;
+    }
+    const scrolledHorizontally = this.scrollViewportHorizontally(coords.col, horizontalSnap);
+    const scrolledVertically = this.scrollViewportVertically(coords.row, verticalSnap);
     return scrolledHorizontally || scrolledVertically;
   }
 
@@ -27226,42 +27226,43 @@ class Scroll {
    * Scrolls viewport to a column.
    *
    * @param {number} column Visual column index.
-   * @param {boolean} [snapToRight] If `true`, viewport is scrolled to show the cell on the right of the table.
-   * @param {boolean} [snapToLeft] If `true`, viewport is scrolled to show the cell on the left of the table.
+   * @param {'auto' | 'start' | 'end'} [snapping='auto'] 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 {boolean}
    */
-  scrollViewportHorizontally(column, snapToRight, snapToLeft) {
+  scrollViewportHorizontally(column) {
+    let snapping = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
     const {
       drawn,
       totalColumns
     } = this.dataAccessObject;
-
-    // do not scroll the viewport when the column points to a range outside of the dataset
-    if (!drawn || !Number.isInteger(column) || column < 0 || column > totalColumns) {
+    if (!drawn) {
+      return false;
+    }
+    const snappingObject = (0, _object.createObjectPropListener)(snapping);
+    column = this.dataAccessObject.wtSettings.getSetting('onBeforeViewportScrollHorizontally', column, snappingObject);
+    if (!Number.isInteger(column) || column < 0 || column > totalColumns) {
       return false;
     }
-    const autoSnapping = snapToRight === undefined && snapToLeft === undefined;
+    snapping = snappingObject.value;
     const {
       fixedColumnsStart,
       inlineStartOverlay
     } = this.dataAccessObject;
+    const autoSnapping = snapping === 'auto';
 
-    // for auto-snapping (both snap* arguments are undefined) do not scroll the viewport
-    // when the columns points to the overlays
+    // for auto-snapping do not scroll the viewport when the columns points to the overlays
     if (autoSnapping && column < fixedColumnsStart) {
       return false;
     }
-    column = this.dataAccessObject.wtSettings.getSetting('onBeforeViewportScrollHorizontally', column);
-    if (!Number.isInteger(column) || column < 0 || column > totalColumns) {
-      return false;
-    }
     const firstColumn = this.getFirstVisibleColumn();
     const lastColumn = this.getLastVisibleColumn();
     let result = false;
     if (autoSnapping && (column < firstColumn || column > lastColumn) || !autoSnapping) {
       // if there is at least one fully visible column determine the snapping direction based on
-      // that columns or by snapToRight/snapToLeft flags, if provided.
-      result = inlineStartOverlay.scrollTo(column, autoSnapping ? column >= this.getLastPartiallyVisibleColumn() : snapToRight);
+      // that columns or by snapping flag, if provided.
+      result = inlineStartOverlay.scrollTo(column, autoSnapping ? column >= this.getLastPartiallyVisibleColumn() : snapping === 'end');
     }
     return result;
   }
@@ -27270,43 +27271,45 @@ class Scroll {
    * Scrolls viewport to a row.
    *
    * @param {number} row Visual row index.
-   * @param {boolean} [snapToTop] If `true`, viewport is scrolled to show the cell on the top of the table.
-   * @param {boolean} [snapToBottom] If `true`, viewport is scrolled to show the cell on the bottom of the table.
+   * @param {'auto' | 'top' | 'bottom'} [snapping='auto'] If `'top'`, viewport is scrolled to show
+   * the cell on the top of the table. If `'bottom'`, viewport is scrolled to show the cell on
+   * the bottom of the table. When `'auto'`, the viewport is scrolled only when the row is outside of
+   * the viewport.
    * @returns {boolean}
    */
-  scrollViewportVertically(row, snapToTop, snapToBottom) {
+  scrollViewportVertically(row) {
+    let snapping = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
     const {
       drawn,
       totalRows
     } = this.dataAccessObject;
-
-    // do not scroll the viewport when the row points to a range outside of the dataset
-    if (!drawn || !Number.isInteger(row) || row < 0 || row > totalRows) {
+    if (!drawn) {
       return false;
     }
-    const autoSnapping = snapToTop === undefined && snapToBottom === undefined;
+    const snappingObject = (0, _object.createObjectPropListener)(snapping);
+    row = this.dataAccessObject.wtSettings.getSetting('onBeforeViewportScrollVertically', row, snappingObject);
+    if (!Number.isInteger(row) || row < 0 || row > totalRows) {
+      return false;
+    }
+    snapping = snappingObject.value;
     const {
       fixedRowsBottom,
       fixedRowsTop,
       topOverlay
     } = this.dataAccessObject;
+    const autoSnapping = snapping === 'auto';
 
-    // for auto-snapping (both snap* arguments are undefined) do not scroll the viewport
-    // when the rows points to the overlays
+    // for auto-snapping do not scroll the viewport when the rows points to the overlays
     if (autoSnapping && (row < fixedRowsTop || row > totalRows - fixedRowsBottom - 1)) {
       return false;
     }
-    row = this.dataAccessObject.wtSettings.getSetting('onBeforeViewportScrollVertically', row);
-    if (!Number.isInteger(row) || row < 0 || row > totalRows) {
-      return false;
-    }
     const firstRow = this.getFirstVisibleRow();
     const lastRow = this.getLastVisibleRow();
     let result = false;
     if (autoSnapping && (row < firstRow || row > lastRow) || !autoSnapping) {
       // if there is at least one fully visible row determine the snapping direction based on
-      // that rows or by snapToTop/snapToBottom flags, if provided.
-      result = topOverlay.scrollTo(row, autoSnapping ? row >= this.getLastPartiallyVisibleRow() : snapToBottom);
+      // that rows or by snapping flag, if provided.
+      result = topOverlay.scrollTo(row, autoSnapping ? row >= this.getLastPartiallyVisibleRow() : snapping === 'bottom');
     }
     return result;
   }
@@ -36222,9 +36225,11 @@ class Selection {
     if (!this.isSelected()) {
       return;
     }
-    const focusHighlight = this.highlight.getFocus();
     const currentLayer = this.getLayerLevel();
-    focusHighlight.commit().syncWith(this.selectedRange.current());
+    const cellRange = this.selectedRange.current();
+    if (this.highlight.isEnabledFor(_highlight.FOCUS_TYPE, cellRange.highlight)) {
+      this.highlight.getFocus().commit().syncWith(cellRange);
+    }
 
     // Rewriting rendered ranges going through all layers.
     for (let layerLevel = 0; layerLevel < this.selectedRange.size(); layerLevel += 1) {
@@ -61856,19 +61861,8 @@ function alignmentItem() {
     submenu: {
       items: [{
         key: `${KEY}:left`,
-        checkable: true,
-        ariaLabel() {
-          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_LEFT);
-        },
-        ariaChecked() {
-          return (0, _utils.hasSelectionAClass)(this, 'htLeft');
-        },
         name() {
-          let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_LEFT);
-          if ((0, _utils.hasSelectionAClass)(this, 'htLeft')) {
-            label = (0, _utils.markLabelAsSelected)(label);
-          }
-          return label;
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_LEFT);
         },
         callback() {
           const selectedRange = this.getSelectedRange();
@@ -61882,19 +61876,8 @@ function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:center`,
-        checkable: true,
-        ariaLabel() {
-          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_CENTER);
-        },
-        ariaChecked() {
-          return (0, _utils.hasSelectionAClass)(this, 'htCenter');
-        },
         name() {
-          let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_CENTER);
-          if ((0, _utils.hasSelectionAClass)(this, 'htCenter')) {
-            label = (0, _utils.markLabelAsSelected)(label);
-          }
-          return label;
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_CENTER);
         },
         callback() {
           const selectedRange = this.getSelectedRange();
@@ -61908,19 +61891,8 @@ function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:right`,
-        checkable: true,
-        ariaLabel() {
-          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_RIGHT);
-        },
-        ariaChecked() {
-          return (0, _utils.hasSelectionAClass)(this, 'htRight');
-        },
         name() {
-          let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_RIGHT);
-          if ((0, _utils.hasSelectionAClass)(this, 'htRight')) {
-            label = (0, _utils.markLabelAsSelected)(label);
-          }
-          return label;
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_RIGHT);
         },
         callback() {
           const selectedRange = this.getSelectedRange();
@@ -61934,19 +61906,8 @@ function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:justify`,
-        checkable: true,
-        ariaLabel() {
-          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_JUSTIFY);
-        },
-        ariaChecked() {
-          return (0, _utils.hasSelectionAClass)(this, 'htJustify');
-        },
         name() {
-          let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_JUSTIFY);
-          if ((0, _utils.hasSelectionAClass)(this, 'htJustify')) {
-            label = (0, _utils.markLabelAsSelected)(label);
-          }
-          return label;
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_JUSTIFY);
         },
         callback() {
           const selectedRange = this.getSelectedRange();
@@ -61962,19 +61923,8 @@ function alignmentItem() {
         name: _separator.KEY
       }, {
         key: `${KEY}:top`,
-        checkable: true,
-        ariaLabel() {
-          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_TOP);
-        },
-        ariaChecked() {
-          return (0, _utils.hasSelectionAClass)(this, 'htTop');
-        },
         name() {
-          let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_TOP);
-          if ((0, _utils.hasSelectionAClass)(this, 'htTop')) {
-            label = (0, _utils.markLabelAsSelected)(label);
-          }
-          return label;
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_TOP);
         },
         callback() {
           const selectedRange = this.getSelectedRange();
@@ -61988,19 +61938,8 @@ function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:middle`,
-        checkable: true,
-        ariaLabel() {
-          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_MIDDLE);
-        },
-        ariaChecked() {
-          return (0, _utils.hasSelectionAClass)(this, 'htMiddle');
-        },
         name() {
-          let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_MIDDLE);
-          if ((0, _utils.hasSelectionAClass)(this, 'htMiddle')) {
-            label = (0, _utils.markLabelAsSelected)(label);
-          }
-          return label;
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_MIDDLE);
         },
         callback() {
           const selectedRange = this.getSelectedRange();
@@ -62014,19 +61953,8 @@ function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:bottom`,
-        checkable: true,
-        ariaLabel() {
-          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_BOTTOM);
-        },
-        ariaChecked() {
-          return (0, _utils.hasSelectionAClass)(this, 'htBottom');
-        },
         name() {
-          let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_BOTTOM);
-          if ((0, _utils.hasSelectionAClass)(this, 'htBottom')) {
-            label = (0, _utils.markLabelAsSelected)(label);
-          }
-          return label;
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_BOTTOM);
         },
         callback() {
           const selectedRange = this.getSelectedRange();
@@ -62056,7 +61984,6 @@ exports.checkSelectionConsistency = checkSelectionConsistency;
 exports.getAlignmentClasses = getAlignmentClasses;
 exports.getAlignmentComparatorByClass = getAlignmentComparatorByClass;
 exports.getDocumentOffsetByElement = getDocumentOffsetByElement;
-exports.hasSelectionAClass = hasSelectionAClass;
 exports.markLabelAsSelected = markLabelAsSelected;
 exports.prepareHorizontalAlignClass = prepareHorizontalAlignClass;
 exports.prepareVerticalAlignClass = prepareVerticalAlignClass;
@@ -62220,15 +62147,6 @@ function getAlignmentComparatorByClass(htClassName) {
   };
 }
 
-/**
- * @param {object} hot Handsontable instance.
- * @param {string} htClassName The class name to check.
- * @returns {boolean} Returns true if at least one cell has the provided class name.
- */
-function hasSelectionAClass(hot, htClassName) {
-  return checkSelectionConsistency(hot.getSelectedRange(), getAlignmentComparatorByClass(htClassName).bind(hot));
-}
-
 /***/ }),
 /* 550 */
 /***/ ((__unused_webpack_module, exports) => {
@@ -86441,6 +86359,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() {
@@ -86475,6 +86394,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.
      *
@@ -86895,9 +86822,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;
@@ -86905,20 +86836,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);
-
-  // do not scroll the viewport when the header is wider than the viewport
-  if (mostLeftColumnIndex < firstColumn && mostRightColumnIndex > lastColumn) {
-    return visualColumn;
+  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;
+
+  // 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.
@@ -86989,13 +86950,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] = '';
         }
@@ -87181,8 +87142,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,
@@ -87192,6 +87154,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) {
@@ -87276,10 +87239,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;