handsontable 0.0.0-next-fd9f817-20241125 → 0.0.0-next-fcb9b77-20241126

package/plugins/contextMenu/menu/menu.mjs

@@ -158,12 +158,6 @@ export class Menu {
         return _this.parentMenu.runLocalHooks('afterSelectionChange', ...args);
       });
     }
-    this.hot.addHook('afterSetTheme', (themeName, firstRun) => {
-      if (!firstRun) {
-        var _this$hotMenu;
-        (_this$hotMenu = this.hotMenu) === null || _this$hotMenu === void 0 || _this$hotMenu.useTheme(themeName);
-      }
-    });
   }
 
   /**
@@ -288,7 +282,6 @@ export class Menu {
       disableVisualSelection: 'area',
       layoutDirection: this.hot.isRtl() ? 'rtl' : 'ltr',
       ariaTags: false,
-      themeName: this.hot.getCurrentThemeName(),
       beforeOnCellMouseOver: (event, coords) => {
         _classPrivateFieldGet(_navigator, this).setCurrentPage(coords.row);
       },
@@ -582,8 +575,10 @@ export class Menu {
       const currentRowHeight = itemCell ? outerHeight(this.hotMenu.getCell(index, 0)) : 0;
       return accumulator + (value.name === SEPARATOR ? 1 : currentRowHeight);
     }, 0);
-    holderStyle.width = `${currentHiderWidth}px`;
-    holderStyle.height = `${realHeight}px`;
+
+    // Additional 3px to menu's size because of additional border around its `table.htCore`.
+    holderStyle.width = `${currentHiderWidth + 3}px`;
+    holderStyle.height = `${realHeight + 3}px`;
     hiderStyle.height = holderStyle.height;
   }
 

package/plugins/contextMenu/predefinedItems/alignment.js

@@ -34,19 +34,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();
@@ -60,19 +49,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();
@@ -86,19 +64,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();
@@ -112,19 +79,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();
@@ -140,19 +96,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();
@@ -166,19 +111,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();
@@ -192,19 +126,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();

package/plugins/contextMenu/predefinedItems/alignment.mjs

@@ -1,4 +1,4 @@
-import { align, getAlignmentClasses, markLabelAsSelected, hasSelectionAClass } from "../utils.mjs";
+import { align, getAlignmentClasses } from "../utils.mjs";
 import { KEY as SEPARATOR } from "./separator.mjs";
 import * as C from "../../../i18n/constants.mjs";
 export const KEY = 'alignment';
@@ -28,19 +28,8 @@ export default function alignmentItem() {
     submenu: {
       items: [{
         key: `${KEY}:left`,
-        checkable: true,
-        ariaLabel() {
-          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_LEFT);
-        },
-        ariaChecked() {
-          return hasSelectionAClass(this, 'htLeft');
-        },
         name() {
-          let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_LEFT);
-          if (hasSelectionAClass(this, 'htLeft')) {
-            label = markLabelAsSelected(label);
-          }
-          return label;
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_LEFT);
         },
         callback() {
           const selectedRange = this.getSelectedRange();
@@ -54,19 +43,8 @@ export default function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:center`,
-        checkable: true,
-        ariaLabel() {
-          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_CENTER);
-        },
-        ariaChecked() {
-          return hasSelectionAClass(this, 'htCenter');
-        },
         name() {
-          let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_CENTER);
-          if (hasSelectionAClass(this, 'htCenter')) {
-            label = markLabelAsSelected(label);
-          }
-          return label;
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_CENTER);
         },
         callback() {
           const selectedRange = this.getSelectedRange();
@@ -80,19 +58,8 @@ export default function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:right`,
-        checkable: true,
-        ariaLabel() {
-          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_RIGHT);
-        },
-        ariaChecked() {
-          return hasSelectionAClass(this, 'htRight');
-        },
         name() {
-          let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_RIGHT);
-          if (hasSelectionAClass(this, 'htRight')) {
-            label = markLabelAsSelected(label);
-          }
-          return label;
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_RIGHT);
         },
         callback() {
           const selectedRange = this.getSelectedRange();
@@ -106,19 +73,8 @@ export default function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:justify`,
-        checkable: true,
-        ariaLabel() {
-          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_JUSTIFY);
-        },
-        ariaChecked() {
-          return hasSelectionAClass(this, 'htJustify');
-        },
         name() {
-          let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_JUSTIFY);
-          if (hasSelectionAClass(this, 'htJustify')) {
-            label = markLabelAsSelected(label);
-          }
-          return label;
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_JUSTIFY);
         },
         callback() {
           const selectedRange = this.getSelectedRange();
@@ -134,19 +90,8 @@ export default function alignmentItem() {
         name: SEPARATOR
       }, {
         key: `${KEY}:top`,
-        checkable: true,
-        ariaLabel() {
-          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_TOP);
-        },
-        ariaChecked() {
-          return hasSelectionAClass(this, 'htTop');
-        },
         name() {
-          let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_TOP);
-          if (hasSelectionAClass(this, 'htTop')) {
-            label = markLabelAsSelected(label);
-          }
-          return label;
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_TOP);
         },
         callback() {
           const selectedRange = this.getSelectedRange();
@@ -160,19 +105,8 @@ export default function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:middle`,
-        checkable: true,
-        ariaLabel() {
-          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_MIDDLE);
-        },
-        ariaChecked() {
-          return hasSelectionAClass(this, 'htMiddle');
-        },
         name() {
-          let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_MIDDLE);
-          if (hasSelectionAClass(this, 'htMiddle')) {
-            label = markLabelAsSelected(label);
-          }
-          return label;
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_MIDDLE);
         },
         callback() {
           const selectedRange = this.getSelectedRange();
@@ -186,19 +120,8 @@ export default function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:bottom`,
-        checkable: true,
-        ariaLabel() {
-          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_BOTTOM);
-        },
-        ariaChecked() {
-          return hasSelectionAClass(this, 'htBottom');
-        },
         name() {
-          let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_BOTTOM);
-          if (hasSelectionAClass(this, 'htBottom')) {
-            label = markLabelAsSelected(label);
-          }
-          return label;
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_BOTTOM);
         },
         callback() {
           const selectedRange = this.getSelectedRange();

package/plugins/contextMenu/utils.js

@@ -6,7 +6,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;
@@ -168,13 +167,4 @@ function getAlignmentComparatorByClass(htClassName) {
     const className = this.getCellMeta(row, col).className;
     return className && className.indexOf(htClassName) !== -1;
   };
-}
-
-/**
- * @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));
 }

package/plugins/contextMenu/utils.mjs

@@ -156,13 +156,4 @@ export function getAlignmentComparatorByClass(htClassName) {
     const className = this.getCellMeta(row, col).className;
     return className && className.indexOf(htClassName) !== -1;
   };
-}
-
-/**
- * @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.
- */
-export function hasSelectionAClass(hot, htClassName) {
-  return checkSelectionConsistency(hot.getSelectedRange(), getAlignmentComparatorByClass(htClassName).bind(hot));
 }

package/plugins/filters/ui/multipleSelect.js

@@ -265,15 +265,9 @@ class MultipleSelectUI extends _base.BaseUI {
           row: 1,
           col: 0
         },
-        themeName: this.hot.getCurrentThemeName(),
         layoutDirection: this.hot.isRtl() ? 'rtl' : 'ltr'
       }));
       _classPrivateFieldGet(_itemsBox, this).init();
-      this.hot.addHook('afterSetTheme', (themeName, firstRun) => {
-        if (!firstRun) {
-          _classPrivateFieldGet(_itemsBox, this).useTheme(themeName);
-        }
-      });
       const shortcutManager = _classPrivateFieldGet(_itemsBox, this).getShortcutManager();
       const gridContext = shortcutManager.getContext('grid');
       gridContext.removeShortcutsByKeys(['Tab']);

package/plugins/filters/ui/multipleSelect.mjs

@@ -260,15 +260,9 @@ export class MultipleSelectUI extends BaseUI {
           row: 1,
           col: 0
         },
-        themeName: this.hot.getCurrentThemeName(),
         layoutDirection: this.hot.isRtl() ? 'rtl' : 'ltr'
       }));
       _classPrivateFieldGet(_itemsBox, this).init();
-      this.hot.addHook('afterSetTheme', (themeName, firstRun) => {
-        if (!firstRun) {
-          _classPrivateFieldGet(_itemsBox, this).useTheme(themeName);
-        }
-      });
       const shortcutManager = _classPrivateFieldGet(_itemsBox, this).getShortcutManager();
       const gridContext = shortcutManager.getContext('grid');
       gridContext.removeShortcutsByKeys(['Tab']);

package/plugins/manualRowMove/manualRowMove.js

@@ -319,7 +319,7 @@ class ManualRowMove extends _base.BasePlugin {
     for (let visualRowIndex = fromRow; visualRowIndex <= toRow; visualRowIndex++) {
       const renderableIndex = rowMapper.getRenderableFromVisualIndex(visualRowIndex);
       if (renderableIndex !== null) {
-        rowsHeight += this.hot.view._wt.wtTable.getRowHeight(renderableIndex) || this.hot.view.getDefaultRowHeight();
+        rowsHeight += this.hot.view._wt.wtTable.getRowHeight(renderableIndex) || 23;
       }
     }
     return rowsHeight;

package/plugins/manualRowMove/manualRowMove.mjs

@@ -315,7 +315,7 @@ export class ManualRowMove extends BasePlugin {
     for (let visualRowIndex = fromRow; visualRowIndex <= toRow; visualRowIndex++) {
       const renderableIndex = rowMapper.getRenderableFromVisualIndex(visualRowIndex);
       if (renderableIndex !== null) {
-        rowsHeight += this.hot.view._wt.wtTable.getRowHeight(renderableIndex) || this.hot.view.getDefaultRowHeight();
+        rowsHeight += this.hot.view._wt.wtTable.getRowHeight(renderableIndex) || 23;
       }
     }
     return rowsHeight;

package/plugins/manualRowResize/manualRowResize.js

@@ -10,6 +10,7 @@ var _element = require("../../helpers/dom/element");
 var _array = require("../../helpers/array");
 var _number = require("../../helpers/number");
 var _translations = require("../../translations");
+var _src = require("../../3rdparty/walkontable/src");
 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"); }
@@ -228,7 +229,7 @@ class ManualRowResize extends _base.BasePlugin {
    */
   setManualSize(row, height) {
     const physicalRow = this.hot.toPhysicalRow(row);
-    const newHeight = Math.max(height, this.hot.view.getDefaultRowHeight());
+    const newHeight = Math.max(height, _src.DEFAULT_ROW_HEIGHT);
     _classPrivateFieldGet(_rowHeightsMap, this).setValueAtIndex(physicalRow, newHeight);
     return newHeight;
   }

package/plugins/manualRowResize/manualRowResize.mjs

@@ -12,7 +12,8 @@ import { BasePlugin } from "../base/index.mjs";
 import { addClass, closest, hasClass, removeClass, outerWidth, isDetached } from "../../helpers/dom/element.mjs";
 import { arrayEach } from "../../helpers/array.mjs";
 import { rangeEach } from "../../helpers/number.mjs";
-import { PhysicalIndexToValueMap as IndexToValueMap } from "../../translations/index.mjs"; // Developer note! Whenever you make a change in this file, make an analogous change in manualColumnResize.js
+import { PhysicalIndexToValueMap as IndexToValueMap } from "../../translations/index.mjs";
+import { DEFAULT_ROW_HEIGHT } from "../../3rdparty/walkontable/src/index.mjs"; // Developer note! Whenever you make a change in this file, make an analogous change in manualColumnResize.js
 export const PLUGIN_KEY = 'manualRowResize';
 export const PLUGIN_PRIORITY = 30;
 const PERSISTENT_STATE_KEY = 'manualRowHeights';
@@ -223,7 +224,7 @@ export class ManualRowResize extends BasePlugin {
    */
   setManualSize(row, height) {
     const physicalRow = this.hot.toPhysicalRow(row);
-    const newHeight = Math.max(height, this.hot.view.getDefaultRowHeight());
+    const newHeight = Math.max(height, DEFAULT_ROW_HEIGHT);
     _classPrivateFieldGet(_rowHeightsMap, this).setValueAtIndex(physicalRow, newHeight);
     return newHeight;
   }

package/plugins/mergeCells/mergeCells.js

@@ -1496,7 +1496,7 @@ function _onModifyRowHeightByOverlayName(height, row, overlayType) {
  * @returns {number}
  */
 function _sumCellsHeights(row, rowspan) {
-  const defaultHeight = this.hot.view.getDefaultRowHeight();
+  const defaultHeight = this.hot.view._wt.wtSettings.getSettingPure('defaultRowHeight');
   const autoRowSizePlugin = this.hot.getPlugin('autoRowSize');
   let height = 0;
   for (let i = row; i < row + rowspan; i++) {

package/plugins/mergeCells/mergeCells.mjs

@@ -1491,7 +1491,7 @@ function _onModifyRowHeightByOverlayName(height, row, overlayType) {
  * @returns {number}
  */
 function _sumCellsHeights(row, rowspan) {
-  const defaultHeight = this.hot.view.getDefaultRowHeight();
+  const defaultHeight = this.hot.view._wt.wtSettings.getSettingPure('defaultRowHeight');
   const autoRowSizePlugin = this.hot.getPlugin('autoRowSize');
   let height = 0;
   for (let i = row; i < row + rowspan; i++) {

package/plugins/nestedHeaders/nestedHeaders.js

@@ -77,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() {
@@ -111,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.
      *
@@ -531,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;
@@ -541,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.
@@ -625,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] = '';
         }
@@ -817,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,
@@ -828,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) {
@@ -912,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;