handsontable 17.1.0 → 18.0.0-rc2

package/plugins/manualColumnMove/ui/_base.mjs

@@ -29,7 +29,7 @@ const UNIT = 'px';
    * Method for remove UI element.
    */ destroy() {
         if (this.isAppended()) {
-            this._element.parentElement.removeChild(this._element);
+            this._element.parentElement?.removeChild(this._element);
         }
         this._element = null;
         this.state = STATE_INITIALIZED;
@@ -68,8 +68,8 @@ const UNIT = 'px';
    */ getPosition() {
         const style = this._element.style;
         return {
-            top: style.top ? parseInt(style.top, 10) : 0,
-            start: style[this.inlineProperty] ? parseInt(style[this.inlineProperty], 10) : 0
+            top: style.top ? Number.parseInt(style.top, 10) : 0,
+            start: style[this.inlineProperty] ? Number.parseInt(style[this.inlineProperty], 10) : 0
         };
     }
     /**
@@ -91,8 +91,8 @@ const UNIT = 'px';
    * @returns {object} Object contains height and width of the element.
    */ getSize() {
         return {
-            width: this._element.style.width ? parseInt(this._element.style.width, 10) : 0,
-            height: this._element.style.height ? parseInt(this._element.style.height, 10) : 0
+            width: this._element.style.width ? Number.parseInt(this._element.style.width, 10) : 0,
+            height: this._element.style.height ? Number.parseInt(this._element.style.height, 10) : 0
         };
     }
     /**
@@ -105,7 +105,8 @@ const UNIT = 'px';
             this._element.style.marginTop = top + UNIT;
         }
         if (isNumeric(inlineOffset)) {
-            this._element.style[`margin${toUpperCaseFirst(this.inlineProperty)}`] = inlineOffset + UNIT;
+            const marginProp = `margin${toUpperCaseFirst(this.inlineProperty)}`;
+            this._element.style[marginProp] = inlineOffset + UNIT;
         }
     }
     /**
@@ -116,11 +117,13 @@ const UNIT = 'px';
         const style = this._element.style;
         const inlineProp = `margin${toUpperCaseFirst(this.inlineProperty)}`;
         return {
-            top: style.marginTop ? parseInt(style.marginTop, 10) : 0,
-            start: style[inlineProp] ? parseInt(style[inlineProp], 10) : 0
+            top: style.marginTop ? Number.parseInt(style.marginTop, 10) : 0,
+            start: style[inlineProp] ? Number.parseInt(style[inlineProp], 10) : 0
         };
     }
-    constructor(hotInstance){
+    /**
+   * Initializes the base UI element with the Handsontable instance and sets the inline CSS property name based on the document layout direction.
+   */ constructor(hotInstance){
         /**
    * DOM element representing the ui element.
    *

package/plugins/manualColumnMove/ui/backlight.d.mts

@@ -0,0 +1,2 @@
+export * from './backlight.js';
+export { default } from './backlight.js';

package/plugins/manualColumnMove/ui/backlight.d.ts

@@ -0,0 +1,12 @@
+import BaseUI from './_base';
+/**
+ * @class BacklightUI
+ * @util
+ */
+declare class BacklightUI extends BaseUI {
+    /**
+     * Custom className on build process.
+     */
+    build(): void;
+}
+export default BacklightUI;

package/plugins/manualColumnMove/ui/guideline.d.mts

@@ -0,0 +1,2 @@
+export * from './guideline.js';
+export { default } from './guideline.js';

package/plugins/manualColumnMove/ui/guideline.d.ts

@@ -0,0 +1,12 @@
+import BaseUI from './_base';
+/**
+ * @class GuidelineUI
+ * @util
+ */
+declare class GuidelineUI extends BaseUI {
+    /**
+     * Custom className on build process.
+     */
+    build(): void;
+}
+export default GuidelineUI;

package/plugins/manualColumnResize/index.d.mts

@@ -0,0 +1 @@
+export * from './index.js';

package/plugins/manualColumnResize/index.d.ts

@@ -1 +1 @@
-export * from './manualColumnResize';
+export { PLUGIN_KEY, PLUGIN_PRIORITY, ManualColumnResize, } from './manualColumnResize';

package/plugins/manualColumnResize/manualColumnResize.d.mts

@@ -0,0 +1 @@
+export * from './manualColumnResize.js';

package/plugins/manualColumnResize/manualColumnResize.d.ts

@@ -1,30 +1,155 @@
-import Core from '../../core';
+import type { HotInstance } from '../../core/types';
 import { BasePlugin } from '../base';
-import EventManager from '../../eventManager';
-
-export type Settings = boolean | number[];
-
-export class ManualColumnResize extends BasePlugin {
-  constructor(hotInstance: Core);
-
-  currentTH: HTMLElement | undefined;
-  currentCol: number | undefined;
-  selectedCols: number[];
-  currentWidth: number;
-  newSize: number | undefined;
-  startX: number | undefined;
-  startWidth: number;
-  startOffset: number;
-  handle: HTMLElement;
-  guide: HTMLElement;
-  eventManager: EventManager;
-  pressed: boolean;
-  dblclick: number;
-  autoresizeTimeout: (() => void) | undefined;
-
-  isEnabled(): boolean;
-  saveManualColumnWidths(): void;
-  loadManualColumnWidths(): Array<number | null>;
-  setManualSize(column: number, width: number): number;
-  clearManualSize(column: number): void;
+export declare const PLUGIN_KEY = "manualColumnResize";
+export declare const PLUGIN_PRIORITY = 130;
+/**
+ * @plugin ManualColumnResize
+ * @class ManualColumnResize
+ *
+ * @description
+ * This plugin allows to change columns width.
+ *
+ * The plugin creates additional components to make resizing possibly using user interface:
+ * - handle - the draggable element that sets the desired width of the column.
+ * - guide - the helper guide that shows the desired width as a vertical guide.
+ */
+export declare class ManualColumnResize extends BasePlugin {
+    #private;
+    /**
+     * Stores the horizontal pointer position at the start of a column resize drag operation.
+     */
+    startX: number;
+    /**
+     * Returns the plugin key used to identify this plugin in Handsontable settings.
+     */
+    static get PLUGIN_KEY(): string;
+    /**
+     * Returns the priority order used to determine the order in which plugins are initialized.
+     */
+    static get PLUGIN_PRIORITY(): number;
+    /**
+     * Initializes the plugin and applies CSS classes to the resize handle and guide elements.
+     */
+    constructor(hotInstance: HotInstance);
+    /**
+     * @private
+     * @returns {string}
+     */
+    get inlineDir(): "right" | "left";
+    /**
+     * Checks if the plugin is enabled in the handsontable settings. This method is executed in {@link Hooks#beforeInit}
+     * hook and if it returns `true` then the {@link ManualColumnResize#enablePlugin} method is called.
+     *
+     * @returns {boolean}
+     */
+    isEnabled(): boolean;
+    /**
+     * Enables the plugin functionality for this Handsontable instance.
+     */
+    enablePlugin(): void;
+    /**
+     * Updates the plugin's state.
+     *
+     * This method is executed when [`updateSettings()`](@/api/core.md#updatesettings) is invoked with any of the following configuration options:
+     *  - [`manualColumnResize`](@/api/options.md#manualcolumnresize)
+     */
+    updatePlugin(): void;
+    /**
+     * Disables the plugin functionality for this Handsontable instance.
+     */
+    disablePlugin(): void;
+    /**
+     * Deprecated. The `PersistentState` plugin has been removed. This method is a no-op and will be removed in a
+     * future major release.
+     *
+     * @deprecated
+     */
+    saveManualColumnWidths(): void;
+    /**
+     * Deprecated. The `PersistentState` plugin has been removed. This method is a no-op and will be removed in a
+     * future major release.
+     *
+     * @deprecated
+     * @returns {Array}
+     */
+    loadManualColumnWidths(): Array<number | null>;
+    /**
+     * Sets the new width for specified column index.
+     *
+     * @param {number} column Visual column index.
+     * @param {number} width Column width (no less than 20px).
+     * @returns {number} Returns new width.
+     */
+    setManualSize(column: number, width: number): number;
+    /**
+     * Clears the cache for the specified column index.
+     *
+     * @param {number} column Visual column index.
+     */
+    clearManualSize(column: number): void;
+    /**
+     * Set the resize handle position.
+     *
+     * @private
+     * @param {HTMLCellElement} TH TH HTML element.
+     */
+    setupHandlePosition(TH: HTMLTableHeaderCellElement): void;
+    /**
+     * Refresh the resize handle position.
+     *
+     * @private
+     */
+    refreshHandlePosition(): void;
+    /**
+     * Sets the resize guide position.
+     *
+     * @private
+     */
+    setupGuidePosition(): void;
+    /**
+     * Refresh the resize guide position.
+     *
+     * @private
+     */
+    refreshGuidePosition(): void;
+    /**
+     * Hides both the resize handle and resize guide.
+     *
+     * @private
+     */
+    hideHandleAndGuide(): void;
+    /**
+     * Checks if provided element is considered a column header.
+     *
+     * @private
+     * @param {HTMLElement} element HTML element.
+     * @returns {boolean}
+     */
+    checkIfColumnHeader(element: HTMLElement): boolean;
+    /**
+     * Gets the TH element from the provided element.
+     *
+     * @private
+     * @param {HTMLElement} element HTML element.
+     * @returns {HTMLElement}
+     */
+    getClosestTHParent(element: HTMLElement): HTMLElement | null;
+    /**
+     * Auto-size row after doubleclick - callback.
+     *
+     * @private
+     * @fires Hooks#beforeColumnResize
+     * @fires Hooks#afterColumnResize
+     */
+    afterMouseDownTimeout(): void;
+    /**
+     * Binds the mouse events.
+     *
+     * @private
+     */
+    bindEvents(): void;
+    /**
+     * Destroys the plugin instance.
+     */
+    destroy(): void;
 }

package/plugins/manualColumnResize/manualColumnResize.js

@@ -23,6 +23,7 @@ const _base = require("../base");
 const _element = require("../../helpers/dom/element");
 const _array = require("../../helpers/array");
 const _number = require("../../helpers/number");
+const _console = require("../../helpers/console");
 const _translations = require("../../translations");
 const _utils = require("./utils");
 function _check_private_redeclaration(obj, privateCollection) {
@@ -148,20 +149,24 @@ var /**
    * @param {number} width Column width.
    * @param {number} column Visual column index.
    * @returns {number}
-   */ _onModifyColWidth = /*#__PURE__*/ new WeakSet(), /**
+   */ _onModifyColWidth = /*#__PURE__*/ new WeakMap(), /**
    * Modifies the provided column stretched width. This hook decides if specified column should be stretched or not.
    *
    * @param {number} stretchedWidth Stretched width.
    * @param {number} column Visual column index.
    * @returns {number}
-   */ _onBeforeStretchingColumnWidth = /*#__PURE__*/ new WeakSet(), /**
+   */ _onBeforeStretchingColumnWidth = /*#__PURE__*/ new WeakMap(), /**
    * `beforeColumnResize` hook callback.
-   */ _onBeforeColumnResize = /*#__PURE__*/ new WeakSet();
+   */ _onBeforeColumnResize = /*#__PURE__*/ new WeakMap();
 class ManualColumnResize extends _base.BasePlugin {
-    static get PLUGIN_KEY() {
+    /**
+   * Returns the plugin key used to identify this plugin in Handsontable settings.
+   */ static get PLUGIN_KEY() {
         return PLUGIN_KEY;
     }
-    static get PLUGIN_PRIORITY() {
+    /**
+   * Returns the priority order used to determine the order in which plugins are initialized.
+   */ static get PLUGIN_PRIORITY() {
         return PLUGIN_PRIORITY;
     }
     /**
@@ -176,7 +181,7 @@ class ManualColumnResize extends _base.BasePlugin {
    *
    * @returns {boolean}
    */ isEnabled() {
-        return this.hot.getSettings()[PLUGIN_KEY];
+        return !!this.hot.getSettings()[PLUGIN_KEY];
     }
     /**
    * Enables the plugin functionality for this Handsontable instance.
@@ -190,9 +195,9 @@ class ManualColumnResize extends _base.BasePlugin {
         _class_private_field_set(this, _disposeMapObserver, this.hot.columnIndexMapper.observeMapChange(_class_private_field_get(this, _columnWidthsMap), ()=>{
             this.hot.view?.invalidateColumnWidthCache();
         }));
-        this.addHook('modifyColWidth', (...args)=>_class_private_method_get(this, _onModifyColWidth, onModifyColWidth).call(this, ...args), 1);
-        this.addHook('beforeStretchingColumnWidth', (...args)=>_class_private_method_get(this, _onBeforeStretchingColumnWidth, onBeforeStretchingColumnWidth).call(this, ...args), 1);
-        this.addHook('beforeColumnResize', (...args)=>_class_private_method_get(this, _onBeforeColumnResize, onBeforeColumnResize).call(this, ...args));
+        this.addHook('modifyColWidth', _class_private_field_get(this, _onModifyColWidth), 1);
+        this.addHook('beforeStretchingColumnWidth', _class_private_field_get(this, _onBeforeStretchingColumnWidth), 1);
+        this.addHook('beforeColumnResize', _class_private_field_get(this, _onBeforeColumnResize));
         this.bindEvents();
         super.enablePlugin();
     }
@@ -218,6 +223,24 @@ class ManualColumnResize extends _base.BasePlugin {
         super.disablePlugin();
     }
     /**
+   * Deprecated. The `PersistentState` plugin has been removed. This method is a no-op and will be removed in a
+   * future major release.
+   *
+   * @deprecated
+   */ saveManualColumnWidths() {
+        (0, _console.deprecatedWarn)('`saveManualColumnWidths()` is deprecated and will be removed in a future major release. ' + 'The PersistentState plugin has been removed.');
+    }
+    /**
+   * Deprecated. The `PersistentState` plugin has been removed. This method is a no-op and will be removed in a
+   * future major release.
+   *
+   * @deprecated
+   * @returns {Array}
+   */ loadManualColumnWidths() {
+        (0, _console.deprecatedWarn)('`loadManualColumnWidths()` is deprecated and will be removed in a future major release. ' + 'The PersistentState plugin has been removed.');
+        return [];
+    }
+    /**
    * Sets the new width for specified column index.
    *
    * @param {number} column Visual column index.
@@ -243,15 +266,18 @@ class ManualColumnResize extends _base.BasePlugin {
    * @private
    * @param {HTMLCellElement} TH TH HTML element.
    */ setupHandlePosition(TH) {
-        if (!TH.parentNode || _class_private_field_get(this, _dblclick) > 1) {
+        if ((0, _utils.shouldSkipResizeHandlePositioning)(TH, _class_private_field_get(this, _dblclick))) {
             return;
         }
         _class_private_field_set(this, _currentTH, TH);
         const { _wt: wt } = this.hot.view;
         const cellCoords = wt.wtTable.getCoords(_class_private_field_get(this, _currentTH));
+        if (!cellCoords) {
+            return;
+        }
         const col = cellCoords.col;
         // Ignore column headers.
-        if (col < 0) {
+        if (col === null || col < 0) {
             return;
         }
         const headerHeight = (0, _element.outerHeight)(_class_private_field_get(this, _currentTH));
@@ -259,22 +285,27 @@ class ManualColumnResize extends _base.BasePlugin {
         // are modified (reduced by the number of hidden columns) by TableView module.
         const fixedColumn = col < wt.getSetting('fixedColumnsStart');
         let relativeHeaderPosition;
+        const coordRow = cellCoords.row ?? 0;
+        const coordCol = cellCoords.col ?? 0;
         if (fixedColumn) {
-            relativeHeaderPosition = wt.wtOverlays.topInlineStartCornerOverlay.getRelativeCellPosition(_class_private_field_get(this, _currentTH), cellCoords.row, cellCoords.col);
+            relativeHeaderPosition = wt.wtOverlays.topInlineStartCornerOverlay.getRelativeCellPosition(_class_private_field_get(this, _currentTH), coordRow, coordCol);
         }
         // If the TH is not a child of the top-left overlay, recalculate using
         // the top overlay - as this overlay contains the rest of the headers.
         if (!relativeHeaderPosition) {
-            relativeHeaderPosition = wt.wtOverlays.topOverlay.getRelativeCellPosition(_class_private_field_get(this, _currentTH), cellCoords.row, cellCoords.col);
+            relativeHeaderPosition = wt.wtOverlays.topOverlay.getRelativeCellPosition(_class_private_field_get(this, _currentTH), coordRow, coordCol);
         }
         _class_private_field_set(this, _currentCol, this.hot.columnIndexMapper.getVisualFromRenderableIndex(col));
         _class_private_field_set(this, _selectedCols, []);
         const isFullColumnSelected = this.hot.selection.isSelectedByCorner() || this.hot.selection.isSelectedByColumnHeader();
         if (this.hot.selection.isSelected() && isFullColumnSelected) {
-            const selectionRanges = this.hot.getSelectedRange();
+            const selectionRanges = this.hot.getSelectedRange() ?? [];
             (0, _array.arrayEach)(selectionRanges, (selectionRange)=>{
                 const fromColumn = selectionRange.getTopStartCorner().col;
                 const toColumn = selectionRange.getBottomEndCorner().col;
+                if (fromColumn === null || toColumn === null) {
+                    return;
+                }
                 // Add every selected column for resize action.
                 (0, _number.rangeEach)(fromColumn, toColumn, (columnIndex)=>{
                     if (!_class_private_field_get(this, _selectedCols).includes(columnIndex)) {
@@ -283,12 +314,18 @@ class ManualColumnResize extends _base.BasePlugin {
                 });
             });
         }
+        if (_class_private_field_get(this, _currentCol) === null) {
+            return;
+        }
         // Resizing element beyond the current selection (also when there is no selection).
         if (!_class_private_field_get(this, _selectedCols).includes(_class_private_field_get(this, _currentCol))) {
             _class_private_field_set(this, _selectedCols, [
                 _class_private_field_get(this, _currentCol)
             ]);
         }
+        if (!relativeHeaderPosition) {
+            return;
+        }
         _class_private_field_set(this, _startOffset, relativeHeaderPosition.start - 6);
         _class_private_field_set(this, _startWidth, (0, _element.outerWidth)(_class_private_field_get(this, _currentTH)));
         _class_private_field_set(this, _horizontalScaleFactor, (0, _utils.getElementScaleFactor)(_class_private_field_get(this, _currentTH)));
@@ -302,15 +339,15 @@ class ManualColumnResize extends _base.BasePlugin {
    *
    * @private
    */ refreshHandlePosition() {
-        _class_private_field_get(this, _handle).style[this.inlineDir] = `${_class_private_field_get(this, _startOffset) + _class_private_field_get(this, _currentWidth)}px`;
+        _class_private_field_get(this, _handle).style[this.inlineDir] = `${(_class_private_field_get(this, _startOffset) ?? 0) + (_class_private_field_get(this, _currentWidth) ?? 0)}px`;
     }
     /**
    * Sets the resize guide position.
    *
    * @private
    */ setupGuidePosition() {
-        const handleHeight = parseInt((0, _element.outerHeight)(_class_private_field_get(this, _handle)), 10);
-        const handleBottomPosition = parseInt(_class_private_field_get(this, _handle).style.top, 10) + handleHeight;
+        const handleHeight = (0, _element.outerHeight)(_class_private_field_get(this, _handle));
+        const handleBottomPosition = Number.parseInt(_class_private_field_get(this, _handle).style.top, 10) + handleHeight;
         const tableHeight = this.hot.view.getTableHeight();
         (0, _element.addClass)(_class_private_field_get(this, _handle), 'active');
         (0, _element.addClass)(_class_private_field_get(this, _guide), 'active');
@@ -372,16 +409,20 @@ class ManualColumnResize extends _base.BasePlugin {
    * @fires Hooks#beforeColumnResize
    * @fires Hooks#afterColumnResize
    */ afterMouseDownTimeout() {
+        const shouldRefreshHandlePosition = (0, _utils.shouldRefreshHandleAfterAutoResize)(_class_private_field_get(this, _currentTH), _class_private_field_get(this, _dblclick));
         const render = ()=>{
             this.hot.view.adjustElementsSize();
             this.hot.render();
         };
         const resize = (column, forceRender)=>{
             const hookNewSize = this.hot.runHooks('beforeColumnResize', _class_private_field_get(this, _newSize), column, true);
-            if (hookNewSize !== undefined) {
+            if (hookNewSize === false) {
+                return;
+            }
+            if (typeof hookNewSize === 'number') {
                 _class_private_field_set(this, _newSize, hookNewSize);
             }
-            this.setManualSize(column, _class_private_field_get(this, _newSize)); // double click sets by auto row size plugin
+            this.setManualSize(column, _class_private_field_get(this, _newSize) ?? 0); // double click sets by auto row size plugin
             this.hot.runHooks('afterColumnResize', _class_private_field_get(this, _newSize), column, true);
             if (forceRender) {
                 render();
@@ -400,8 +441,11 @@ class ManualColumnResize extends _base.BasePlugin {
                 });
             }
         }
-        _class_private_field_set(this, _dblclick, 0);
         _class_private_field_set(this, _autoresizeTimeout, null);
+        _class_private_field_set(this, _dblclick, 0);
+        if (shouldRefreshHandlePosition && _class_private_field_get(this, _currentTH)) {
+            this.setupHandlePosition(_class_private_field_get(this, _currentTH));
+        }
     }
     /**
    * Binds the mouse events.
@@ -420,8 +464,10 @@ class ManualColumnResize extends _base.BasePlugin {
    */ destroy() {
         super.destroy();
     }
-    constructor(hotInstance){
-        super(hotInstance), _class_private_method_init(this, _onMapInit), _class_private_method_init(this, _onMouseOver), _class_private_method_init(this, _onMouseDown), _class_private_method_init(this, _onMouseMove), _class_private_method_init(this, _onMouseUp), _class_private_method_init(this, _onContextMenu), _class_private_method_init(this, _onModifyColWidth), _class_private_method_init(this, _onBeforeStretchingColumnWidth), _class_private_method_init(this, _onBeforeColumnResize), _class_private_field_init(this, _currentTH, {
+    /**
+   * Initializes the plugin and applies CSS classes to the resize handle and guide elements.
+   */ constructor(hotInstance){
+        super(hotInstance), _class_private_method_init(this, _onMapInit), _class_private_method_init(this, _onMouseOver), _class_private_method_init(this, _onMouseDown), _class_private_method_init(this, _onMouseMove), _class_private_method_init(this, _onMouseUp), _class_private_method_init(this, _onContextMenu), _class_private_field_init(this, _currentTH, {
             writable: true,
             value: void 0
         }), _class_private_field_init(this, _currentCol, {
@@ -475,7 +521,35 @@ class ManualColumnResize extends _base.BasePlugin {
         }), _class_private_field_init(this, _config, {
             writable: true,
             value: void 0
-        }), _class_private_field_set(this, _currentTH, null), _class_private_field_set(this, _currentCol, null), _class_private_field_set(this, _selectedCols, []), _class_private_field_set(this, _currentWidth, null), _class_private_field_set(this, _newSize, null), _class_private_field_set(this, _startY, null), _class_private_field_set(this, _startWidth, null), _class_private_field_set(this, _startOffset, null), _class_private_field_set(this, _horizontalScaleFactor, 1), _class_private_field_set(this, _handle, this.hot.rootDocument.createElement('DIV')), _class_private_field_set(this, _guide, this.hot.rootDocument.createElement('DIV')), _class_private_field_set(this, _pressed, null), _class_private_field_set(this, _isTriggeredByRMB, false), _class_private_field_set(this, _dblclick, 0), _class_private_field_set(this, _autoresizeTimeout, null), _class_private_field_set(this, _disposeMapObserver, null);
+        }), _class_private_field_init(this, _onModifyColWidth, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onBeforeStretchingColumnWidth, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onBeforeColumnResize, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_set(this, _currentTH, null), _class_private_field_set(this, _currentCol, null), _class_private_field_set(this, _selectedCols, []), _class_private_field_set(this, _currentWidth, null), _class_private_field_set(this, _newSize, null), _class_private_field_set(this, _startY, null), _class_private_field_set(this, _startWidth, null), _class_private_field_set(this, _startOffset, null), _class_private_field_set(this, _horizontalScaleFactor, 1), _class_private_field_set(this, _handle, this.hot.rootDocument.createElement('DIV')), _class_private_field_set(this, _guide, this.hot.rootDocument.createElement('DIV')), _class_private_field_set(this, _pressed, null), _class_private_field_set(this, _isTriggeredByRMB, false), _class_private_field_set(this, _dblclick, 0), _class_private_field_set(this, _autoresizeTimeout, null), _class_private_field_set(this, _disposeMapObserver, null), _class_private_field_set(this, _onModifyColWidth, (width, column)=>{
+            let newWidth = width;
+            if (this.enabled) {
+                const physicalColumn = this.hot.toPhysicalColumn(column);
+                const columnWidth = _class_private_field_get(this, _columnWidthsMap).getValueAtIndex(physicalColumn);
+                if (this.hot.getSettings()[PLUGIN_KEY] && columnWidth) {
+                    newWidth = columnWidth;
+                }
+            }
+            return newWidth;
+        }), _class_private_field_set(this, _onBeforeStretchingColumnWidth, (stretchedWidth, column)=>{
+            const width = _class_private_field_get(this, _columnWidthsMap).getValueAtIndex(this.hot.toPhysicalColumn(column));
+            if (typeof width === 'number') {
+                return width;
+            }
+            return stretchedWidth;
+        }), _class_private_field_set(this, _onBeforeColumnResize, ()=>{
+            // clear the header height cache information
+            this.hot.view._wt.wtViewport.resetHasOversizedColumnHeadersMarked();
+        });
         (0, _element.addClass)(_class_private_field_get(this, _handle), 'manualColumnResizer');
         (0, _element.addClass)(_class_private_field_get(this, _guide), 'manualColumnResizerGuide');
     }
@@ -500,15 +574,15 @@ function onMapInit() {
 function onMouseOver(event) {
     // Workaround for #6926 - if the `event.target` is temporarily detached, we can skip this callback and wait for
     // the next `onmouseover`.
-    if ((0, _element.isDetached)(event.target)) {
+    if ((0, _element.isDetached)((0, _element.eventTargetEl)(event))) {
         return;
     }
     // A "mouseover" action is triggered right after executing "contextmenu" event. It should be ignored.
     if (_class_private_field_get(this, _isTriggeredByRMB) === true) {
         return;
     }
-    if (this.checkIfColumnHeader(event.target)) {
-        const th = this.getClosestTHParent(event.target);
+    if (this.checkIfColumnHeader((0, _element.eventTargetEl)(event))) {
+        const th = this.getClosestTHParent((0, _element.eventTargetEl)(event));
         if (!th) {
             return;
         }
@@ -521,10 +595,10 @@ function onMouseOver(event) {
     }
 }
 function onMouseDown(event) {
-    if (event.target.parentNode !== this.hot.rootElement) {
+    if ((0, _element.eventTargetEl)(event).parentNode !== this.hot.rootElement) {
         return;
     }
-    if ((0, _element.hasClass)(event.target, 'manualColumnResizer')) {
+    if ((0, _element.hasClass)((0, _element.eventTargetEl)(event), 'manualColumnResizer') && _class_private_field_get(this, _currentTH)) {
         this.setupHandlePosition(_class_private_field_get(this, _currentTH));
         this.setupGuidePosition();
         _class_private_field_set(this, _pressed, true);
@@ -540,9 +614,9 @@ function onMouseMove(event) {
     if (_class_private_field_get(this, _pressed)) {
         const visualChange = (event.pageX - this.startX) * this.hot.getDirectionFactor();
         const change = (0, _utils.normalizeVisualDelta)(visualChange, _class_private_field_get(this, _horizontalScaleFactor));
-        _class_private_field_set(this, _currentWidth, _class_private_field_get(this, _startWidth) + change);
+        _class_private_field_set(this, _currentWidth, (_class_private_field_get(this, _startWidth) ?? 0) + change);
         (0, _array.arrayEach)(_class_private_field_get(this, _selectedCols), (selectedCol)=>{
-            _class_private_field_set(this, _newSize, this.setManualSize(selectedCol, _class_private_field_get(this, _currentWidth)));
+            _class_private_field_set(this, _newSize, this.setManualSize(selectedCol, _class_private_field_get(this, _currentWidth) ?? 0));
         });
         this.refreshHandlePosition();
         this.refreshGuidePosition();
@@ -554,11 +628,20 @@ function onMouseUp() {
         this.hot.render();
     };
     const resize = (column, forceRender)=>{
-        this.hot.runHooks('beforeColumnResize', _class_private_field_get(this, _newSize), column, false);
+        const hookNewSize = this.hot.runHooks('beforeColumnResize', _class_private_field_get(this, _newSize), column, false);
+        if (hookNewSize === false) {
+            this.setManualSize(column, _class_private_field_get(this, _startWidth) ?? 0);
+            _class_private_field_set(this, _newSize, _class_private_field_get(this, _startWidth));
+        } else if (typeof hookNewSize === 'number') {
+            _class_private_field_set(this, _newSize, hookNewSize);
+            this.setManualSize(column, _class_private_field_get(this, _newSize));
+        }
         if (forceRender) {
             render();
         }
-        this.hot.runHooks('afterColumnResize', _class_private_field_get(this, _newSize), column, false);
+        if (hookNewSize !== false) {
+            this.hot.runHooks('afterColumnResize', _class_private_field_get(this, _newSize), column, false);
+        }
     };
     if (_class_private_field_get(this, _pressed)) {
         this.hideHandleAndGuide();
@@ -576,7 +659,9 @@ function onMouseUp() {
                 });
             }
         }
-        this.setupHandlePosition(_class_private_field_get(this, _currentTH));
+        if (_class_private_field_get(this, _currentTH)) {
+            this.setupHandlePosition(_class_private_field_get(this, _currentTH));
+        }
     }
 }
 function onContextMenu() {
@@ -591,25 +676,3 @@ function onContextMenu() {
         _class_private_field_set(this, _isTriggeredByRMB, false);
     });
 }
-function onModifyColWidth(width, column) {
-    let newWidth = width;
-    if (this.enabled) {
-        const physicalColumn = this.hot.toPhysicalColumn(column);
-        const columnWidth = _class_private_field_get(this, _columnWidthsMap).getValueAtIndex(physicalColumn);
-        if (this.hot.getSettings()[PLUGIN_KEY] && columnWidth) {
-            newWidth = columnWidth;
-        }
-    }
-    return newWidth;
-}
-function onBeforeStretchingColumnWidth(stretchedWidth, column) {
-    const width = _class_private_field_get(this, _columnWidthsMap).getValueAtIndex(this.hot.toPhysicalColumn(column));
-    if (typeof width === 'number') {
-        return width;
-    }
-    return stretchedWidth;
-}
-function onBeforeColumnResize() {
-    // clear the header height cache information
-    this.hot.view._wt.wtViewport.resetHasOversizedColumnHeadersMarked();
-}