handsontable 0.0.0-next-b0a4ea2-20231024 → 0.0.0-next-9059914-20231025

package/plugins/nestedHeaders/nestedHeaders.js

@@ -5,8 +5,8 @@ exports.__esModule = true;
 require("core-js/modules/es.array.push.js");
 var _element = require("../../helpers/dom/element");
 var _number = require("../../helpers/number");
-var _templateLiteralTag = require("../../helpers/templateLiteralTag");
 var _event = require("../../helpers/dom/event");
+var _templateLiteralTag = require("../../helpers/templateLiteralTag");
 var _console = require("../../helpers/console");
 var _selection = require("../../selection");
 var _base = require("../base");
@@ -75,14 +75,13 @@ const PLUGIN_PRIORITY = 280;
 exports.PLUGIN_PRIORITY = PLUGIN_PRIORITY;
 var _stateManager = /*#__PURE__*/new WeakMap();
 var _hidingIndexMapObserver = /*#__PURE__*/new WeakMap();
-var _focusInitialCoords = /*#__PURE__*/new WeakMap();
-var _isColumnsSelectionInProgress = /*#__PURE__*/new WeakMap();
 class NestedHeaders extends _base.BasePlugin {
   constructor() {
     super(...arguments);
     /**
      * The state manager for the nested headers.
      *
+     * @private
      * @type {StateManager}
      */
     _classPrivateFieldInitSpec(this, _stateManager, {
@@ -93,30 +92,13 @@ class NestedHeaders extends _base.BasePlugin {
      * The instance of the ChangesObservable class that allows track the changes that happens in the
      * column indexes.
      *
+     * @private
      * @type {ChangesObservable}
      */
     _classPrivateFieldInitSpec(this, _hidingIndexMapObserver, {
       writable: true,
       value: null
     });
-    /**
-     * Holds the coords that points to the place where the column selection starts.
-     *
-     * @type {number|null}
-     */
-    _classPrivateFieldInitSpec(this, _focusInitialCoords, {
-      writable: true,
-      value: null
-    });
-    /**
-     * Determines if there is performed the column selection.
-     *
-     * @type {boolean}
-     */
-    _classPrivateFieldInitSpec(this, _isColumnsSelectionInProgress, {
-      writable: true,
-      value: false
-    });
     /**
      * Custom helper for getting widths of the nested headers.
      *
@@ -176,19 +158,6 @@ class NestedHeaders extends _base.BasePlugin {
     this.addHook('beforeOnCellMouseOver', function () {
       return _this.onBeforeOnCellMouseOver(...arguments);
     });
-    this.addHook('beforeOnCellMouseUp', function () {
-      return _this.onBeforeOnCellMouseUp(...arguments);
-    });
-    this.addHook('beforeSelectionHighlightSet', function () {
-      return _this.onBeforeSelectionHighlightSet(...arguments);
-    });
-    this.addHook('modifyTransformStart', function () {
-      return _this.onModifyTransformStart(...arguments);
-    });
-    this.addHook('afterSelection', () => this.updateFocusHighlightPosition());
-    this.addHook('beforeViewportScrollHorizontally', function () {
-      return _this.onBeforeViewportScrollHorizontally(...arguments);
-    });
     this.addHook('afterGetColumnHeaderRenderers', array => this.onAfterGetColumnHeaderRenderers(array));
     this.addHook('modifyColWidth', function () {
       return _this.onModifyColWidth(...arguments);
@@ -202,17 +171,9 @@ class NestedHeaders extends _base.BasePlugin {
     this.addHook('beforeCopy', function () {
       return _this.onBeforeCopy(...arguments);
     });
-    this.addHook('beforeSelectColumns', function () {
-      return _this.onBeforeSelectColumns(...arguments);
-    });
     this.addHook('afterViewportColumnCalculatorOverride', function () {
       return _this.onAfterViewportColumnCalculatorOverride(...arguments);
     });
-    this.addHook('modifyFocusedElement', function () {
-      return _this.onModifyFocusedElement(...arguments);
-    });
-    this.hot.columnIndexMapper.addLocalHook('cacheUpdated', () => this.updateFocusHighlightPosition());
-    this.hot.rowIndexMapper.addLocalHook('cacheUpdated', () => this.updateFocusHighlightPosition());
     super.enablePlugin();
     this.updatePlugin(); // @TODO: Workaround for broken plugin initialization abstraction.
   }
@@ -428,67 +389,6 @@ class NestedHeaders extends _base.BasePlugin {
     return this.hot.getColHeader(visualColumnIndex, headerLevel);
   }
 
-  /**
-   * Updates the selection focus highlight position to point to the nested header root element (TH)
-   * even when the logical coordinates point in-between the header.
-   *
-   * @private
-   */
-  updateFocusHighlightPosition() {
-    var _this$hot;
-    const selection = (_this$hot = this.hot) === null || _this$hot === void 0 ? void 0 : _this$hot.getSelectedRangeLast();
-    if (!selection) {
-      return;
-    }
-    const {
-      highlight
-    } = selection;
-    const isNestedHeadersRange = highlight.isHeader() && highlight.col >= 0;
-    if (isNestedHeadersRange) {
-      const columnIndex = _classPrivateFieldGet(this, _stateManager).findLeftMostColumnIndex(highlight.row, highlight.col);
-      const focusHighlight = this.hot.selection.highlight.getFocus();
-
-      // Correct the highlight/focus selection to highlight the correct TH element
-      focusHighlight.visualCellRange.highlight.col = columnIndex;
-      focusHighlight.visualCellRange.from.col = columnIndex;
-      focusHighlight.visualCellRange.to.col = columnIndex;
-      focusHighlight.commit();
-    }
-  }
-
-  /**
-   * Allows to control to which column index the viewport will be scrolled. To ensure that the viewport
-   * is scrolled to the correct column for the nested header the most left and the most right visual column
-   * indexes are used.
-   *
-   * @private
-   * @param {number} visualColumn A visual column index to which the viewport will be scrolled.
-   * @returns {number}
-   */
-  onBeforeViewportScrollHorizontally(visualColumn) {
-    const selection = this.hot.getSelectedRangeLast();
-    if (!selection) {
-      return visualColumn;
-    }
-    const {
-      highlight
-    } = selection;
-    const isNestedHeadersRange = highlight.isHeader() && highlight.col >= 0;
-    if (!isNestedHeadersRange) {
-      return visualColumn;
-    }
-    const firstColumn = this.hot.view.getFirstFullyVisibleColumn();
-    const lastColumn = this.hot.view.getLastFullyVisibleColumn();
-    const mostLeftColumnIndex = _classPrivateFieldGet(this, _stateManager).findLeftMostColumnIndex(highlight.row, highlight.col);
-    const mostRightColumnIndex = _classPrivateFieldGet(this, _stateManager).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;
-    }
-    return mostLeftColumnIndex < firstColumn ? mostLeftColumnIndex : mostRightColumnIndex;
-  }
-
   /**
    * Allows to control which header DOM element will be used to highlight.
    *
@@ -504,6 +404,7 @@ class NestedHeaders extends _base.BasePlugin {
       return visualColumn;
     }
     const {
+      classNames,
       columnCursor,
       selectionType,
       selectionWidth
@@ -518,8 +419,8 @@ class NestedHeaders extends _base.BasePlugin {
       }
     } else if (selectionType === _selection.ACTIVE_HEADER_TYPE) {
       if (colspan > selectionWidth - columnCursor || !isRoot) {
-        // Prevents adding any CSS class names to the TH element
-        return null;
+        // Reset the class names array so the generated TH element won't be modified.
+        classNames.length = 0;
       }
     }
     return visualColumn;
@@ -607,8 +508,6 @@ class NestedHeaders extends _base.BasePlugin {
     if (!headerNodeData) {
       return;
     }
-    _classPrivateFieldSet(this, _focusInitialCoords, coords.clone());
-    _classPrivateFieldSet(this, _isColumnsSelectionInProgress, true);
     const {
       selection
     } = this.hot;
@@ -674,129 +573,14 @@ class NestedHeaders extends _base.BasePlugin {
     controller.column = true;
     controller.cell = true;
     const columnsToSelect = [];
-    const headerLevel = (0, _number.clamp)(coords.row, -Infinity, -1);
     if (coords.col < from.col) {
-      columnsToSelect.push(bottomEndCoords.col, columnIndex, headerLevel);
+      columnsToSelect.push(bottomEndCoords.col, columnIndex);
     } else if (coords.col > from.col) {
-      columnsToSelect.push(topStartCoords.col, columnIndex + origColspan - 1, headerLevel);
+      columnsToSelect.push(topStartCoords.col, columnIndex + origColspan - 1);
     } else {
-      columnsToSelect.push(columnIndex, columnIndex + origColspan - 1, headerLevel);
-    }
-    this.hot.selection.selectColumns(...columnsToSelect);
-  }
-
-  /**
-   * Switches internal flag about selection progress to `false`.
-   *
-   * @private
-   */
-  onBeforeOnCellMouseUp() {
-    _classPrivateFieldSet(this, _isColumnsSelectionInProgress, false);
-  }
-
-  /**
-   * The hook checks and ensures that the focus position that depends on the selected columns
-   * range is always positioned within the range.
-   *
-   * @private
-   */
-  onBeforeSelectionHighlightSet() {
-    const {
-      navigableHeaders
-    } = this.hot.getSettings();
-    if (!this.hot.view.isMouseDown() || !_classPrivateFieldGet(this, _isColumnsSelectionInProgress) || !navigableHeaders) {
-      return;
-    }
-    const selectedRange = this.hot.getSelectedRangeLast();
-    const columnStart = selectedRange.getTopStartCorner().col;
-    const columnEnd = selectedRange.getBottomEndCorner().col;
-    const {
-      columnIndex,
-      origColspan
-    } = _classPrivateFieldGet(this, _stateManager).getHeaderTreeNodeData(_classPrivateFieldGet(this, _focusInitialCoords).row, _classPrivateFieldGet(this, _focusInitialCoords).col);
-    selectedRange.setHighlight(_classPrivateFieldGet(this, _focusInitialCoords));
-    if (origColspan > selectedRange.getWidth() || columnIndex < columnStart || columnIndex + origColspan - 1 > columnEnd) {
-      const headerLevel = _classPrivateFieldGet(this, _stateManager).findTopMostEntireHeaderLevel((0, _number.clamp)(columnStart, columnIndex, columnIndex + origColspan - 1), (0, _number.clamp)(columnEnd, columnIndex, columnIndex + origColspan - 1));
-      selectedRange.highlight.row = headerLevel;
-      selectedRange.highlight.col = selectedRange.from.col;
-    }
-  }
-
-  /**
-   * `modifyTransformStart` hook is called every time the keyboard navigation is used.
-   *
-   * @private
-   * @param {object} delta The transformation delta.
-   */
-  onModifyTransformStart(delta) {
-    const {
-      highlight
-    } = this.hot.getSelectedRangeLast();
-    const nextCoords = this.hot._createCellCoords(highlight.row + delta.row, highlight.col + delta.col);
-    const isNestedHeadersRange = nextCoords.isHeader() && nextCoords.col >= 0;
-    if (!isNestedHeadersRange) {
-      return;
-    }
-    const visualColumnIndexStart = _classPrivateFieldGet(this, _stateManager).findLeftMostColumnIndex(nextCoords.row, nextCoords.col);
-    const visualColumnIndexEnd = _classPrivateFieldGet(this, _stateManager).findRightMostColumnIndex(nextCoords.row, nextCoords.col);
-    if (delta.col < 0) {
-      const nextColumn = highlight.col >= visualColumnIndexStart && highlight.col <= visualColumnIndexEnd ? visualColumnIndexStart - 1 : visualColumnIndexEnd;
-      const notHiddenColumnIndex = this.hot.columnIndexMapper.getNearestNotHiddenIndex(nextColumn, -1);
-      if (notHiddenColumnIndex === null) {
-        // There are no visible columns anymore, so move the selection out of the table edge. This will
-        // be processed by the selection Transformer class as a move selection to the previous row (if autoWrapRow is enabled).
-        delta.col = -this.hot.view.countRenderableColumnsInRange(0, highlight.col);
-      } else {
-        delta.col = -Math.max(this.hot.view.countRenderableColumnsInRange(notHiddenColumnIndex, highlight.col) - 1, 1);
-      }
-    } else if (delta.col > 0) {
-      const nextColumn = highlight.col >= visualColumnIndexStart && highlight.col <= visualColumnIndexEnd ? visualColumnIndexEnd + 1 : visualColumnIndexStart;
-      const notHiddenColumnIndex = this.hot.columnIndexMapper.getNearestNotHiddenIndex(nextColumn, 1);
-      if (notHiddenColumnIndex === null) {
-        // There are no visible columns anymore, so move the selection out of the table edge. This will
-        // be processed by the selection Transformer class as a move selection to the next row (if autoWrapRow is enabled).
-        delta.col = this.hot.view.countRenderableColumnsInRange(highlight.col, this.hot.countCols());
-      } else {
-        delta.col = Math.max(this.hot.view.countRenderableColumnsInRange(highlight.col, notHiddenColumnIndex) - 1, 1);
-      }
-    }
-  }
-
-  /**
-   * The hook observes the column selection from the Selection API and modifies the column range to
-   * ensure that the whole nested column will be covered.
-   *
-   * @private
-   * @param {CellCoords} from The coords object where the selection starts.
-   * @param {CellCoords} to The coords object where the selection ends.
-   */
-  onBeforeSelectColumns(from, to) {
-    const headerLevel = from.row;
-    const startNodeData = this._getHeaderTreeNodeDataByCoords({
-      row: headerLevel,
-      col: from.col
-    });
-    const endNodeData = this._getHeaderTreeNodeDataByCoords({
-      row: headerLevel,
-      col: to.col
-    });
-    if (to.col < from.col) {
-      // Column selection from right to left
-      if (startNodeData) {
-        from.col = startNodeData.columnIndex + startNodeData.origColspan - 1;
-      }
-      if (endNodeData) {
-        to.col = endNodeData.columnIndex;
-      }
-    } else if (to.col >= from.col) {
-      // Column selection from left to right or a single column selection
-      if (startNodeData) {
-        from.col = startNodeData.columnIndex;
-      }
-      if (endNodeData) {
-        to.col = endNodeData.columnIndex + endNodeData.origColspan - 1;
-      }
+      columnsToSelect.push(columnIndex, columnIndex + origColspan - 1);
     }
+    this.hot.selectColumns(...columnsToSelect);
   }
 
   /**
@@ -881,20 +665,6 @@ class NestedHeaders extends _base.BasePlugin {
     return label;
   }
 
-  /**
-   * `modifyFocusedElement` hook callback.
-   *
-   * @private
-   * @param {number} row Row index.
-   * @param {number} column Column index.
-   * @returns {HTMLTableCellElement} The `TH` element to be focused.
-   */
-  onModifyFocusedElement(row, column) {
-    if (row < 0) {
-      return this.hot.getCell(row, _classPrivateFieldGet(this, _stateManager).findLeftMostColumnIndex(row, column), true);
-    }
-  }
-
   /**
    * Updates the plugin state after HoT initialization.
    *

package/plugins/nestedHeaders/nestedHeaders.mjs

@@ -11,9 +11,9 @@ function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classEx
 function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
 function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
 import { addClass, removeClass } from "../../helpers/dom/element.mjs";
-import { isNumeric, clamp } from "../../helpers/number.mjs";
-import { toSingleLine } from "../../helpers/templateLiteralTag.mjs";
+import { isNumeric } from "../../helpers/number.mjs";
 import { isLeftClick, isRightClick } from "../../helpers/dom/event.mjs";
+import { toSingleLine } from "../../helpers/templateLiteralTag.mjs";
 import { warn } from "../../helpers/console.mjs";
 import { ACTIVE_HEADER_TYPE, HEADER_TYPE } from "../../selection/index.mjs";
 import { BasePlugin } from "../base/index.mjs";
@@ -69,14 +69,13 @@ export const PLUGIN_PRIORITY = 280;
  */
 var _stateManager = /*#__PURE__*/new WeakMap();
 var _hidingIndexMapObserver = /*#__PURE__*/new WeakMap();
-var _focusInitialCoords = /*#__PURE__*/new WeakMap();
-var _isColumnsSelectionInProgress = /*#__PURE__*/new WeakMap();
 export class NestedHeaders extends BasePlugin {
   constructor() {
     super(...arguments);
     /**
      * The state manager for the nested headers.
      *
+     * @private
      * @type {StateManager}
      */
     _classPrivateFieldInitSpec(this, _stateManager, {
@@ -87,30 +86,13 @@ export class NestedHeaders extends BasePlugin {
      * The instance of the ChangesObservable class that allows track the changes that happens in the
      * column indexes.
      *
+     * @private
      * @type {ChangesObservable}
      */
     _classPrivateFieldInitSpec(this, _hidingIndexMapObserver, {
       writable: true,
       value: null
     });
-    /**
-     * Holds the coords that points to the place where the column selection starts.
-     *
-     * @type {number|null}
-     */
-    _classPrivateFieldInitSpec(this, _focusInitialCoords, {
-      writable: true,
-      value: null
-    });
-    /**
-     * Determines if there is performed the column selection.
-     *
-     * @type {boolean}
-     */
-    _classPrivateFieldInitSpec(this, _isColumnsSelectionInProgress, {
-      writable: true,
-      value: false
-    });
     /**
      * Custom helper for getting widths of the nested headers.
      *
@@ -170,19 +152,6 @@ export class NestedHeaders extends BasePlugin {
     this.addHook('beforeOnCellMouseOver', function () {
       return _this.onBeforeOnCellMouseOver(...arguments);
     });
-    this.addHook('beforeOnCellMouseUp', function () {
-      return _this.onBeforeOnCellMouseUp(...arguments);
-    });
-    this.addHook('beforeSelectionHighlightSet', function () {
-      return _this.onBeforeSelectionHighlightSet(...arguments);
-    });
-    this.addHook('modifyTransformStart', function () {
-      return _this.onModifyTransformStart(...arguments);
-    });
-    this.addHook('afterSelection', () => this.updateFocusHighlightPosition());
-    this.addHook('beforeViewportScrollHorizontally', function () {
-      return _this.onBeforeViewportScrollHorizontally(...arguments);
-    });
     this.addHook('afterGetColumnHeaderRenderers', array => this.onAfterGetColumnHeaderRenderers(array));
     this.addHook('modifyColWidth', function () {
       return _this.onModifyColWidth(...arguments);
@@ -196,17 +165,9 @@ export class NestedHeaders extends BasePlugin {
     this.addHook('beforeCopy', function () {
       return _this.onBeforeCopy(...arguments);
     });
-    this.addHook('beforeSelectColumns', function () {
-      return _this.onBeforeSelectColumns(...arguments);
-    });
     this.addHook('afterViewportColumnCalculatorOverride', function () {
       return _this.onAfterViewportColumnCalculatorOverride(...arguments);
     });
-    this.addHook('modifyFocusedElement', function () {
-      return _this.onModifyFocusedElement(...arguments);
-    });
-    this.hot.columnIndexMapper.addLocalHook('cacheUpdated', () => this.updateFocusHighlightPosition());
-    this.hot.rowIndexMapper.addLocalHook('cacheUpdated', () => this.updateFocusHighlightPosition());
     super.enablePlugin();
     this.updatePlugin(); // @TODO: Workaround for broken plugin initialization abstraction.
   }
@@ -422,67 +383,6 @@ export class NestedHeaders extends BasePlugin {
     return this.hot.getColHeader(visualColumnIndex, headerLevel);
   }
 
-  /**
-   * Updates the selection focus highlight position to point to the nested header root element (TH)
-   * even when the logical coordinates point in-between the header.
-   *
-   * @private
-   */
-  updateFocusHighlightPosition() {
-    var _this$hot;
-    const selection = (_this$hot = this.hot) === null || _this$hot === void 0 ? void 0 : _this$hot.getSelectedRangeLast();
-    if (!selection) {
-      return;
-    }
-    const {
-      highlight
-    } = selection;
-    const isNestedHeadersRange = highlight.isHeader() && highlight.col >= 0;
-    if (isNestedHeadersRange) {
-      const columnIndex = _classPrivateFieldGet(this, _stateManager).findLeftMostColumnIndex(highlight.row, highlight.col);
-      const focusHighlight = this.hot.selection.highlight.getFocus();
-
-      // Correct the highlight/focus selection to highlight the correct TH element
-      focusHighlight.visualCellRange.highlight.col = columnIndex;
-      focusHighlight.visualCellRange.from.col = columnIndex;
-      focusHighlight.visualCellRange.to.col = columnIndex;
-      focusHighlight.commit();
-    }
-  }
-
-  /**
-   * Allows to control to which column index the viewport will be scrolled. To ensure that the viewport
-   * is scrolled to the correct column for the nested header the most left and the most right visual column
-   * indexes are used.
-   *
-   * @private
-   * @param {number} visualColumn A visual column index to which the viewport will be scrolled.
-   * @returns {number}
-   */
-  onBeforeViewportScrollHorizontally(visualColumn) {
-    const selection = this.hot.getSelectedRangeLast();
-    if (!selection) {
-      return visualColumn;
-    }
-    const {
-      highlight
-    } = selection;
-    const isNestedHeadersRange = highlight.isHeader() && highlight.col >= 0;
-    if (!isNestedHeadersRange) {
-      return visualColumn;
-    }
-    const firstColumn = this.hot.view.getFirstFullyVisibleColumn();
-    const lastColumn = this.hot.view.getLastFullyVisibleColumn();
-    const mostLeftColumnIndex = _classPrivateFieldGet(this, _stateManager).findLeftMostColumnIndex(highlight.row, highlight.col);
-    const mostRightColumnIndex = _classPrivateFieldGet(this, _stateManager).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;
-    }
-    return mostLeftColumnIndex < firstColumn ? mostLeftColumnIndex : mostRightColumnIndex;
-  }
-
   /**
    * Allows to control which header DOM element will be used to highlight.
    *
@@ -498,6 +398,7 @@ export class NestedHeaders extends BasePlugin {
       return visualColumn;
     }
     const {
+      classNames,
       columnCursor,
       selectionType,
       selectionWidth
@@ -512,8 +413,8 @@ export class NestedHeaders extends BasePlugin {
       }
     } else if (selectionType === ACTIVE_HEADER_TYPE) {
       if (colspan > selectionWidth - columnCursor || !isRoot) {
-        // Prevents adding any CSS class names to the TH element
-        return null;
+        // Reset the class names array so the generated TH element won't be modified.
+        classNames.length = 0;
       }
     }
     return visualColumn;
@@ -601,8 +502,6 @@ export class NestedHeaders extends BasePlugin {
     if (!headerNodeData) {
       return;
     }
-    _classPrivateFieldSet(this, _focusInitialCoords, coords.clone());
-    _classPrivateFieldSet(this, _isColumnsSelectionInProgress, true);
     const {
       selection
     } = this.hot;
@@ -668,129 +567,14 @@ export class NestedHeaders extends BasePlugin {
     controller.column = true;
     controller.cell = true;
     const columnsToSelect = [];
-    const headerLevel = clamp(coords.row, -Infinity, -1);
     if (coords.col < from.col) {
-      columnsToSelect.push(bottomEndCoords.col, columnIndex, headerLevel);
+      columnsToSelect.push(bottomEndCoords.col, columnIndex);
     } else if (coords.col > from.col) {
-      columnsToSelect.push(topStartCoords.col, columnIndex + origColspan - 1, headerLevel);
+      columnsToSelect.push(topStartCoords.col, columnIndex + origColspan - 1);
     } else {
-      columnsToSelect.push(columnIndex, columnIndex + origColspan - 1, headerLevel);
-    }
-    this.hot.selection.selectColumns(...columnsToSelect);
-  }
-
-  /**
-   * Switches internal flag about selection progress to `false`.
-   *
-   * @private
-   */
-  onBeforeOnCellMouseUp() {
-    _classPrivateFieldSet(this, _isColumnsSelectionInProgress, false);
-  }
-
-  /**
-   * The hook checks and ensures that the focus position that depends on the selected columns
-   * range is always positioned within the range.
-   *
-   * @private
-   */
-  onBeforeSelectionHighlightSet() {
-    const {
-      navigableHeaders
-    } = this.hot.getSettings();
-    if (!this.hot.view.isMouseDown() || !_classPrivateFieldGet(this, _isColumnsSelectionInProgress) || !navigableHeaders) {
-      return;
-    }
-    const selectedRange = this.hot.getSelectedRangeLast();
-    const columnStart = selectedRange.getTopStartCorner().col;
-    const columnEnd = selectedRange.getBottomEndCorner().col;
-    const {
-      columnIndex,
-      origColspan
-    } = _classPrivateFieldGet(this, _stateManager).getHeaderTreeNodeData(_classPrivateFieldGet(this, _focusInitialCoords).row, _classPrivateFieldGet(this, _focusInitialCoords).col);
-    selectedRange.setHighlight(_classPrivateFieldGet(this, _focusInitialCoords));
-    if (origColspan > selectedRange.getWidth() || columnIndex < columnStart || columnIndex + origColspan - 1 > columnEnd) {
-      const headerLevel = _classPrivateFieldGet(this, _stateManager).findTopMostEntireHeaderLevel(clamp(columnStart, columnIndex, columnIndex + origColspan - 1), clamp(columnEnd, columnIndex, columnIndex + origColspan - 1));
-      selectedRange.highlight.row = headerLevel;
-      selectedRange.highlight.col = selectedRange.from.col;
-    }
-  }
-
-  /**
-   * `modifyTransformStart` hook is called every time the keyboard navigation is used.
-   *
-   * @private
-   * @param {object} delta The transformation delta.
-   */
-  onModifyTransformStart(delta) {
-    const {
-      highlight
-    } = this.hot.getSelectedRangeLast();
-    const nextCoords = this.hot._createCellCoords(highlight.row + delta.row, highlight.col + delta.col);
-    const isNestedHeadersRange = nextCoords.isHeader() && nextCoords.col >= 0;
-    if (!isNestedHeadersRange) {
-      return;
-    }
-    const visualColumnIndexStart = _classPrivateFieldGet(this, _stateManager).findLeftMostColumnIndex(nextCoords.row, nextCoords.col);
-    const visualColumnIndexEnd = _classPrivateFieldGet(this, _stateManager).findRightMostColumnIndex(nextCoords.row, nextCoords.col);
-    if (delta.col < 0) {
-      const nextColumn = highlight.col >= visualColumnIndexStart && highlight.col <= visualColumnIndexEnd ? visualColumnIndexStart - 1 : visualColumnIndexEnd;
-      const notHiddenColumnIndex = this.hot.columnIndexMapper.getNearestNotHiddenIndex(nextColumn, -1);
-      if (notHiddenColumnIndex === null) {
-        // There are no visible columns anymore, so move the selection out of the table edge. This will
-        // be processed by the selection Transformer class as a move selection to the previous row (if autoWrapRow is enabled).
-        delta.col = -this.hot.view.countRenderableColumnsInRange(0, highlight.col);
-      } else {
-        delta.col = -Math.max(this.hot.view.countRenderableColumnsInRange(notHiddenColumnIndex, highlight.col) - 1, 1);
-      }
-    } else if (delta.col > 0) {
-      const nextColumn = highlight.col >= visualColumnIndexStart && highlight.col <= visualColumnIndexEnd ? visualColumnIndexEnd + 1 : visualColumnIndexStart;
-      const notHiddenColumnIndex = this.hot.columnIndexMapper.getNearestNotHiddenIndex(nextColumn, 1);
-      if (notHiddenColumnIndex === null) {
-        // There are no visible columns anymore, so move the selection out of the table edge. This will
-        // be processed by the selection Transformer class as a move selection to the next row (if autoWrapRow is enabled).
-        delta.col = this.hot.view.countRenderableColumnsInRange(highlight.col, this.hot.countCols());
-      } else {
-        delta.col = Math.max(this.hot.view.countRenderableColumnsInRange(highlight.col, notHiddenColumnIndex) - 1, 1);
-      }
-    }
-  }
-
-  /**
-   * The hook observes the column selection from the Selection API and modifies the column range to
-   * ensure that the whole nested column will be covered.
-   *
-   * @private
-   * @param {CellCoords} from The coords object where the selection starts.
-   * @param {CellCoords} to The coords object where the selection ends.
-   */
-  onBeforeSelectColumns(from, to) {
-    const headerLevel = from.row;
-    const startNodeData = this._getHeaderTreeNodeDataByCoords({
-      row: headerLevel,
-      col: from.col
-    });
-    const endNodeData = this._getHeaderTreeNodeDataByCoords({
-      row: headerLevel,
-      col: to.col
-    });
-    if (to.col < from.col) {
-      // Column selection from right to left
-      if (startNodeData) {
-        from.col = startNodeData.columnIndex + startNodeData.origColspan - 1;
-      }
-      if (endNodeData) {
-        to.col = endNodeData.columnIndex;
-      }
-    } else if (to.col >= from.col) {
-      // Column selection from left to right or a single column selection
-      if (startNodeData) {
-        from.col = startNodeData.columnIndex;
-      }
-      if (endNodeData) {
-        to.col = endNodeData.columnIndex + endNodeData.origColspan - 1;
-      }
+      columnsToSelect.push(columnIndex, columnIndex + origColspan - 1);
     }
+    this.hot.selectColumns(...columnsToSelect);
   }
 
   /**
@@ -875,20 +659,6 @@ export class NestedHeaders extends BasePlugin {
     return label;
   }
 
-  /**
-   * `modifyFocusedElement` hook callback.
-   *
-   * @private
-   * @param {number} row Row index.
-   * @param {number} column Column index.
-   * @returns {HTMLTableCellElement} The `TH` element to be focused.
-   */
-  onModifyFocusedElement(row, column) {
-    if (row < 0) {
-      return this.hot.getCell(row, _classPrivateFieldGet(this, _stateManager).findLeftMostColumnIndex(row, column), true);
-    }
-  }
-
   /**
    * Updates the plugin state after HoT initialization.
    *