handsontable 18.0.0 → 18.1.0-rc7

package/plugins/columnSummary/endpoints.mjs

@@ -1,6 +1,51 @@
+function _check_private_redeclaration(obj, privateCollection) {
+    if (privateCollection.has(obj)) {
+        throw new TypeError("Cannot initialize the same private elements twice on an object");
+    }
+}
+function _class_apply_descriptor_get(receiver, descriptor) {
+    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.writable) {
+            throw new TypeError("attempted to set read only private field");
+        }
+        descriptor.value = value;
+    }
+}
+function _class_extract_field_descriptor(receiver, privateMap, action) {
+    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) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "get");
+    return _class_apply_descriptor_get(receiver, descriptor);
+}
+function _class_private_field_init(obj, privateMap, value) {
+    _check_private_redeclaration(obj, privateMap);
+    privateMap.set(obj, value);
+}
+function _class_private_field_set(receiver, privateMap, value) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "set");
+    _class_apply_descriptor_set(receiver, descriptor, value);
+    return value;
+}
 import { arrayEach } from '../../helpers/array.mjs';
 import { warn } from '../../helpers/console.mjs';
 import { roundFloat } from './utils.mjs';
+var /**
+   * Destination columns keyed by physical destination row, built once per refresh pass. Used to
+   * keep summary results out of other summaries when their row is trimmed and the
+   * `columnSummaryResult` class is unreachable.
+   */ _summaryDestinations = /*#__PURE__*/ new WeakMap();
 /**
  * Class used to make all endpoint-related operations.
  *
@@ -25,6 +70,51 @@ import { roundFloat } from './utils.mjs';
         return this.endpoints[index];
     }
     /**
+   * Returns the number of physical rows the dataset holds, ignoring trimming.
+   *
+   * Endpoint destination rows and calculation ranges are physical indexes, so they must never be
+   * compared against `countRows()` - that counts only the *visible* rows and shrinks whenever a
+   * plugin trims rows (NestedRows collapsing a group, TrimRows, the Filters plugin).
+   *
+   * @returns {number}
+   */ countPhysicalRows() {
+        return this.hot.rowIndexMapper.getNumberOfIndexes();
+    }
+    /**
+   * Returns the number of rows an endpoint may address, that is the physical row count capped by
+   * `maxRows`. Used for the settings defaults that need a row count rather than a bounds check.
+   *
+   * `maxRows` is normalized the same way `DataMap#getLength` does it: `0` or less means zero rows,
+   * anything falsy means no cap.
+   *
+   * @returns {number}
+   */ countAddressableRows() {
+        const maxRows = this.hot.getSettings().maxRows;
+        let cap;
+        if ((maxRows ?? 0) < 0 || maxRows === 0) {
+            cap = 0;
+        } else {
+            cap = maxRows || Infinity;
+        }
+        return Math.min(this.countPhysicalRows(), cap);
+    }
+    /**
+   * Checks whether an endpoint points outside the table.
+   *
+   * A *trimmed* destination row is not out of bounds - the row exists, it is only hidden - so it is
+   * deliberately not reported here. A row that is visible but sits past `maxRows` is out of bounds,
+   * because the grid renders no cell for it.
+   *
+   * @param {object} endpoint Contains the endpoint information.
+   * @param {number} [rowOffset=0] Row offset to apply before the check.
+   * @param {number} [colOffset=0] Column offset to apply before the check.
+   * @returns {boolean}
+   */ isEndpointOutOfBounds(endpoint, rowOffset = 0, colOffset = 0) {
+        const destinationRow = endpoint.destinationRow + rowOffset;
+        const destinationVisualRow = this.hot.toVisualRow(destinationRow);
+        return destinationRow >= this.countPhysicalRows() || endpoint.destinationColumn + colOffset >= this.hot.countCols() || destinationVisualRow !== null && destinationVisualRow >= this.hot.countRows();
+    }
+    /**
    * Get an array with all the endpoints.
    *
    * @returns {Array}
@@ -35,6 +125,40 @@ import { roundFloat } from './utils.mjs';
         return this.endpoints;
     }
     /**
+   * Records the destinations of the endpoints a refresh pass is about to calculate.
+   *
+   * The resolved endpoints are passed in rather than read through `getAllEndpoints()`, which would
+   * re-invoke a settings function and could describe a different layout than the pass is working on.
+   *
+   * @param {object[]} endpoints The endpoints the current pass will calculate.
+   */ cacheSummaryDestinations(endpoints) {
+        _class_private_field_set(this, _summaryDestinations, new Map());
+        arrayEach(endpoints, (endpoint)=>{
+            let columns = _class_private_field_get(this, _summaryDestinations).get(endpoint.destinationRow);
+            if (columns === undefined) {
+                columns = new Set();
+                _class_private_field_get(this, _summaryDestinations).set(endpoint.destinationRow, columns);
+            }
+            columns.add(endpoint.destinationColumn);
+        });
+    }
+    /**
+   * Checks whether a physical cell holds the result of an endpoint.
+   *
+   * `getCellValue` normally recognizes a result by its `columnSummaryResult` class, but cell meta is
+   * addressed by visual coordinates, so a trimmed row has no readable class. Without this check a
+   * hidden summary row is summed as if it were plain data and inflates every summary covering it.
+   *
+   * @param {number} physicalRow Physical row index.
+   * @param {number} column Column index.
+   * @returns {boolean}
+   */ isSummaryDestination(physicalRow, column) {
+        if (_class_private_field_get(this, _summaryDestinations) === null) {
+            this.cacheSummaryDestinations(this.getAllEndpoints());
+        }
+        return _class_private_field_get(this, _summaryDestinations).get(physicalRow)?.has(column) === true;
+    }
+    /**
    * Used to fill the blanks in the endpoint data provided by a settings function.
    *
    * @private
@@ -63,7 +187,7 @@ import { roundFloat } from './utils.mjs';
             this.assignSetting(val, newEndpoint, 'ranges', [
                 [
                     0,
-                    this.hot.countRows() - 1
+                    this.countAddressableRows() - 1
                 ]
             ]);
             this.assignSetting(val, newEndpoint, 'reversedRowCoords', false);
@@ -105,7 +229,7 @@ import { roundFloat } from './utils.mjs';
             endpoint[name] = defaultValue;
         } else {
             /* eslint-disable no-lonely-if */ if (name === 'destinationRow' && endpoint.reversedRowCoords) {
-                endpoint[name] = this.hot.countRows() - settings[name] - 1;
+                endpoint[name] = this.countAddressableRows() - settings[name] - 1;
             } else {
                 endpoint[name] = settings[name];
             }
@@ -301,12 +425,7 @@ import { roundFloat } from './utils.mjs';
    * @param {boolean} [useOffset=true] Use the cell offset value.
    */ resetAllEndpoints(endpoints = this.getAllEndpoints(), useOffset = true) {
         const anyEndpointOutOfRange = endpoints.some((endpoint)=>{
-            const alterRowOffset = endpoint.alterRowOffset || 0;
-            const alterColOffset = endpoint.alterColumnOffset || 0;
-            if (endpoint.destinationRow + alterRowOffset >= this.hot.countRows() || endpoint.destinationColumn + alterColOffset >= this.hot.countCols()) {
-                return true;
-            }
-            return false;
+            return this.isEndpointOutOfBounds(endpoint, endpoint.alterRowOffset || 0, endpoint.alterColumnOffset || 0);
         });
         if (anyEndpointOutOfRange) {
             return;
@@ -323,8 +442,10 @@ import { roundFloat } from './utils.mjs';
     /**
    * Calculate and refresh all defined endpoints.
    */ refreshAllEndpoints() {
+        const endpoints = this.getAllEndpoints();
         this.cellsToSetCache = [];
-        arrayEach(this.getAllEndpoints(), (value)=>{
+        this.cacheSummaryDestinations(endpoints);
+        arrayEach(endpoints, (value)=>{
             this.currentEndpoint = value;
             this.plugin.calculate(value);
             this.setEndpointValue(value, 'init');
@@ -340,21 +461,23 @@ import { roundFloat } from './utils.mjs';
    *
    * @param {Array} changes Array of changes from the `afterChange` hook.
    */ refreshChangedEndpoints(changes) {
+        const endpoints = this.getAllEndpoints();
         const needToRefresh = [];
         this.cellsToSetCache = [];
+        this.cacheSummaryDestinations(endpoints);
         arrayEach(changes, (value, key, changesObj)=>{
             const change = value;
             if (`${change[2] || ''}` === `${change[3]}`) {
                 return;
             }
-            arrayEach(this.getAllEndpoints(), (endpoint, j)=>{
+            arrayEach(endpoints, (endpoint, j)=>{
                 if (this.hot.propToCol(changesObj[key][1]) === endpoint.sourceColumn && needToRefresh.indexOf(j) === -1) {
                     needToRefresh.push(j);
                 }
             });
         });
         arrayEach(needToRefresh, (value)=>{
-            this.refreshEndpoint(this.getEndpoint(value));
+            this.refreshEndpoint(endpoints[value]);
         });
         if (this.cellsToSetCache.length) {
             this.hot.setDataAtCell(this.cellsToSetCache, null, undefined, 'ColumnSummary.reset');
@@ -367,11 +490,15 @@ import { roundFloat } from './utils.mjs';
    * @param {Set<number>|number[]} visualColumns Visual column indexes to match against.
    */ refreshEndpointsBySourceColumns(visualColumns) {
         const columnsSet = visualColumns instanceof Set ? visualColumns : new Set(visualColumns);
-        const matched = this.getAllEndpoints().filter((endpoint)=>columnsSet.has(endpoint.sourceColumn));
+        const endpoints = this.getAllEndpoints();
+        const matched = endpoints.filter((endpoint)=>columnsSet.has(endpoint.sourceColumn));
         if (matched.length === 0) {
             return;
         }
         this.cellsToSetCache = [];
+        // Every endpoint is cached, not just the matched ones - a summary result must stay excluded from
+        // the ranges of the endpoints being refreshed, whatever their own source column is.
+        this.cacheSummaryDestinations(endpoints);
         arrayEach(matched, (endpoint)=>{
             this.refreshEndpoint(endpoint);
         });
@@ -384,12 +511,16 @@ import { roundFloat } from './utils.mjs';
    * Refreshes the cell meta information for the all endpoints after the `updateSettings` method call which in some
    * cases (call with `columns` option) can reset the cell metas to the initial state.
    */ refreshCellMetas() {
+        // Declarative writes: kept on the cell meta (so they survive the viewport meta eviction) but not
+        // recorded as user-defined, so an `updateSettings` cache reset clears them and they are re-applied
+        // for the current endpoints. `_setCellMetaDeclarative` does not fire `beforeSetCellMeta`/
+        // `afterSetCellMeta` and cannot be vetoed - matching the previous direct-write behavior.
         this.endpoints.forEach((endpoint)=>{
             const destinationVisualRow = this.hot.toVisualRow(endpoint.destinationRow);
+            const destinationColumn = endpoint.destinationColumn;
             if (destinationVisualRow !== null) {
-                const cellMeta = this.hot.getCellMeta(destinationVisualRow, endpoint.destinationColumn);
-                cellMeta.readOnly = endpoint.readOnly;
-                cellMeta.className = 'columnSummaryResult';
+                this.hot._setCellMetaDeclarative(destinationVisualRow, destinationColumn, 'readOnly', endpoint.readOnly);
+                this.hot._setCellMetaDeclarative(destinationVisualRow, destinationColumn, 'className', 'columnSummaryResult');
             }
         });
     }
@@ -411,8 +542,14 @@ import { roundFloat } from './utils.mjs';
    */ resetEndpointValue(endpoint, useOffset = true) {
         const alterRowOffset = endpoint.alterRowOffset || 0;
         const alterColOffset = endpoint.alterColumnOffset || 0;
+        const destinationVisualRow = this.hot.toVisualRow(endpoint.destinationRow + (useOffset ? alterRowOffset : 0));
+        // The destination row is trimmed (for example it sits inside a collapsed NestedRows group), so
+        // there is no cell to clear.
+        if (destinationVisualRow === null) {
+            return;
+        }
         this.cellsToSetCache.push([
-            this.hot.toVisualRow(endpoint.destinationRow + (useOffset ? alterRowOffset : 0)),
+            destinationVisualRow,
             this.hot.toVisualColumn(endpoint.destinationColumn + (useOffset ? alterColOffset : 0)),
             ''
         ]);
@@ -424,28 +561,36 @@ import { roundFloat } from './utils.mjs';
    * @param {string} [source] Source of the call information.
    * @param {boolean} [render=false] `true` if it needs to render the table afterwards.
    */ setEndpointValue(endpoint, source, render = false) {
-        const visualEndpointRowIndex = this.hot.toVisualRow(endpoint.destinationRow);
-        if (endpoint.destinationRow >= this.hot.countRows() || endpoint.destinationColumn >= this.hot.countCols()) {
+        if (this.isEndpointOutOfBounds(endpoint)) {
             this.throwOutOfBoundsWarning();
             return;
         }
         const destinationVisualRow = this.hot.toVisualRow(endpoint.destinationRow);
         if (destinationVisualRow !== null) {
-            const cellMeta = this.hot.getCellMeta(destinationVisualRow, endpoint.destinationColumn);
+            const destinationColumn = endpoint.destinationColumn;
+            const cellMeta = this.hot.getCellMetaTransient(destinationVisualRow, destinationColumn);
             if (source === 'init' || cellMeta.readOnly !== endpoint.readOnly) {
-                cellMeta.readOnly = endpoint.readOnly;
-                cellMeta.className = 'columnSummaryResult';
+                // Declarative writes (see `refreshCellMetas`) so the styling survives viewport meta eviction
+                // without firing the public `setCellMeta` hooks or being vetoable.
+                this.hot._setCellMetaDeclarative(destinationVisualRow, destinationColumn, 'readOnly', endpoint.readOnly);
+                this.hot._setCellMetaDeclarative(destinationVisualRow, destinationColumn, 'className', 'columnSummaryResult');
             }
         }
         endpoint.result = roundFloat(endpoint.result, endpoint.roundFloat);
-        if (render) {
-            this.hot.setDataAtCell(visualEndpointRowIndex, endpoint.destinationColumn, endpoint.result, 'ColumnSummary.set');
-        } else {
-            this.cellsToSetCache.push([
-                visualEndpointRowIndex,
-                endpoint.destinationColumn,
-                endpoint.result
-            ]);
+        // A trimmed destination row has no cell to write to - writing one throws in `DataMap.set`. The
+        // result stays on the endpoint; the cell keeps its previous value until the next recalculation
+        // that runs while the row is visible. Nothing re-runs the endpoints on untrim, so a destination
+        // hidden at the moment of a change shows a stale value until then.
+        if (destinationVisualRow !== null) {
+            if (render) {
+                this.hot.setDataAtCell(destinationVisualRow, endpoint.destinationColumn, endpoint.result, 'ColumnSummary.set');
+            } else {
+                this.cellsToSetCache.push([
+                    destinationVisualRow,
+                    endpoint.destinationColumn,
+                    endpoint.result
+                ]);
+            }
         }
         endpoint.alterRowOffset = undefined;
         endpoint.alterColumnOffset = undefined;
@@ -460,6 +605,10 @@ import { roundFloat } from './utils.mjs';
     /**
    * Initializes the endpoints manager with a reference to the ColumnSummary plugin and the summary endpoint configuration.
    */ constructor(plugin, settings){
+        _class_private_field_init(this, _summaryDestinations, {
+            writable: true,
+            value: void 0
+        });
         /**
    * Array of declared plugin endpoints (calculation destination points).
    *
@@ -485,7 +634,10 @@ import { roundFloat } from './utils.mjs';
    * @type {Array}
    * @default {[]}
    */ this.cellsToSetCache = [];
+        _class_private_field_set(this, _summaryDestinations, null);
         this.plugin = plugin;
+        // `_setCellMetaDeclarative` is defined on the Core runtime object but kept off the public
+        // `HotInstance` type; this internal plugin reaches it through the `HotInstanceInternal` view.
         this.hot = this.plugin.hot;
         this.settings = settings;
     }

package/plugins/comments/commentEditor.js

@@ -199,7 +199,7 @@ var /**
    *
    * @returns {boolean}
    */ isFocused() {
-        return _class_private_field_get(this, _rootDocument).activeElement === this.getInputElement();
+        return (0, _element.getDeepActiveElement)(_class_private_field_get(this, _rootDocument)) === this.getInputElement();
     }
     /**
    * Focus the comments input element.

package/plugins/comments/commentEditor.mjs

@@ -38,7 +38,7 @@ function _class_private_field_set(receiver, privateMap, value) {
     _class_apply_descriptor_set(receiver, descriptor, value);
     return value;
 }
-import { addClass, outerWidth, outerHeight } from '../../helpers/dom/element.mjs';
+import { addClass, getDeepActiveElement, outerWidth, outerHeight } from '../../helpers/dom/element.mjs';
 import { mixin } from '../../helpers/object.mjs';
 import localHooks from '../../mixins/localHooks.mjs';
 import { EditorResizeObserver } from './editorResizeObserver.mjs';
@@ -184,7 +184,7 @@ var /**
    *
    * @returns {boolean}
    */ isFocused() {
-        return _class_private_field_get(this, _rootDocument).activeElement === this.getInputElement();
+        return getDeepActiveElement(_class_private_field_get(this, _rootDocument)) === this.getInputElement();
     }
     /**
    * Focus the comments input element.

package/plugins/contextMenu/contextMenu.d.ts

@@ -2,6 +2,7 @@ import { BasePlugin } from '../base';
 import { CommandExecutor } from './commandExecutor';
 import { ItemsFactory } from './itemsFactory';
 import { Menu } from './menu';
+import type { MenuAnchorRectProvider } from './menu';
 export type PredefinedMenuItemKey = 'row_above' | 'row_below' | 'col_left' | 'col_right' | '---------' | 'remove_row' | 'remove_col' | 'clear_column' | 'undo' | 'redo' | 'make_read_only' | 'alignment' | 'cut' | 'copy' | 'copy_column_headers_only' | 'copy_with_column_group_headers' | 'copy_with_column_headers' | 'freeze_column' | 'unfreeze_column' | 'borders' | 'commentsAddEdit' | 'commentsRemove' | 'commentsReadOnly' | 'mergeCells' | 'add_child' | 'detach_from_parent' | 'hidden_columns_hide' | 'hidden_columns_show' | 'hidden_rows_hide' | 'hidden_rows_show' | 'filter_by_condition' | 'filter_operators' | 'filter_by_condition2' | 'filter_by_value' | 'filter_action_bar';
 export interface MenuItemConfig {
     key?: string;
@@ -15,6 +16,7 @@ export interface MenuItemConfig {
     };
     [key: string]: unknown;
 }
+export type { MenuAnchorRectProvider };
 export declare const PLUGIN_KEY = "contextMenu";
 export declare const PLUGIN_PRIORITY = 70;
 /**
@@ -54,6 +56,13 @@ export declare class ContextMenu extends BasePlugin {
      * Returns the list of plugin dependencies required before this plugin can be initialized.
      */
     static get PLUGIN_DEPS(): string[];
+    /**
+     * The item descriptor that identifies a menu separator. Use it as a value in a custom
+     * `items` configuration object to insert a separator line at that key.
+     *
+     * @returns {MenuItemConfig}
+     */
+    static get SEPARATOR(): MenuItemConfig;
     /**
      * Context menu default items order when `contextMenu` options is set as `true`.
      *
@@ -123,6 +132,8 @@ export declare class ContextMenu 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#beforeContextMenuShow
      * @fires Hooks#afterContextMenuShow
      * @example
@@ -138,7 +149,7 @@ export declare class ContextMenu extends BasePlugin {
         below?: number;
         left?: number;
         right?: number;
-    }): void;
+    }, anchorRectProvider?: MenuAnchorRectProvider): void;
     /**
      * Closes the menu.
      */

package/plugins/contextMenu/contextMenu.js

@@ -105,6 +105,16 @@ class ContextMenu extends _base.BasePlugin {
         ];
     }
     /**
+   * The item descriptor that identifies a menu separator. Use it as a value in a custom
+   * `items` configuration object to insert a separator line at that key.
+   *
+   * @returns {MenuItemConfig}
+   */ static get SEPARATOR() {
+        return {
+            name: _predefinedItems.SEPARATOR
+        };
+    }
+    /**
    * Context menu default items order when `contextMenu` options is set as `true`.
    *
    * @returns {string[]}
@@ -221,6 +231,9 @@ class ContextMenu extends _base.BasePlugin {
                 }, {
                     left: rect.width,
                     above: -rect.height
+                }, ()=>{
+                    const anchorCell = this.hot.getCell(highlight.row, highlight.col, true);
+                    return anchorCell ? anchorCell.getBoundingClientRect() : null;
                 });
                 // Make sure the first item is selected (role=menuitem). Otherwise, screen readers
                 // will block the Esc key for the whole menu.
@@ -248,6 +261,8 @@ class ContextMenu 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#beforeContextMenuShow
    * @fires Hooks#afterContextMenuShow
    * @example
@@ -262,7 +277,7 @@ class ContextMenu extends _base.BasePlugin {
         below: 0,
         left: 0,
         right: 0
-    }) {
+    }, anchorRectProvider) {
         if (this.menu?.isOpened()) {
             return;
         }
@@ -275,7 +290,7 @@ class ContextMenu extends _base.BasePlugin {
         (0, _object.objectEach)(offset, (value, key)=>{
             this.menu.setOffset(key, value);
         });
-        this.menu.setPosition(position);
+        this.menu.setPosition(position, anchorRectProvider);
     }
     /**
    * Closes the menu.
@@ -399,10 +414,22 @@ class ContextMenu extends _base.BasePlugin {
                 }
             }
             const offset = (0, _utils.getDocumentOffsetByElement)(this.menu.container, this.hot.rootDocument);
+            const anchorCell = element.closest('td, th');
+            let anchorRectProvider;
+            if (anchorCell) {
+                const cellCoords = this.hot.getCoords(anchorCell);
+                if (cellCoords && cellCoords.row !== null && cellCoords.col !== null) {
+                    const { row, col } = cellCoords;
+                    anchorRectProvider = ()=>{
+                        const cell = this.hot.getCell(row, col, true);
+                        return cell ? cell.getBoundingClientRect() : null;
+                    };
+                }
+            }
             this.open({
                 top: event.clientY + offset.top,
                 left: event.clientX + offset.left
-            });
+            }, undefined, anchorRectProvider);
         }), _class_private_field_set(this, _onMenuAfterOpen, ()=>{
             this.hot.runHooks('afterContextMenuShow', this);
         }), _class_private_field_set(this, _onMenuAfterClose, ()=>{
@@ -411,6 +438,3 @@ class ContextMenu extends _base.BasePlugin {
         });
     }
 }
-ContextMenu.SEPARATOR = {
-    name: _predefinedItems.SEPARATOR
-};

package/plugins/contextMenu/contextMenu.mjs

@@ -106,6 +106,16 @@ var /**
         ];
     }
     /**
+   * The item descriptor that identifies a menu separator. Use it as a value in a custom
+   * `items` configuration object to insert a separator line at that key.
+   *
+   * @returns {MenuItemConfig}
+   */ static get SEPARATOR() {
+        return {
+            name: SEPARATOR
+        };
+    }
+    /**
    * Context menu default items order when `contextMenu` options is set as `true`.
    *
    * @returns {string[]}
@@ -222,6 +232,9 @@ var /**
                 }, {
                     left: rect.width,
                     above: -rect.height
+                }, ()=>{
+                    const anchorCell = this.hot.getCell(highlight.row, highlight.col, true);
+                    return anchorCell ? anchorCell.getBoundingClientRect() : null;
                 });
                 // Make sure the first item is selected (role=menuitem). Otherwise, screen readers
                 // will block the Esc key for the whole menu.
@@ -249,6 +262,8 @@ var /**
    * `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#beforeContextMenuShow
    * @fires Hooks#afterContextMenuShow
    * @example
@@ -263,7 +278,7 @@ var /**
         below: 0,
         left: 0,
         right: 0
-    }) {
+    }, anchorRectProvider) {
         if (this.menu?.isOpened()) {
             return;
         }
@@ -276,7 +291,7 @@ var /**
         objectEach(offset, (value, key)=>{
             this.menu.setOffset(key, value);
         });
-        this.menu.setPosition(position);
+        this.menu.setPosition(position, anchorRectProvider);
     }
     /**
    * Closes the menu.
@@ -400,10 +415,22 @@ var /**
                 }
             }
             const offset = getDocumentOffsetByElement(this.menu.container, this.hot.rootDocument);
+            const anchorCell = element.closest('td, th');
+            let anchorRectProvider;
+            if (anchorCell) {
+                const cellCoords = this.hot.getCoords(anchorCell);
+                if (cellCoords && cellCoords.row !== null && cellCoords.col !== null) {
+                    const { row, col } = cellCoords;
+                    anchorRectProvider = ()=>{
+                        const cell = this.hot.getCell(row, col, true);
+                        return cell ? cell.getBoundingClientRect() : null;
+                    };
+                }
+            }
             this.open({
                 top: event.clientY + offset.top,
                 left: event.clientX + offset.left
-            });
+            }, undefined, anchorRectProvider);
         }), _class_private_field_set(this, _onMenuAfterOpen, ()=>{
             this.hot.runHooks('afterContextMenuShow', this);
         }), _class_private_field_set(this, _onMenuAfterClose, ()=>{
@@ -412,6 +439,3 @@ var /**
         });
     }
 }
-ContextMenu.SEPARATOR = {
-    name: SEPARATOR
-};

package/plugins/contextMenu/index.d.ts

@@ -1,2 +1,2 @@
 export { PLUGIN_KEY, PLUGIN_PRIORITY, ContextMenu, } from './contextMenu';
-export type { PredefinedMenuItemKey, MenuItemConfig } from './contextMenu';
+export type { PredefinedMenuItemKey, MenuItemConfig, MenuAnchorRectProvider } from './contextMenu';

package/plugins/contextMenu/menu/menu.d.ts

@@ -2,6 +2,11 @@ import type { HotInstance } from '../../../core/types';
 import type { GridSettings } from '../../../core/settings';
 import { Positioner } from './positioner';
 import EventManager from '../../../eventManager';
+/**
+ * Returns the current bounding rectangle of the element the menu is anchored to,
+ * or `null` when the anchor is not rendered anymore (scrolled out of the viewport).
+ */
+export type MenuAnchorRectProvider = () => DOMRect | null;
 interface MenuOptions {
     parent: Menu | null;
     name: string | null;
@@ -257,8 +262,10 @@ export declare class Menu {
      * Set menu position based on dom event or based on literal object.
      *
      * @param {Event|object} coords Event or literal Object with coordinates.
+     * @param {Function} [anchorRectProvider] Returns the current anchor rectangle for
+     * scroll-follow repositioning, or `null` when the anchor is no longer rendered.
      */
-    setPosition(coords: Event | DOMRect | Record<string, unknown>): void;
+    setPosition(coords: Event | DOMRect | Record<string, unknown>, anchorRectProvider?: MenuAnchorRectProvider): void;
     /**
      * Updates the dimensions of the menu based on its content.
      * This method calculates the real height of the menu by summing up the heights of its items,
@@ -286,6 +293,20 @@ export declare class Menu {
      * @param {Event} event The mouse event object.
      */
     onDocumentMouseDown(event: Event): void;
+    /**
+     * Document's scroll listener (capture phase). When an element outside of the menu
+     * is scrolled, repositions the menu so it stays visually attached to its anchor
+     * (column header, cell, or parent menu item) — the menu is rendered in a portal
+     * positioned in document coordinates, so it would otherwise stay stranded (#12719).
+     * Closes the menu when the anchor is scrolled out of the rendered viewport.
+     * Ignored: page/document scroll (document coordinates already track it), scrolls
+     * within the menu, and scrolls of elements that contain the menu (custom
+     * `uiContainer` — the menu moves natively with its container).
+     *
+     * @private
+     * @param {Event} event The scroll event object.
+     */
+    onDocumentScroll(event: Event): void;
     /**
      * Document's contextmenu listener.
      *