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

package/helpers/mixed.js

@@ -134,7 +134,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';

package/helpers/mixed.mjs

@@ -124,7 +124,7 @@ const domMessages = {
 export 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';

package/package.json

@@ -10,7 +10,7 @@
     "url": "https://github.com/handsontable/handsontable/issues"
   },
   "author": "Handsoncode <hello@handsontable.com>",
-  "version": "0.0.0-next-1af4e47-20241125",
+  "version": "0.0.0-next-fcb9b77-20241126",
   "main": "index",
   "module": "index.mjs",
   "jsnext:main": "index.mjs",

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/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;

package/plugins/nestedHeaders/nestedHeaders.mjs

@@ -73,6 +73,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();
 export class NestedHeaders extends BasePlugin {
   constructor() {
@@ -107,6 +108,14 @@ export class NestedHeaders extends 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.
      *
@@ -526,9 +535,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;
@@ -536,20 +549,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.
@@ -620,13 +663,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] = '';
         }
@@ -812,8 +855,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,
@@ -823,6 +867,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) {
@@ -907,10 +952,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;

package/selection/selection.js

@@ -1208,9 +1208,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) {