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

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/plugins/nestedRows/ui/headers.js

@@ -125,13 +125,7 @@ class HeadersUI extends _base.default {
     if (!deepestLevelIndex) {
       deepestLevelIndex = this.dataManager.cache.levelCount;
     }
-    const stylesHandler = this.hot.view.getStylesHandler();
-    let completeVerticalPadding = 11;
-    if (!stylesHandler.isClassicTheme()) {
-      const verticalPadding = stylesHandler.getCSSVariableValue('cell-horizontal-padding');
-      completeVerticalPadding = verticalPadding * 2;
-    }
-    this.rowHeaderWidthCache = Math.max(50, completeVerticalPadding + 10 * deepestLevelIndex + 25);
+    this.rowHeaderWidthCache = Math.max(50, 11 + 10 * deepestLevelIndex + 25);
     this.hot.render();
   }
 }

package/plugins/nestedRows/ui/headers.mjs

@@ -121,13 +121,7 @@ class HeadersUI extends BaseUI {
     if (!deepestLevelIndex) {
       deepestLevelIndex = this.dataManager.cache.levelCount;
     }
-    const stylesHandler = this.hot.view.getStylesHandler();
-    let completeVerticalPadding = 11;
-    if (!stylesHandler.isClassicTheme()) {
-      const verticalPadding = stylesHandler.getCSSVariableValue('cell-horizontal-padding');
-      completeVerticalPadding = verticalPadding * 2;
-    }
-    this.rowHeaderWidthCache = Math.max(50, completeVerticalPadding + 10 * deepestLevelIndex + 25);
+    this.rowHeaderWidthCache = Math.max(50, 11 + 10 * deepestLevelIndex + 25);
     this.hot.render();
   }
 }

package/plugins/stretchColumns/calculator.js

@@ -127,12 +127,11 @@ function _willVerticalScrollAppear() {
   }
   const viewportHeight = view.getViewportHeight();
   const totalRows = _classPrivateFieldGet(_hot, this).countRows();
-  const defaultRowHeight = view.getStylesHandler().getDefaultRowHeight();
   let totalHeight = 0;
   let hasVerticalScroll = false;
   for (let row = 0; row < totalRows; row++) {
     var _classPrivateFieldGet2;
-    totalHeight += ((_classPrivateFieldGet2 = _classPrivateFieldGet(_hot, this).getRowHeight(row)) !== null && _classPrivateFieldGet2 !== void 0 ? _classPrivateFieldGet2 : defaultRowHeight) + (row === 0 ? 1 : 0);
+    totalHeight += ((_classPrivateFieldGet2 = _classPrivateFieldGet(_hot, this).getRowHeight(row)) !== null && _classPrivateFieldGet2 !== void 0 ? _classPrivateFieldGet2 : _src.DEFAULT_ROW_HEIGHT) + (row === 0 ? 1 : 0);
     if (totalHeight > viewportHeight) {
       hasVerticalScroll = true;
       break;

package/plugins/stretchColumns/calculator.mjs

@@ -7,7 +7,7 @@ function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("C
 function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
 function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
 function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
-import { DEFAULT_COLUMN_WIDTH } from "../../3rdparty/walkontable/src/index.mjs";
+import { DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_HEIGHT } from "../../3rdparty/walkontable/src/index.mjs";
 import { getScrollbarWidth } from "../../helpers/dom/element.mjs";
 import { StretchAllStrategy } from "./strategies/all.mjs";
 import { StretchLastStrategy } from "./strategies/last.mjs";
@@ -123,12 +123,11 @@ function _willVerticalScrollAppear() {
   }
   const viewportHeight = view.getViewportHeight();
   const totalRows = _classPrivateFieldGet(_hot, this).countRows();
-  const defaultRowHeight = view.getStylesHandler().getDefaultRowHeight();
   let totalHeight = 0;
   let hasVerticalScroll = false;
   for (let row = 0; row < totalRows; row++) {
     var _classPrivateFieldGet2;
-    totalHeight += ((_classPrivateFieldGet2 = _classPrivateFieldGet(_hot, this).getRowHeight(row)) !== null && _classPrivateFieldGet2 !== void 0 ? _classPrivateFieldGet2 : defaultRowHeight) + (row === 0 ? 1 : 0);
+    totalHeight += ((_classPrivateFieldGet2 = _classPrivateFieldGet(_hot, this).getRowHeight(row)) !== null && _classPrivateFieldGet2 !== void 0 ? _classPrivateFieldGet2 : DEFAULT_ROW_HEIGHT) + (row === 0 ? 1 : 0);
     if (totalHeight > viewportHeight) {
       hasVerticalScroll = true;
       break;

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) {

package/selection/selection.mjs

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

package/settings.d.ts

@@ -214,7 +214,6 @@ export interface GridSettings extends Events {
   strict?: boolean;
   tableClassName?: string | string[];
   tabMoves?: CellCoords | SimpleCellCoords | ((event: KeyboardEvent) => CellCoords | SimpleCellCoords);
-  themeName?: string;
   title?: string;
   trimDropdown?: boolean;
   trimRows?: TrimRowsSettings;

package/tableView.js

@@ -198,38 +198,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);
   }
 
   /**
@@ -587,52 +592,6 @@ class TableView {
     return count;
   }
 
-  /**
-   * Retrieves the styles handler from the Walkontable instance.
-   *
-   * @returns {StylesHandler} The styles handler instance.
-   */
-  getStylesHandler() {
-    return this._wt.stylesHandler;
-  }
-
-  /**
-   * Returns the default row height.
-   *
-   * This method retrieves the default row height from the Walkontable styles handler.
-   *
-   * @returns {number} The default row height.
-   */
-  getDefaultRowHeight() {
-    return this._wt.stylesHandler.getDefaultRowHeight();
-  }
-
-  /**
-   * Add a class name to the license information element.
-   *
-   * @param {string} className The class name to add.
-   */
-  addClassNameToLicenseElement(className) {
-    var _this$hot$rootElement;
-    const licenseInfoElement = (_this$hot$rootElement = this.hot.rootElement.parentNode) === null || _this$hot$rootElement === void 0 ? void 0 : _this$hot$rootElement.querySelector('.hot-display-license-info');
-    if (licenseInfoElement) {
-      (0, _element.addClass)(licenseInfoElement, className);
-    }
-  }
-
-  /**
-   * Remove a class name from the license information element.
-   *
-   * @param {string} className The class name to remove.
-   */
-  removeClassNameFromLicenseElement(className) {
-    var _this$hot$rootElement2;
-    const licenseInfoElement = (_this$hot$rootElement2 = this.hot.rootElement.parentNode) === null || _this$hot$rootElement2 === void 0 ? void 0 : _this$hot$rootElement2.querySelector('.hot-display-license-info');
-    if (licenseInfoElement) {
-      (0, _element.removeClass)(licenseInfoElement, className);
-    }
-  }
-
   /**
    * Checks if at least one cell than belongs to the main table is not covered by the top, left or
    * bottom overlay.
@@ -866,7 +825,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;
@@ -878,14 +837,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;
@@ -897,7 +856,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);

package/tableView.mjs

@@ -9,7 +9,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
 function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
 function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
-import { addClass, removeClass, clearTextSelection, empty, fastInnerHTML, fastInnerText, getScrollbarWidth, hasClass, isChildOf, isInput, isOutsideInput, isVisible, setAttribute, getParentWindow } from "./helpers/dom/element.mjs";
+import { addClass, clearTextSelection, empty, fastInnerHTML, fastInnerText, getScrollbarWidth, hasClass, isChildOf, isInput, isOutsideInput, isVisible, setAttribute, getParentWindow } from "./helpers/dom/element.mjs";
 import EventManager from "./eventManager.mjs";
 import { isImmediatePropagationStopped, isRightClick, isLeftClick } from "./helpers/dom/event.mjs";
 import Walkontable from "./3rdparty/walkontable/src/index.mjs";
@@ -194,38 +194,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);
   }
 
   /**
@@ -583,52 +588,6 @@ class TableView {
     return count;
   }
 
-  /**
-   * Retrieves the styles handler from the Walkontable instance.
-   *
-   * @returns {StylesHandler} The styles handler instance.
-   */
-  getStylesHandler() {
-    return this._wt.stylesHandler;
-  }
-
-  /**
-   * Returns the default row height.
-   *
-   * This method retrieves the default row height from the Walkontable styles handler.
-   *
-   * @returns {number} The default row height.
-   */
-  getDefaultRowHeight() {
-    return this._wt.stylesHandler.getDefaultRowHeight();
-  }
-
-  /**
-   * Add a class name to the license information element.
-   *
-   * @param {string} className The class name to add.
-   */
-  addClassNameToLicenseElement(className) {
-    var _this$hot$rootElement;
-    const licenseInfoElement = (_this$hot$rootElement = this.hot.rootElement.parentNode) === null || _this$hot$rootElement === void 0 ? void 0 : _this$hot$rootElement.querySelector('.hot-display-license-info');
-    if (licenseInfoElement) {
-      addClass(licenseInfoElement, className);
-    }
-  }
-
-  /**
-   * Remove a class name from the license information element.
-   *
-   * @param {string} className The class name to remove.
-   */
-  removeClassNameFromLicenseElement(className) {
-    var _this$hot$rootElement2;
-    const licenseInfoElement = (_this$hot$rootElement2 = this.hot.rootElement.parentNode) === null || _this$hot$rootElement2 === void 0 ? void 0 : _this$hot$rootElement2.querySelector('.hot-display-license-info');
-    if (licenseInfoElement) {
-      removeClass(licenseInfoElement, className);
-    }
-  }
-
   /**
    * Checks if at least one cell than belongs to the main table is not covered by the top, left or
    * bottom overlay.
@@ -862,7 +821,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;
@@ -874,14 +833,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;
@@ -893,7 +852,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);

package/utils/autoResize.js

@@ -77,7 +77,6 @@ function createInputElementResizer(ownerDocument) {
    * Resizes the element.
    */
   function resize() {
-    var _getComputedStyle, _getComputedStyle2;
     textHolder.textContent = observedElement.value;
     // Won't expand the element size for displaying body as for example, `grid`, `inline-grid` or `flex` with
     // `flex-direction` set as `column`.
@@ -86,9 +85,7 @@ function createInputElementResizer(ownerDocument) {
     textContainer.style.fontFamily = getComputedStyle(observedElement).fontFamily;
     textContainer.style.whiteSpace = 'pre';
     body.appendChild(textContainer);
-    const paddingStart = parseInt(((_getComputedStyle = getComputedStyle(observedElement)) === null || _getComputedStyle === void 0 ? void 0 : _getComputedStyle.paddingInlineStart) || 0, 10);
-    const paddingEnd = parseInt(((_getComputedStyle2 = getComputedStyle(observedElement)) === null || _getComputedStyle2 === void 0 ? void 0 : _getComputedStyle2.paddingInlineEnd) || 0, 10);
-    const width = textContainer.clientWidth + 2 + paddingStart + paddingEnd;
+    const width = textContainer.clientWidth + 2;
     body.removeChild(textContainer);
     const elementStyle = observedElement.style;
     elementStyle.height = `${defaults.minHeight}px`;

package/utils/autoResize.mjs

@@ -73,7 +73,6 @@ export function createInputElementResizer(ownerDocument) {
    * Resizes the element.
    */
   function resize() {
-    var _getComputedStyle, _getComputedStyle2;
     textHolder.textContent = observedElement.value;
     // Won't expand the element size for displaying body as for example, `grid`, `inline-grid` or `flex` with
     // `flex-direction` set as `column`.
@@ -82,9 +81,7 @@ export function createInputElementResizer(ownerDocument) {
     textContainer.style.fontFamily = getComputedStyle(observedElement).fontFamily;
     textContainer.style.whiteSpace = 'pre';
     body.appendChild(textContainer);
-    const paddingStart = parseInt(((_getComputedStyle = getComputedStyle(observedElement)) === null || _getComputedStyle === void 0 ? void 0 : _getComputedStyle.paddingInlineStart) || 0, 10);
-    const paddingEnd = parseInt(((_getComputedStyle2 = getComputedStyle(observedElement)) === null || _getComputedStyle2 === void 0 ? void 0 : _getComputedStyle2.paddingInlineEnd) || 0, 10);
-    const width = textContainer.clientWidth + 2 + paddingStart + paddingEnd;
+    const width = textContainer.clientWidth + 2;
     body.removeChild(textContainer);
     const elementStyle = observedElement.style;
     elementStyle.height = `${defaults.minHeight}px`;

package/utils/ghostTable.js

@@ -133,7 +133,7 @@ class GhostTable {
     if (this.getSetting('useHeaders') && this.hot.getColHeader(column) !== null) {
       // Please keep in mind that the renderable column index equal to the visual columns index for the GhostTable.
       // We render all columns.
-      this.hot.view.appendColHeader(column, this.table.th, undefined, -1);
+      this.hot.view.appendColHeader(column, this.table.th);
     }
     this.table.tBody.appendChild(this.createCol(column));
     this.container.container.appendChild(this.table.fragment);
@@ -149,8 +149,6 @@ class GhostTable {
     if (!this.injected) {
       this.injectTable();
     }
-    const isBorderBoxSizing = this.hot.view.getStylesHandler().areCellsBorderBox();
-    const borderCompensation = isBorderBoxSizing ? 0 : 1;
     (0, _array.arrayEach)(this.rows, row => {
       // In cases when the cell's content produces the height with a decimal point, the height
       // needs to be rounded up to make sure that there will be a space for the cell's content.
@@ -159,8 +157,8 @@ class GhostTable {
         height
       } = row.table.getBoundingClientRect();
 
-      // -1 <- reduce border-top from table (if box-sizing is not border-box)
-      callback(row.row, Math.ceil(height) - borderCompensation);
+      // -1 <- reduce border-top from table
+      callback(row.row, Math.ceil(height) - 1);
     });
   }