handsontable 0.0.0-next-f52ab71-20250121 → 0.0.0-next-8d1d868-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-f52ab71-20250121
- * Release date: 16/12/2024 (built at 21/01/2025 09:22:54)
+ * Version: 0.0.0-next-8d1d868-20250121
+ * Release date: 16/12/2024 (built at 21/01/2025 11:19:54)
  */
 (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 = "21/01/2025 09:22:54";
-Handsontable.version = "0.0.0-next-f52ab71-20250121";
+Handsontable.buildDate = "21/01/2025 11:19:54";
+Handsontable.version = "0.0.0-next-8d1d868-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-f52ab71-20250121";
+  const hotVersion = "0.0.0-next-8d1d868-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;
+    const parentOverlay = this._wt.wtOverlays.getParentOverlay(element) || this._wt;
 
     // prevent wrong calculations from SampleGenerator
     if (element.parentNode) {
@@ -22431,6 +22431,9 @@ 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);
@@ -22448,6 +22451,7 @@ 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 {
@@ -22522,6 +22526,12 @@ 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.
      *
@@ -22568,16 +22578,32 @@ 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;
   }
 
   /**
@@ -22612,8 +22638,8 @@ class Overlays {
      * Https://developer.mozilla.org/pl/docs/Web/CSS/line-height#Values.
      */
     const lineHeight = parseInt(computedStyle.lineHeight, 10);
-    const lineHeightFallback = parseInt(computedStyle.fontSize, 10) * 1.2;
-    this.browserLineHeight = lineHeight || lineHeightFallback;
+    const lineHeightFalback = parseInt(computedStyle.fontSize, 10) * 1.2;
+    this.browserLineHeight = lineHeight || lineHeightFalback;
   }
 
   /**
@@ -22623,9 +22649,15 @@ 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]);
@@ -22634,20 +22666,48 @@ class Overlays {
   /**
    * Runs logic for the overlays before the table is drawn.
    */
-  beforeDraw() {}
+  beforeDraw() {
+    _classPrivateFieldSet(_hasRenderingStateChanged, this, _classPrivateFieldGet(_overlays, this).reduce((acc, overlay) => {
+      return overlay.hasRenderingStateChanged() || acc;
+    }, false));
+    _classPrivateFieldGet(_overlays, this).forEach(overlay => overlay.updateStateOfRendering('before'));
+  }
 
   /**
    * Runs logic for the overlays after the table is drawn.
    */
-  afterDraw() {}
+  afterDraw() {
+    this.syncScrollWithMaster();
+    _classPrivateFieldGet(_overlays, this).forEach(overlay => {
+      const hasRenderingStateChanged = overlay.hasRenderingStateChanged();
+      overlay.updateStateOfRendering('after');
+      if (hasRenderingStateChanged && !overlay.needFullRender) {
+        overlay.reset();
+      }
+    });
+  }
 
   /**
    * Refresh and redraw table.
    */
-  draw(fastDraw) {
-    (0, _array.arrayEach)(_classPrivateFieldGet(_overlays, this), overlay => {
-      overlay.adjustRootElementSize();
-    });
+  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;
   }
 
   /**
@@ -22655,22 +22715,39 @@ 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)(() => {
@@ -22687,6 +22764,29 @@ 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.
    *
@@ -22697,12 +22797,43 @@ 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.
    *
@@ -22745,6 +22876,130 @@ 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
@@ -22764,44 +23019,99 @@ class Overlays {
     const proposedHiderWidth = headerRowSize + this.inlineStartOverlay.sumCellSizes(0, totalColumns);
     const hiderElement = wtTable.hider;
     const hiderStyle = hiderElement.style;
-    hiderStyle.width = `${proposedHiderWidth}px`;
-    hiderStyle.height = `${proposedHiderHeight}px`;
-    const styleProperty = this.wtSettings.getSetting('rtlMode') ? 'right' : 'left';
-    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');
-    }
-    if (typeof this.wot.wtViewport.rowsRenderCalculator.startPosition === 'number') {
-      wtTable.spreader.style.top = `${this.wot.wtViewport.rowsRenderCalculator.startPosition}px`;
-    } else if (totalRows === 0) {
-      wtTable.spreader.style.top = '0';
-    } else {
-      throw new Error('Incorrect value of the rowsRenderCalculator');
-    }
+    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.
    */
-  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();
+  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;
     }
-    this.inlineStartOverlay.destroy();
-    if (this.topInlineStartCornerOverlay) {
-      this.topInlineStartCornerOverlay.destroy();
+    this.topOverlay.applyToDOM();
+    if (this.bottomOverlay.clone) {
+      this.bottomOverlay.applyToDOM();
     }
-    if (this.bottomInlineStartCornerOverlay && this.bottomInlineStartCornerOverlay.clone) {
-      this.bottomInlineStartCornerOverlay.destroy();
+    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;
     }
-    this.destroyed = true;
+    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
+    });
   }
 }
 var _default = exports["default"] = Overlays;
@@ -22897,7 +23207,6 @@ class BottomInlineStartCornerOverlay extends _base.Overlay {
   shouldBeRendered() {
     return this.wtSettings.getSetting('shouldRenderBottomOverlay') && this.wtSettings.getSetting('shouldRenderInlineStartOverlay');
   }
-  draw() {}
 
   /**
    * Updates the corner overlay position.
@@ -23007,7 +23316,6 @@ __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);
@@ -23021,6 +23329,7 @@ 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
@@ -23077,6 +23386,7 @@ class Table {
      *
      * @type {boolean}
      */
+    this.isMaster = name === 'master';
     this.name = name;
     this.dataAccessObject = dataAccessObject;
     this.facadeGetter = facadeGetter;
@@ -23093,7 +23403,9 @@ class Table {
     this.hider = this.createHider(this.spreader);
     this.holder = this.createHolder(this.hider);
     this.wtRootElement = this.holder.parentNode;
-    this.alignOverlaysWithTrimmingContainer(); // todo wow, It calls method from child class (MasterTable).
+    if (this.isMaster) {
+      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.
@@ -23113,31 +23425,7 @@ class Table {
       TBODY: this.TBODY,
       rowUtils: this.rowUtils,
       columnUtils: this.columnUtils,
-      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';
-          }
-        }
-      },
+      cellRenderer: this.wtSettings.getSettingPure('cellRenderer'),
       stylesHandler: this.dataAccessObject.stylesHandler
     });
   }
@@ -23237,10 +23525,12 @@ 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);
       }
-      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)()]);
+      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.appendChild(hider);
     }
@@ -23268,89 +23558,100 @@ class Table {
     } = this.dataAccessObject;
     const totalRows = wtSettings.getSetting('totalRows');
     const totalColumns = wtSettings.getSetting('totalColumns');
-    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 rowHeaders = wtSettings.getSetting('rowHeaders');
     const rowHeadersCount = rowHeaders.length;
-    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 columnHeaders = wtSettings.getSetting('columnHeaders');
     const columnHeadersCount = columnHeaders.length;
     let runFastDraw = fastDraw;
-    wtOverlays.beforeDraw();
-    this.holderOffset = (0, _element.offset)(this.holder);
-    runFastDraw = wtViewport.createCalculators(runFastDraw);
-    if (!runFastDraw) {
-      this.tableOffset = (0, _element.offset)(this.TABLE);
+    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;
+      }
       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;
-      this.alignOverlaysWithTrimmingContainer(); // todo It calls method from child class (MasterTable).
-      const skipRender = {};
-      this.wtSettings.getSetting('beforeDraw', true, skipRender);
-      performRedraw = skipRender.skipRender !== 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;
+      }
       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();
-        this.markOversizedColumnHeaders();
+        if (this.isMaster) {
+          this.markOversizedColumnHeaders();
+        }
         this.adjustColumnHeaderHeights();
-        this.markOversizedRows();
-        if (!this.wtSettings.getSetting('externalRowCalculator')) {
-          wtViewport.createVisibleCalculators();
+        if (this.isMaster || this.is(_overlay.CLONE_BOTTOM)) {
+          this.markOversizedRows();
         }
-        wtOverlays.adjustElementsSize();
-        // wtOverlays.draw(fastDraw);
-
-        this.wtSettings.getSetting('onDraw', true);
+        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();
+        }
+      }
+    }
+    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;
   }
@@ -23422,6 +23723,9 @@ class Table {
     const {
       wtViewport
     } = this.dataAccessObject;
+    if (!this.isMaster && !this.is(_overlay.CLONE_BOTTOM)) {
+      return;
+    }
     if (!wtSettings.getSetting('externalRowCalculator')) {
       const rowsToRender = this.getRenderedRowsCount();
 
@@ -23457,7 +23761,7 @@ class Table {
   getCell(coords) {
     let row = coords.row;
     let column = coords.col;
-    const hookResult = this.wtSettings.getSetting('onModifyGetCellCoords', row, column, false, 'render');
+    const hookResult = this.wtSettings.getSetting('onModifyGetCellCoords', row, column, !this.isMaster, 'render');
     if (hookResult && Array.isArray(hookResult)) {
       [row, column] = hookResult;
     }
@@ -26566,14 +26870,33 @@ class Overlay {
     this.wtRootElement = wtRootElement;
     this.trimmingContainer = (0, _element.getTrimmingContainer)(this.hider.parentNode.parentNode);
     this.needFullRender = this.shouldBeRendered();
-    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);
+    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;
     }
   }
 
@@ -26593,6 +26916,23 @@ 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.
@@ -27039,6 +27379,25 @@ 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);
   }
 
@@ -27613,7 +27972,6 @@ class BottomOverlay extends _base.Overlay {
   shouldBeRendered() {
     return this.wtSettings.getSetting('shouldRenderBottomOverlay');
   }
-  draw() {}
 
   /**
    * Updates the top overlay position.
@@ -28124,7 +28482,6 @@ class InlineStartOverlay extends _base.Overlay {
   shouldBeRendered() {
     return this.wtSettings.getSetting('shouldRenderInlineStartOverlay');
   }
-  draw() {}
 
   /**
    * Updates the left overlay position.
@@ -30257,7 +30614,6 @@ class TopInlineStartCornerOverlay extends _base.Overlay {
   shouldBeRendered() {
     return this.wtSettings.getSetting('shouldRenderTopOverlay') && this.wtSettings.getSetting('shouldRenderInlineStartOverlay');
   }
-  draw() {}
 
   /**
    * Updates the corner overlay position.
@@ -30504,7 +30860,6 @@ class TopOverlay extends _base.Overlay {
   shouldBeRendered() {
     return this.wtSettings.getSetting('shouldRenderTopOverlay');
   }
-  draw() {}
 
   /**
    * Updates the top overlay position.
@@ -47057,6 +47412,7 @@ 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.
@@ -47079,7 +47435,7 @@ class BaseEditor {
     const gridMostRightPos = rootWindow.innerWidth - containerOffset.left - containerWidth;
     const {
       wtTable: overlayTable
-    } = this.hot.view._wt;
+    } = (_wtOverlays$getParent = wtOverlays.getParentOverlay(TD)) !== null && _wtOverlays$getParent !== void 0 ? _wtOverlays$getParent : 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;
@@ -68568,7 +68924,7 @@ function _setupListening(event) {
   if ((0, _event.isRightClick)(event)) {
     return;
   }
-  const scrollHandler = this.hot.view._wt.wtOverlays.scrollableElement;
+  const scrollHandler = this.hot.view._wt.wtOverlays.topOverlay.mainTableScrollableElement;
   this.setBoundaries(scrollHandler !== this.hot.rootWindow ? scrollHandler.getBoundingClientRect() : undefined);
   this.setCallback((scrollX, scrollY) => {
     var _scrollHandler$scroll, _scrollHandler$scroll2;