handsontable 18.0.0 → 18.1.0-rc7

package/core/hooks/constants.mjs

@@ -133,10 +133,23 @@
    * Fired after one or more cells has been changed. The changes are triggered in any situation when the
    * value is entered using an editor or changed using API (e.q [`setDataAtCell`](@/api/core.md#setdataatcell) method).
    *
-   * __Note:__ For performance reasons, the `changes` array is null for `"loadData"` source.
+   * For performance reasons, the `changes` array is `null` when the `source` is `"loadData"` or `"updateData"`.
+   *
+   * Calling [`updateSettings()`](@/api/core.md#updatesettings) with the `data` option inside this hook
+   * triggers another `afterChange` call with the `"updateData"` source. Check the `source` argument
+   * to prevent an infinite loop.
    *
    * @event Hooks#afterChange
-   * @param {Array[]} changes 2D array containing information about each of the edited cells `[[row, prop, oldVal, newVal], ...]`. `row` is a visual row index.
+   * @param {Array[]|null} changes 2D array containing information about each of the edited cells
+   *                               `[[row, prop, oldVal, newVal], ...]`, or `null` for the `"loadData"`
+   *                               and `"updateData"` sources. `row` is a visual row index. `prop` is a property name,
+   *                               a column index, or – when [`columns[].data`](@/api/options.md#columns) is a function –
+   *                               the column accessor function. To resolve a visual column index from `prop`, call
+   *                               [`propToCol()`](@/api/core.md#proptocol). Unlike
+   *                               [`beforeValidate`](@/api/hooks.md#beforevalidate) and
+   *                               [`afterValidate`](@/api/hooks.md#aftervalidate), this hook passes the accessor function
+   *                               as `prop` so the grid can write data back. Read more:
+   *                               [Binding to data: Identify changed columns in hooks](@/guides/getting-started/binding-to-data/binding-to-data.md#identify-changed-columns-in-hooks).
    * @param {string} [source] String that identifies source of hook call ([list of all available sources](@/guides/getting-started/events-and-hooks/events-and-hooks.md#definition-for-source-argument)).
    * @example
    * ::: only-for javascript
@@ -315,11 +328,13 @@
    *                          ([list of all available sources](@/guides/getting-started/events-and-hooks/events-and-hooks.md#definition-for-source-argument)).
    */ 'afterCreateCol',
     /**
-   * Fired before created a new row.
+   * Fired before a new row is created.
    *
    * @event Hooks#beforeCreateRow
-   * @param {number} index Represents the visual index of first newly created row in the data source array.
-   * @param {number} amount Number of newly created rows in the data source array.
+   * @param {number} index Represents the visual index at which new row(s) are about to be inserted.
+   *                       Note that the actual visual index of the inserted row(s) may differ - use the
+   *                       `afterCreateRow` hook to get the final position.
+   * @param {number} amount Number of rows to be created.
    * @param {string} [source] String that identifies source of hook call
    *                          ([list of all available sources](@/guides/getting-started/events-and-hooks/events-and-hooks.md#definition-for-source-argument)).
    * @returns {*|boolean} If false is returned the action is canceled.
@@ -517,6 +532,41 @@
    * @param {Event} event `mousedown` event object.
    */ 'afterOnCellCornerMouseDown',
     /**
+   * Fired after the user presses a selection-adjustment handle (see [`selectionHandles`](@/api/options.md#selectionhandles)).
+   *
+   * @event Hooks#afterOnSelectionHandleMouseDown
+   * @since 18.1.0
+   * @param {Event} event The `mousedown` event.
+   * @param {'top' | 'bottom' | 'start' | 'end'} edge The pressed handle's edge.
+   */ 'afterOnSelectionHandleMouseDown',
+    /**
+   * Fired after the user presses a selection edge move zone.
+   *
+   * @event Hooks#afterOnSelectionEdgeMouseDown
+   * @since 18.1.0
+   * @param {Event} event The `mousedown` event.
+   * @param {'top' | 'bottom' | 'start' | 'end'} edge The pressed edge.
+   */ 'afterOnSelectionEdgeMouseDown',
+    /**
+   * Fired before a `moveCells` drag relocates a selection. Return `false` to cancel the move.
+   *
+   * @event Hooks#beforeMoveCells
+   * @since 18.1.0
+   * @param {CellRange} sourceRange The range being moved.
+   * @param {CellCoords} targetTopLeft The top-left target cell.
+   * @param {boolean} isCopy `true` when copying (Ctrl held) instead of moving.
+   * @returns {void|boolean}
+   */ 'beforeMoveCells',
+    /**
+   * Fired after a `moveCells` drag has relocated a selection.
+   *
+   * @event Hooks#afterMoveCells
+   * @since 18.1.0
+   * @param {CellRange} sourceRange The original range.
+   * @param {CellRange} targetRange The range the data was moved to.
+   * @param {boolean} isCopy `true` when the operation was a copy.
+   */ 'afterMoveCells',
+    /**
    * Fired after a `dblclick` event is triggered on the cell corner (the drag handle).
    *
    * @event Hooks#afterOnCellCornerDblClick
@@ -789,8 +839,8 @@
    *                                  Handsontable uses to control scroll behavior after selection.
    * @param {number} selectionLayerLevel The number which indicates what selection layer is currently modified.
    * @example
-   * ```js
    * ::: only-for javascript
+   * ```js
    * new Handsontable(element, {
    *   afterSelectionByProp: (row, column, row2, column2, preventScrolling, selectionLayerLevel) => {
    *     // setting if prevent scrolling after selection
@@ -866,8 +916,8 @@
    *                                  Property `preventScrolling.value` expects a boolean value that
    *                                  Handsontable uses to control scroll behavior after selection.
    * @example
-   * ```js
    * ::: only-for javascript
+   * ```js
    * new Handsontable(element, {
    *   afterSelectionFocusSet: (row, column, preventScrolling) => {
    *     // If set to `false` (default): when focused cell selection is outside the viewport,
@@ -1159,7 +1209,8 @@
    * @param {boolean} isValid `true` if valid, `false` if not.
    * @param {*} value The value in question.
    * @param {number} row Visual row index.
-   * @param {string|number} prop Property name / visual column index.
+   * @param {string|number} prop Property name or column index. For array-based data, this is the physical column
+   *                            index. When `columns[i].data` is a function, this is the visual column index.
    * @param {string} [source] String that identifies source of hook call
    *                          ([list of all available sources](@/guides/getting-started/events-and-hooks/events-and-hooks.md#definition-for-source-argument)).
    * @returns {undefined | boolean} If `false` the cell will be marked as invalid, `true` otherwise.
@@ -1208,7 +1259,8 @@
    * Fired before aligning the cell contents.
    *
    * @event Hooks#beforeCellAlignment
-   * @param {object} stateBefore An object with class names defining the cell alignment.
+   * @param {object} stateBefore An object where each key is a visual row index and each value is an array
+   *                             of class names indexed by visual column.
    * @param {CellRange[]} range An array of `CellRange` coordinates where the alignment will be applied.
    * @param {string} type Type of the alignment - either `horizontal` or `vertical`.
    * @param {string} alignmentClass String defining the alignment class added to the cell.
@@ -1221,8 +1273,21 @@
    *
    * To ignore the user's changes, use a nullified array or return `false`.
    *
+   * This hook doesn't run when the entire data source is replaced through
+   * [`loadData()`](@/api/core.md#loaddata), [`updateData()`](@/api/core.md#updatedata), or
+   * [`updateSettings()`](@/api/core.md#updatesettings) with the `data` option. To intercept these
+   * replacements, use [`beforeLoadData`](@/api/hooks.md#beforeloaddata) or
+   * [`beforeUpdateData`](@/api/hooks.md#beforeupdatedata).
+   *
    * @event Hooks#beforeChange
-   * @param {Array[]} changes 2D array containing information about each of the edited cells `[[row, prop, oldVal, newVal], ...]`. `row` is a visual row index.
+   * @param {Array[]} changes 2D array containing information about each of the edited cells `[[row, prop, oldVal, newVal], ...]`.
+   *                          `row` is a visual row index. `prop` is a property name, a column index, or – when
+   *                          [`columns[].data`](@/api/options.md#columns) is a function – the column accessor function.
+   *                          To resolve a visual column index from `prop`, call [`propToCol()`](@/api/core.md#proptocol).
+   *                          Unlike [`beforeValidate`](@/api/hooks.md#beforevalidate) and
+   *                          [`afterValidate`](@/api/hooks.md#aftervalidate), this hook passes the accessor function
+   *                          as `prop` so the grid can write data back. Read more:
+   *                          [Binding to data: Identify changed columns in hooks](@/guides/getting-started/binding-to-data/binding-to-data.md#identify-changed-columns-in-hooks).
    * @param {string} [source] String that identifies source of hook call
    *                          ([list of all available sources](@/guides/getting-started/events-and-hooks/events-and-hooks.md#definition-for-source-argument)).
    * @returns {undefined | boolean} If `false` all changes were cancelled, `true` otherwise.
@@ -1644,7 +1709,8 @@
    * @event Hooks#beforeValidate
    * @param {*} value Value of the cell.
    * @param {number} row Visual row index.
-   * @param {string|number} prop Property name / column index.
+   * @param {string|number} prop Property name or column index. For array-based data, this is the physical column
+   *                            index. When `columns[i].data` is a function, this is the visual column index.
    * @param {string} [source] String that identifies source of hook call
    *                          ([list of all available sources](@/guides/getting-started/events-and-hooks/events-and-hooks.md#definition-for-source-argument)).
    */ 'beforeValidate',
@@ -1679,6 +1745,16 @@
    * @param {number} width Current column width.
    * @param {number} column Visual column index.
    * @param {string} [source] String that identifies source of hook call.
+   * @see [Column width](@/guides/columns/column-width/column-width.md)
+   * @example
+   * ```js
+   * // Cap the Product column at 100px when content would exceed 150px.
+   * modifyColWidth(width, column) {
+   *   if (column === 1 && width > 150) {
+   *     return 100;
+   *   }
+   * }
+   * ```
    */ 'modifyColWidth',
     /**
    * Fired when rendering the list of values in the multiple-selection component of the Filters dropdown.
@@ -1838,10 +1914,69 @@
    * @returns {number[]} The modified autofill range (`[startRow, startColumn, endRow, endColumn]`).
    */ 'modifyAutofillRange',
     /**
-   * Fired to allow modifying the copyable range with a callback function.
+   * Fired by {@link CopyPaste} plugin to allow modifying the range that is about to be copied or cut. It's
+   * recalculated whenever the selection changes, and again right before the values are copied or cut to the
+   * clipboard. This hook is fired when {@link Options#copyPaste} option is enabled. It's also fired by the
+   * {@link Autofill} plugin while a fill-handle drag is in progress, to determine the range that would be
+   * copied if the drag ended at the current position.
    *
    * @event Hooks#modifyCopyableRange
-   * @param {Array[]} copyableRanges Array of objects defining copyable cells.
+   * @param {object[]} copyableRanges An array of objects with ranges of the visual indexes (`startRow`, `startCol`,
+   *                                  `endRow`, `endCol`) that are copyable.
+   * @returns {object[]|undefined} The modified array of copyable ranges. If nothing is returned, the ranges
+   *                                passed to the callback are used unchanged.
+   * @example
+   * ::: only-for javascript
+   * ```js
+   * new Handsontable(element, {
+   *   // Copy only the last column of each selected range, regardless of the selection width.
+   *   modifyCopyableRange(copyableRanges) {
+   *     return copyableRanges.map(({ startRow, endRow, endCol }) => ({
+   *       startRow,
+   *       endRow,
+   *       startCol: endCol,
+   *       endCol,
+   *     }));
+   *   }
+   * });
+   * ```
+   * :::
+   *
+   * ::: only-for react
+   * ```jsx
+   * <HotTable
+   *   // Copy only the last column of each selected range, regardless of the selection width.
+   *   modifyCopyableRange={(copyableRanges) => {
+   *     return copyableRanges.map(({ startRow, endRow, endCol }) => ({
+   *       startRow,
+   *       endRow,
+   *       startCol: endCol,
+   *       endCol,
+   *     }));
+   *   }}
+   * />
+   * ```
+   * :::
+   *
+   * ::: only-for angular
+   *```ts
+   * settings = {
+   *   // Copy only the last column of each selected range, regardless of the selection width.
+   *   modifyCopyableRange: (copyableRanges) => {
+   *     return copyableRanges.map(({ startRow, endRow, endCol }) => ({
+   *       startRow,
+   *       endRow,
+   *       startCol: endCol,
+   *       endCol,
+   *     }));
+   *   },
+   * };
+   * ```
+   *
+   * ```html
+   * <hot-table [settings]="settings"></hot-table>
+   * ```
+   * :::
    */ 'modifyCopyableRange',
     /**
    * Fired by {@link CopyPaste} plugin before copying the values to the clipboard and before clearing values of
@@ -2035,8 +2170,8 @@
    *                       that correspond to the previously selected area.
    * @returns {*} If returns `false` then pasting is canceled.
    * @example
-   * ```js
    * ::: only-for javascript
+   * ```js
    * // To disregard a single row, remove it from array using data.splice(i, 1).
    * new Handsontable(example, {
    *   beforePaste: (data, coords) => {
@@ -2164,6 +2299,16 @@
    * @param {boolean} orderChanged Indicates if order of columns was changed by move.
    */ 'afterColumnMove',
     /**
+   * Fired by the {@link CustomBorders} plugin after all custom borders from the configuration have
+   * been applied. With [`customBordersProgressive`](@/api/options.md#custombordersprogressive)
+   * disabled it fires once, synchronously, right after the borders are built. With progressive
+   * application enabled it fires when the last background batch has been applied, signaling that
+   * `getBorders()` and the borders' cell meta are now complete.
+   *
+   * @since 18.1.0
+   * @event Hooks#afterCustomBordersUpdate
+   */ 'afterCustomBordersUpdate',
+    /**
    * Fired by the {@link ManualColumnFreeze} plugin, before unfreezing a column.
    *
    * @event Hooks#beforeColumnUnfreeze
@@ -2181,6 +2326,54 @@
    * @param {boolean} unfreezePerformed If `true`: the column got successfully unfrozen. If `false`: the column didn't get unfrozen.
    */ 'afterColumnUnfreeze',
     /**
+   * Fired by the {@link NestedRows} plugin before parent rows are collapsed. This hook is fired when the
+   * {@link Options#nestedRows} option is enabled.
+   *
+   * Returning `false` in the callback will prevent the collapsing action from completing.
+   *
+   * @event Hooks#beforeRowCollapse
+   * @since 18.1.0
+   * @param {Array} currentCollapsedRows A list of the physical indexes of the currently collapsed parent rows.
+   * @param {Array} destinationCollapsedRows A list of the physical indexes of the parent rows that will be collapsed.
+   * @param {boolean} collapsePossible `true`, if every provided index points at a row that has children, `false` otherwise.
+   * @returns {undefined|boolean} If the callback returns `false`, the collapsing action will not be completed.
+   */ 'beforeRowCollapse',
+    /**
+   * Fired by the {@link NestedRows} plugin after parent rows are collapsed. This hook is fired when the
+   * {@link Options#nestedRows} option is enabled.
+   *
+   * @event Hooks#afterRowCollapse
+   * @since 18.1.0
+   * @param {Array} currentCollapsedRows A list of the physical indexes of the parent rows that were collapsed before the action.
+   * @param {Array} destinationCollapsedRows A list of the physical indexes of the parent rows collapsed after the action.
+   * @param {boolean} collapsePossible `true`, if every provided index points at a row that has children, `false` otherwise.
+   * @param {boolean} successfullyCollapsed `true`, if the action changed the collapsed state, `false` otherwise.
+   */ 'afterRowCollapse',
+    /**
+   * Fired by the {@link NestedRows} plugin before parent rows are expanded. This hook is fired when the
+   * {@link Options#nestedRows} option is enabled.
+   *
+   * Returning `false` in the callback will prevent the expanding action from completing.
+   *
+   * @event Hooks#beforeRowExpand
+   * @since 18.1.0
+   * @param {Array} currentCollapsedRows A list of the physical indexes of the currently collapsed parent rows.
+   * @param {Array} destinationCollapsedRows A list of the physical indexes of the parent rows that will stay collapsed.
+   * @param {boolean} expandPossible `true`, if every provided index points at a row that has children, `false` otherwise.
+   * @returns {undefined|boolean} If the callback returns `false`, the expanding action will not be completed.
+   */ 'beforeRowExpand',
+    /**
+   * Fired by the {@link NestedRows} plugin after parent rows are expanded. This hook is fired when the
+   * {@link Options#nestedRows} option is enabled.
+   *
+   * @event Hooks#afterRowExpand
+   * @since 18.1.0
+   * @param {Array} currentCollapsedRows A list of the physical indexes of the parent rows that were collapsed before the action.
+   * @param {Array} destinationCollapsedRows A list of the physical indexes of the parent rows collapsed after the action.
+   * @param {boolean} expandPossible `true`, if every provided index points at a row that has children, `false` otherwise.
+   * @param {boolean} successfullyExpanded `true`, if the action changed the collapsed state, `false` otherwise.
+   */ 'afterRowExpand',
+    /**
    * Fired by {@link ManualRowMove} plugin before changing the order of the visual indexes. This hook is fired when
    * {@link Options#manualRowMove} option is enabled.
    *
@@ -2342,7 +2535,7 @@
    *
    * | Property     | Possible values                                                         | Description                                                                                                              |
    * | ------------ | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
-   * | `column`     | Number                                                                  | A visual index of the column to which the filter will be applied.                                                        |
+   * | `column`     | Number                                                                  | A physical index of the column to which the filter will be applied.                                                      |
    * | `conditions` | Array of objects                                                        | Each object represents one condition. For details, see [`addCondition()`](@/api/filters.md#addcondition).                |
    * | `operation`  | `'conjunction'` \| `'disjunction'` \| `'disjunctionWithExtraCondition'` | An operation to perform on your set of `conditions`. For details, see [`addCondition()`](@/api/filters.md#addcondition). |
    *
@@ -2400,7 +2593,7 @@
    *
    * | Property     | Possible values                                                         | Description                                                                                                              |
    * | ------------ | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
-   * | `column`     | Number                                                                  | A visual index of the column to which the filter was applied.                                                            |
+   * | `column`     | Number                                                                  | A physical index of the column to which the filter was applied.                                                          |
    * | `conditions` | Array of objects                                                        | Each object represents one condition. For details, see [`addCondition()`](@/api/filters.md#addcondition).                |
    * | `operation`  | `'conjunction'` \| `'disjunction'` \| `'disjunctionWithExtraCondition'` | An operation to perform on your set of `conditions`. For details, see [`addCondition()`](@/api/filters.md#addcondition). |
    *
@@ -2510,6 +2703,10 @@
    *
    * This hook gets also fired on Handsontable's initialization, returning the addresses and values of all cells.
    *
+   * The `row` and `col` of each address are HyperFormula engine indexes, not Handsontable visual indexes.
+   * They match Handsontable's physical and visual indexes only when no rows or columns are moved, trimmed, or hidden.
+   * Once you reorder, trim, or hide rows or columns, the engine indexes diverge from the visual ones.
+   *
    * Read more:
    * - [Guides: Formula calculation](@/guides/formulas/formula-calculation/formula-calculation.md)
    * - [HyperFormula documentation: `valuesUpdated`](https://hyperformula.handsontable.com/api/interfaces/listeners.html#valuesupdated)
@@ -2521,6 +2718,12 @@
     /**
    * Fired by the {@link Formulas} plugin when a named expression is added to the engine instance.
    *
+   * This hook fires after the HyperFormula engine's `addNamedExpression()` method runs, either
+   * because you called it directly or because you defined the `namedExpressions` configuration option.
+   *
+   * Read more:
+   * - [HyperFormula documentation: `addNamedExpression`](https://hyperformula.handsontable.com/api/classes/hyperformula.html#addnamedexpression)
+   *
    * @since 9.0.0
    * @event Hooks#afterNamedExpressionAdded
    * @param {string} namedExpressionName The name of the added expression.
@@ -2529,6 +2732,11 @@
     /**
    * Fired by the {@link Formulas} plugin when a named expression is removed from the engine instance.
    *
+   * This hook fires after the HyperFormula engine's `removeNamedExpression()` method runs.
+   *
+   * Read more:
+   * - [HyperFormula documentation: `removeNamedExpression`](https://hyperformula.handsontable.com/api/classes/hyperformula.html#removenamedexpression)
+   *
    * @since 9.0.0
    * @event Hooks#afterNamedExpressionRemoved
    * @param {string} namedExpressionName The name of the removed expression.
@@ -2537,6 +2745,14 @@
     /**
    * Fired by the {@link Formulas} plugin when a new sheet is added to the engine instance.
    *
+   * The {@link Formulas} plugin creates a sheet on Handsontable's initialization (using the sheet name from
+   * {@link Options#formulas}, or a name auto-generated by HyperFormula, e.g. `Sheet1`, if none was provided), so
+   * this hook also fires once during initialization, before any user-triggered sheet additions.
+   *
+   * Read more:
+   * - [Guides: Formula calculation](@/guides/formulas/formula-calculation/formula-calculation.md)
+   * - [HyperFormula documentation: `sheetAdded`](https://hyperformula.handsontable.com/api/interfaces/listeners.html#sheetadded)
+   *
    * @since 9.0.0
    * @event Hooks#afterSheetAdded
    * @param {string} addedSheetDisplayName The name of the added sheet.
@@ -2544,6 +2760,10 @@
     /**
    * Fired by the {@link Formulas} plugin when a sheet in the engine instance is renamed.
    *
+   * Read more:
+   * - [Guides: Formula calculation](@/guides/formulas/formula-calculation/formula-calculation.md)
+   * - [HyperFormula documentation: `sheetRenamed`](https://hyperformula.handsontable.com/api/interfaces/listeners.html#sheetrenamed)
+   *
    * @since 9.0.0
    * @event Hooks#afterSheetRenamed
    * @param {string} oldDisplayName The old name of the sheet.
@@ -2552,6 +2772,10 @@
     /**
    * Fired by the {@link Formulas} plugin when a sheet is removed from the engine instance.
    *
+   * Read more:
+   * - [Guides: Formula calculation](@/guides/formulas/formula-calculation/formula-calculation.md)
+   * - [HyperFormula documentation: `sheetRemoved`](https://hyperformula.handsontable.com/api/interfaces/listeners.html#sheetremoved)
+   *
    * @since 9.0.0
    * @event Hooks#afterSheetRemoved
    * @param {string} removedSheetDisplayName The removed sheet name.
@@ -2563,6 +2787,20 @@
    * @event Hooks#modifyColumnHeaderHeight
    */ 'modifyColumnHeaderHeight',
     /**
+   * Fired while resolving whether the table renders in a single pass.
+   *
+   * Single-pass rendering predicts, from the row/column sizes and the container box, whether
+   * scrollbars will appear and then renders once — instead of rendering, measuring the result, and
+   * re-rendering. Return `false` to force the legacy measure-then-render path for the table. A feature
+   * whose content size depends on the viewport that is being computed (for example, merged cells) opts
+   * out this way; user code can also return `false` to disable single-pass rendering.
+   *
+   * @since 18.1.0
+   * @event Hooks#modifySinglePassLayout
+   * @param {boolean} singlePassLayout `true` when single-pass rendering is currently enabled.
+   * @returns {boolean|void} Return `false` to force the legacy measure-then-render path.
+   */ 'modifySinglePassLayout',
+    /**
    * Fired while retrieving a column header's value.
    *
    * @since 12.3.0

package/core/hooks/index.js

@@ -46,9 +46,14 @@ function _class_private_method_init(obj, privateSet) {
   Please consult release notes https://github.com/handsontable/handsontable/releases/tag/[removedInVersion] to\x20
   learn about the migration path.`;
 var /**
-   * Runs all callbacks from a single handler list (global or local), threading the return value through p1.
+   * Runs all callbacks from a single hook list (global or local), threading the return value through p1.
    *
-   * @param {Array|null} handlers The list of hook entries to iterate.
+   * Walks the intrusive linked list from `head`. The `tail` captured at loop start is the boundary: hooks
+   * appended DURING this run (after the boundary) do not fire this run, matching the previous array's
+   * frozen-length behavior. `entry.next` is read fresh after each callback so a later entry removed mid-run
+   * is skipped; `remove()` never nulls a removed node's `next`, so a callback removing itself still advances.
+   *
+   * @param {object|null} list The hook list to iterate (or null when the hook has no collection).
    * @param {object} context Handsontable instance used as `this` for each callback.
    * @param {string} key Hook/Event name.
    * @param {object|null} removeContext Context passed to `remove` — null for global handlers.
@@ -224,8 +229,8 @@ class Hooks {
    * Handsontable.hooks.run(hot, 'beforeInit');
    * ```
    */ run(context, key, p1, p2, p3, p4, p5, p6) {
-        p1 = _class_private_method_get(this, _runHandlers, runHandlers).call(this, this.getBucket().getHooks(key), context, key, null, p1, p2, p3, p4, p5, p6);
-        p1 = _class_private_method_get(this, _runHandlers, runHandlers).call(this, this.getBucket(context).getHooks(key), context, key, context, p1, p2, p3, p4, p5, p6);
+        p1 = _class_private_method_get(this, _runHandlers, runHandlers).call(this, this.getBucket().getList(key), context, key, null, p1, p2, p3, p4, p5, p6);
+        p1 = _class_private_method_get(this, _runHandlers, runHandlers).call(this, this.getBucket(context).getList(key), context, key, context, p1, p2, p3, p4, p5, p6);
         return p1;
     }
     /**
@@ -334,25 +339,25 @@ class Hooks {
    */ this.globalBucket = new _bucket.HooksBucket();
     }
 }
-function runHandlers(handlers, context, key, removeContext, p1, p2, p3, p4, p5, p6) {
-    const length = handlers ? handlers.length : 0;
-    let index = 0;
-    if (length) {
-        // Do not optimize this loop with arrayEach or arrow function! If you do You'll decrease perf because of GC.
-        while(index < length){
-            if (!handlers[index] || handlers[index].skip) {
-                index += 1;
-                continue;
-            }
-            const res = (0, _function.fastCall)(handlers[index].callback, context, p1, p2, p3, p4, p5, p6);
-            if (res !== undefined) {
-                p1 = res;
-            }
-            if (handlers[index] && handlers[index].runOnce) {
-                this.remove(key, handlers[index].callback, removeContext);
-            }
-            index += 1;
+function runHandlers(list, context, key, removeContext, p1, p2, p3, p4, p5, p6) {
+    if (list === null || list.head === null) {
+        return p1;
+    }
+    let entry = list.head;
+    const boundary = list.tail;
+    // Do not optimize this loop with arrayEach or arrow function! If you do You'll decrease perf because of GC.
+    while(entry !== null){
+        const res = (0, _function.fastCall)(entry.callback, context, p1, p2, p3, p4, p5, p6);
+        if (res !== undefined) {
+            p1 = res;
+        }
+        if (entry.runOnce) {
+            this.remove(key, entry.callback, removeContext);
+        }
+        if (entry === boundary) {
+            break;
         }
+        entry = entry.next;
     }
     return p1;
 }

package/core/hooks/index.mjs

@@ -28,9 +28,14 @@ import { HooksBucket } from './bucket.mjs';
   Please consult release notes https://github.com/handsontable/handsontable/releases/tag/[removedInVersion] to\x20
   learn about the migration path.`;
 var /**
-   * Runs all callbacks from a single handler list (global or local), threading the return value through p1.
+   * Runs all callbacks from a single hook list (global or local), threading the return value through p1.
    *
-   * @param {Array|null} handlers The list of hook entries to iterate.
+   * Walks the intrusive linked list from `head`. The `tail` captured at loop start is the boundary: hooks
+   * appended DURING this run (after the boundary) do not fire this run, matching the previous array's
+   * frozen-length behavior. `entry.next` is read fresh after each callback so a later entry removed mid-run
+   * is skipped; `remove()` never nulls a removed node's `next`, so a callback removing itself still advances.
+   *
+   * @param {object|null} list The hook list to iterate (or null when the hook has no collection).
    * @param {object} context Handsontable instance used as `this` for each callback.
    * @param {string} key Hook/Event name.
    * @param {object|null} removeContext Context passed to `remove` — null for global handlers.
@@ -210,8 +215,8 @@ var /**
    * Handsontable.hooks.run(hot, 'beforeInit');
    * ```
    */ run(context, key, p1, p2, p3, p4, p5, p6) {
-        p1 = _class_private_method_get(this, _runHandlers, runHandlers).call(this, this.getBucket().getHooks(key), context, key, null, p1, p2, p3, p4, p5, p6);
-        p1 = _class_private_method_get(this, _runHandlers, runHandlers).call(this, this.getBucket(context).getHooks(key), context, key, context, p1, p2, p3, p4, p5, p6);
+        p1 = _class_private_method_get(this, _runHandlers, runHandlers).call(this, this.getBucket().getList(key), context, key, null, p1, p2, p3, p4, p5, p6);
+        p1 = _class_private_method_get(this, _runHandlers, runHandlers).call(this, this.getBucket(context).getList(key), context, key, context, p1, p2, p3, p4, p5, p6);
         return p1;
     }
     /**
@@ -320,25 +325,25 @@ var /**
    */ this.globalBucket = new HooksBucket();
     }
 }
-function runHandlers(handlers, context, key, removeContext, p1, p2, p3, p4, p5, p6) {
-    const length = handlers ? handlers.length : 0;
-    let index = 0;
-    if (length) {
-        // Do not optimize this loop with arrayEach or arrow function! If you do You'll decrease perf because of GC.
-        while(index < length){
-            if (!handlers[index] || handlers[index].skip) {
-                index += 1;
-                continue;
-            }
-            const res = fastCall(handlers[index].callback, context, p1, p2, p3, p4, p5, p6);
-            if (res !== undefined) {
-                p1 = res;
-            }
-            if (handlers[index] && handlers[index].runOnce) {
-                this.remove(key, handlers[index].callback, removeContext);
-            }
-            index += 1;
+function runHandlers(list, context, key, removeContext, p1, p2, p3, p4, p5, p6) {
+    if (list === null || list.head === null) {
+        return p1;
+    }
+    let entry = list.head;
+    const boundary = list.tail;
+    // Do not optimize this loop with arrayEach or arrow function! If you do You'll decrease perf because of GC.
+    while(entry !== null){
+        const res = fastCall(entry.callback, context, p1, p2, p3, p4, p5, p6);
+        if (res !== undefined) {
+            p1 = res;
+        }
+        if (entry.runOnce) {
+            this.remove(key, entry.callback, removeContext);
+        }
+        if (entry === boundary) {
+            break;
         }
+        entry = entry.next;
     }
     return p1;
 }

package/core/layout/constants.d.ts

@@ -23,3 +23,14 @@ export type LayoutSide = LayoutSlotName;
  * border styling.
  */
 export declare const SLOT_ITEM_CLASS = "ht-slot-element";
+/**
+ * Returns the class mirrored onto the root wrapper while the given slot holds at least one slot
+ * item. The stylesheets select on this class instead of
+ * `.ht-root-wrapper:has(> .ht-slot-<name> > .ht-slot-element)` — a `:has()` selector here makes
+ * the browser re-run style invalidation on every grid DOM mutation (every scroll re-render), at a
+ * cost that scales with the whole host page.
+ *
+ * @param {LayoutSlotName} name The slot name.
+ * @returns {string} The state class for the slot.
+ */
+export declare function getSlotFilledClassName(name: LayoutSlotName): string;

package/core/layout/constants.js

@@ -20,6 +20,9 @@ _export(exports, {
     },
     get SLOT_ITEM_CLASS () {
         return SLOT_ITEM_CLASS;
+    },
+    get getSlotFilledClassName () {
+        return getSlotFilledClassName;
     }
 });
 const LAYOUT_SLOTS = {
@@ -27,3 +30,6 @@ const LAYOUT_SLOTS = {
     BOTTOM: 'bottom'
 };
 const SLOT_ITEM_CLASS = 'ht-slot-element';
+function getSlotFilledClassName(name) {
+    return `ht-slot-${name}-filled`;
+}

package/core/layout/constants.mjs

@@ -12,3 +12,15 @@
  * Class added to every element registered in a slot (top/bottom). It carries the shared slot-item
  * border styling.
  */ export const SLOT_ITEM_CLASS = 'ht-slot-element';
+/**
+ * Returns the class mirrored onto the root wrapper while the given slot holds at least one slot
+ * item. The stylesheets select on this class instead of
+ * `.ht-root-wrapper:has(> .ht-slot-<name> > .ht-slot-element)` — a `:has()` selector here makes
+ * the browser re-run style invalidation on every grid DOM mutation (every scroll re-render), at a
+ * cost that scales with the whole host page.
+ *
+ * @param {LayoutSlotName} name The slot name.
+ * @returns {string} The state class for the slot.
+ */ export function getSlotFilledClassName(name) {
+    return `ht-slot-${name}-filled`;
+}

package/core/layout/domSlot.d.ts

@@ -11,9 +11,11 @@ export declare class DomSlot {
      * @param {HTMLElement} parent The slot container element.
      * @param {object} [options] Slot options.
      * @param {string} [options.itemClass=''] Class added to every registered element.
+     * @param {Function} [options.onContentChange] Called after any registered-content mutation.
      */
-    constructor(parent: HTMLElement, { itemClass }?: {
+    constructor(parent: HTMLElement, { itemClass, onContentChange }?: {
         itemClass?: string;
+        onContentChange?: () => void;
     });
     /**
      * Returns the slot container element.