handsontable 0.0.0-next-e2116ad-20250117 → 0.0.0-next-542a54e-20250121

package/dist/handsontable.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-e2116ad-20250117
- * Release date: 16/12/2024 (built at 17/01/2025 11:44:24)
+ * Version: 0.0.0-next-542a54e-20250121
+ * Release date: 16/12/2024 (built at 21/01/2025 09:00:27)
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -104,8 +104,8 @@ Handsontable.hooks = _hooks.Hooks.getSingleton();
 Handsontable.CellCoords = _src.CellCoords;
 Handsontable.CellRange = _src.CellRange;
 Handsontable.packageName = 'handsontable';
-Handsontable.buildDate = "17/01/2025 11:44:24";
-Handsontable.version = "0.0.0-next-e2116ad-20250117";
+Handsontable.buildDate = "21/01/2025 09:00:27";
+Handsontable.version = "0.0.0-next-542a54e-20250121";
 Handsontable.languages = {
   dictionaryKeys: _registry.dictionaryKeys,
   getLanguageDictionary: _registry.getLanguageDictionary,
@@ -10104,7 +10104,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-e2116ad-20250117";
+  const hotVersion = "0.0.0-next-542a54e-20250121";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';
@@ -17909,7 +17909,7 @@ class TableView {
     if (this.hot.isRenderSuspended()) {
       this.postponedAdjustElementsSize = true;
     } else {
-      this._wt.wtOverlays.adjustElementsSize();
+      // this._wt.wtOverlays.adjustElementsSize();
     }
   }
 
@@ -18990,7 +18990,7 @@ class TableView {
   updateCellHeader(element, index, content) {
     let headerLevel = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
     let renderedIndex = index;
-    const parentOverlay = this._wt.wtOverlays.getParentOverlay(element) || this._wt;
+    const parentOverlay = this._wt;
 
     // prevent wrong calculations from SampleGenerator
     if (element.parentNode) {
@@ -22431,9 +22431,6 @@ var _interopRequireDefault = __webpack_require__(1);
 exports.__esModule = true;
 __webpack_require__(5);
 __webpack_require__(87);
-__webpack_require__(115);
-__webpack_require__(133);
-__webpack_require__(196);
 var _defineProperty2 = _interopRequireDefault(__webpack_require__(170));
 var _element = __webpack_require__(155);
 var _feature = __webpack_require__(168);
@@ -22451,7 +22448,6 @@ function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.h
  * @class Overlays
  */
 var _overlays = /*#__PURE__*/new WeakMap();
-var _hasRenderingStateChanged = /*#__PURE__*/new WeakMap();
 var _containerDomResizeCount = /*#__PURE__*/new WeakMap();
 var _containerDomResizeCountTimeout = /*#__PURE__*/new WeakMap();
 class Overlays {
@@ -22526,12 +22522,6 @@ class Overlays {
      * @type {Settings}
      */
     (0, _defineProperty2.default)(this, "wtSettings", null);
-    /**
-     * Indicates whether the rendering state has changed for one of the overlays.
-     *
-     * @type {boolean}
-     */
-    _classPrivateFieldInitSpec(this, _hasRenderingStateChanged, false);
     /**
      * The amount of times the ResizeObserver callback was fired in direct succession.
      *
@@ -22578,32 +22568,16 @@ class Overlays {
     this.domBindings = domBindings;
     this.facadeGetter = facadeGetter;
     this.wtTable = wtTable;
+    this.eventManager = eventManager;
+    this.destroyed = false;
     const {
-      rootDocument,
       rootWindow
     } = this.domBindings;
-
-    // legacy support
-    this.instance = this.wot; // todo refactoring: move to facade
-    this.eventManager = eventManager;
-
-    // TODO refactoring: probably invalid place to this logic
-    this.scrollbarSize = (0, _element.getScrollbarWidth)(rootDocument);
     const isOverflowHidden = rootWindow.getComputedStyle(wtTable.wtRootElement.parentNode).getPropertyValue('overflow') === 'hidden';
     this.scrollableElement = isOverflowHidden ? wtTable.holder : (0, _element.getScrollableElement)(wtTable.TABLE);
     this.initOverlays();
-    this.destroyed = false;
-    this.keyPressed = false;
-    this.spreaderLastSize = {
-      width: null,
-      height: null
-    };
-    this.verticalScrolling = false;
-    this.horizontalScrolling = false;
     this.initBrowserLineHeight();
     this.registerListeners();
-    this.lastScrollX = rootWindow.scrollX;
-    this.lastScrollY = rootWindow.scrollY;
   }
 
   /**
@@ -22638,8 +22612,8 @@ class Overlays {
      * Https://developer.mozilla.org/pl/docs/Web/CSS/line-height#Values.
      */
     const lineHeight = parseInt(computedStyle.lineHeight, 10);
-    const lineHeightFalback = parseInt(computedStyle.fontSize, 10) * 1.2;
-    this.browserLineHeight = lineHeight || lineHeightFalback;
+    const lineHeightFallback = parseInt(computedStyle.fontSize, 10) * 1.2;
+    this.browserLineHeight = lineHeight || lineHeightFallback;
   }
 
   /**
@@ -22649,15 +22623,9 @@ class Overlays {
    */
   initOverlays() {
     const args = [this.wot, this.facadeGetter, this.wtSettings, this.domBindings];
-
-    // todo refactoring: IOC, collection or factories.
-    // TODO refactoring, conceive about using generic collection of overlays.
     this.topOverlay = new _overlay.TopOverlay(...args);
     this.bottomOverlay = new _overlay.BottomOverlay(...args);
     this.inlineStartOverlay = new _overlay.InlineStartOverlay(...args);
-
-    // TODO discuss, the controversial here would be removing the lazy creation mechanism for corners.
-    // TODO cond. Has no any visual impact. They're initially hidden in same way like left, top, and bottom overlays.
     this.topInlineStartCornerOverlay = new _overlay.TopInlineStartCornerOverlay(...args, this.topOverlay, this.inlineStartOverlay);
     this.bottomInlineStartCornerOverlay = new _overlay.BottomInlineStartCornerOverlay(...args, this.bottomOverlay, this.inlineStartOverlay);
     _classPrivateFieldSet(_overlays, this, [this.topOverlay, this.bottomOverlay, this.inlineStartOverlay, this.topInlineStartCornerOverlay, this.bottomInlineStartCornerOverlay]);
@@ -22666,48 +22634,20 @@ class Overlays {
   /**
    * Runs logic for the overlays before the table is drawn.
    */
-  beforeDraw() {
-    _classPrivateFieldSet(_hasRenderingStateChanged, this, _classPrivateFieldGet(_overlays, this).reduce((acc, overlay) => {
-      return overlay.hasRenderingStateChanged() || acc;
-    }, false));
-    _classPrivateFieldGet(_overlays, this).forEach(overlay => overlay.updateStateOfRendering('before'));
-  }
+  beforeDraw() {}
 
   /**
    * Runs logic for the overlays after the table is drawn.
    */
-  afterDraw() {
-    this.syncScrollWithMaster();
-    _classPrivateFieldGet(_overlays, this).forEach(overlay => {
-      const hasRenderingStateChanged = overlay.hasRenderingStateChanged();
-      overlay.updateStateOfRendering('after');
-      if (hasRenderingStateChanged && !overlay.needFullRender) {
-        overlay.reset();
-      }
-    });
-  }
+  afterDraw() {}
 
   /**
    * Refresh and redraw table.
    */
-  refreshAll() {
-    if (!this.wot.drawn) {
-      return;
-    }
-    if (!this.wtTable.holder.parentNode) {
-      // Walkontable was detached from DOM, but this handler was not removed
-      this.destroy();
-      return;
-    }
-    this.wot.draw(true);
-    if (this.verticalScrolling) {
-      this.inlineStartOverlay.onScroll(); // todo the inlineStartOverlay.onScroll() fires hook. Why is it needed there, not in any another place?
-    }
-    if (this.horizontalScrolling) {
-      this.topOverlay.onScroll();
-    }
-    this.verticalScrolling = false;
-    this.horizontalScrolling = false;
+  draw(fastDraw) {
+    (0, _array.arrayEach)(_classPrivateFieldGet(_overlays, this), overlay => {
+      overlay.adjustRootElementSize();
+    });
   }
 
   /**
@@ -22715,39 +22655,22 @@ class Overlays {
    */
   registerListeners() {
     const {
-      rootDocument,
       rootWindow
     } = this.domBindings;
-    const {
-      mainTableScrollableElement: topOverlayScrollableElement
-    } = this.topOverlay;
-    const {
-      mainTableScrollableElement: inlineStartOverlayScrollableElement
-    } = this.inlineStartOverlay;
-    this.eventManager.addEventListener(rootDocument.documentElement, 'keydown', event => this.onKeyDown(event));
-    this.eventManager.addEventListener(rootDocument.documentElement, 'keyup', () => this.onKeyUp());
-    this.eventManager.addEventListener(rootDocument, 'visibilitychange', () => this.onKeyUp());
-    this.eventManager.addEventListener(topOverlayScrollableElement, 'scroll', event => this.onTableScroll(event), {
-      passive: true
-    });
-    if (topOverlayScrollableElement !== inlineStartOverlayScrollableElement) {
-      this.eventManager.addEventListener(inlineStartOverlayScrollableElement, 'scroll', event => this.onTableScroll(event), {
-        passive: true
-      });
-    }
     const isHighPixelRatio = rootWindow.devicePixelRatio && rootWindow.devicePixelRatio > 1;
     const isScrollOnWindow = this.scrollableElement === rootWindow;
     const preventWheel = this.wtSettings.getSetting('preventWheel');
     const wheelEventOptions = {
       passive: isScrollOnWindow
     };
+    this.eventManager.addEventListener(this.scrollableElement, 'scroll', event => {
+      this.wot.draw(true);
+    }, {
+      passive: true
+    });
     if (preventWheel || isHighPixelRatio || !(0, _browser.isChrome)()) {
       this.eventManager.addEventListener(this.wtTable.wtRootElement, 'wheel', event => this.onCloneWheel(event, preventWheel), wheelEventOptions);
     }
-    const overlays = [this.topOverlay, this.bottomOverlay, this.inlineStartOverlay, this.topInlineStartCornerOverlay, this.bottomInlineStartCornerOverlay];
-    overlays.forEach(overlay => {
-      this.eventManager.addEventListener(overlay.clone.wtTable.holder, 'wheel', event => this.onCloneWheel(event, preventWheel), wheelEventOptions);
-    });
     let resizeTimeout;
     this.eventManager.addEventListener(rootWindow, 'resize', () => {
       (0, _feature.requestAnimationFrame)(() => {
@@ -22764,29 +22687,6 @@ class Overlays {
     }
   }
 
-  /**
-   * Scroll listener.
-   *
-   * @param {Event} event The mouse event object.
-   */
-  onTableScroll(event) {
-    // There was if statement which controlled flow of this function. It avoided the execution of the next lines
-    // on mobile devices. It was changed. Broader description of this case is included within issue #4856.
-    const rootWindow = this.domBindings.rootWindow;
-    const masterHorizontal = this.inlineStartOverlay.mainTableScrollableElement;
-    const masterVertical = this.topOverlay.mainTableScrollableElement;
-    const target = event.target;
-
-    // For key press, sync only master -> overlay position because while pressing Walkontable.render is triggered
-    // by hot.refreshBorder
-    if (this.keyPressed) {
-      if (masterVertical !== rootWindow && target !== rootWindow && !event.target.contains(masterVertical) || masterHorizontal !== rootWindow && target !== rootWindow && !event.target.contains(masterHorizontal)) {
-        return;
-      }
-    }
-    this.syncScrollPositions(event);
-  }
-
   /**
    * Wheel listener for cloned overlays.
    *
@@ -22797,43 +22697,12 @@ class Overlays {
     const {
       rootWindow
     } = this.domBindings;
-
-    // There was if statement which controlled flow of this function. It avoided the execution of the next lines
-    // on mobile devices. It was changed. Broader description of this case is included within issue #4856.
-
-    const masterHorizontal = this.inlineStartOverlay.mainTableScrollableElement;
-    const masterVertical = this.topOverlay.mainTableScrollableElement;
-    const target = event.target;
-
-    // For key press, sync only master -> overlay position because while pressing Walkontable.render is triggered
-    // by hot.refreshBorder
-    const shouldNotWheelVertically = masterVertical !== rootWindow && target !== rootWindow && !target.contains(masterVertical);
-    const shouldNotWheelHorizontally = masterHorizontal !== rootWindow && target !== rootWindow && !target.contains(masterHorizontal);
-    if (this.keyPressed && (shouldNotWheelVertically || shouldNotWheelHorizontally) || this.scrollableElement === rootWindow) {
-      return;
-    }
     const isScrollPossible = this.translateMouseWheelToScroll(event);
     if (preventDefault || this.scrollableElement !== rootWindow && isScrollPossible) {
       event.preventDefault();
     }
   }
 
-  /**
-   * Key down listener.
-   *
-   * @param {Event} event The keyboard event object.
-   */
-  onKeyDown(event) {
-    this.keyPressed = (0, _unicode.isKey)(event.keyCode, 'ARROW_UP|ARROW_RIGHT|ARROW_DOWN|ARROW_LEFT');
-  }
-
-  /**
-   * Key up listener.
-   */
-  onKeyUp() {
-    this.keyPressed = false;
-  }
-
   /**
    * Translate wheel event into scroll event and sync scroll overlays position.
    *
@@ -22876,130 +22745,6 @@ class Overlays {
     this.scrollableElement.scrollLeft += delta;
     return previousScroll !== this.scrollableElement.scrollLeft;
   }
-
-  /**
-   * Synchronize scroll position between master table and overlay table.
-   *
-   * @private
-   */
-  syncScrollPositions() {
-    if (this.destroyed) {
-      return;
-    }
-    const {
-      rootWindow
-    } = this.domBindings;
-    const topHolder = this.topOverlay.clone.wtTable.holder; // todo rethink
-    const leftHolder = this.inlineStartOverlay.clone.wtTable.holder; // todo rethink
-
-    const [scrollLeft, scrollTop] = [this.scrollableElement.scrollLeft, this.scrollableElement.scrollTop];
-    this.horizontalScrolling = topHolder.scrollLeft !== scrollLeft || this.lastScrollX !== rootWindow.scrollX;
-    this.verticalScrolling = leftHolder.scrollTop !== scrollTop || this.lastScrollY !== rootWindow.scrollY;
-    this.lastScrollX = rootWindow.scrollX;
-    this.lastScrollY = rootWindow.scrollY;
-    if (this.horizontalScrolling) {
-      topHolder.scrollLeft = scrollLeft;
-      const bottomHolder = this.bottomOverlay.needFullRender ? this.bottomOverlay.clone.wtTable.holder : null; // todo rethink
-
-      if (bottomHolder) {
-        bottomHolder.scrollLeft = scrollLeft;
-      }
-    }
-    if (this.verticalScrolling) {
-      leftHolder.scrollTop = scrollTop;
-    }
-    this.refreshAll();
-  }
-
-  /**
-   * Synchronize overlay scrollbars with the master scrollbar.
-   */
-  syncScrollWithMaster() {
-    if (!_classPrivateFieldGet(_hasRenderingStateChanged, this)) {
-      return;
-    }
-    const master = this.topOverlay.mainTableScrollableElement;
-    const {
-      scrollLeft,
-      scrollTop
-    } = master;
-    if (this.topOverlay.needFullRender) {
-      this.topOverlay.clone.wtTable.holder.scrollLeft = scrollLeft; // todo rethink, *overlay.setScroll*()
-    }
-    if (this.bottomOverlay.needFullRender) {
-      this.bottomOverlay.clone.wtTable.holder.scrollLeft = scrollLeft; // todo rethink, *overlay.setScroll*()
-    }
-    if (this.inlineStartOverlay.needFullRender) {
-      this.inlineStartOverlay.clone.wtTable.holder.scrollTop = scrollTop; // todo rethink, *overlay.setScroll*()
-    }
-    _classPrivateFieldSet(_hasRenderingStateChanged, this, false);
-  }
-
-  /**
-   *
-   */
-  destroy() {
-    this.resizeObserver.disconnect();
-    this.eventManager.destroy();
-    // todo, probably all below `destroy` calls has no sense. To analyze
-    this.topOverlay.destroy();
-    if (this.bottomOverlay.clone) {
-      this.bottomOverlay.destroy();
-    }
-    this.inlineStartOverlay.destroy();
-    if (this.topInlineStartCornerOverlay) {
-      this.topInlineStartCornerOverlay.destroy();
-    }
-    if (this.bottomInlineStartCornerOverlay && this.bottomInlineStartCornerOverlay.clone) {
-      this.bottomInlineStartCornerOverlay.destroy();
-    }
-    this.destroyed = true;
-  }
-
-  /**
-   * @param {boolean} [fastDraw=false] When `true`, try to refresh only the positions of borders without rerendering
-   *                                   the data. It will only work if Table.draw() does not force
-   *                                   rendering anyway.
-   */
-  refresh() {
-    let fastDraw = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    const wasSpreaderSizeUpdated = this.updateLastSpreaderSize();
-    if (wasSpreaderSizeUpdated) {
-      this.adjustElementsSize();
-    }
-    if (this.bottomOverlay.clone) {
-      this.bottomOverlay.refresh(fastDraw);
-    }
-    this.inlineStartOverlay.refresh(fastDraw);
-    this.topOverlay.refresh(fastDraw);
-    if (this.topInlineStartCornerOverlay) {
-      this.topInlineStartCornerOverlay.refresh(fastDraw);
-    }
-    if (this.bottomInlineStartCornerOverlay && this.bottomInlineStartCornerOverlay.clone) {
-      this.bottomInlineStartCornerOverlay.refresh(fastDraw);
-    }
-  }
-
-  /**
-   * Update the last cached spreader size with the current size.
-   *
-   * @returns {boolean} `true` if the lastSpreaderSize cache was updated, `false` otherwise.
-   */
-  updateLastSpreaderSize() {
-    const spreader = this.wtTable.spreader;
-    const width = spreader.clientWidth;
-    const height = spreader.clientHeight;
-    const needsUpdating = width !== this.spreaderLastSize.width || height !== this.spreaderLastSize.height;
-    if (needsUpdating) {
-      this.spreaderLastSize.width = width;
-      this.spreaderLastSize.height = height;
-    }
-    return needsUpdating;
-  }
-
-  /**
-   * Adjust overlays elements size and master table size.
-   */
   adjustElementsSize() {
     const {
       wtViewport
@@ -23019,99 +22764,44 @@ class Overlays {
     const proposedHiderWidth = headerRowSize + this.inlineStartOverlay.sumCellSizes(0, totalColumns);
     const hiderElement = wtTable.hider;
     const hiderStyle = hiderElement.style;
-    const isScrolledBeyondHiderHeight = () => {
-      return isWindowScrolled ? false : this.scrollableElement.scrollTop > Math.max(0, proposedHiderHeight - wtTable.holder.clientHeight);
-    };
-    const isScrolledBeyondHiderWidth = () => {
-      return isWindowScrolled ? false : this.scrollableElement.scrollLeft > Math.max(0, proposedHiderWidth - wtTable.holder.clientWidth);
-    };
-    const columnHeaderBorderCompensation = isScrolledBeyondHiderHeight() ? 1 : 0;
-    const rowHeaderBorderCompensation = isScrolledBeyondHiderWidth() ? 1 : 0;
-
-    // If the elements are being adjusted after scrolling the table from the very beginning to the very end,
-    // we need to adjust the hider dimensions by the header border size. (https://github.com/handsontable/dev-handsontable/issues/1772)
-    hiderStyle.width = `${proposedHiderWidth + rowHeaderBorderCompensation}px`;
-    hiderStyle.height = `${proposedHiderHeight + columnHeaderBorderCompensation}px`;
-    this.topOverlay.adjustElementsSize();
-    this.inlineStartOverlay.adjustElementsSize();
-    this.bottomOverlay.adjustElementsSize();
-  }
-
-  /**
-   * Expand the hider vertically element by the provided delta value.
-   *
-   * @param {number} heightDelta The delta value to expand the hider element by.
-   */
-  expandHiderVerticallyBy(heightDelta) {
-    const {
-      wtTable
-    } = this;
-    wtTable.hider.style.height = `${parseInt(wtTable.hider.style.height, 10) + heightDelta}px`;
-  }
-
-  /**
-   * Expand the hider horizontally element by the provided delta value.
-   *
-   * @param {number} widthDelta The delta value to expand the hider element by.
-   */
-  expandHiderHorizontallyBy(widthDelta) {
-    const {
-      wtTable
-    } = this;
-    wtTable.hider.style.width = `${parseInt(wtTable.hider.style.width, 10) + widthDelta}px`;
-  }
-
-  /**
-   *
-   */
-  applyToDOM() {
-    if (!this.wtTable.isVisible()) {
-      return;
+    hiderStyle.width = `${proposedHiderWidth}px`;
+    hiderStyle.height = `${proposedHiderHeight}px`;
+    const styleProperty = this.wtSettings.getSetting('rtlMode') ? 'right' : 'paddingLeft';
+    if (typeof this.wot.wtViewport.columnsRenderCalculator.startPosition === 'number') {
+      wtTable.spreader.style[styleProperty] = `${this.wot.wtViewport.columnsRenderCalculator.startPosition}px`;
+    } else if (totalColumns === 0) {
+      wtTable.spreader.style[styleProperty] = '0';
+    } else {
+      throw new Error('Incorrect value of the columnsRenderCalculator');
     }
-    this.topOverlay.applyToDOM();
-    if (this.bottomOverlay.clone) {
-      this.bottomOverlay.applyToDOM();
+    if (typeof this.wot.wtViewport.rowsRenderCalculator.startPosition === 'number') {
+      wtTable.spreader.style.paddingTop = `${this.wot.wtViewport.rowsRenderCalculator.startPosition}px`;
+    } else if (totalRows === 0) {
+      wtTable.spreader.style.paddingTop = '0';
+    } else {
+      throw new Error('Incorrect value of the rowsRenderCalculator');
     }
-    this.inlineStartOverlay.applyToDOM();
   }
 
   /**
-   * Get the parent overlay of the provided element.
    *
-   * @param {HTMLElement} element An element to process.
-   * @returns {object|null}
    */
-  getParentOverlay(element) {
-    if (!element) {
-      return null;
+  destroy() {
+    this.resizeObserver.disconnect();
+    this.eventManager.destroy();
+    // todo, probably all below `destroy` calls has no sense. To analyze
+    this.topOverlay.destroy();
+    if (this.bottomOverlay.clone) {
+      this.bottomOverlay.destroy();
     }
-    const overlays = [this.topOverlay, this.inlineStartOverlay, this.bottomOverlay, this.topInlineStartCornerOverlay, this.bottomInlineStartCornerOverlay];
-    let result = null;
-    (0, _array.arrayEach)(overlays, overlay => {
-      if (!overlay) {
-        return;
-      }
-      if (overlay.clone && overlay.clone.wtTable.TABLE.contains(element)) {
-        // todo demeter
-        result = overlay.clone;
-      }
-    });
-    return result;
-  }
-
-  /**
-   * Synchronize the class names between the main overlay table and the tables on the other overlays.
-   *
-   */
-  syncOverlayTableClassNames() {
-    const masterTable = this.wtTable.TABLE;
-    const overlays = [this.topOverlay, this.inlineStartOverlay, this.bottomOverlay, this.topInlineStartCornerOverlay, this.bottomInlineStartCornerOverlay];
-    (0, _array.arrayEach)(overlays, elem => {
-      if (!elem) {
-        return;
-      }
-      elem.clone.wtTable.TABLE.className = masterTable.className; // todo demeter
-    });
+    this.inlineStartOverlay.destroy();
+    if (this.topInlineStartCornerOverlay) {
+      this.topInlineStartCornerOverlay.destroy();
+    }
+    if (this.bottomInlineStartCornerOverlay && this.bottomInlineStartCornerOverlay.clone) {
+      this.bottomInlineStartCornerOverlay.destroy();
+    }
+    this.destroyed = true;
   }
 }
 var _default = exports["default"] = Overlays;
@@ -23207,6 +22897,7 @@ class BottomInlineStartCornerOverlay extends _base.Overlay {
   shouldBeRendered() {
     return this.wtSettings.getSetting('shouldRenderBottomOverlay') && this.wtSettings.getSetting('shouldRenderInlineStartOverlay');
   }
+  draw() {}
 
   /**
    * Updates the corner overlay position.
@@ -23316,6 +23007,7 @@ __webpack_require__(5);
 __webpack_require__(87);
 __webpack_require__(115);
 __webpack_require__(133);
+__webpack_require__(142);
 var _defineProperty2 = _interopRequireDefault(__webpack_require__(170));
 var _element = __webpack_require__(155);
 var _function = __webpack_require__(163);
@@ -23329,7 +23021,6 @@ var _a11y = __webpack_require__(162);
 /**
  * @todo These mixes are never added to the class Table, however their members are used here.
  * @todo Continue: Potentially it works only, because some of these mixes are added to every inherited class.
- * @todo Refactoring, move code from `if(this.isMaster)` into MasterTable, and others like that.
  * @mixes stickyColumnsStart
  * @mixes stickyRowsBottom
  * @mixes stickyRowsTop
@@ -23386,7 +23077,6 @@ class Table {
      *
      * @type {boolean}
      */
-    this.isMaster = name === 'master';
     this.name = name;
     this.dataAccessObject = dataAccessObject;
     this.facadeGetter = facadeGetter;
@@ -23403,9 +23093,7 @@ class Table {
     this.hider = this.createHider(this.spreader);
     this.holder = this.createHolder(this.hider);
     this.wtRootElement = this.holder.parentNode;
-    if (this.isMaster) {
-      this.alignOverlaysWithTrimmingContainer(); // todo wow, It calls method from child class (MasterTable).
-    }
+    this.alignOverlaysWithTrimmingContainer(); // todo wow, It calls method from child class (MasterTable).
     this.fixTableDomTree();
     this.rowFilter = null; // TODO refactoring, eliminate all (re)creations of this object, then updates state when needed.
     this.columnFilter = null; // TODO refactoring, eliminate all (re)creations of this object, then updates state when needed.
@@ -23425,7 +23113,31 @@ class Table {
       TBODY: this.TBODY,
       rowUtils: this.rowUtils,
       columnUtils: this.columnUtils,
-      cellRenderer: this.wtSettings.getSettingPure('cellRenderer'),
+      cellRenderer: (row, column, TD) => {
+        const fixedColumnsStart = this.wtSettings.getSetting('fixedColumnsStart');
+        const fixedRowsTop = this.wtSettings.getSetting('fixedRowsTop');
+        this.wtSettings.getSettingPure('cellRenderer')(row, column, TD);
+        if (column < fixedColumnsStart) {
+          const left = this.dataAccessObject.wtViewport.getRowHeaderWidth() + this.dataAccessObject.wtOverlays.inlineStartOverlay.sumCellSizes(0, column);
+          TD.style.position = 'sticky';
+          TD.style.left = `${left}px`;
+          if (row < fixedRowsTop) {
+            TD.style.zIndex = '9';
+          } else {
+            TD.style.zIndex = '5';
+          }
+        }
+        if (row < fixedRowsTop) {
+          const top = this.dataAccessObject.wtViewport.getColumnHeaderHeight() + this.dataAccessObject.wtOverlays.topOverlay.sumCellSizes(0, row);
+          TD.style.position = 'sticky';
+          TD.style.top = `${top}px`;
+          if (column < fixedColumnsStart) {
+            TD.style.zIndex = '10';
+          } else {
+            TD.style.zIndex = '6';
+          }
+        }
+      },
       stylesHandler: this.dataAccessObject.stylesHandler
     });
   }
@@ -23525,12 +23237,10 @@ class Table {
         // if TABLE is detached (e.g. in Jasmine test), it has no parentNode so we cannot attach holder to it
         parent.insertBefore(holder, hider);
       }
-      if (this.isMaster) {
-        holder.parentNode.className += 'ht_master handsontable';
-        holder.parentNode.setAttribute('dir', this.wtSettings.getSettingPure('rtlMode') ? 'rtl' : 'ltr');
-        if (this.wtSettings.getSetting('ariaTags')) {
-          (0, _element.setAttribute)(holder.parentNode, [(0, _a11y.A11Y_PRESENTATION)()]);
-        }
+      holder.parentNode.className += 'ht_master handsontable';
+      holder.parentNode.setAttribute('dir', this.wtSettings.getSettingPure('rtlMode') ? 'rtl' : 'ltr');
+      if (this.wtSettings.getSetting('ariaTags')) {
+        (0, _element.setAttribute)(holder.parentNode, [(0, _a11y.A11Y_PRESENTATION)()]);
       }
       holder.appendChild(hider);
     }
@@ -23558,100 +23268,89 @@ class Table {
     } = this.dataAccessObject;
     const totalRows = wtSettings.getSetting('totalRows');
     const totalColumns = wtSettings.getSetting('totalColumns');
-    const rowHeaders = wtSettings.getSetting('rowHeaders');
+    const rowHeaders = wtSettings.getSetting('rowHeaders').map(origRowRenderer => {
+      return (row, TH, column) => {
+        const fixedRowsTop = this.wtSettings.getSetting('fixedRowsTop');
+        const fixedColumnsStart = this.wtSettings.getSetting('fixedColumnsStart');
+        if (row < fixedRowsTop) {
+          let top = 0;
+          if (row >= 0) {
+            top = this.dataAccessObject.wtViewport.getColumnHeaderHeight() + this.dataAccessObject.wtOverlays.topOverlay.sumCellSizes(0, row);
+          }
+          TH.style.top = `${top}px`;
+          if (column < fixedColumnsStart) {
+            TH.style.zIndex = '20';
+          } else {
+            TH.style.zIndex = '10';
+          }
+        } else {
+          TH.style.top = '0px';
+          TH.style.zIndex = '3';
+        }
+        origRowRenderer(row, TH, column);
+        TH.style.position = 'sticky';
+        TH.style.left = '0px';
+      };
+    });
     const rowHeadersCount = rowHeaders.length;
-    const columnHeaders = wtSettings.getSetting('columnHeaders');
+    const columnHeaders = wtSettings.getSetting('columnHeaders').map(origColumnRenderer => {
+      return (column, TH, row) => {
+        const fixedRowsTop = this.wtSettings.getSetting('fixedRowsTop');
+        const fixedColumnsStart = this.wtSettings.getSetting('fixedColumnsStart');
+        if (column < fixedColumnsStart) {
+          let left = 0;
+          if (column >= 0) {
+            left = this.dataAccessObject.wtViewport.getRowHeaderWidth() + this.dataAccessObject.wtOverlays.inlineStartOverlay.sumCellSizes(0, column);
+          }
+          TH.style.left = `${left}px`;
+          if (row < fixedRowsTop) {
+            TH.style.zIndex = '20';
+          } else {
+            TH.style.zIndex = '10';
+          }
+        } else {
+          TH.style.zIndex = '3';
+          TH.style.left = '0px';
+        }
+        origColumnRenderer(column, TH, row);
+        TH.style.position = 'sticky';
+        TH.style.top = '0px';
+      };
+    });
     const columnHeadersCount = columnHeaders.length;
     let runFastDraw = fastDraw;
-    if (this.isMaster) {
-      wtOverlays.beforeDraw();
-      this.holderOffset = (0, _element.offset)(this.holder);
-      runFastDraw = wtViewport.createCalculators(runFastDraw);
-      if (rowHeadersCount && !wtSettings.getSetting('fixedColumnsStart')) {
-        const leftScrollPos = wtOverlays.inlineStartOverlay.getScrollPosition();
-        const previousState = this.correctHeaderWidth;
-        this.correctHeaderWidth = leftScrollPos !== 0;
-        if (previousState !== this.correctHeaderWidth) {
-          runFastDraw = false;
-        }
-      }
-    }
-    if (runFastDraw) {
-      if (this.isMaster) {
-        wtOverlays.refresh(true);
-      }
-    } else {
-      if (this.isMaster) {
-        this.tableOffset = (0, _element.offset)(this.TABLE);
-      } else {
-        this.tableOffset = this.dataAccessObject.parentTableOffset;
-      }
+    wtOverlays.beforeDraw();
+    this.holderOffset = (0, _element.offset)(this.holder);
+    runFastDraw = wtViewport.createCalculators(runFastDraw);
+    if (!runFastDraw) {
+      this.tableOffset = (0, _element.offset)(this.TABLE);
       const startRow = totalRows > 0 ? this.getFirstRenderedRow() : 0;
       const startColumn = totalColumns > 0 ? this.getFirstRenderedColumn() : 0;
       this.rowFilter = new _row.default(startRow, totalRows, columnHeadersCount);
       this.columnFilter = new _column.default(startColumn, totalColumns, rowHeadersCount);
       let performRedraw = true;
-
-      // Only master table rendering can be skipped
-      if (this.isMaster) {
-        this.alignOverlaysWithTrimmingContainer(); // todo It calls method from child class (MasterTable).
-        const skipRender = {};
-        this.wtSettings.getSetting('beforeDraw', true, skipRender);
-        performRedraw = skipRender.skipRender !== true;
-      }
+      this.alignOverlaysWithTrimmingContainer(); // todo It calls method from child class (MasterTable).
+      const skipRender = {};
+      this.wtSettings.getSetting('beforeDraw', true, skipRender);
+      performRedraw = skipRender.skipRender !== true;
       if (performRedraw) {
         this.tableRenderer.setHeaderContentRenderers(rowHeaders, columnHeaders);
-        if (this.is(_overlay.CLONE_BOTTOM) || this.is(_overlay.CLONE_BOTTOM_INLINE_START_CORNER)) {
-          // do NOT render headers on the bottom or bottom-left corner overlay
-          this.tableRenderer.setHeaderContentRenderers(rowHeaders, []);
-        }
         this.resetOversizedRows();
         this.tableRenderer.setActiveOverlayName(this.name).setViewportSize(this.getRenderedRowsCount(), this.getRenderedColumnsCount()).setFilters(this.rowFilter, this.columnFilter).render();
-        if (this.isMaster) {
-          this.markOversizedColumnHeaders();
-        }
+        this.markOversizedColumnHeaders();
         this.adjustColumnHeaderHeights();
-        if (this.isMaster || this.is(_overlay.CLONE_BOTTOM)) {
-          this.markOversizedRows();
-        }
-        if (this.isMaster) {
-          if (!this.wtSettings.getSetting('externalRowCalculator')) {
-            wtViewport.createVisibleCalculators();
-          }
-          wtOverlays.refresh(false);
-          wtOverlays.applyToDOM();
-          this.wtSettings.getSetting('onDraw', true);
-        } else if (this.is(_overlay.CLONE_BOTTOM)) {
-          this.dataAccessObject.cloneSource.wtOverlays.adjustElementsSize();
+        this.markOversizedRows();
+        if (!this.wtSettings.getSetting('externalRowCalculator')) {
+          wtViewport.createVisibleCalculators();
         }
+        wtOverlays.adjustElementsSize();
+        // wtOverlays.draw(fastDraw);
+
+        this.wtSettings.getSetting('onDraw', true);
       }
     }
-    let positionChanged = false;
-    if (this.isMaster) {
-      positionChanged = wtOverlays.topOverlay.resetFixedPosition();
-      if (wtOverlays.bottomOverlay.clone) {
-        positionChanged = wtOverlays.bottomOverlay.resetFixedPosition() || positionChanged;
-      }
-      positionChanged = wtOverlays.inlineStartOverlay.resetFixedPosition() || positionChanged;
-      if (wtOverlays.topInlineStartCornerOverlay) {
-        wtOverlays.topInlineStartCornerOverlay.resetFixedPosition();
-      }
-      if (wtOverlays.bottomInlineStartCornerOverlay && wtOverlays.bottomInlineStartCornerOverlay.clone) {
-        wtOverlays.bottomInlineStartCornerOverlay.resetFixedPosition();
-      }
-    }
-    if (positionChanged) {
-      // It refreshes the cells borders caused by a 1px shift (introduced by overlays which add or
-      // remove `innerBorderTop` and `innerBorderInlineStart` CSS classes to the DOM element. This happens
-      // when there is a switch between rendering from 0 to N rows/columns and vice versa).
-      wtOverlays.refreshAll(); // `refreshAll()` internally already calls `refreshSelections()` method
-      wtOverlays.adjustElementsSize();
-    } else {
-      this.dataAccessObject.selectionManager.setActiveOverlay(this.facadeGetter()).render(runFastDraw);
-    }
-    if (this.isMaster) {
-      wtOverlays.afterDraw();
-    }
+    this.dataAccessObject.selectionManager.setActiveOverlay(this.facadeGetter()).render(runFastDraw);
+    wtOverlays.afterDraw();
     this.dataAccessObject.drawn = true;
     return this;
   }
@@ -23723,9 +23422,6 @@ class Table {
     const {
       wtViewport
     } = this.dataAccessObject;
-    if (!this.isMaster && !this.is(_overlay.CLONE_BOTTOM)) {
-      return;
-    }
     if (!wtSettings.getSetting('externalRowCalculator')) {
       const rowsToRender = this.getRenderedRowsCount();
 
@@ -23761,7 +23457,7 @@ class Table {
   getCell(coords) {
     let row = coords.row;
     let column = coords.col;
-    const hookResult = this.wtSettings.getSetting('onModifyGetCellCoords', row, column, !this.isMaster, 'render');
+    const hookResult = this.wtSettings.getSetting('onModifyGetCellCoords', row, column, false, 'render');
     if (hookResult && Array.isArray(hookResult)) {
       [row, column] = hookResult;
     }
@@ -26870,33 +26566,14 @@ class Overlay {
     this.wtRootElement = wtRootElement;
     this.trimmingContainer = (0, _element.getTrimmingContainer)(this.hider.parentNode.parentNode);
     this.needFullRender = this.shouldBeRendered();
-    this.clone = this.makeClone();
-  }
-
-  /**
-   * Checks if the overlay rendering state has changed.
-   *
-   * @returns {boolean}
-   */
-  hasRenderingStateChanged() {
-    return this.needFullRender !== this.shouldBeRendered();
-  }
-
-  /**
-   * Updates internal state with an information about the need of full rendering of the overlay in the next draw cycles.
-   *
-   * If the state is changed to render the overlay, the `needFullRender` property is set to `true` which means that
-   * the overlay will be fully rendered in the current draw cycle. If the state is changed to not render the overlay,
-   * the `needFullRender` property is set to `false` which means that the overlay will be fully rendered in the
-   * current draw cycle but it will not be rendered in the next draw cycles.
-   *
-   * @param {'before' | 'after'} drawPhase The phase of the rendering process.
-   */
-  updateStateOfRendering(drawPhase) {
-    if (drawPhase === 'before' && this.shouldBeRendered()) {
-      this.needFullRender = true;
-    } else if (drawPhase === 'after' && !this.shouldBeRendered()) {
-      this.needFullRender = false;
+    const preventOverflow = this.wtSettings.getSetting('preventOverflow');
+    const tableParent = this.wot.wtTable.wtRootElement.parentNode;
+    if (preventOverflow === true || preventOverflow === 'horizontal' && this.type === _constants.CLONE_TOP || preventOverflow === 'vertical' && this.type === _constants.CLONE_INLINE_START) {
+      this.mainTableScrollableElement = domBindings.rootWindow;
+    } else if (domBindings.rootWindow.getComputedStyle(tableParent).getPropertyValue('overflow') === 'hidden') {
+      this.mainTableScrollableElement = holder;
+    } else {
+      this.mainTableScrollableElement = (0, _element.getScrollableElement)(TABLE);
     }
   }
 
@@ -26916,23 +26593,6 @@ class Overlay {
     this.trimmingContainer = (0, _element.getTrimmingContainer)(this.hider.parentNode.parentNode);
   }
 
-  /**
-   * Update the main scrollable element.
-   */
-  updateMainScrollableElement() {
-    const {
-      wtTable
-    } = this.wot;
-    const {
-      rootWindow
-    } = this.domBindings;
-    if (rootWindow.getComputedStyle(wtTable.wtRootElement.parentNode).getPropertyValue('overflow') === 'hidden') {
-      this.mainTableScrollableElement = this.wot.wtTable.holder;
-    } else {
-      this.mainTableScrollableElement = (0, _element.getScrollableElement)(wtTable.TABLE);
-    }
-  }
-
   /**
    * Calculates coordinates of the provided element, relative to the root Handsontable element.
    * NOTE: The element needs to be a child of the overlay in order for the method to work correctly.
@@ -27379,25 +27039,6 @@ class CoreAbstract {
     if (!topmost) {
       return this.wtTable.getCell(coords);
     }
-    const totalRows = this.wtSettings.getSetting('totalRows');
-    const fixedRowsTop = this.wtSettings.getSetting('fixedRowsTop');
-    const fixedRowsBottom = this.wtSettings.getSetting('fixedRowsBottom');
-    const fixedColumnsStart = this.wtSettings.getSetting('fixedColumnsStart');
-    if (coords.row < fixedRowsTop && coords.col < fixedColumnsStart) {
-      return this.wtOverlays.topInlineStartCornerOverlay.clone.wtTable.getCell(coords);
-    } else if (coords.row < fixedRowsTop) {
-      return this.wtOverlays.topOverlay.clone.wtTable.getCell(coords);
-    } else if (coords.col < fixedColumnsStart && coords.row >= totalRows - fixedRowsBottom) {
-      if (this.wtOverlays.bottomInlineStartCornerOverlay && this.wtOverlays.bottomInlineStartCornerOverlay.clone) {
-        return this.wtOverlays.bottomInlineStartCornerOverlay.clone.wtTable.getCell(coords);
-      }
-    } else if (coords.col < fixedColumnsStart) {
-      return this.wtOverlays.inlineStartOverlay.clone.wtTable.getCell(coords);
-    } else if (coords.row < totalRows && coords.row >= totalRows - fixedRowsBottom) {
-      if (this.wtOverlays.bottomOverlay && this.wtOverlays.bottomOverlay.clone) {
-        return this.wtOverlays.bottomOverlay.clone.wtTable.getCell(coords);
-      }
-    }
     return this.wtTable.getCell(coords);
   }
 
@@ -27972,6 +27613,7 @@ class BottomOverlay extends _base.Overlay {
   shouldBeRendered() {
     return this.wtSettings.getSetting('shouldRenderBottomOverlay');
   }
+  draw() {}
 
   /**
    * Updates the top overlay position.
@@ -28482,6 +28124,7 @@ class InlineStartOverlay extends _base.Overlay {
   shouldBeRendered() {
     return this.wtSettings.getSetting('shouldRenderInlineStartOverlay');
   }
+  draw() {}
 
   /**
    * Updates the left overlay position.
@@ -30614,6 +30257,7 @@ class TopInlineStartCornerOverlay extends _base.Overlay {
   shouldBeRendered() {
     return this.wtSettings.getSetting('shouldRenderTopOverlay') && this.wtSettings.getSetting('shouldRenderInlineStartOverlay');
   }
+  draw() {}
 
   /**
    * Updates the corner overlay position.
@@ -30860,6 +30504,7 @@ class TopOverlay extends _base.Overlay {
   shouldBeRendered() {
     return this.wtSettings.getSetting('shouldRenderTopOverlay');
   }
+  draw() {}
 
   /**
    * Updates the top overlay position.
@@ -47412,7 +47057,6 @@ class BaseEditor {
    * @returns {{top: number, start: number, width: number, maxWidth: number, height: number, maxHeight: number} | undefined}
    */
   getEditedCellRect() {
-    var _wtOverlays$getParent;
     const TD = this.getEditedCell();
 
     // TD is outside of the viewport.
@@ -47435,7 +47079,7 @@ class BaseEditor {
     const gridMostRightPos = rootWindow.innerWidth - containerOffset.left - containerWidth;
     const {
       wtTable: overlayTable
-    } = (_wtOverlays$getParent = wtOverlays.getParentOverlay(TD)) !== null && _wtOverlays$getParent !== void 0 ? _wtOverlays$getParent : this.hot.view._wt;
+    } = this.hot.view._wt;
     const overlayName = overlayTable.name;
     const scrollTop = ['master', 'inline_start'].includes(overlayName) ? containerScrollTop : 0;
     const scrollLeft = ['master', 'top', 'bottom'].includes(overlayName) ? containerScrollLeft : 0;
@@ -68924,7 +68568,7 @@ function _setupListening(event) {
   if ((0, _event.isRightClick)(event)) {
     return;
   }
-  const scrollHandler = this.hot.view._wt.wtOverlays.topOverlay.mainTableScrollableElement;
+  const scrollHandler = this.hot.view._wt.wtOverlays.scrollableElement;
   this.setBoundaries(scrollHandler !== this.hot.rootWindow ? scrollHandler.getBoundingClientRect() : undefined);
   this.setCallback((scrollX, scrollY) => {
     var _scrollHandler$scroll, _scrollHandler$scroll2;