handsontable 18.0.0 → 18.1.0-rc1

package/plugins/dragToScroll/dragToScroll.mjs

@@ -4,15 +4,12 @@ function _check_private_redeclaration(obj, privateCollection) {
     }
 }
 function _class_apply_descriptor_get(receiver, descriptor) {
-    if (descriptor.get) {
-        return descriptor.get.call(receiver);
-    }
+    if (descriptor.get) return descriptor.get.call(receiver);
     return descriptor.value;
 }
 function _class_apply_descriptor_set(receiver, descriptor, value) {
-    if (descriptor.set) {
-        descriptor.set.call(receiver, value);
-    } else {
+    if (descriptor.set) descriptor.set.call(receiver, value);
+    else {
         if (!descriptor.writable) {
             throw new TypeError("attempted to set read only private field");
         }
@@ -20,9 +17,7 @@ function _class_apply_descriptor_set(receiver, descriptor, value) {
     }
 }
 function _class_extract_field_descriptor(receiver, privateMap, action) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to " + action + " private field on non-instance");
-    }
+    if (!privateMap.has(receiver)) throw new TypeError("attempted to " + action + " private field on non-instance");
     return privateMap.get(receiver);
 }
 function _class_private_field_get(receiver, privateMap) {
@@ -39,9 +34,7 @@ function _class_private_field_set(receiver, privateMap, value) {
     return value;
 }
 function _class_private_method_get(receiver, privateSet, fn) {
-    if (!privateSet.has(receiver)) {
-        throw new TypeError("attempted to get private field on non-instance");
-    }
+    if (!privateSet.has(receiver)) throw new TypeError("attempted to get private field on non-instance");
     return fn;
 }
 function _class_private_method_init(obj, privateSet) {
@@ -49,7 +42,7 @@ function _class_private_method_init(obj, privateSet) {
     privateSet.add(obj);
 }
 import { BasePlugin } from '../base/index.mjs';
-import { isRightClick } from '../../helpers/dom/event.mjs';
+import { getFirstChangedTouch, getTouchPointById, isRightClick } from '../../helpers/dom/event.mjs';
 import { getParentWindow } from '../../helpers/dom/element.mjs';
 import { getCellCoordsFromMousePosition } from '../../helpers/dom/cellCoords.mjs';
 import { AutoScroller } from './autoScroller.mjs';
@@ -64,11 +57,11 @@ var /**
    *
    * @type {boolean}
    */ _isOutsideViewport = /*#__PURE__*/ new WeakMap(), /**
-   * Kind of drag currently active: `'cell'` for a regular mouse-drag selection,
-   * `'corner'` for an autofill fill-handle drag, or `null` when no drag is active.
-   * Only `'cell'` drags extend the selection via `#onAfterScroll`.
+   * Kind of drag currently active. Cell drags extend the selection directly. Corner,
+   * move, and handle drags only use the auto-scroll timers because their owning plugins
+   * update their state through the `afterScroll` hook.
    *
-   * @type {('cell' | 'corner' | null)}
+   * @type {('cell'|'corner'|'move'|'handle'|null)}
    */ _activeDragKind = /*#__PURE__*/ new WeakMap(), /**
    * Last observed mouse X coordinate (client space). Cached so that the viewport
    * can recompute the edge cell on each `afterScroll` tick even when the mouse
@@ -86,13 +79,56 @@ var /**
    *
    * @type {object | null}
    */ _mouseDownController = /*#__PURE__*/ new WeakMap(), /**
+   * `Touch.identifier` of the finger that started a touch drag, so later touch events can be told
+   * apart from any other finger on the screen.
+   *
+   * @type {number | null}
+   */ _dragTouchId = /*#__PURE__*/ new WeakMap(), /**
    * On after on cell/cellCorner mouse down listener.
    *
-   * @param {('cell' | 'corner')} kind Which drag started — a regular cell selection drag
-   *   (`'cell'`) or an autofill fill-handle drag (`'corner'`).
-   * @param {MouseEvent} event The mouse event object.
+   * @param {('cell'|'corner'|'move'|'handle')} kind The active drag interaction.
+   * @param {Event} event The pointer event that started the drag - a `mousedown` on desktop, a
+   * `touchstart` on mobile.
    * @param {object} [controller] The controller object from `beforeOnCellMouseDown`.
    */ _setupListening = /*#__PURE__*/ new WeakSet(), /**
+   * Starts auto-scrolling for a move-zone drag, but only if MoveCells actually began one.
+   *
+   * The `afterOnSelectionEdgeMouseDown` hook fires unconditionally from `TableView`, while MoveCells
+   * may reject the press (no movable range, a drag already running). MoveCells owns the drag and its
+   * listener runs first — plugins initialize in ascending `PLUGIN_PRIORITY` order, and MoveCells is
+   * 25 against this plugin's 100 — so the drag state is already settled by the time this runs.
+   * Without the check, auto-scroll would run with no drag in progress.
+   *
+   * @param {MouseEvent} event The move-zone mouse event.
+   */ _onSelectionEdgeMouseDown = /*#__PURE__*/ new WeakMap(), /**
+   * Starts auto-scrolling for a selection-handle drag, but only if SelectionHandles actually began
+   * one. Same ordering guarantee as `#onSelectionEdgeMouseDown` (SelectionHandles is priority 24).
+   *
+   * @param {MouseEvent} event The selection-handle mouse event.
+   */ _onSelectionHandleMouseDown = /*#__PURE__*/ new WeakMap(), /**
+   * Starts auto-scrolling for a mobile selection-handle drag.
+   *
+   * The mobile handles run entirely on touch events, so no `mousedown` reaches them and the
+   * `afterOnSelectionHandleMouseDown` hook never fires - hence this separate entry point. The
+   * ordering is guaranteed by DOM bubbling rather than by plugin priority: MultipleSelectionHandles
+   * listens on `rootElement`, a descendant of the document this listener sits on, so it has already
+   * recorded the drag by the time this runs.
+   *
+   * @param {Event} event The `touchstart` event.
+   */ _onTouchStart = /*#__PURE__*/ new WeakMap(), /**
+   * Feeds the moving finger's position to the auto-scroller.
+   *
+   * @param {Event} event The `touchmove` event.
+   */ _onTouchMove = /*#__PURE__*/ new WeakMap(), /**
+   * Stops auto-scrolling once the finger that started the drag leaves the screen.
+   *
+   * `touchend` and `touchcancel` fire once per finger, so "a finger lifted" is not the same question
+   * as "the dragging finger lifted". Answering the first would let a palm or a second finger stop a
+   * drag still in progress - and nothing re-arms short of a new `touchstart`, so auto-scroll would
+   * stay dead for the rest of it.
+   *
+   * @param {Event} event The `touchend` or `touchcancel` event.
+   */ _onTouchEnd = /*#__PURE__*/ new WeakMap(), /**
    * Scrolls the viewport horizontally by one column. Stops the horizontal axis
    * of the auto-scroller when `scrollViewportTo` reports that no scroll
    * happened — meaning the viewport is already pegged against the first or
@@ -127,6 +163,12 @@ var /**
    * @private
    * @param {MouseEvent} event `mousemove` event properties.
    */ _onMouseMove = /*#__PURE__*/ new WeakSet(), /**
+   * Records the latest pointer position and runs the viewport-boundary check that drives the
+   * auto-scroller. Shared by the mouse and the touch input paths.
+   *
+   * @param {number} clientX The pointer's viewport X coordinate.
+   * @param {number} clientY The pointer's viewport Y coordinate.
+   */ _trackPointer = /*#__PURE__*/ new WeakSet(), /**
    * Extends the regular drag-select selection to the cell at the clamped mouse position
    * after each viewport auto-scroll tick. Autofill drags are skipped — the autofill plugin
    * owns its own selection extension via its `afterScroll` hook.
@@ -183,6 +225,8 @@ var /**
             _class_private_method_get(this, _setupListening, setupListening).call(this, 'cell', event, typedController);
         });
         this.addHook('afterOnCellCornerMouseDown', (event)=>_class_private_method_get(this, _setupListening, setupListening).call(this, 'corner', event));
+        this.addHook('afterOnSelectionEdgeMouseDown', _class_private_field_get(this, _onSelectionEdgeMouseDown));
+        this.addHook('afterOnSelectionHandleMouseDown', _class_private_field_get(this, _onSelectionHandleMouseDown));
         this.addHook('afterSelection', _class_private_field_get(this, _onAfterSelection));
         this.addHook('afterScroll', _class_private_field_get(this, _onAfterScroll));
         this.registerEvents();
@@ -257,19 +301,20 @@ var /**
         }
     }
     /**
-   * Enables listening on `mousemove` event.
+   * Enables listening on the `mousemove` and `touchmove` events.
    *
    * @private
    */ listen() {
         this.listening = true;
     }
     /**
-   * Disables listening on `mousemove` event.
+   * Disables listening on the `mousemove` and `touchmove` events.
    *
    * @private
    */ unlisten() {
         this.listening = false;
         _class_private_field_set(this, _activeDragKind, null);
+        _class_private_field_set(this, _dragTouchId, null);
         _class_private_field_set(this, _lastClientX, null);
         _class_private_field_set(this, _lastClientY, null);
         _class_private_field_set(this, _isOutsideViewport, false);
@@ -294,9 +339,20 @@ var /**
         while(frame){
             this.eventManager.addEventListener(frame.document, 'contextmenu', ()=>this.unlisten());
             this.eventManager.addEventListener(frame.document, 'mouseup', ()=>this.unlisten());
+            this.eventManager.addEventListener(frame.document, 'keydown', (event)=>{
+                if ('key' in event && event.key === 'Escape') {
+                    this.unlisten();
+                }
+            });
             this.eventManager.addEventListener(frame.document, 'mousemove', (event)=>{
                 _class_private_method_get(this, _onMouseMove, onMouseMove).call(this, event);
             });
+            // Touch input needs its own listeners: a browser fires no `mousemove` while a finger is
+            // down, so without these the auto-scroller never receives a position on mobile (#11658).
+            this.eventManager.addEventListener(frame.document, 'touchstart', _class_private_field_get(this, _onTouchStart));
+            this.eventManager.addEventListener(frame.document, 'touchmove', _class_private_field_get(this, _onTouchMove));
+            this.eventManager.addEventListener(frame.document, 'touchend', _class_private_field_get(this, _onTouchEnd));
+            this.eventManager.addEventListener(frame.document, 'touchcancel', _class_private_field_get(this, _onTouchEnd));
             frame = getParentWindow(frame);
         }
     }
@@ -314,7 +370,7 @@ var /**
         super.destroy();
     }
     constructor(...args){
-        super(...args), _class_private_method_init(this, _setupListening), _class_private_method_init(this, _scrollHorizontal), _class_private_method_init(this, _scrollVertical), _class_private_method_init(this, _onMouseMove), _class_private_field_init(this, _autoScroller, {
+        super(...args), _class_private_method_init(this, _setupListening), _class_private_method_init(this, _scrollHorizontal), _class_private_method_init(this, _scrollVertical), _class_private_method_init(this, _onMouseMove), _class_private_method_init(this, _trackPointer), _class_private_field_init(this, _autoScroller, {
             writable: true,
             value: void 0
         }), _class_private_field_init(this, _isOutsideViewport, {
@@ -332,6 +388,24 @@ var /**
         }), _class_private_field_init(this, _mouseDownController, {
             writable: true,
             value: void 0
+        }), _class_private_field_init(this, _dragTouchId, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onSelectionEdgeMouseDown, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onSelectionHandleMouseDown, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onTouchStart, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onTouchMove, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onTouchEnd, {
+            writable: true,
+            value: void 0
         }), _class_private_field_init(this, _onAfterSelection, {
             writable: true,
             value: void 0
@@ -353,7 +427,59 @@ var /**
    *
    * @private
    * @type {boolean}
-   */ this.listening = false, _class_private_field_set(this, _autoScroller, new AutoScroller((fn, delay)=>this.hot._registerTimeout(fn, delay)).addLocalHook('scrollHorizontal', (distance)=>_class_private_method_get(this, _scrollHorizontal, scrollHorizontal).call(this, distance)).addLocalHook('scrollVertical', (distance)=>_class_private_method_get(this, _scrollVertical, scrollVertical).call(this, distance))), _class_private_field_set(this, _isOutsideViewport, false), _class_private_field_set(this, _activeDragKind, null), _class_private_field_set(this, _lastClientX, null), _class_private_field_set(this, _lastClientY, null), _class_private_field_set(this, _mouseDownController, null), _class_private_field_set(this, _onAfterSelection, (row, column, endRow, endColumn, preventScrolling)=>{
+   */ this.listening = false, _class_private_field_set(this, _autoScroller, new AutoScroller((fn, delay)=>this.hot._registerTimeout(fn, delay)).addLocalHook('scrollHorizontal', (distance)=>_class_private_method_get(this, _scrollHorizontal, scrollHorizontal).call(this, distance)).addLocalHook('scrollVertical', (distance)=>_class_private_method_get(this, _scrollVertical, scrollVertical).call(this, distance))), _class_private_field_set(this, _isOutsideViewport, false), _class_private_field_set(this, _activeDragKind, null), _class_private_field_set(this, _lastClientX, null), _class_private_field_set(this, _lastClientY, null), _class_private_field_set(this, _mouseDownController, null), _class_private_field_set(this, _dragTouchId, null), _class_private_field_set(this, _onSelectionEdgeMouseDown, (event)=>{
+            if (this.hot.getPlugin('moveCells')?.isDragActive() !== true) {
+                return;
+            }
+            _class_private_method_get(this, _setupListening, setupListening).call(this, 'move', event);
+        }), _class_private_field_set(this, _onSelectionHandleMouseDown, (event)=>{
+            if (this.hot.getPlugin('selectionHandles')?.isDragActive() !== true) {
+                return;
+            }
+            _class_private_method_get(this, _setupListening, setupListening).call(this, 'handle', event);
+        }), _class_private_field_set(this, _onTouchStart, (event)=>{
+            // Every later finger lands while the handle drag is still running, so this fires again for each
+            // one. Keep following the finger that started the drag - taking the newest instead would leave
+            // auto-scroll chasing a resting thumb, and would end the drag when that thumb lifted.
+            if (_class_private_field_get(this, _dragTouchId) !== null) {
+                return;
+            }
+            const touch = getFirstChangedTouch(event);
+            // No identifier means no way to tell this finger from any other later on, so there would be no
+            // safe moment to stop. Better not to start: `#dragTouchId` stays in step with being touch-armed,
+            // which is what `#onTouchEnd` relies on.
+            if (touch === null) {
+                return;
+            }
+            // Ask about THIS finger, not merely whether some drag is running. A drag can outlive the
+            // auto-scroller - `unlisten()` also runs on Escape and on `contextmenu` - and `isDragged()`
+            // alone would then let the next touch anywhere in the document start scrolling the grid.
+            if (this.hot.getPlugin('multipleSelectionHandles')?.isDraggedBy(touch.identifier) !== true) {
+                return;
+            }
+            _class_private_field_set(this, _dragTouchId, touch.identifier);
+            _class_private_method_get(this, _setupListening, setupListening).call(this, 'handle', event);
+        }), _class_private_field_set(this, _onTouchMove, (event)=>{
+            if (!this.isListening() || _class_private_field_get(this, _dragTouchId) === null) {
+                return;
+            }
+            const point = getTouchPointById(event, _class_private_field_get(this, _dragTouchId));
+            if (point === null) {
+                return;
+            }
+            _class_private_method_get(this, _trackPointer, trackPointer).call(this, point.clientX, point.clientY);
+        }), _class_private_field_set(this, _onTouchEnd, (event)=>{
+            // Nothing of ours is running on touch. A mouse drag can be, though - these listeners sit on the
+            // document, and a hybrid device fires touch events during one - and it is not this handler's to
+            // end.
+            if (_class_private_field_get(this, _dragTouchId) === null) {
+                return;
+            }
+            if (getTouchPointById(event, _class_private_field_get(this, _dragTouchId)) !== null) {
+                return;
+            }
+            this.unlisten();
+        }), _class_private_field_set(this, _onAfterSelection, (row, column, endRow, endColumn, preventScrolling)=>{
             if (this.listening && _class_private_field_get(this, _isOutsideViewport)) {
                 preventScrolling.value = true;
             }
@@ -495,7 +621,10 @@ function onMouseMove(event) {
     if (!this.isListening()) {
         return;
     }
-    _class_private_field_set(this, _lastClientX, event.clientX);
-    _class_private_field_set(this, _lastClientY, event.clientY);
-    this.check(event.clientX, event.clientY);
+    _class_private_method_get(this, _trackPointer, trackPointer).call(this, event.clientX, event.clientY);
+}
+function trackPointer(clientX, clientY) {
+    _class_private_field_set(this, _lastClientX, clientX);
+    _class_private_field_set(this, _lastClientY, clientY);
+    this.check(clientX, clientY);
 }

package/plugins/dragToScroll/scrollTimer.js

@@ -17,15 +17,12 @@ function _check_private_redeclaration(obj, privateCollection) {
     }
 }
 function _class_apply_descriptor_get(receiver, descriptor) {
-    if (descriptor.get) {
-        return descriptor.get.call(receiver);
-    }
+    if (descriptor.get) return descriptor.get.call(receiver);
     return descriptor.value;
 }
 function _class_apply_descriptor_set(receiver, descriptor, value) {
-    if (descriptor.set) {
-        descriptor.set.call(receiver, value);
-    } else {
+    if (descriptor.set) descriptor.set.call(receiver, value);
+    else {
         if (!descriptor.writable) {
             throw new TypeError("attempted to set read only private field");
         }
@@ -33,9 +30,7 @@ function _class_apply_descriptor_set(receiver, descriptor, value) {
     }
 }
 function _class_extract_field_descriptor(receiver, privateMap, action) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to " + action + " private field on non-instance");
-    }
+    if (!privateMap.has(receiver)) throw new TypeError("attempted to " + action + " private field on non-instance");
     return privateMap.get(receiver);
 }
 function _class_private_field_get(receiver, privateMap) {

package/plugins/dragToScroll/scrollTimer.mjs

@@ -4,15 +4,12 @@ function _check_private_redeclaration(obj, privateCollection) {
     }
 }
 function _class_apply_descriptor_get(receiver, descriptor) {
-    if (descriptor.get) {
-        return descriptor.get.call(receiver);
-    }
+    if (descriptor.get) return descriptor.get.call(receiver);
     return descriptor.value;
 }
 function _class_apply_descriptor_set(receiver, descriptor, value) {
-    if (descriptor.set) {
-        descriptor.set.call(receiver, value);
-    } else {
+    if (descriptor.set) descriptor.set.call(receiver, value);
+    else {
         if (!descriptor.writable) {
             throw new TypeError("attempted to set read only private field");
         }
@@ -20,9 +17,7 @@ function _class_apply_descriptor_set(receiver, descriptor, value) {
     }
 }
 function _class_extract_field_descriptor(receiver, privateMap, action) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to " + action + " private field on non-instance");
-    }
+    if (!privateMap.has(receiver)) throw new TypeError("attempted to " + action + " private field on non-instance");
     return privateMap.get(receiver);
 }
 function _class_private_field_get(receiver, privateMap) {

package/plugins/dropdownMenu/dropdownMenu.d.ts

@@ -3,6 +3,8 @@ import { BasePlugin } from '../base';
 import { CommandExecutor } from '../contextMenu/commandExecutor';
 import { ItemsFactory } from '../contextMenu/itemsFactory';
 import { Menu } from '../contextMenu/menu';
+import type { MenuAnchorRectProvider } from '../contextMenu/menu';
+export type { MenuAnchorRectProvider };
 export declare const PLUGIN_KEY = "dropdownMenu";
 export declare const PLUGIN_PRIORITY = 230;
 /**
@@ -164,6 +166,8 @@ export declare class DropdownMenu extends BasePlugin {
      * `Event` instance (e.g., a `MouseEvent`).
      * @param {{ above: number, below: number, left: number, right: number }} offset An object that applies
      * an offset to the menu position.
+     * @param {Function} [anchorRectProvider] Returns the current anchor rectangle for
+     * scroll-follow repositioning, or `null` when the anchor is no longer rendered.
      * @fires Hooks#beforeDropdownMenuShow
      * @fires Hooks#afterDropdownMenuShow
      * @example
@@ -174,7 +178,7 @@ export declare class DropdownMenu extends BasePlugin {
      * menu.open({ top: 50, left: 50 });
      * ```
      */
-    open(position: Record<string, number> | Event, offset?: Record<string, number>): void;
+    open(position: Record<string, number> | Event, offset?: Record<string, number>, anchorRectProvider?: MenuAnchorRectProvider): void;
     /**
      * Closes dropdown menu.
      */

package/plugins/dropdownMenu/dropdownMenu.js

@@ -36,15 +36,12 @@ function _check_private_redeclaration(obj, privateCollection) {
     }
 }
 function _class_apply_descriptor_get(receiver, descriptor) {
-    if (descriptor.get) {
-        return descriptor.get.call(receiver);
-    }
+    if (descriptor.get) return descriptor.get.call(receiver);
     return descriptor.value;
 }
 function _class_apply_descriptor_set(receiver, descriptor, value) {
-    if (descriptor.set) {
-        descriptor.set.call(receiver, value);
-    } else {
+    if (descriptor.set) descriptor.set.call(receiver, value);
+    else {
         if (!descriptor.writable) {
             throw new TypeError("attempted to set read only private field");
         }
@@ -52,9 +49,7 @@ function _class_apply_descriptor_set(receiver, descriptor, value) {
     }
 }
 function _class_extract_field_descriptor(receiver, privateMap, action) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to " + action + " private field on non-instance");
-    }
+    if (!privateMap.has(receiver)) throw new TypeError("attempted to " + action + " private field on non-instance");
     return privateMap.get(receiver);
 }
 function _class_private_field_get(receiver, privateMap) {
@@ -71,9 +66,7 @@ function _class_private_field_set(receiver, privateMap, value) {
     return value;
 }
 function _class_private_method_get(receiver, privateSet, fn) {
-    if (!privateSet.has(receiver)) {
-        throw new TypeError("attempted to get private field on non-instance");
-    }
+    if (!privateSet.has(receiver)) throw new TypeError("attempted to get private field on non-instance");
     return fn;
 }
 function _class_private_method_init(obj, privateSet) {
@@ -88,6 +81,12 @@ _hooks.Hooks.getSingleton().register('afterDropdownMenuExecute');
 const PLUGIN_KEY = 'dropdownMenu';
 const PLUGIN_PRIORITY = 230;
 const BUTTON_CLASS_NAME = 'changeType';
+/**
+ * Marks a header that carries a trailing icon button, so styles that position something against
+ * the header's trailing edge - the ColumnSorting indicator - can keep clear of it. A class rather
+ * than a `:has()` selector: `:has()` on a header re-runs style invalidation on every grid DOM
+ * mutation, which is why it is banned in this package.
+ */ const HEADER_WITH_BUTTON_CLASS_NAME = 'has-header-button';
 const SHORTCUTS_GROUP = PLUGIN_KEY;
 var /**
    * Flag which determines if the button that opens the menu was clicked.
@@ -318,6 +317,15 @@ class DropdownMenu extends _base.BasePlugin {
                 // flush with the TH content bottom.
                 const isRowspanned = th && Number.parseInt(th.getAttribute('rowspan') ?? '1', 10) > 1;
                 const menuTop = isRowspanned ? th.getBoundingClientRect().top + th.clientHeight : buttonRect.bottom;
+                // Anchor to `target`'s own resolved coordinates, not `(headerRow, from.col)`: the
+                // hidden-nested-placeholder fallback above can point `target` at a DIFFERENT
+                // column's button (a preceding, non-hidden header cell) while leaving `from.col`
+                // referencing the originally-selected placeholder column, which has no button —
+                // that mismatch made the provider always return `null` and close the menu on the
+                // first outside scroll instead of following it (#12719).
+                const anchorCoords = th ? this.hot.getCoords(th) : null;
+                const anchorRow = anchorCoords?.row ?? headerRow;
+                const anchorColumn = anchorCoords?.col ?? null;
                 this.open({
                     left: buttonRect.left + offset.left,
                     top: menuTop + offset.top
@@ -326,6 +334,10 @@ class DropdownMenu extends _base.BasePlugin {
                     right: 0,
                     above: 0,
                     below: isRowspanned ? -1 : 3
+                }, anchorColumn === null ? undefined : ()=>{
+                    const headerCell = this.hot.getCell(anchorRow, anchorColumn, true);
+                    const button = headerCell?.querySelector(`.${BUTTON_CLASS_NAME}`);
+                    return button ? button.getBoundingClientRect() : null;
                 });
                 // Make sure the first item is selected (role=menuitem). Otherwise, screen readers
                 // will block the Esc key for the whole menu.
@@ -394,6 +406,8 @@ class DropdownMenu extends _base.BasePlugin {
    * `Event` instance (e.g., a `MouseEvent`).
    * @param {{ above: number, below: number, left: number, right: number }} offset An object that applies
    * an offset to the menu position.
+   * @param {Function} [anchorRectProvider] Returns the current anchor rectangle for
+   * scroll-follow repositioning, or `null` when the anchor is no longer rendered.
    * @fires Hooks#beforeDropdownMenuShow
    * @fires Hooks#afterDropdownMenuShow
    * @example
@@ -408,7 +422,7 @@ class DropdownMenu extends _base.BasePlugin {
         below: 0,
         left: 0,
         right: 0
-    }) {
+    }, anchorRectProvider) {
         if (this.menu?.isOpened()) {
             return;
         }
@@ -420,7 +434,7 @@ class DropdownMenu extends _base.BasePlugin {
         (0, _object.objectEach)(offset, (value, key)=>{
             this.menu?.setOffset(key, value);
         });
-        this.menu?.setPosition(position);
+        this.menu?.setPosition(position, anchorRectProvider);
     }
     /**
    * Closes dropdown menu.
@@ -517,12 +531,22 @@ class DropdownMenu extends _base.BasePlugin {
             const existingButton = TH.querySelector(`.${BUTTON_CLASS_NAME}`);
             // Plugin enabled and buttons already exists, return.
             if (this.enabled && existingButton) {
+                // The container's class list is rebuilt on every header render (see `TableView`), while the
+                // button element itself survives - so the marker has to be re-applied here, not only where
+                // the button is created.
+                if ((0, _element.isHTMLElement)(existingButton.parentNode)) {
+                    (0, _element.addClass)(existingButton.parentNode, HEADER_WITH_BUTTON_CLASS_NAME);
+                }
                 return;
             }
             // Plugin disabled and buttons still exists, so remove them.
             if (!this.enabled) {
                 if (existingButton) {
-                    existingButton.parentNode?.removeChild(existingButton);
+                    const container = existingButton.parentNode;
+                    container?.removeChild(existingButton);
+                    if ((0, _element.isHTMLElement)(container)) {
+                        (0, _element.removeClass)(container, HEADER_WITH_BUTTON_CLASS_NAME);
+                    }
                 }
                 return;
             }
@@ -553,6 +577,9 @@ class DropdownMenu extends _base.BasePlugin {
             } else {
                 relativeContainer.appendChild(button);
             }
+            if ((0, _element.isHTMLElement)(relativeContainer)) {
+                (0, _element.addClass)(relativeContainer, HEADER_WITH_BUTTON_CLASS_NAME);
+            }
         }), _class_private_field_set(this, _onBeforeViewportScrollHorizontally, (visualColumn)=>{
             return _class_private_field_get(this, _isButtonClicked) ? null : visualColumn;
         }), _class_private_field_set(this, _onBeforeOnCellMouseDown, (event)=>{
@@ -582,6 +609,10 @@ function onTableClick(event) {
     if ((0, _element.hasClass)(target, BUTTON_CLASS_NAME)) {
         const offset = (0, _utils.getDocumentOffsetByElement)(this.menu?.container ?? this.hot.rootElement, this.hot.rootDocument);
         const buttonRect = _class_private_method_get(this, _getButtonRect, getButtonRect).call(this, target);
+        const th = target.closest('th');
+        const cellCoords = th ? this.hot.getCoords(th) : null;
+        const visualColumn = cellCoords?.col ?? null;
+        const headerRowIndex = cellCoords?.row ?? -1;
         event.stopPropagation();
         _class_private_field_set(this, _isButtonClicked, false);
         this.open({
@@ -592,6 +623,10 @@ function onTableClick(event) {
             right: 0,
             above: 0,
             below: 3
+        }, visualColumn === null ? undefined : ()=>{
+            const headerCell = this.hot.getCell(headerRowIndex, visualColumn, true);
+            const button = headerCell?.querySelector(`.${BUTTON_CLASS_NAME}`);
+            return button ? button.getBoundingClientRect() : null;
         });
     }
 }