handsontable 14.4.0-next-1ffa7bc-20240606 → 14.5.0-next-ede811d-20240717

package/plugins/mergeCells/mergeCells.mjs

@@ -7,10 +7,10 @@ import "core-js/modules/esnext.set.is-subset-of.v2.js";
 import "core-js/modules/esnext.set.is-superset-of.v2.js";
 import "core-js/modules/esnext.set.symmetric-difference.v2.js";
 import "core-js/modules/esnext.set.union.v2.js";
-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"); } }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
+function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
+function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
@@ -24,13 +24,13 @@ import AutofillCalculations from "./calculations/autofill.mjs";
 import SelectionCalculations from "./calculations/selection.mjs";
 import toggleMergeItem from "./contextMenuItem/toggleMerge.mjs";
 import { arrayEach } from "../../helpers/array.mjs";
-import { isObject, clone } from "../../helpers/object.mjs";
+import { isObject } from "../../helpers/object.mjs";
 import { warn } from "../../helpers/console.mjs";
 import { rangeEach } from "../../helpers/number.mjs";
-import { applySpanProperties } from "./utils.mjs";
 import { getStyle } from "../../helpers/dom/element.mjs";
 import { isChrome } from "../../helpers/browser.mjs";
 import { FocusOrder } from "./focusOrder.mjs";
+import { createMergeCellRenderer } from "./renderer.mjs";
 Hooks.getSingleton().register('beforeMergeCells');
 Hooks.getSingleton().register('afterMergeCells');
 Hooks.getSingleton().register('beforeUnmergeCells');
@@ -79,6 +79,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();
 export class MergeCells extends BasePlugin {
   constructor() {
@@ -135,6 +136,12 @@ export class MergeCells extends 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, createMergeCellRenderer(this));
   }
   static get PLUGIN_KEY() {
     return PLUGIN_KEY;
@@ -236,94 +243,97 @@ export class MergeCells extends 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') {
@@ -414,24 +424,26 @@ export class MergeCells extends BasePlugin {
    * @returns {boolean}
    */
   validateSetting(setting) {
-    let valid = true;
     if (!setting) {
       return false;
     }
     if (MergedCellCoords.containsNegativeValues(setting)) {
       warn(MergedCellCoords.NEGATIVE_VALUES_WARNING(setting));
-      valid = false;
-    } else if (MergedCellCoords.isOutOfBounds(setting, this.hot.countRows(), this.hot.countCols())) {
+      return false;
+    }
+    if (MergedCellCoords.isOutOfBounds(setting, this.hot.countRows(), this.hot.countCols())) {
       warn(MergedCellCoords.IS_OUT_OF_BOUNDS_WARNING(setting));
-      valid = false;
-    } else if (MergedCellCoords.isSingleCell(setting)) {
+      return false;
+    }
+    if (MergedCellCoords.isSingleCell(setting)) {
       warn(MergedCellCoords.IS_SINGLE_CELL(setting));
-      valid = false;
-    } else if (MergedCellCoords.containsZeroSpan(setting)) {
+      return false;
+    }
+    if (MergedCellCoords.containsZeroSpan(setting)) {
       warn(MergedCellCoords.ZERO_SPAN_WARNING(setting));
-      valid = false;
+      return false;
     }
-    return valid;
+    return true;
   }
 
   /**
@@ -441,36 +453,42 @@ export class MergeCells extends BasePlugin {
    * @param {Array|boolean} settings The settings provided to the plugin.
    */
   generateFromSettings(settings) {
-    if (Array.isArray(settings)) {
-      const populatedNulls = [];
-      arrayEach(settings, setting => {
-        if (!this.validateSetting(setting)) {
-          return;
-        }
-        const highlight = this.hot._createCellCoords(setting.row, setting.col);
-        const rangeEnd = this.hot._createCellCoords(setting.row + setting.rowspan - 1, setting.col + setting.colspan - 1);
-        const mergeRange = this.hot._createCellRange(highlight, highlight, rangeEnd);
-
-        // Merging without data population.
-        this.mergeRange(mergeRange, true, true);
-        rangeEach(setting.row, setting.row + setting.rowspan - 1, rowIndex => {
-          rangeEach(setting.col, setting.col + setting.colspan - 1, columnIndex => {
-            // Not resetting a cell representing a merge area's value.
-            if ((rowIndex === setting.row && columnIndex === setting.col) === false) {
-              populatedNulls.push([rowIndex, columnIndex, null]);
-            }
-          });
-        });
-      });
+    if (!Array.isArray(settings)) {
+      return;
+    }
+    const validSettings = settings.filter(mergeCellInfo => this.validateSetting(mergeCellInfo));
+    const nonOverlappingSettings = this.mergedCellsCollection.filterOverlappingMergeCells(validSettings);
+    const populatedNulls = [];
+    nonOverlappingSettings.forEach(mergeCellInfo => {
+      const {
+        row,
+        col,
+        rowspan,
+        colspan
+      } = mergeCellInfo;
+      const from = this.hot._createCellCoords(row, col);
+      const to = this.hot._createCellCoords(row + rowspan - 1, col + colspan - 1);
+      const mergeRange = this.hot._createCellRange(from, from, to);
 
-      // There are no merged cells. Thus, no data population is needed.
-      if (populatedNulls.length === 0) {
-        return;
+      // Merging without data population.
+      this.mergeRange(mergeRange, true, true);
+      for (let r = row; r < row + rowspan; r++) {
+        for (let c = col; c < col + colspan; c++) {
+          // Not resetting a cell representing a merge area's value.
+          if (r !== row || c !== col) {
+            populatedNulls.push([r, c, null]);
+          }
+        }
       }
+    });
 
-      // TODO: Change the `source` argument to a more meaningful value, e.g. `${this.pluginName}.clearCells`.
-      this.hot.setDataAtCell(populatedNulls, undefined, undefined, this.pluginName);
+    // There are no merged cells. Thus, no data population is needed.
+    if (populatedNulls.length === 0) {
+      return;
     }
+
+    // TODO: Change the `source` argument to a more meaningful value, e.g. `${this.pluginName}.clearCells`.
+    this.hot.setDataAtCell(populatedNulls, undefined, undefined, this.pluginName);
   }
 
   /**
@@ -576,7 +594,7 @@ export class MergeCells extends BasePlugin {
       });
     });
     this.hot.setCellMeta(mergeParent.row, mergeParent.col, 'spanned', true);
-    const mergedCellAdded = this.mergedCellsCollection.add(mergeParent);
+    const mergedCellAdded = this.mergedCellsCollection.add(mergeParent, auto);
     if (mergedCellAdded) {
       if (preventPopulation) {
         populationInfo = [mergeParent.row, mergeParent.col, clearedData];
@@ -606,7 +624,7 @@ export class MergeCells extends 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);
@@ -1110,45 +1128,6 @@ function _addMergeActionsToContextMenu(defaultOptions) {
     name: '---------'
   }, toggleMergeItem(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);
-  // We shouldn't override data in the collection.
-  const mergedCellCopy = isObject(mergedCell) ? clone(mergedCell) : undefined;
-  if (isObject(mergedCellCopy)) {
-    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);
-  }
-  applySpanProperties(TD, mergedCellCopy, row, col);
-}
 /**
  * Clears the last selected coordinates before setting a new selection range.
  */
@@ -1290,17 +1269,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);
@@ -1424,4 +1397,80 @@ function _onBeforeBeginEditing(row, column, initialValue, event) {
   const from = this.hot._createCellCoords(mergeCell.row, mergeCell.col);
   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;
 }

package/plugins/mergeCells/renderer.js

@@ -0,0 +1,74 @@
+"use strict";
+
+exports.__esModule = true;
+exports.createMergeCellRenderer = createMergeCellRenderer;
+var _object = require("../../helpers/object");
+/**
+ * Creates a renderer object for the `MergeCells` plugin.
+ *
+ * @private
+ * @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.
+   *
+   * @private
+   */
+  function before() {}
+
+  /**
+   * Runs after the cell is rendered.
+   *
+   * @private
+   * @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
+  };
+}

package/plugins/mergeCells/renderer.mjs

@@ -0,0 +1,70 @@
+import { isObject } from "../../helpers/object.mjs";
+/**
+ * Creates a renderer object for the `MergeCells` plugin.
+ *
+ * @private
+ * @param {MergeCells} plugin The `MergeCells` plugin instance.
+ * @returns {{before: Function, after: Function}}
+ */
+export function createMergeCellRenderer(plugin) {
+  const {
+    hot
+  } = plugin;
+  const {
+    rowIndexMapper: rowMapper,
+    columnIndexMapper: columnMapper
+  } = hot;
+
+  /**
+   * Runs before the cell is rendered.
+   *
+   * @private
+   */
+  function before() {}
+
+  /**
+   * Runs after the cell is rendered.
+   *
+   * @private
+   * @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 (!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
+  };
+}

package/plugins/multiColumnSorting/multiColumnSorting.js

@@ -10,7 +10,7 @@ var _rootComparator = require("./rootComparator");
 var _utils2 = require("./utils");
 var _domHelpers = require("./domHelpers");
 var _shortcutContexts = require("../../shortcutContexts");
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const PLUGIN_KEY = exports.PLUGIN_KEY = 'multiColumnSorting';
@@ -104,6 +104,7 @@ class MultiColumnSorting extends _columnSorting.ColumnSorting {
   enablePlugin() {
     if (!this.enabled && this.hot.getSettings()[this.pluginKey] && this.hot.getSettings()[CONFLICTED_PLUGIN_KEY]) {
       (0, _utils2.warnAboutPluginsConflict)();
+      this.hot.getPlugin(CONFLICTED_PLUGIN_KEY).disablePlugin();
     }
     super.enablePlugin();
   }

package/plugins/multiColumnSorting/multiColumnSorting.mjs

@@ -1,5 +1,5 @@
 import "core-js/modules/es.error.cause.js";
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { APPEND_COLUMN_CONFIG_STRATEGY, ColumnSorting } from "../columnSorting/index.mjs";
@@ -101,6 +101,7 @@ export class MultiColumnSorting extends ColumnSorting {
   enablePlugin() {
     if (!this.enabled && this.hot.getSettings()[this.pluginKey] && this.hot.getSettings()[CONFLICTED_PLUGIN_KEY]) {
       warnAboutPluginsConflict();
+      this.hot.getPlugin(CONFLICTED_PLUGIN_KEY).disablePlugin();
     }
     super.enablePlugin();
   }

package/plugins/multiColumnSorting/utils.js

@@ -9,5 +9,5 @@ var _templateLiteralTag = require("../../helpers/templateLiteralTag");
  */
 function warnAboutPluginsConflict() {
   (0, _console.warn)((0, _templateLiteralTag.toSingleLine)`Plugins \`columnSorting\` and \`multiColumnSorting\` should not be enabled simultaneously. 
-    Only \`multiColumnSorting\` will work.`);
+    Only \`multiColumnSorting\` will work. The \`columnSorting\` plugin will be disabled.`);
 }

package/plugins/multiColumnSorting/utils.mjs

@@ -5,5 +5,5 @@ import { toSingleLine } from "../../helpers/templateLiteralTag.mjs";
  */
 export function warnAboutPluginsConflict() {
   warn(toSingleLine`Plugins \`columnSorting\` and \`multiColumnSorting\` should not be enabled simultaneously. 
-    Only \`multiColumnSorting\` will work.`);
+    Only \`multiColumnSorting\` will work. The \`columnSorting\` plugin will be disabled.`);
 }