handsontable 15.2.0 → 15.3.0-next-6f5f494-20250424

package/plugins/formulas/formulas.mjs

@@ -10,7 +10,6 @@ import "core-js/modules/es.set.symmetric-difference.v2.js";
 import "core-js/modules/es.set.union.v2.js";
 import "core-js/modules/esnext.iterator.constructor.js";
 import "core-js/modules/esnext.iterator.every.js";
-import "core-js/modules/esnext.iterator.find.js";
 import "core-js/modules/esnext.iterator.for-each.js";
 import "core-js/modules/esnext.iterator.map.js";
 function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
@@ -27,8 +26,8 @@ import staticRegister from "../../utils/staticRegister.mjs";
 import { error, warn } from "../../helpers/console.mjs";
 import { isNumeric } from "../../helpers/number.mjs";
 import { isDefined, isUndefined } from "../../helpers/mixed.mjs";
-import { setupEngine, setupSheet, unregisterEngine, getRegisteredHotInstances } from "./engine/register.mjs";
-import { isEscapedFormulaExpression, unescapeFormulaExpression, isDate, isDateValid, getDateInHfFormat, getDateFromExcelDate, getDateInHotFormat, isFormula } from "./utils.mjs";
+import { getRegisteredHotInstances, setupEngine, setupSheet, unregisterEngine } from "./engine/register.mjs";
+import { getDateFromExcelDate, getDateInHfFormat, getDateInHotFormat, isDate, isDateValid, isFormula, unescapeFormulaExpression } from "./utils.mjs";
 import { getEngineSettingsWithOverrides, haveEngineSettingsChanged } from "./engine/settings.mjs";
 import { isArrayOfArrays } from "../../helpers/data.mjs";
 import { toUpperCaseFirst } from "../../helpers/string.mjs";
@@ -70,13 +69,9 @@ export class Formulas extends BasePlugin {
     super(...arguments);
     _this = this;
     /**
-     * The hook allows to translate the formula value to calculated value before it goes to the
-     * validator function.
+     * Update sheetName and sheetId properties.
      *
-     * @param {*} value The cell value to validate.
-     * @param {number} visualRow The visual row index.
-     * @param {number|string} prop The visual column index or property name of the column.
-     * @returns {*} Returns value to validate.
+     * @param {string} [sheetName] The new sheet name.
      */
     _classPrivateMethodInitSpec(this, _Formulas_brand);
     /**
@@ -143,6 +138,12 @@ export class Formulas extends BasePlugin {
      * @type {HyperFormula|null}
      */
     _defineProperty(this, "engine", null);
+    /**
+     * HyperFormula's sheet id.
+     *
+     * @type {number|null}
+     */
+    _defineProperty(this, "sheetId", null);
     /**
      * HyperFormula's sheet name.
      *
@@ -177,15 +178,6 @@ export class Formulas extends BasePlugin {
   static get SETTING_KEYS() {
     return [PLUGIN_KEY, ...SETTING_KEYS];
   }
-  /**
-   * HyperFormula's sheet id.
-   *
-   * @type {number|null}
-   */
-  get sheetId() {
-    return this.sheetName === null ? null : this.engine.getSheetId(this.sheetName);
-  }
-
   /**
    * Checks if the plugin is enabled in the handsontable settings. This method is executed in {@link Hooks#beforeInit}
    * hook and if it returns `true` then the {@link Formulas#enablePlugin} method is called.
@@ -216,7 +208,7 @@ export class Formulas extends BasePlugin {
     if (this.sheetName !== null && !this.engine.doesSheetExist(this.sheetName)) {
       const newSheetName = this.addSheet(this.sheetName, this.hot.getSourceDataArray());
       if (newSheetName !== false) {
-        this.sheetName = newSheetName;
+        _assertClassBrand(_Formulas_brand, this, _updateSheetNameAndSheetId).call(this, newSheetName);
       }
     }
     this.addHook('beforeLoadData', function () {
@@ -447,7 +439,8 @@ export class Formulas extends BasePlugin {
       if (sheetName && this.engine.doesSheetExist(sheetName)) {
         this.switchSheet(this.sheetName);
       } else {
-        this.sheetName = this.addSheet(sheetName !== null && sheetName !== void 0 ? sheetName : undefined, this.hot.getSourceDataArray());
+        const newSheetName = this.addSheet(sheetName !== null && sheetName !== void 0 ? sheetName : undefined, this.hot.getSourceDataArray());
+        _assertClassBrand(_Formulas_brand, this, _updateSheetNameAndSheetId).call(this, newSheetName);
       }
     }
     super.updatePlugin(newSettings);
@@ -467,7 +460,6 @@ export class Formulas extends BasePlugin {
     this.engine = null;
     super.destroy();
   }
-
   /**
    * Add a sheet to the shared HyperFormula instance.
    *
@@ -510,7 +502,7 @@ export class Formulas extends BasePlugin {
       error(`The sheet named \`${sheetName}\` does not exist, switch aborted.`);
       return;
     }
-    this.sheetName = sheetName;
+    _assertClassBrand(_Formulas_brand, this, _updateSheetNameAndSheetId).call(this, sheetName);
     const serialized = this.engine.getSheetSerialized(this.sheetId);
     if (serialized.length > 0) {
       this.hot.loadData(serialized, `${toUpperCaseFirst(PLUGIN_KEY)}.switchSheet`);
@@ -670,6 +662,20 @@ export class Formulas extends BasePlugin {
     }
     return this.engine.setCellContents(address, newValue);
   }
+
+  /**
+   * The hook allows to translate the formula value to calculated value before it goes to the
+   * validator function.
+   *
+   * @param {*} value The cell value to validate.
+   * @param {number} visualRow The visual row index.
+   * @param {number|string} prop The visual column index or property name of the column.
+   * @returns {*} Returns value to validate.
+   */
+}
+function _updateSheetNameAndSheetId(sheetName) {
+  this.sheetName = sheetName;
+  this.sheetId = this.engine.getSheetId(this.sheetName);
 }
 function _onBeforeValidate(value, visualRow, prop) {
   const visualColumn = this.hot.propToCol(prop);
@@ -798,29 +804,33 @@ function _onBeforeLoadData(sourceData, initialLoad) {
  * Callback to `afterCellMetaReset` hook which is triggered after setting cell meta.
  */
 function _onAfterCellMetaReset() {
+  if (_classPrivateFieldGet(_hotWasInitializedWithEmptyData, this)) {
+    this.switchSheet(this.sheetName);
+    return;
+  }
   const sourceDataArray = this.hot.getSourceDataArray();
-  let valueChanged = false;
   sourceDataArray.forEach((rowData, rowIndex) => {
     rowData.forEach((cellValue, columnIndex) => {
-      const cellMeta = this.hot.getCellMeta(rowIndex, columnIndex);
+      const cellMeta = this.hot.getCellMeta(rowIndex, columnIndex, {
+        skipMetaExtension: true
+      });
       const dateFormat = cellMeta.dateFormat;
       if (isDate(cellValue, cellMeta.type)) {
-        valueChanged = true;
         if (isDateValid(cellValue, dateFormat)) {
           // Rewriting date in HOT format to HF format.
           sourceDataArray[rowIndex][columnIndex] = getDateInHfFormat(cellValue, dateFormat);
-        } else if (this.isFormulaCellType(rowIndex, columnIndex) === false) {
+        } else if (!cellValue.startsWith('=')) {
           // Escaping value from date parsing using "'" sign (HF feature).
           sourceDataArray[rowIndex][columnIndex] = `'${cellValue}`;
         }
       }
     });
   });
-  if (valueChanged === true) {
-    _classPrivateFieldSet(_internalOperationPending, this, true);
-    this.engine.setSheetContent(this.sheetId, sourceDataArray);
-    _classPrivateFieldSet(_internalOperationPending, this, false);
-  }
+  _classPrivateFieldSet(_internalOperationPending, this, true);
+  const dependentCells = this.engine.setSheetContent(this.sheetId, sourceDataArray);
+  this.indexSyncer.setupSyncEndpoint(this.engine, this.sheetId);
+  this.renderDependentSheets(dependentCells);
+  _classPrivateFieldSet(_internalOperationPending, this, false);
 }
 /**
  * `afterLoadData` hook callback.
@@ -834,7 +844,12 @@ function _onAfterLoadData(sourceData, initialLoad) {
   if (source.includes(toUpperCaseFirst(PLUGIN_KEY))) {
     return;
   }
-  this.sheetName = setupSheet(this.engine, this.hot.getSettings()[PLUGIN_KEY].sheetName);
+  const sheetName = setupSheet(this.engine, this.hot.getSettings()[PLUGIN_KEY].sheetName);
+  _assertClassBrand(_Formulas_brand, this, _updateSheetNameAndSheetId).call(this, sheetName);
+  if (source === 'updateSettings') {
+    // For performance reasons, the initialization will be done in afterCellMetaReset hook
+    return;
+  }
   if (!_classPrivateFieldGet(_hotWasInitializedWithEmptyData, this)) {
     const sourceDataArray = this.hot.getSourceDataArray();
     if (this.engine.isItPossibleToReplaceSheetContent(this.sheetId, sourceDataArray)) {
@@ -865,17 +880,10 @@ function _onModifyData(physicalRow, visualColumn, valueHolder, ioMode) {
   if (visualRow === null || visualColumn === null) {
     return;
   }
-
-  // `column` is here as visual index because of inconsistencies related to hook execution in `src/dataMap`.
-  const isFormulaCellType = this.isFormulaCellType(visualRow, visualColumn);
-  if (!isFormulaCellType) {
-    const cellType = this.getCellType(visualRow, visualColumn);
-    if (cellType !== 'ARRAY') {
-      if (isEscapedFormulaExpression(valueHolder.value)) {
-        valueHolder.value = unescapeFormulaExpression(valueHolder.value);
-      }
-      return;
-    }
+  const cellType = this.getCellType(visualRow, visualColumn);
+  if (cellType === 'VALUE' || cellType === 'EMPTY') {
+    valueHolder.value = unescapeFormulaExpression(valueHolder.value);
+    return;
   }
   const address = {
     row: this.rowAxisSyncer.getHfIndexFromVisualIndex(visualRow),
@@ -884,21 +892,15 @@ function _onModifyData(physicalRow, visualColumn, valueHolder, ioMode) {
   };
   let cellValue = this.engine.getCellValue(address); // Date as an integer (Excel like date).
 
-  // TODO: Workaround. We use HOT's `getCellsMeta` method instead of HOT's `getCellMeta` method. Getting cell meta
-  // using the second method lead to execution of the `cells` method. Using the `getDataAtCell` (which may be useful)
-  // in a callback to the `cells` method leads to triggering the `modifyData` hook. Thus, the `onModifyData` callback
-  // is executed once again and it cause creation of an infinite loop.
-  let cellMeta = this.hot.getCellsMeta().find(singleCellMeta => singleCellMeta.visualRow === visualRow && singleCellMeta.visualCol === visualColumn);
-  if (cellMeta === undefined) {
-    cellMeta = {};
-  }
+  const cellMeta = this.hot.getCellMeta(visualRow, visualColumn, {
+    skipMetaExtension: true
+  });
   if (cellMeta.type === 'date' && isNumeric(cellValue)) {
     cellValue = getDateFromExcelDate(cellValue, cellMeta.dateFormat);
   }
 
   // If `cellValue` is an object it is expected to be an error
-  const value = typeof cellValue === 'object' && cellValue !== null ? cellValue.value : cellValue;
-  valueHolder.value = value;
+  valueHolder.value = typeof cellValue === 'object' && cellValue !== null ? cellValue.value : cellValue;
 }
 /**
  * `modifySourceData` hook callback.
@@ -918,14 +920,9 @@ function _onModifySourceData(row, columnOrProp, valueHolder, ioMode) {
   if (visualRow === null || visualColumn === null) {
     return;
   }
-
-  // `column` is here as visual index because of inconsistencies related to hook execution in `src/dataMap`.
-  const isFormulaCellType = this.isFormulaCellType(visualRow, visualColumn);
-  if (!isFormulaCellType) {
-    const cellType = this.getCellType(visualRow, visualColumn);
-    if (cellType !== 'ARRAY') {
-      return;
-    }
+  const cellType = this.getCellType(visualRow, visualColumn);
+  if (cellType === 'VALUE' || cellType === 'EMPTY') {
+    return;
   }
   const dimensions = this.engine.getSheetDimensions(this.engine.getSheetId(this.sheetName));
 
@@ -1234,7 +1231,7 @@ function _onEngineSheetAdded(addedSheetDisplayName) {
  * @param {string} newDisplayName The new name of the sheet.
  */
 function _onEngineSheetRenamed(oldDisplayName, newDisplayName) {
-  this.sheetName = newDisplayName;
+  _assertClassBrand(_Formulas_brand, this, _updateSheetNameAndSheetId).call(this, newDisplayName);
   this.hot.runHooks('afterSheetRenamed', oldDisplayName, newDisplayName);
 }
 /**

package/plugins/formulas/indexSyncer/axisSyncer.js

@@ -118,7 +118,11 @@ class AxisSyncer {
   getHfIndexFromVisualIndex(visualIndex) {
     const indexesSequence = _classPrivateFieldGet(_indexMapper, this).getIndexesSequence();
     const notTrimmedIndexes = _classPrivateFieldGet(_indexMapper, this).getNotTrimmedIndexes();
-    return indexesSequence.indexOf(notTrimmedIndexes[visualIndex]);
+
+    // Optimization:
+    // notTrimmedIndexes is a subset of indexesSequence,
+    // so for every x indexesSequence.indexOf(x) is always >= notTrimmedIndexes.indexOf(x)
+    return indexesSequence.indexOf(notTrimmedIndexes[visualIndex], visualIndex);
   }
 
   /**

package/plugins/formulas/indexSyncer/axisSyncer.mjs

@@ -115,7 +115,11 @@ class AxisSyncer {
   getHfIndexFromVisualIndex(visualIndex) {
     const indexesSequence = _classPrivateFieldGet(_indexMapper, this).getIndexesSequence();
     const notTrimmedIndexes = _classPrivateFieldGet(_indexMapper, this).getNotTrimmedIndexes();
-    return indexesSequence.indexOf(notTrimmedIndexes[visualIndex]);
+
+    // Optimization:
+    // notTrimmedIndexes is a subset of indexesSequence,
+    // so for every x indexesSequence.indexOf(x) is always >= notTrimmedIndexes.indexOf(x)
+    return indexesSequence.indexOf(notTrimmedIndexes[visualIndex], visualIndex);
   }
 
   /**

package/plugins/hiddenColumns/hiddenColumns.js

@@ -231,8 +231,8 @@ class HiddenColumns extends _base.BasePlugin {
    * Disables the plugin functionality for this Handsontable instance.
    */
   disablePlugin() {
-    this.hot.columnIndexMapper.unregisterMap(this.pluginName);
     super.disablePlugin();
+    this.hot.columnIndexMapper.unregisterMap(this.pluginName);
     this.resetCellsMeta();
   }
 

package/plugins/hiddenColumns/hiddenColumns.mjs

@@ -227,8 +227,8 @@ export class HiddenColumns extends BasePlugin {
    * Disables the plugin functionality for this Handsontable instance.
    */
   disablePlugin() {
-    this.hot.columnIndexMapper.unregisterMap(this.pluginName);
     super.disablePlugin();
+    this.hot.columnIndexMapper.unregisterMap(this.pluginName);
     this.resetCellsMeta();
   }
 

package/plugins/hiddenRows/hiddenRows.js

@@ -231,8 +231,8 @@ class HiddenRows extends _base.BasePlugin {
    * Disables the plugin functionality for this Handsontable instance.
    */
   disablePlugin() {
-    this.hot.rowIndexMapper.unregisterMap(this.pluginName);
     super.disablePlugin();
+    this.hot.rowIndexMapper.unregisterMap(this.pluginName);
     this.resetCellsMeta();
   }
 

package/plugins/hiddenRows/hiddenRows.mjs

@@ -227,8 +227,8 @@ export class HiddenRows extends BasePlugin {
    * Disables the plugin functionality for this Handsontable instance.
    */
   disablePlugin() {
-    this.hot.rowIndexMapper.unregisterMap(this.pluginName);
     super.disablePlugin();
+    this.hot.rowIndexMapper.unregisterMap(this.pluginName);
     this.resetCellsMeta();
   }
 

package/plugins/manualColumnResize/manualColumnResize.js

@@ -341,12 +341,12 @@ class ManualColumnResize extends _base.BasePlugin {
   setupGuidePosition() {
     const handleHeight = parseInt((0, _element.outerHeight)(_classPrivateFieldGet(_handle, this)), 10);
     const handleBottomPosition = parseInt(_classPrivateFieldGet(_handle, this).style.top, 10) + handleHeight;
-    const maximumVisibleElementHeight = parseInt(this.hot.view.maximumVisibleElementHeight(0), 10);
+    const tableHeight = this.hot.view.getTableHeight();
     (0, _element.addClass)(_classPrivateFieldGet(_handle, this), 'active');
     (0, _element.addClass)(_classPrivateFieldGet(_guide, this), 'active');
     _classPrivateFieldGet(_guide, this).style.top = `${handleBottomPosition}px`;
     this.refreshGuidePosition();
-    _classPrivateFieldGet(_guide, this).style.height = `${maximumVisibleElementHeight - handleHeight}px`;
+    _classPrivateFieldGet(_guide, this).style.height = `${tableHeight - handleHeight}px`;
     this.hot.rootElement.appendChild(_classPrivateFieldGet(_guide, this));
   }
 
@@ -417,8 +417,7 @@ class ManualColumnResize extends _base.BasePlugin {
    */
   afterMouseDownTimeout() {
     const render = () => {
-      this.hot.forceFullRender = true;
-      this.hot.view.render(); // updates all
+      this.hot.render();
       this.hot.view.adjustElementsSize();
     };
     const resize = (column, forceRender) => {
@@ -578,8 +577,7 @@ function _onMouseMove(event) {
  */
 function _onMouseUp() {
   const render = () => {
-    this.hot.forceFullRender = true;
-    this.hot.view.render(); // updates all
+    this.hot.render();
     this.hot.view.adjustElementsSize();
   };
   const resize = (column, forceRender) => {

package/plugins/manualColumnResize/manualColumnResize.mjs

@@ -336,12 +336,12 @@ export class ManualColumnResize extends BasePlugin {
   setupGuidePosition() {
     const handleHeight = parseInt(outerHeight(_classPrivateFieldGet(_handle, this)), 10);
     const handleBottomPosition = parseInt(_classPrivateFieldGet(_handle, this).style.top, 10) + handleHeight;
-    const maximumVisibleElementHeight = parseInt(this.hot.view.maximumVisibleElementHeight(0), 10);
+    const tableHeight = this.hot.view.getTableHeight();
     addClass(_classPrivateFieldGet(_handle, this), 'active');
     addClass(_classPrivateFieldGet(_guide, this), 'active');
     _classPrivateFieldGet(_guide, this).style.top = `${handleBottomPosition}px`;
     this.refreshGuidePosition();
-    _classPrivateFieldGet(_guide, this).style.height = `${maximumVisibleElementHeight - handleHeight}px`;
+    _classPrivateFieldGet(_guide, this).style.height = `${tableHeight - handleHeight}px`;
     this.hot.rootElement.appendChild(_classPrivateFieldGet(_guide, this));
   }
 
@@ -412,8 +412,7 @@ export class ManualColumnResize extends BasePlugin {
    */
   afterMouseDownTimeout() {
     const render = () => {
-      this.hot.forceFullRender = true;
-      this.hot.view.render(); // updates all
+      this.hot.render();
       this.hot.view.adjustElementsSize();
     };
     const resize = (column, forceRender) => {
@@ -572,8 +571,7 @@ function _onMouseMove(event) {
  */
 function _onMouseUp() {
   const render = () => {
-    this.hot.forceFullRender = true;
-    this.hot.view.render(); // updates all
+    this.hot.render();
     this.hot.view.adjustElementsSize();
   };
   const resize = (column, forceRender) => {

package/plugins/manualRowResize/manualRowResize.js

@@ -328,12 +328,12 @@ class ManualRowResize extends _base.BasePlugin {
   setupGuidePosition() {
     const handleWidth = parseInt((0, _element.outerWidth)(_classPrivateFieldGet(_handle, this)), 10);
     const handleEndPosition = parseInt(_classPrivateFieldGet(_handle, this).style[this.inlineDir], 10) + handleWidth;
-    const maximumVisibleElementWidth = parseInt(this.hot.view.maximumVisibleElementWidth(0), 10);
+    const tableWidth = this.hot.view.getTableWidth();
     (0, _element.addClass)(_classPrivateFieldGet(_handle, this), 'active');
     (0, _element.addClass)(_classPrivateFieldGet(_guide, this), 'active');
     _classPrivateFieldGet(_guide, this).style.top = _classPrivateFieldGet(_handle, this).style.top;
     _classPrivateFieldGet(_guide, this).style[this.inlineDir] = `${handleEndPosition}px`;
-    _classPrivateFieldGet(_guide, this).style.width = `${maximumVisibleElementWidth - handleWidth}px`;
+    _classPrivateFieldGet(_guide, this).style.width = `${tableWidth - handleWidth}px`;
     this.hot.rootElement.appendChild(_classPrivateFieldGet(_guide, this));
   }
 
@@ -414,8 +414,7 @@ class ManualRowResize extends _base.BasePlugin {
    */
   afterMouseDownTimeout() {
     const render = () => {
-      this.hot.forceFullRender = true;
-      this.hot.view.render(); // updates all
+      this.hot.render();
       this.hot.view.adjustElementsSize();
     };
     const resize = (row, forceRender) => {
@@ -543,8 +542,7 @@ function _onMouseMove(event) {
  */
 function _onMouseUp() {
   const render = () => {
-    this.hot.forceFullRender = true;
-    this.hot.view.render(); // updates all
+    this.hot.render();
     this.hot.view.adjustElementsSize();
   };
   const runHooks = (row, forceRender) => {

package/plugins/manualRowResize/manualRowResize.mjs

@@ -323,12 +323,12 @@ export class ManualRowResize extends BasePlugin {
   setupGuidePosition() {
     const handleWidth = parseInt(outerWidth(_classPrivateFieldGet(_handle, this)), 10);
     const handleEndPosition = parseInt(_classPrivateFieldGet(_handle, this).style[this.inlineDir], 10) + handleWidth;
-    const maximumVisibleElementWidth = parseInt(this.hot.view.maximumVisibleElementWidth(0), 10);
+    const tableWidth = this.hot.view.getTableWidth();
     addClass(_classPrivateFieldGet(_handle, this), 'active');
     addClass(_classPrivateFieldGet(_guide, this), 'active');
     _classPrivateFieldGet(_guide, this).style.top = _classPrivateFieldGet(_handle, this).style.top;
     _classPrivateFieldGet(_guide, this).style[this.inlineDir] = `${handleEndPosition}px`;
-    _classPrivateFieldGet(_guide, this).style.width = `${maximumVisibleElementWidth - handleWidth}px`;
+    _classPrivateFieldGet(_guide, this).style.width = `${tableWidth - handleWidth}px`;
     this.hot.rootElement.appendChild(_classPrivateFieldGet(_guide, this));
   }
 
@@ -409,8 +409,7 @@ export class ManualRowResize extends BasePlugin {
    */
   afterMouseDownTimeout() {
     const render = () => {
-      this.hot.forceFullRender = true;
-      this.hot.view.render(); // updates all
+      this.hot.render();
       this.hot.view.adjustElementsSize();
     };
     const resize = (row, forceRender) => {
@@ -537,8 +536,7 @@ function _onMouseMove(event) {
  */
 function _onMouseUp() {
   const render = () => {
-    this.hot.forceFullRender = true;
-    this.hot.view.render(); // updates all
+    this.hot.render();
     this.hot.view.adjustElementsSize();
   };
   const runHooks = (row, forceRender) => {

package/plugins/mergeCells/mergeCells.js

@@ -30,6 +30,7 @@ var _element = require("../../helpers/dom/element");
 var _browser = require("../../helpers/browser");
 var _focusOrder2 = require("./focusOrder");
 var _renderer = require("./renderer");
+var _utils = require("./utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
 function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
@@ -432,7 +433,8 @@ class MergeCells extends _base.BasePlugin {
     // Asynchronously revert the TRs' `background` property to force a fresh repaint.
     this.hot._registerTimeout(() => {
       rowsToRefresh.forEach(rowElement => {
-        rowElement.style.background = (0, _element.getStyle)(rowElement, 'backgroundColor').replace(', 0.99)', ')');
+        var _getStyle;
+        rowElement.style.background = (_getStyle = (0, _element.getStyle)(rowElement, 'backgroundColor')) === null || _getStyle === void 0 ? void 0 : _getStyle.replace(', 0.99)', ')');
       });
     }, 1);
   }
@@ -666,8 +668,12 @@ class MergeCells extends _base.BasePlugin {
    * @param {CellRange} cellRange The cell range to merge or unmerged.
    */
   toggleMerge(cellRange) {
-    const mergedCell = this.mergedCellsCollection.get(cellRange.from.row, cellRange.from.col);
-    const mergedCellCoversWholeRange = mergedCell.row === cellRange.from.row && mergedCell.col === cellRange.from.col && mergedCell.row + mergedCell.rowspan - 1 === cellRange.to.row && mergedCell.col + mergedCell.colspan - 1 === cellRange.to.col;
+    const {
+      from,
+      to
+    } = cellRange.clone().normalize();
+    const mergedCell = this.mergedCellsCollection.get(from.row, from.col);
+    const mergedCellCoversWholeRange = mergedCell.row === from.row && mergedCell.col === from.col && mergedCell.row + mergedCell.rowspan - 1 === to.row && mergedCell.col + mergedCell.colspan - 1 === to.col;
     if (mergedCellCoversWholeRange) {
       this.unmergeRange(cellRange);
     } else {
@@ -1479,33 +1485,7 @@ function _onModifyRowHeightByOverlayName(height, row, overlayType) {
     } else {
       rowspanAfterCorrection = rowspan - rowspanCorrection;
     }
-    height = Math.max(height !== null && height !== void 0 ? height : 0, _assertClassBrand(_MergeCells_brand, this, _sumCellsHeights).call(this, row, rowspanAfterCorrection));
+    height = Math.max(height !== null && height !== void 0 ? height : 0, (0, _utils.sumCellsHeights)(this.hot, 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 {
-    view,
-    rowIndexMapper
-  } = this.hot;
-  const stylesHandler = view.getStylesHandler();
-  const defaultHeight = view.getDefaultRowHeight();
-  let height = 0;
-  for (let i = row; i < row + rowspan; i++) {
-    if (!rowIndexMapper.isHidden(i)) {
-      var _this$hot$getRowHeigh;
-      height += (_this$hot$getRowHeigh = this.hot.getRowHeight(i)) !== null && _this$hot$getRowHeigh !== void 0 ? _this$hot$getRowHeigh : defaultHeight;
-      if (i === 0 && !stylesHandler.isClassicTheme()) {
-        height += 1; // border-top-width
-      }
-    }
-  }
-  return height;
 }

package/plugins/mergeCells/mergeCells.mjs

@@ -36,6 +36,7 @@ import { getStyle } from "../../helpers/dom/element.mjs";
 import { isChrome } from "../../helpers/browser.mjs";
 import { FocusOrder } from "./focusOrder.mjs";
 import { createMergeCellRenderer } from "./renderer.mjs";
+import { sumCellsHeights } from "./utils.mjs";
 Hooks.getSingleton().register('beforeMergeCells');
 Hooks.getSingleton().register('afterMergeCells');
 Hooks.getSingleton().register('beforeUnmergeCells');
@@ -428,7 +429,8 @@ export class MergeCells extends BasePlugin {
     // Asynchronously revert the TRs' `background` property to force a fresh repaint.
     this.hot._registerTimeout(() => {
       rowsToRefresh.forEach(rowElement => {
-        rowElement.style.background = getStyle(rowElement, 'backgroundColor').replace(', 0.99)', ')');
+        var _getStyle;
+        rowElement.style.background = (_getStyle = getStyle(rowElement, 'backgroundColor')) === null || _getStyle === void 0 ? void 0 : _getStyle.replace(', 0.99)', ')');
       });
     }, 1);
   }
@@ -662,8 +664,12 @@ export class MergeCells extends BasePlugin {
    * @param {CellRange} cellRange The cell range to merge or unmerged.
    */
   toggleMerge(cellRange) {
-    const mergedCell = this.mergedCellsCollection.get(cellRange.from.row, cellRange.from.col);
-    const mergedCellCoversWholeRange = mergedCell.row === cellRange.from.row && mergedCell.col === cellRange.from.col && mergedCell.row + mergedCell.rowspan - 1 === cellRange.to.row && mergedCell.col + mergedCell.colspan - 1 === cellRange.to.col;
+    const {
+      from,
+      to
+    } = cellRange.clone().normalize();
+    const mergedCell = this.mergedCellsCollection.get(from.row, from.col);
+    const mergedCellCoversWholeRange = mergedCell.row === from.row && mergedCell.col === from.col && mergedCell.row + mergedCell.rowspan - 1 === to.row && mergedCell.col + mergedCell.colspan - 1 === to.col;
     if (mergedCellCoversWholeRange) {
       this.unmergeRange(cellRange);
     } else {
@@ -1474,33 +1480,7 @@ function _onModifyRowHeightByOverlayName(height, row, overlayType) {
     } else {
       rowspanAfterCorrection = rowspan - rowspanCorrection;
     }
-    height = Math.max(height !== null && height !== void 0 ? height : 0, _assertClassBrand(_MergeCells_brand, this, _sumCellsHeights).call(this, row, rowspanAfterCorrection));
+    height = Math.max(height !== null && height !== void 0 ? height : 0, sumCellsHeights(this.hot, 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 {
-    view,
-    rowIndexMapper
-  } = this.hot;
-  const stylesHandler = view.getStylesHandler();
-  const defaultHeight = view.getDefaultRowHeight();
-  let height = 0;
-  for (let i = row; i < row + rowspan; i++) {
-    if (!rowIndexMapper.isHidden(i)) {
-      var _this$hot$getRowHeigh;
-      height += (_this$hot$getRowHeigh = this.hot.getRowHeight(i)) !== null && _this$hot$getRowHeigh !== void 0 ? _this$hot$getRowHeigh : defaultHeight;
-      if (i === 0 && !stylesHandler.isClassicTheme()) {
-        height += 1; // border-top-width
-      }
-    }
-  }
-  return height;
 }

package/plugins/mergeCells/renderer.js

@@ -3,6 +3,8 @@
 exports.__esModule = true;
 exports.createMergeCellRenderer = createMergeCellRenderer;
 var _object = require("../../helpers/object");
+var _browser = require("../../helpers/browser");
+var _utils = require("./utils");
 /**
  * Creates a renderer object for the `MergeCells` plugin.
  *
@@ -18,6 +20,7 @@ function createMergeCellRenderer(plugin) {
     rowIndexMapper: rowMapper,
     columnIndexMapper: columnMapper
   } = hot;
+  const updateNextCellsHeight = new Map();
 
   /**
    * Runs before the cell is rendered.
@@ -39,6 +42,10 @@ function createMergeCellRenderer(plugin) {
     if (!(0, _object.isObject)(mergedCell)) {
       TD.removeAttribute('rowspan');
       TD.removeAttribute('colspan');
+      if ((0, _browser.isSafari)() && updateNextCellsHeight.has(row) && !hot.getSettings().rowHeaders) {
+        TD.style.height = `${updateNextCellsHeight.get(row)}px`;
+        updateNextCellsHeight.delete(row);
+      }
       TD.style.display = '';
       return;
     }
@@ -50,6 +57,14 @@ function createMergeCellRenderer(plugin) {
     } = mergedCell;
     const [lastMergedRowIndex, lastMergedColumnIndex] = plugin.translateMergedCellToRenderable(origRow, origRowspan, origColumn, origColspan);
     const isVirtualRenderingEnabled = plugin.getSetting('virtualized');
+
+    // Safari bug fix - the height of the cells next to the merged cell must be defined
+    // so that their height is proportional to the height of the merged cell
+    // (this emulates default behavior in Chrome, FF etc.)
+    if ((0, _browser.isSafari)() && origColumn === 0 && !hot.getSettings().rowHeaders) {
+      const height = (0, _utils.sumCellsHeights)(hot, origRow, origRowspan);
+      updateNextCellsHeight.set(row, height / origRowspan);
+    }
     const renderedRowIndex = rowMapper.getRenderableFromVisualIndex(row);
     const renderedColumnIndex = columnMapper.getRenderableFromVisualIndex(col);
     const maxRowSpan = lastMergedRowIndex - renderedRowIndex + 1; // Number of rendered columns.