handsontable 0.0.0-next-2ae8e35-20240613 → 0.0.0-next-fd8b2aa-20240614

package/dist/handsontable.full.js

@@ -25,8 +25,8 @@
  * INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM
  * USE OR INABILITY TO USE THIS SOFTWARE.
  *
- * Version: 0.0.0-next-2ae8e35-20240613
- * Release date: 11/06/2024 (built at 13/06/2024 12:10:26)
+ * Version: 0.0.0-next-fd8b2aa-20240614
+ * Release date: 11/06/2024 (built at 14/06/2024 07:52:59)
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -42675,8 +42675,8 @@ Handsontable.hooks = _pluginHooks.default.getSingleton();
 Handsontable.CellCoords = _src.CellCoords;
 Handsontable.CellRange = _src.CellRange;
 Handsontable.packageName = 'handsontable';
-Handsontable.buildDate = "13/06/2024 12:10:26";
-Handsontable.version = "0.0.0-next-2ae8e35-20240613";
+Handsontable.buildDate = "14/06/2024 07:52:59";
+Handsontable.version = "0.0.0-next-fd8b2aa-20240614";
 Handsontable.languages = {
   dictionaryKeys: _registry.dictionaryKeys,
   getLanguageDictionary: _registry.getLanguageDictionary,
@@ -46234,12 +46234,6 @@ function Core(rootElement, userSettings) {
    * @returns {number}
    */
   this._getRowHeightFromSettings = function (row) {
-    // let cellProperties = instance.getCellMeta(row, 0);
-    // let height = cellProperties.height;
-    //
-    // if (height === undefined || height === tableMeta.height) {
-    //  height = cellProperties.rowHeights;
-    // }
     let height = tableMeta.rowHeights;
     if (height !== undefined && height !== null) {
       switch (typeof height) {
@@ -53294,7 +53288,7 @@ const domMessages = {
 function _injectProductInfo(key, element) {
   const hasValidType = !isEmpty(key);
   const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
-  const hotVersion = "0.0.0-next-2ae8e35-20240613";
+  const hotVersion = "0.0.0-next-fd8b2aa-20240614";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';
@@ -63895,6 +63889,17 @@ const REGISTERED_HOOKS = [/* eslint-disable jsdoc/require-description-complete-s
  * @param {number} row Visual row index.
  */
 'modifyRowHeight',
+/**
+ * Fired when a row height is about to be modified by a callback function. The hook allows to change the row height
+ * for the specified overlay type.
+ *
+ * @since 14.5.0
+ * @event Hooks#modifyRowHeightByOverlayName
+ * @param {number} height Row height.
+ * @param {number} row Visual row index.
+ * @param {'inline_start'|'top'|'top_inline_start_corner'|'bottom'|'bottom_inline_start_corner'|'master'} overlayName Overlay name.
+ */
+'modifyRowHeightByOverlayName',
 /**
  * Fired when a data was retrieved or modified.
  *
@@ -67916,7 +67921,7 @@ class TableView {
       // immediate click on "holder" means click on the right side of vertical scrollbar
       const {
         holder
-      } = this.hot.view._wt.wtTable;
+      } = this._wt.wtTable;
       if (next === holder) {
         const scrollbarWidth = (0, _element.getScrollbarWidth)(rootDocument);
         if (rootDocument.elementFromPoint(eventX + scrollbarWidth, eventY) !== holder || rootDocument.elementFromPoint(eventX, eventY + scrollbarWidth) !== holder) {
@@ -68263,6 +68268,11 @@ class TableView {
         const visualIndex = this.hot.rowIndexMapper.getVisualFromRenderableIndex(renderedRowIndex);
         return this.hot.getRowHeight(visualIndex === null ? renderedRowIndex : visualIndex);
       },
+      rowHeightByOverlayName: (renderedRowIndex, overlayType) => {
+        const visualIndex = this.hot.rowIndexMapper.getVisualFromRenderableIndex(renderedRowIndex);
+        const visualRowIndex = visualIndex === null ? renderedRowIndex : visualIndex;
+        return this.hot.runHooks('modifyRowHeightByOverlayName', this.hot.getRowHeight(visualRowIndex), visualRowIndex, overlayType);
+      },
       cellRenderer: (renderedRowIndex, renderedColumnIndex, TD) => {
         const [visualRowIndex, visualColumnIndex] = this.translateFromRenderableToVisualIndex(renderedRowIndex, renderedColumnIndex);
 
@@ -68591,7 +68601,7 @@ class TableView {
     if ((0, _element.isInput)(el)) {
       return true;
     }
-    const isChildOfTableBody = (0, _element.isChildOf)(el, this.hot.view._wt.wtTable.spreader);
+    const isChildOfTableBody = (0, _element.isChildOf)(el, this._wt.wtTable.spreader);
     if (this.settings.fragmentSelection === true && isChildOfTableBody) {
       return true;
     }
@@ -68822,75 +68832,119 @@ class TableView {
   }
 
   /**
-   * Returns the first fully visible row in the table viewport.
+   * Returns the first rendered row in the DOM (usually is not visible).
+   *
+   * @returns {number}
+   */
+  getFirstRenderedVisibleRow() {
+    return this.hot.rowIndexMapper.getVisualFromRenderableIndex(this._wt.wtTable.getFirstRenderedRow());
+  }
+
+  /**
+   * Returns the last rendered row in the DOM (usually is not visible).
+   *
+   * @returns {number}
+   */
+  getLastRenderedVisibleRow() {
+    return this.hot.rowIndexMapper.getVisualFromRenderableIndex(this._wt.wtTable.getLastRenderedRow());
+  }
+
+  /**
+   * Returns the first rendered column in the DOM (usually is not visible).
+   *
+   * @returns {number}
+   */
+  getFirstRenderedVisibleColumn() {
+    return this.hot.columnIndexMapper.getVisualFromRenderableIndex(this._wt.wtTable.getFirstRenderedColumn());
+  }
+
+  /**
+   * Returns the last rendered column in the DOM (usually is not visible).
+   *
+   * @returns {number}
+   */
+  getLastRenderedVisibleColumn() {
+    return this.hot.columnIndexMapper.getVisualFromRenderableIndex(this._wt.wtTable.getLastRenderedColumn());
+  }
+
+  /**
+   * Returns the first fully visible row in the table viewport. When the table has overlays the method returns
+   * the first row of the master table that is not overlapped by overlay.
    *
    * @returns {number}
    */
   getFirstFullyVisibleRow() {
-    return this.hot.rowIndexMapper.getVisualFromRenderableIndex(this.hot.view._wt.wtScroll.getFirstVisibleRow());
+    return this.hot.rowIndexMapper.getVisualFromRenderableIndex(this._wt.wtScroll.getFirstVisibleRow());
   }
 
   /**
-   * Returns the last fully visible row in the table viewport.
+   * Returns the last fully visible row in the table viewport. When the table has overlays the method returns
+   * the first row of the master table that is not overlapped by overlay.
    *
    * @returns {number}
    */
   getLastFullyVisibleRow() {
-    return this.hot.rowIndexMapper.getVisualFromRenderableIndex(this.hot.view._wt.wtScroll.getLastVisibleRow());
+    return this.hot.rowIndexMapper.getVisualFromRenderableIndex(this._wt.wtScroll.getLastVisibleRow());
   }
 
   /**
-   * Returns the first fully visible column in the table viewport.
+   * Returns the first fully visible column in the table viewport. When the table has overlays the method returns
+   * the first row of the master table that is not overlapped by overlay.
    *
    * @returns {number}
    */
   getFirstFullyVisibleColumn() {
-    return this.hot.columnIndexMapper.getVisualFromRenderableIndex(this.hot.view._wt.wtScroll.getFirstVisibleColumn());
+    return this.hot.columnIndexMapper.getVisualFromRenderableIndex(this._wt.wtScroll.getFirstVisibleColumn());
   }
 
   /**
-   * Returns the last fully visible column in the table viewport.
+   * Returns the last fully visible column in the table viewport. When the table has overlays the method returns
+   * the first row of the master table that is not overlapped by overlay.
    *
    * @returns {number}
    */
   getLastFullyVisibleColumn() {
-    return this.hot.columnIndexMapper.getVisualFromRenderableIndex(this.hot.view._wt.wtScroll.getLastVisibleColumn());
+    return this.hot.columnIndexMapper.getVisualFromRenderableIndex(this._wt.wtScroll.getLastVisibleColumn());
   }
 
   /**
-   * Returns the first partially visible row in the table viewport.
+   * Returns the first partially visible row in the table viewport. When the table has overlays the method returns
+   * the first row of the master table that is not overlapped by overlay.
    *
    * @returns {number}
    */
   getFirstPartiallyVisibleRow() {
-    return this.hot.rowIndexMapper.getVisualFromRenderableIndex(this.hot.view._wt.wtScroll.getFirstPartiallyVisibleRow());
+    return this.hot.rowIndexMapper.getVisualFromRenderableIndex(this._wt.wtScroll.getFirstPartiallyVisibleRow());
   }
 
   /**
-   * Returns the last partially visible row in the table viewport.
+   * Returns the last partially visible row in the table viewport. When the table has overlays the method returns
+   * the first row of the master table that is not overlapped by overlay.
    *
    * @returns {number}
    */
   getLastPartiallyVisibleRow() {
-    return this.hot.rowIndexMapper.getVisualFromRenderableIndex(this.hot.view._wt.wtScroll.getLastPartiallyVisibleRow());
+    return this.hot.rowIndexMapper.getVisualFromRenderableIndex(this._wt.wtScroll.getLastPartiallyVisibleRow());
   }
 
   /**
-   * Returns the first partially visible column in the table viewport.
+   * Returns the first partially visible column in the table viewport. When the table has overlays the method returns
+   * the first row of the master table that is not overlapped by overlay.
    *
    * @returns {number}
    */
   getFirstPartiallyVisibleColumn() {
-    return this.hot.columnIndexMapper.getVisualFromRenderableIndex(this.hot.view._wt.wtScroll.getFirstPartiallyVisibleColumn());
+    return this.hot.columnIndexMapper.getVisualFromRenderableIndex(this._wt.wtScroll.getFirstPartiallyVisibleColumn());
   }
 
   /**
-   * Returns the last partially visible column in the table viewport.
+   * Returns the last partially visible column in the table viewport. When the table has overlays the method returns
+   * the first row of the master table that is not overlapped by overlay.
    *
    * @returns {number}
    */
   getLastPartiallyVisibleColumn() {
-    return this.hot.columnIndexMapper.getVisualFromRenderableIndex(this.hot.view._wt.wtScroll.getLastPartiallyVisibleColumn());
+    return this.hot.columnIndexMapper.getVisualFromRenderableIndex(this._wt.wtScroll.getLastPartiallyVisibleColumn());
   }
 
   /**
@@ -68919,7 +68973,7 @@ class TableView {
    * @returns {number}
    */
   getViewportWidth() {
-    return this.hot.view._wt.wtViewport.getViewportWidth();
+    return this._wt.wtViewport.getViewportWidth();
   }
 
   /**
@@ -68928,7 +68982,7 @@ class TableView {
    * @returns {number}
    */
   getWorkspaceWidth() {
-    return this.hot.view._wt.wtViewport.getWorkspaceWidth();
+    return this._wt.wtViewport.getWorkspaceWidth();
   }
 
   /**
@@ -68939,7 +68993,7 @@ class TableView {
    * @returns {number}
    */
   getViewportHeight() {
-    return this.hot.view._wt.wtViewport.getViewportHeight();
+    return this._wt.wtViewport.getViewportHeight();
   }
 
   /**
@@ -68948,7 +69002,28 @@ class TableView {
    * @returns {number}
    */
   getWorkspaceHeight() {
-    return this.hot.view._wt.wtViewport.getWorkspaceHeight();
+    return this._wt.wtViewport.getWorkspaceHeight();
+  }
+
+  /**
+   * Checks to what overlay the provided element belongs.
+   *
+   * @param {HTMLElement} element The DOM element to check.
+   * @returns {'master'|'inline_start'|'top'|'top_inline_start_corner'|'bottom'|'bottom_inline_start_corner'}
+   */
+  getElementOverlayName(element) {
+    var _this$_wt$wtOverlays$;
+    return ((_this$_wt$wtOverlays$ = this._wt.wtOverlays.getParentOverlay(element)) !== null && _this$_wt$wtOverlays$ !== void 0 ? _this$_wt$wtOverlays$ : this._wt).wtTable.name;
+  }
+
+  /**
+   * Gets the overlay instance by its name.
+   *
+   * @param {'inline_start'|'top'|'top_inline_start_corner'|'bottom'|'bottom_inline_start_corner'} overlayName The overlay name.
+   * @returns {Overlay | null}
+   */
+  getOverlayByName(overlayName) {
+    return this._wt.getOverlayByName(overlayName);
   }
   /**
    * Destroys internal WalkOnTable's instance. Detaches all of the bonded listeners.
@@ -70858,6 +70933,9 @@ class WalkontableFacade {
   getOverlayName() {
     return this._wot.cloneOverlay ? this._wot.cloneOverlay.type : 'master';
   }
+  getOverlayByName(overlayName) {
+    return this._wot.getOverlayByName(overlayName);
+  }
   exportSettingsAsClassNames() {
     return this._wot.exportSettingsAsClassNames();
   }
@@ -70889,6 +70967,7 @@ exports.__esModule = true;
 __webpack_require__(286);
 var _event = _interopRequireDefault(__webpack_require__(530));
 var _overlays = _interopRequireDefault(__webpack_require__(531));
+var _overlay = __webpack_require__(532);
 var _settings = _interopRequireDefault(__webpack_require__(583));
 var _master = _interopRequireDefault(__webpack_require__(584));
 var _viewport = _interopRequireDefault(__webpack_require__(585));
@@ -70939,6 +71018,21 @@ class Walkontable extends _base.default {
     (0, _element.addClass)(this.wtTable.wtRootElement.parentNode, newClassNames);
   }
 
+  /**
+   * Gets the overlay instance by its name.
+   *
+   * @param {'inline_start'|'top'|'top_inline_start_corner'|'bottom'|'bottom_inline_start_corner'} overlayName The overlay name.
+   * @returns {Overlay | null}
+   */
+  getOverlayByName(overlayName) {
+    var _this$wtOverlays;
+    if (!_overlay.CLONE_TYPES.includes(overlayName)) {
+      return null;
+    }
+    const camelCaseOverlay = overlayName.replace(/_([a-z])/g, match => match[1].toUpperCase());
+    return (_this$wtOverlays = this.wtOverlays[`${camelCaseOverlay}Overlay`]) !== null && _this$wtOverlays !== void 0 ? _this$wtOverlays : null;
+  }
+
   /**
    * @returns {ViewportDao}
    */
@@ -72595,7 +72689,7 @@ class Table {
           this.tableRenderer.setHeaderContentRenderers(rowHeaders, []);
         }
         this.resetOversizedRows();
-        this.tableRenderer.setViewportSize(this.getRenderedRowsCount(), this.getRenderedColumnsCount()).setFilters(this.rowFilter, this.columnFilter).render();
+        this.tableRenderer.setActiveOverlayName(this.name).setViewportSize(this.getRenderedRowsCount(), this.getRenderedColumnsCount()).setFilters(this.rowFilter, this.columnFilter).render();
         let workspaceWidth;
         if (this.isMaster) {
           workspaceWidth = this.dataAccessObject.workspaceWidth;
@@ -73582,6 +73676,17 @@ class Renderer {
     this.renderer.setAxisUtils(rowUtils, columnUtils);
   }
 
+  /**
+   * Sets the overlay that is currently rendered. If `null` is provided, the master overlay is set.
+   *
+   * @param {'inline_start'|'top'|'top_inline_start_corner'|'bottom'|'bottom_inline_start_corner'|'master'} overlayName The overlay name.
+   * @returns {Renderer}
+   */
+  setActiveOverlayName(overlayName) {
+    this.renderer.setActiveOverlayName(overlayName);
+    return this;
+  }
+
   /**
    * Sets filter calculators for newly calculated row and column position. The filters are used to transform visual
    * indexes (0 to N) to source indexes provided by Handsontable.
@@ -74912,11 +75017,26 @@ class TableRenderer {
      * @type {Function}
      */
     (0, _defineProperty2.default)(this, "cellRenderer", void 0);
+    /**
+     * Holds the name of the currently active overlay.
+     *
+     * @type {'inline_start'|'top'|'top_inline_start_corner'|'bottom'|'bottom_inline_start_corner'|'master'}
+     */
+    (0, _defineProperty2.default)(this, "activeOverlayName", void 0);
     this.rootNode = rootNode;
     this.rootDocument = this.rootNode.ownerDocument;
     this.cellRenderer = cellRenderer;
   }
 
+  /**
+   * Sets the overlay that is currently rendered. If `null` is provided, the master overlay is set.
+   *
+   * @param {'inline_start'|'top'|'top_inline_start_corner'|'bottom'|'bottom_inline_start_corner'|'master'} overlayName The overlay name.
+   */
+  setActiveOverlayName(overlayName) {
+    this.activeOverlayName = overlayName;
+  }
+
   /**
    * Set row and column util classes.
    *
@@ -75050,7 +75170,7 @@ class TableRenderer {
       const TR = rows.getRenderedNode(visibleRowIndex);
       if (TR.firstChild) {
         const sourceRowIndex = this.renderedRowToSource(visibleRowIndex);
-        const rowHeight = this.rowUtils.getHeight(sourceRowIndex);
+        const rowHeight = this.rowUtils.getHeightByOverlayName(sourceRowIndex, this.activeOverlayName);
         if (rowHeight) {
           // Decrease height. 1 pixel will be "replaced" by 1px border top
           TR.firstChild.style.height = `${rowHeight - 1}px`;
@@ -75457,6 +75577,22 @@ class RowUtils {
     }
     return height;
   }
+
+  /**
+   * Returns row height based on passed source index for the specified overlay type.
+   *
+   * @param {number} sourceIndex Row source index.
+   * @param {'inline_start'|'top'|'top_inline_start_corner'|'bottom'|'bottom_inline_start_corner'|'master'} overlayName The overlay name.
+   * @returns {number}
+   */
+  getHeightByOverlayName(sourceIndex, overlayName) {
+    let height = this.wtSettings.getSetting('rowHeightByOverlayName', sourceIndex, overlayName);
+    const oversizedHeight = this.dataAccessObject.wtViewport.oversizedRows[sourceIndex];
+    if (oversizedHeight !== undefined) {
+      height = height === undefined ? oversizedHeight : Math.max(height, oversizedHeight);
+    }
+    return height;
+  }
 }
 exports["default"] = RowUtils;
 
@@ -80087,7 +80223,8 @@ var _object = __webpack_require__(482);
  * @property {Option} renderAllColumns Option `renderAllColumns`.
  * @property {Option} renderAllRows Option `renderAllRows`.
  * @property {Option} rowHeaders Option `rowHeaders`.
- * @property {Option} rowHeight Option `,`.
+ * @property {Option} rowHeightOption `rowHeight`.
+ * @property {Option} rowHeightByOverlayName Option `rowHeightByOverlayName`.
  * @property {Option} shouldRenderBottomOverlay Option `shouldRenderBottomOverlay`.
  * @property {Option} shouldRenderInlineStartOverlay Option `shouldRenderInlineStartOverlay`.
  * @property {Option} shouldRenderTopOverlay Option `shouldRenderTopOverlay`.
@@ -80231,6 +80368,9 @@ class Settings {
       rowHeight() {
         // return undefined means use default size for the rendered cell content
       },
+      rowHeightByOverlayName() {
+        // return undefined means use default size for the rendered cell content
+      },
       defaultRowHeight: 23,
       defaultColumnWidth: 50,
       selections: null,
@@ -131261,18 +131401,18 @@ var _base = __webpack_require__(806);
 var _pluginHooks = _interopRequireDefault(__webpack_require__(494));
 var _cellsCollection = _interopRequireDefault(__webpack_require__(1000));
 var _cellCoords = _interopRequireDefault(__webpack_require__(1001));
-var _autofill = _interopRequireDefault(__webpack_require__(1003));
-var _selection = _interopRequireDefault(__webpack_require__(1004));
-var _toggleMerge = _interopRequireDefault(__webpack_require__(1005));
+var _autofill = _interopRequireDefault(__webpack_require__(1002));
+var _selection = _interopRequireDefault(__webpack_require__(1003));
+var _toggleMerge = _interopRequireDefault(__webpack_require__(1004));
 var _array = __webpack_require__(478);
 var _object = __webpack_require__(482);
 var _console = __webpack_require__(500);
 var _number = __webpack_require__(512);
-var _utils = __webpack_require__(1002);
-__webpack_require__(1006);
+__webpack_require__(1005);
 var _element = __webpack_require__(334);
 var _browser = __webpack_require__(481);
-var _focusOrder2 = __webpack_require__(1007);
+var _focusOrder2 = __webpack_require__(1006);
+var _renderer = __webpack_require__(1008);
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
@@ -131327,6 +131467,7 @@ const SHORTCUTS_GROUP = PLUGIN_KEY;
 var _lastSelectedFocus = /*#__PURE__*/new WeakMap();
 var _lastFocusDelta = /*#__PURE__*/new WeakMap();
 var _focusOrder = /*#__PURE__*/new WeakMap();
+var _cellRenderer = /*#__PURE__*/new WeakMap();
 var _MergeCells_brand = /*#__PURE__*/new WeakSet();
 class MergeCells extends _base.BasePlugin {
   constructor() {
@@ -131383,6 +131524,12 @@ class MergeCells extends _base.BasePlugin {
       rowIndexMapper: this.hot.rowIndexMapper,
       columnIndexMapper: this.hot.columnIndexMapper
     }));
+    /**
+     * The cell renderer responsible for rendering the merged cells.
+     *
+     * @type {{before: Function, after: Function}}
+     */
+    _classPrivateFieldInitSpec(this, _cellRenderer, (0, _renderer.createMergeCellRenderer)(this));
   }
   static get PLUGIN_KEY() {
     return PLUGIN_KEY;
@@ -131484,94 +131631,97 @@ class MergeCells extends _base.BasePlugin {
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterIsMultipleSelection).call(_this, ...args);
     });
     this.addHook('afterRenderer', function () {
+      return _classPrivateFieldGet(_cellRenderer, _this).after(...arguments);
+    });
+    this.addHook('afterContextMenuDefaultOptions', function () {
       for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
         args[_key13] = arguments[_key13];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onAfterRenderer).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _addMergeActionsToContextMenu).call(_this, ...args);
     });
-    this.addHook('afterContextMenuDefaultOptions', function () {
+    this.addHook('afterGetCellMeta', function () {
       for (var _len14 = arguments.length, args = new Array(_len14), _key14 = 0; _key14 < _len14; _key14++) {
         args[_key14] = arguments[_key14];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _addMergeActionsToContextMenu).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onAfterGetCellMeta).call(_this, ...args);
     });
-    this.addHook('afterGetCellMeta', function () {
+    this.addHook('afterViewportRowCalculatorOverride', function () {
       for (var _len15 = arguments.length, args = new Array(_len15), _key15 = 0; _key15 < _len15; _key15++) {
         args[_key15] = arguments[_key15];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onAfterGetCellMeta).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onAfterViewportRowCalculatorOverride).call(_this, ...args);
     });
-    this.addHook('afterViewportRowCalculatorOverride', function () {
+    this.addHook('afterViewportColumnCalculatorOverride', function () {
       for (var _len16 = arguments.length, args = new Array(_len16), _key16 = 0; _key16 < _len16; _key16++) {
         args[_key16] = arguments[_key16];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onAfterViewportRowCalculatorOverride).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onAfterViewportColumnCalculatorOverride).call(_this, ...args);
     });
-    this.addHook('afterViewportColumnCalculatorOverride', function () {
+    this.addHook('modifyAutofillRange', function () {
       for (var _len17 = arguments.length, args = new Array(_len17), _key17 = 0; _key17 < _len17; _key17++) {
         args[_key17] = arguments[_key17];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onAfterViewportColumnCalculatorOverride).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onModifyAutofillRange).call(_this, ...args);
     });
-    this.addHook('modifyAutofillRange', function () {
+    this.addHook('afterCreateCol', function () {
       for (var _len18 = arguments.length, args = new Array(_len18), _key18 = 0; _key18 < _len18; _key18++) {
         args[_key18] = arguments[_key18];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onModifyAutofillRange).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onAfterCreateCol).call(_this, ...args);
     });
-    this.addHook('afterCreateCol', function () {
+    this.addHook('afterRemoveCol', function () {
       for (var _len19 = arguments.length, args = new Array(_len19), _key19 = 0; _key19 < _len19; _key19++) {
         args[_key19] = arguments[_key19];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onAfterCreateCol).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onAfterRemoveCol).call(_this, ...args);
     });
-    this.addHook('afterRemoveCol', function () {
+    this.addHook('afterCreateRow', function () {
       for (var _len20 = arguments.length, args = new Array(_len20), _key20 = 0; _key20 < _len20; _key20++) {
         args[_key20] = arguments[_key20];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onAfterRemoveCol).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onAfterCreateRow).call(_this, ...args);
     });
-    this.addHook('afterCreateRow', function () {
+    this.addHook('afterRemoveRow', function () {
       for (var _len21 = arguments.length, args = new Array(_len21), _key21 = 0; _key21 < _len21; _key21++) {
         args[_key21] = arguments[_key21];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onAfterCreateRow).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onAfterRemoveRow).call(_this, ...args);
     });
-    this.addHook('afterRemoveRow', function () {
+    this.addHook('afterChange', function () {
       for (var _len22 = arguments.length, args = new Array(_len22), _key22 = 0; _key22 < _len22; _key22++) {
         args[_key22] = arguments[_key22];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onAfterRemoveRow).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onAfterChange).call(_this, ...args);
     });
-    this.addHook('afterChange', function () {
+    this.addHook('beforeDrawBorders', function () {
       for (var _len23 = arguments.length, args = new Array(_len23), _key23 = 0; _key23 < _len23; _key23++) {
         args[_key23] = arguments[_key23];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onAfterChange).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onBeforeDrawAreaBorders).call(_this, ...args);
     });
-    this.addHook('beforeDrawBorders', function () {
+    this.addHook('afterDrawSelection', function () {
       for (var _len24 = arguments.length, args = new Array(_len24), _key24 = 0; _key24 < _len24; _key24++) {
         args[_key24] = arguments[_key24];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onBeforeDrawAreaBorders).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onAfterDrawSelection).call(_this, ...args);
     });
-    this.addHook('afterDrawSelection', function () {
+    this.addHook('beforeRemoveCellClassNames', function () {
       for (var _len25 = arguments.length, args = new Array(_len25), _key25 = 0; _key25 < _len25; _key25++) {
         args[_key25] = arguments[_key25];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onAfterDrawSelection).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onBeforeRemoveCellClassNames).call(_this, ...args);
     });
-    this.addHook('beforeRemoveCellClassNames', function () {
+    this.addHook('beforeBeginEditing', function () {
       for (var _len26 = arguments.length, args = new Array(_len26), _key26 = 0; _key26 < _len26; _key26++) {
         args[_key26] = arguments[_key26];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onBeforeRemoveCellClassNames).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onBeforeBeginEditing).call(_this, ...args);
     });
-    this.addHook('beforeBeginEditing', function () {
+    this.addHook('modifyRowHeightByOverlayName', function () {
       for (var _len27 = arguments.length, args = new Array(_len27), _key27 = 0; _key27 < _len27; _key27++) {
         args[_key27] = arguments[_key27];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onBeforeBeginEditing).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onModifyRowHeightByOverlayName).call(_this, ...args);
     });
     this.addHook('beforeUndoStackChange', (action, source) => {
       if (source === 'MergeCells') {
@@ -131662,24 +131812,26 @@ class MergeCells extends _base.BasePlugin {
    * @returns {boolean}
    */
   validateSetting(setting) {
-    let valid = true;
     if (!setting) {
       return false;
     }
     if (_cellCoords.default.containsNegativeValues(setting)) {
       (0, _console.warn)(_cellCoords.default.NEGATIVE_VALUES_WARNING(setting));
-      valid = false;
-    } else if (_cellCoords.default.isOutOfBounds(setting, this.hot.countRows(), this.hot.countCols())) {
+      return false;
+    }
+    if (_cellCoords.default.isOutOfBounds(setting, this.hot.countRows(), this.hot.countCols())) {
       (0, _console.warn)(_cellCoords.default.IS_OUT_OF_BOUNDS_WARNING(setting));
-      valid = false;
-    } else if (_cellCoords.default.isSingleCell(setting)) {
+      return false;
+    }
+    if (_cellCoords.default.isSingleCell(setting)) {
       (0, _console.warn)(_cellCoords.default.IS_SINGLE_CELL(setting));
-      valid = false;
-    } else if (_cellCoords.default.containsZeroSpan(setting)) {
+      return false;
+    }
+    if (_cellCoords.default.containsZeroSpan(setting)) {
       (0, _console.warn)(_cellCoords.default.ZERO_SPAN_WARNING(setting));
-      valid = false;
+      return false;
     }
-    return valid;
+    return true;
   }
 
   /**
@@ -131860,7 +132012,7 @@ class MergeCells extends _base.BasePlugin {
   unmergeRange(cellRange) {
     let auto = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     const mergedCells = this.mergedCellsCollection.getWithinRange(cellRange);
-    if (!mergedCells) {
+    if (mergedCells.length === 0) {
       return;
     }
     this.hot.runHooks('beforeUnmergeCells', cellRange, auto);
@@ -132365,47 +132517,6 @@ function _addMergeActionsToContextMenu(defaultOptions) {
     name: '---------'
   }, (0, _toggleMerge.default)(this));
 }
-/**
- * `afterRenderer` hook callback.
- *
- * @param {HTMLElement} TD The cell to be modified.
- * @param {number} row Row index.
- * @param {number} col Visual column index.
- */
-function _onAfterRenderer(TD, row, col) {
-  const mergedCell = this.mergedCellsCollection.get(row, col);
-  if ((0, _object.isObject)(mergedCell)) {
-    // We shouldn't override data in the collection.
-    const mergedCellCopy = (0, _object.clone)(mergedCell);
-    const {
-      rowIndexMapper: rowMapper,
-      columnIndexMapper: columnMapper
-    } = this.hot;
-    const {
-      row: mergeRow,
-      col: mergeColumn,
-      colspan,
-      rowspan
-    } = mergedCellCopy;
-    const [lastMergedRowIndex, lastMergedColumnIndex] = this.translateMergedCellToRenderable(mergeRow, rowspan, mergeColumn, colspan);
-    const renderedRowIndex = rowMapper.getRenderableFromVisualIndex(row);
-    const renderedColumnIndex = columnMapper.getRenderableFromVisualIndex(col);
-    const maxRowSpan = lastMergedRowIndex - renderedRowIndex + 1; // Number of rendered columns.
-    const maxColSpan = lastMergedColumnIndex - renderedColumnIndex + 1; // Number of rendered columns.
-
-    // We just try to determine some values basing on the actual number of rendered indexes (some columns may be hidden).
-    mergedCellCopy.row = rowMapper.getNearestNotHiddenIndex(mergedCellCopy.row, 1);
-    // We just try to determine some values basing on the actual number of rendered indexes (some columns may be hidden).
-    mergedCellCopy.col = columnMapper.getNearestNotHiddenIndex(mergedCellCopy.col, 1);
-    // The `rowSpan` property for a `TD` element should be at most equal to number of rendered rows in the merge area.
-    mergedCellCopy.rowspan = Math.min(mergedCellCopy.rowspan, maxRowSpan);
-    // The `colSpan` property for a `TD` element should be at most equal to number of rendered columns in the merge area.
-    mergedCellCopy.colspan = Math.min(mergedCellCopy.colspan, maxColSpan);
-    (0, _utils.applySpanProperties)(TD, mergedCellCopy, row, col);
-  } else {
-    (0, _utils.applySpanProperties)(TD, null, row, col);
-  }
-}
 /**
  * Clears the last selected coordinates before setting a new selection range.
  */
@@ -132547,17 +132658,11 @@ function _onModifyAutofillRange(drag, select) {
     dragArea = select;
     return dragArea;
   }
-  const mergedCellsWithinSelectionArea = this.mergedCellsCollection.getWithinRange({
-    from: {
-      row: select[0],
-      col: select[1]
-    },
-    to: {
-      row: select[2],
-      col: select[3]
-    }
-  });
-  if (!mergedCellsWithinSelectionArea) {
+  const from = this.hot._createCellCoords(select[0], select[1]);
+  const to = this.hot._createCellCoords(select[2], select[3]);
+  const range = this.hot._createCellRange(from, from, to);
+  const mergedCellsWithinSelectionArea = this.mergedCellsCollection.getWithinRange(range);
+  if (mergedCellsWithinSelectionArea.length === 0) {
     return dragArea;
   }
   dragArea = this.autofillCalculations.snapDragArea(select, dragArea, dragDirection, mergedCellsWithinSelectionArea);
@@ -132682,6 +132787,82 @@ function _onBeforeBeginEditing(row, column, initialValue, event) {
   const to = this.hot._createCellCoords(mergeCell.row + mergeCell.rowspan - 1, mergeCell.col + mergeCell.colspan - 1);
   return this.hot.selection.getLayerLevel() === 0 && selection.isEqual(this.hot._createCellRange(from, from, to));
 }
+/**
+ * Hook used to modify the row height depends on the merged cells in the row.
+ *
+ * @param {number} height The row height value provided by the Core.
+ * @param {number} row The visual row index.
+ * @param {string} overlayType The overlay type that is currently rendered.
+ * @returns {number}
+ */
+function _onModifyRowHeightByOverlayName(height, row, overlayType) {
+  if (this.hot.getSettings().rowHeaders ||
+  // merged cells do not work with the bottom overlays
+  overlayType === 'bottom' || overlayType === 'bottom_inline_start_corner') {
+    return height;
+  }
+  let firstColumn;
+  let lastColumn;
+  if (overlayType === 'master') {
+    firstColumn = this.hot.view.getFirstRenderedVisibleColumn();
+    lastColumn = this.hot.view.getLastRenderedVisibleColumn();
+  } else {
+    const activeOverlay = this.hot.view.getOverlayByName(overlayType);
+    firstColumn = this.hot.columnIndexMapper.getVisualFromRenderableIndex(activeOverlay.clone.wtTable.getFirstRenderedColumn());
+    lastColumn = this.hot.columnIndexMapper.getVisualFromRenderableIndex(activeOverlay.clone.wtTable.getLastRenderedColumn());
+  }
+  const firstMergedCellInRow = this.mergedCellsCollection.get(row, firstColumn);
+  if (!firstMergedCellInRow) {
+    return height;
+  }
+  const from = this.hot._createCellCoords(row, firstColumn);
+  const to = this.hot._createCellCoords(row, lastColumn);
+  const viewportRange = this.hot._createCellRange(from, from, to);
+  const mergedCellsWithinRange = this.mergedCellsCollection.getWithinRange(viewportRange);
+  const maxRowspan = mergedCellsWithinRange.reduce((acc, _ref) => {
+    let {
+      rowspan
+    } = _ref;
+    return Math.max(acc, rowspan);
+  }, 1);
+  let rowspanCorrection = 0;
+  if (mergedCellsWithinRange.length > 1 && mergedCellsWithinRange[0].rowspan < maxRowspan) {
+    rowspanCorrection = maxRowspan - mergedCellsWithinRange[0].rowspan;
+  }
+  mergedCellsWithinRange.forEach(_ref2 => {
+    var _height;
+    let {
+      rowspan
+    } = _ref2;
+    let rowspanAfterCorrection = 0;
+    if (overlayType === 'top' || overlayType === 'top_inline_start_corner') {
+      rowspanAfterCorrection = Math.min(maxRowspan, this.hot.view.countNotHiddenFixedRowsTop() - row);
+    } else {
+      rowspanAfterCorrection = rowspan - rowspanCorrection;
+    }
+    height = Math.max((_height = height) !== null && _height !== void 0 ? _height : 0, _assertClassBrand(_MergeCells_brand, this, _sumCellsHeights).call(this, row, rowspanAfterCorrection));
+  });
+  return height;
+}
+/**
+ * Sums the heights of the all cells that the merge cell consists of.
+ *
+ * @param {number} row The visual row index of the merged cell.
+ * @param {number} rowspan The rowspan value of the merged cell.
+ * @returns {number}
+ */
+function _sumCellsHeights(row, rowspan) {
+  const defaultHeight = this.hot.view._wt.wtSettings.getSettingPure('defaultRowHeight');
+  const autoRowSizePlugin = this.hot.getPlugin('autoRowSize');
+  let height = 0;
+  for (let i = row; i < row + rowspan; i++) {
+    if (!this.hot.rowIndexMapper.isHidden(i)) {
+      var _autoRowSizePlugin$ge;
+      height += (_autoRowSizePlugin$ge = autoRowSizePlugin === null || autoRowSizePlugin === void 0 ? void 0 : autoRowSizePlugin.getRowHeight(i)) !== null && _autoRowSizePlugin$ge !== void 0 ? _autoRowSizePlugin$ge : defaultHeight;
+    }
+  }
+  return height;
+}
 
 /***/ }),
 /* 1000 */
@@ -132707,7 +132888,6 @@ var _cellCoords = _interopRequireDefault(__webpack_require__(1001));
 var _number = __webpack_require__(512);
 var _console = __webpack_require__(500);
 var _array = __webpack_require__(478);
-var _utils = __webpack_require__(1002);
 var _templateLiteralTag = __webpack_require__(477);
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
@@ -132761,11 +132941,16 @@ class MergedCellsCollection {
   /**
    * Get a warning message for when the declared merged cell data overlaps already existing merged cells.
    *
-   * @param {object} newMergedCell Object containg information about the merged cells that was about to be added.
+   * @param {{ row: number, col: number, rowspan: number, colspan: number }} mergedCell Object containing information
+   * about the merged cells that was about to be added.
    * @returns {string}
    */
-  static IS_OVERLAPPING_WARNING(newMergedCell) {
-    return (0, _templateLiteralTag.toSingleLine)`The merged cell declared at [${newMergedCell.row}, ${newMergedCell.col}], overlaps\x20
+  static IS_OVERLAPPING_WARNING(_ref) {
+    let {
+      row,
+      col
+    } = _ref;
+    return (0, _templateLiteralTag.toSingleLine)`The merged cell declared at [${row}, ${col}], overlaps\x20
       with the other declared merged cell. The overlapping merged cell was not added to the table, please\x20
       fix your setup.`;
   }
@@ -132860,32 +133045,30 @@ class MergedCellsCollection {
   /**
    * Get a merged cell contained in the provided range.
    *
-   * @param {CellRange|object} range The range to search merged cells in.
+   * @param {CellRange} range The range to search merged cells in.
    * @param {boolean} [countPartials=false] If set to `true`, all the merged cells overlapping the range will be taken into calculation.
-   * @returns {Array|boolean} Array of found merged cells of `false` if none were found.
+   * @returns {MergedCellCoords[]} Array of found merged cells.
    */
   getWithinRange(range) {
     let countPartials = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    const foundMergedCells = [];
-    let testedRange = range;
-    if (!testedRange.includesRange) {
-      const from = this.hot._createCellCoords(testedRange.from.row, testedRange.from.col);
-      const to = this.hot._createCellCoords(testedRange.to.row, testedRange.to.col);
-      testedRange = this.hot._createCellRange(from, from, to);
-    }
-    (0, _array.arrayEach)(this.mergedCells, mergedCell => {
-      const mergedCellTopLeft = this.hot._createCellCoords(mergedCell.row, mergedCell.col);
-      const mergedCellBottomRight = this.hot._createCellCoords(mergedCell.row + mergedCell.rowspan - 1, mergedCell.col + mergedCell.colspan - 1);
-      const mergedCellRange = this.hot._createCellRange(mergedCellTopLeft, mergedCellTopLeft, mergedCellBottomRight);
-      if (countPartials) {
-        if (testedRange.overlaps(mergedCellRange)) {
-          foundMergedCells.push(mergedCell);
+    const {
+      row: rowStart,
+      col: columnStart
+    } = range.getTopStartCorner();
+    const {
+      row: rowEnd,
+      col: columnEnd
+    } = range.getBottomEndCorner();
+    const result = [];
+    for (let row = rowStart; row <= rowEnd; row++) {
+      for (let column = columnStart; column <= columnEnd; column++) {
+        const mergedCell = this.get(row, column);
+        if (mergedCell && (countPartials || !countPartials && mergedCell.row === row && mergedCell.col === column)) {
+          result.push(mergedCell);
         }
-      } else if (testedRange.includesRange(mergedCellRange)) {
-        foundMergedCells.push(mergedCell);
       }
-    });
-    return foundMergedCells.length ? foundMergedCells : false;
+    }
+    return result;
   }
 
   /**
@@ -132939,35 +133122,26 @@ class MergedCellsCollection {
    * Clear all the merged cells.
    */
   clear() {
-    const mergedCellParentsToClear = [];
-    const hiddenCollectionElements = [];
-    (0, _array.arrayEach)(this.mergedCells, mergedCell => {
-      const TD = this.hot.getCell(mergedCell.row, mergedCell.col);
-      if (TD) {
-        mergedCellParentsToClear.push([TD, this.get(mergedCell.row, mergedCell.col), mergedCell.row, mergedCell.col]);
-      }
-    });
-    this.mergedCells.length = 0;
-    this.mergedCellsMatrix = new Map();
-    (0, _array.arrayEach)(mergedCellParentsToClear, (mergedCell, i) => {
-      (0, _number.rangeEach)(0, mergedCell.rowspan - 1, j => {
-        (0, _number.rangeEach)(0, mergedCell.colspan - 1, k => {
-          if (k !== 0 || j !== 0) {
-            const TD = this.hot.getCell(mergedCell.row + j, mergedCell.col + k);
-            if (TD) {
-              hiddenCollectionElements.push([TD, null, null, null]);
-            }
+    (0, _array.arrayEach)(this.mergedCells, _ref2 => {
+      let {
+        row,
+        col,
+        rowspan,
+        colspan
+      } = _ref2;
+      (0, _number.rangeEach)(row, row + rowspan, r => {
+        (0, _number.rangeEach)(col, col + colspan, c => {
+          const TD = this.hot.getCell(r, c);
+          if (TD) {
+            TD.removeAttribute('rowspan');
+            TD.removeAttribute('colspan');
+            TD.style.display = '';
           }
         });
       });
-      mergedCellParentsToClear[i][1] = null;
-    });
-    (0, _array.arrayEach)(mergedCellParentsToClear, mergedCellParents => {
-      (0, _utils.applySpanProperties)(...mergedCellParents);
-    });
-    (0, _array.arrayEach)(hiddenCollectionElements, hiddenCollectionElement => {
-      (0, _utils.applySpanProperties)(...hiddenCollectionElement);
     });
+    this.mergedCells.length = 0;
+    this.mergedCellsMatrix = new Map();
   }
 
   /**
@@ -133158,11 +133332,11 @@ function _getNonIntersectingIndexes(range, axis) {
       indexes.get(index).add(lastIndex);
     }
   }
-  return Array.from(new Set(Array.from(indexes.entries()).filter(_ref => {
-    let [, set] = _ref;
+  return Array.from(new Set(Array.from(indexes.entries()).filter(_ref3 => {
+    let [, set] = _ref3;
     return set.size === 1;
-  }).flatMap(_ref2 => {
-    let [, set] = _ref2;
+  }).flatMap(_ref4 => {
+    let [, set] = _ref4;
     return Array.from(set);
   })));
 }
@@ -133275,78 +133449,117 @@ class MergedCellCoords {
   /**
    * Get a warning message for when the declared merged cell data contains negative values.
    *
-   * @param {object} newMergedCell Object containg information about the merged cells that was about to be added.
+   * @param {{ row: number, col: number, rowspan: number, colspan: number }} mergedCell Object containing information
+   * about the merged cells that was about to be added.
    * @returns {string}
    */
-  static NEGATIVE_VALUES_WARNING(newMergedCell) {
-    return (0, _templateLiteralTag.toSingleLine)`The merged cell declared with {row: ${newMergedCell.row}, col: ${newMergedCell.col},\x20
-      rowspan: ${newMergedCell.rowspan}, colspan: ${newMergedCell.colspan}} contains negative values, which is\x20
+  static NEGATIVE_VALUES_WARNING(_ref) {
+    let {
+      row,
+      col,
+      rowspan,
+      colspan
+    } = _ref;
+    return (0, _templateLiteralTag.toSingleLine)`The merged cell declared with {row: ${row}, col: ${col},\x20
+      rowspan: ${rowspan}, colspan: ${colspan}} contains negative values, which is\x20
       not supported. It will not be added to the collection.`;
   }
 
   /**
    * Get a warning message for when the declared merged cell data contains values exceeding the table limits.
    *
-   * @param {object} newMergedCell Object containg information about the merged cells that was about to be added.
+   * @param {{ row: number, col: number, rowspan: number, colspan: number }} mergedCell Object containing information
+   * about the merged cells that was about to be added.
    * @returns {string}
    */
-  static IS_OUT_OF_BOUNDS_WARNING(newMergedCell) {
-    return (0, _templateLiteralTag.toSingleLine)`The merged cell declared at [${newMergedCell.row}, ${newMergedCell.col}] is positioned\x20
+  static IS_OUT_OF_BOUNDS_WARNING(_ref2) {
+    let {
+      row,
+      col
+    } = _ref2;
+    return (0, _templateLiteralTag.toSingleLine)`The merged cell declared at [${row}, ${col}] is positioned\x20
       (or positioned partially) outside of the table range. It was not added to the table, please fix your setup.`;
   }
 
   /**
    * Get a warning message for when the declared merged cell data represents a single cell.
    *
-   * @param {object} newMergedCell Object containg information about the merged cells that was about to be added.
+   * @param {{ row: number, col: number, rowspan: number, colspan: number }} mergedCell Object containing information
+   * about the merged cells that was about to be added.
    * @returns {string}
    */
-  static IS_SINGLE_CELL(newMergedCell) {
-    return (0, _templateLiteralTag.toSingleLine)`The merged cell declared at [${newMergedCell.row}, ${newMergedCell.col}] has both "rowspan"\x20
+  static IS_SINGLE_CELL(_ref3) {
+    let {
+      row,
+      col
+    } = _ref3;
+    return (0, _templateLiteralTag.toSingleLine)`The merged cell declared at [${row}, ${col}] has both "rowspan"\x20
       and "colspan" declared as "1", which makes it a single cell. It cannot be added to the collection.`;
   }
 
   /**
    * Get a warning message for when the declared merged cell data contains "colspan" or "rowspan", that equals 0.
    *
-   * @param {object} newMergedCell Object containg information about the merged cells that was about to be added.
+   * @param {{ row: number, col: number, rowspan: number, colspan: number }} mergedCell Object containing information
+   * about the merged cells that was about to be added.
    * @returns {string}
    */
-  static ZERO_SPAN_WARNING(newMergedCell) {
-    return (0, _templateLiteralTag.toSingleLine)`The merged cell declared at [${newMergedCell.row}, ${newMergedCell.col}] has "rowspan"\x20
+  static ZERO_SPAN_WARNING(_ref4) {
+    let {
+      row,
+      col
+    } = _ref4;
+    return (0, _templateLiteralTag.toSingleLine)`The merged cell declared at [${row}, ${col}] has "rowspan"\x20
       or "colspan" declared as "0", which is not supported. It cannot be added to the collection.`;
   }
 
   /**
    * Check whether the values provided for a merged cell contain any negative values.
    *
-   * @param {object} mergedCellInfo Object containing the `row`, `col`, `rowspan` and `colspan` properties.
+   * @param {{ row: number, col: number, rowspan: number, colspan: number }} mergedCell Object containing information
+   * about the merged cells that was about to be added.
    * @returns {boolean}
    */
-  static containsNegativeValues(mergedCellInfo) {
-    return mergedCellInfo.row < 0 || mergedCellInfo.col < 0 || mergedCellInfo.rowspan < 0 || mergedCellInfo.colspan < 0;
+  static containsNegativeValues(_ref5) {
+    let {
+      row,
+      col,
+      rowspan,
+      colspan
+    } = _ref5;
+    return row < 0 || col < 0 || rowspan < 0 || colspan < 0;
   }
 
   /**
    * Check whether the provided merged cell information object represents a single cell.
    *
    * @private
-   * @param {object} mergedCellInfo An object with `row`, `col`, `rowspan` and `colspan` properties.
+   * @param {{ row: number, col: number, rowspan: number, colspan: number }} mergedCell Object containing information
+   * about the merged cells that was about to be added.
    * @returns {boolean}
    */
-  static isSingleCell(mergedCellInfo) {
-    return mergedCellInfo.colspan === 1 && mergedCellInfo.rowspan === 1;
+  static isSingleCell(_ref6) {
+    let {
+      rowspan,
+      colspan
+    } = _ref6;
+    return colspan === 1 && rowspan === 1;
   }
 
   /**
    * Check whether the provided merged cell information object contains a rowspan or colspan of 0.
    *
    * @private
-   * @param {object} mergedCellInfo An object with `row`, `col`, `rowspan` and `colspan` properties.
+   * @param {{ row: number, col: number, rowspan: number, colspan: number }} mergedCell Object containing information
+   * about the merged cells that was about to be added.
    * @returns {boolean}
    */
-  static containsZeroSpan(mergedCellInfo) {
-    return mergedCellInfo.colspan === 0 || mergedCellInfo.rowspan === 0;
+  static containsZeroSpan(_ref7) {
+    let {
+      rowspan,
+      colspan
+    } = _ref7;
+    return colspan === 0 || rowspan === 0;
   }
 
   /**
@@ -133531,40 +133744,6 @@ var _default = exports["default"] = MergedCellCoords;
 
 /***/ }),
 /* 1002 */
-/***/ ((__unused_webpack_module, exports) => {
-
-"use strict";
-
-
-exports.__esModule = true;
-exports.applySpanProperties = applySpanProperties;
-/**
- * Apply the `colspan`/`rowspan` properties.
- *
- * @param {HTMLElement} TD The soon-to-be-modified cell.
- * @param {MergedCellCoords} mergedCellInfo The merged cell in question.
- * @param {number} row Row index.
- * @param {number} col Column index.
- */
-function applySpanProperties(TD, mergedCellInfo, row, col) {
-  if (mergedCellInfo) {
-    if (mergedCellInfo.row === row && mergedCellInfo.col === col) {
-      TD.setAttribute('rowspan', mergedCellInfo.rowspan.toString());
-      TD.setAttribute('colspan', mergedCellInfo.colspan.toString());
-    } else {
-      TD.removeAttribute('rowspan');
-      TD.removeAttribute('colspan');
-      TD.style.display = 'none';
-    }
-  } else {
-    TD.removeAttribute('rowspan');
-    TD.removeAttribute('colspan');
-    TD.style.display = '';
-  }
-}
-
-/***/ }),
-/* 1003 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -133960,13 +134139,13 @@ class AutofillCalculations {
     const topLeft = this.plugin.hot._createCellCoords(dragAreaStartRow, dragAreaStartColumn);
     const bottomRight = this.plugin.hot._createCellCoords(dragAreaEndRow, dragAreaEndColumn);
     const dragRange = this.plugin.hot._createCellRange(topLeft, topLeft, bottomRight);
-    return !!this.mergedCellsCollection.getWithinRange(dragRange, true);
+    return this.mergedCellsCollection.getWithinRange(dragRange, true).length > 0;
   }
 }
 var _default = exports["default"] = AutofillCalculations;
 
 /***/ }),
-/* 1004 */
+/* 1003 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -134089,7 +134268,7 @@ class SelectionCalculations {
 var _default = exports["default"] = SelectionCalculations;
 
 /***/ }),
-/* 1005 */
+/* 1004 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -134150,7 +134329,7 @@ function toggleMergeItem(plugin) {
 }
 
 /***/ }),
-/* 1006 */
+/* 1005 */
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -134159,7 +134338,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /***/ }),
-/* 1007 */
+/* 1006 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -134169,7 +134348,7 @@ var _interopRequireDefault = __webpack_require__(197);
 exports.__esModule = true;
 __webpack_require__(204);
 __webpack_require__(286);
-var _linkedList = _interopRequireDefault(__webpack_require__(1008));
+var _linkedList = _interopRequireDefault(__webpack_require__(1007));
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
@@ -134470,7 +134649,7 @@ function _pushOrderNode(selectedRange, listOrder, mergeCellsVisitor, row, column
 }
 
 /***/ }),
-/* 1008 */
+/* 1007 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -134722,6 +134901,82 @@ class LinkedList {
 }
 var _default = exports["default"] = LinkedList;
 
+/***/ }),
+/* 1008 */
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+exports.__esModule = true;
+exports.createMergeCellRenderer = createMergeCellRenderer;
+var _object = __webpack_require__(482);
+/**
+ * Creates a renderer object for the `MergeCells` plugin.
+ *
+ * @param {MergeCells} plugin The `MergeCells` plugin instance.
+ * @returns {{before: Function, after: Function}}
+ */
+function createMergeCellRenderer(plugin) {
+  const {
+    hot
+  } = plugin;
+  const {
+    rowIndexMapper: rowMapper,
+    columnIndexMapper: columnMapper
+  } = hot;
+
+  /**
+   * Runs before the cell is rendered.
+   */
+  function before() {}
+
+  /**
+   * Runs after the cell is rendered.
+   *
+   * @param {HTMLElement} TD The cell to be modified.
+   * @param {number} row Row index.
+   * @param {number} col Visual column index.
+   */
+  function after(TD, row, col) {
+    const mergedCell = plugin.mergedCellsCollection.get(row, col);
+    if (!(0, _object.isObject)(mergedCell)) {
+      TD.removeAttribute('rowspan');
+      TD.removeAttribute('colspan');
+      TD.style.display = '';
+      return;
+    }
+    const {
+      row: origRow,
+      col: origColumn,
+      colspan: origColspan,
+      rowspan: origRowspan
+    } = mergedCell;
+    const [lastMergedRowIndex, lastMergedColumnIndex] = plugin.translateMergedCellToRenderable(origRow, origRowspan, origColumn, origColspan);
+    const renderedRowIndex = rowMapper.getRenderableFromVisualIndex(row);
+    const renderedColumnIndex = columnMapper.getRenderableFromVisualIndex(col);
+    const maxRowSpan = lastMergedRowIndex - renderedRowIndex + 1; // Number of rendered columns.
+    const maxColSpan = lastMergedColumnIndex - renderedColumnIndex + 1; // Number of rendered columns.
+
+    const notHiddenRow = rowMapper.getNearestNotHiddenIndex(origRow, 1);
+    const notHiddenColumn = columnMapper.getNearestNotHiddenIndex(origColumn, 1);
+    const notHiddenRowspan = Math.min(origRowspan, maxRowSpan);
+    const notHiddenColspan = Math.min(origColspan, maxColSpan);
+    if (notHiddenRow === row && notHiddenColumn === col) {
+      TD.setAttribute('rowspan', notHiddenRowspan);
+      TD.setAttribute('colspan', notHiddenColspan);
+    } else {
+      TD.removeAttribute('rowspan');
+      TD.removeAttribute('colspan');
+      TD.style.display = 'none';
+    }
+  }
+  return {
+    before,
+    after
+  };
+}
+
 /***/ }),
 /* 1009 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {