handsontable 14.0.0-next-c080457-20231107 → 14.0.0-next-bfad250-20231108

package/tableView.mjs

@@ -17,26 +17,29 @@ import Walkontable from "./3rdparty/walkontable/src/index.mjs";
 import { handleMouseEvent } from "./selection/mouseEventHandler.mjs";
 import { isRootInstance } from "./utils/rootInstance.mjs";
 import { A11Y_COLCOUNT, A11Y_MULTISELECTABLE, A11Y_PRESENTATION, A11Y_ROWCOUNT, A11Y_TREEGRID } from "./helpers/a11y.mjs";
-const privatePool = new WeakMap();
-
 /**
  * @class TableView
  * @private
  */
 var _columnHeadersCount = /*#__PURE__*/new WeakMap();
 var _rowHeadersCount = /*#__PURE__*/new WeakMap();
+var _selectionMouseDown = /*#__PURE__*/new WeakMap();
+var _mouseDown = /*#__PURE__*/new WeakMap();
+var _table = /*#__PURE__*/new WeakMap();
+var _lastWidth = /*#__PURE__*/new WeakMap();
+var _lastHeight = /*#__PURE__*/new WeakMap();
 class TableView {
   /**
-   * @param {Hanstontable} instance Instance of {@link Handsontable}.
+   * @param {Hanstontable} hotInstance Instance of {@link Handsontable}.
    */
-  constructor(instance) {
+  constructor(hotInstance) {
     /**
      * Instance of {@link Handsontable}.
      *
      * @private
      * @type {Handsontable}
      */
-    _defineProperty(this, "instance", void 0);
+    _defineProperty(this, "hot", void 0);
     /**
      * Instance of {@link EventManager}.
      *
@@ -75,7 +78,6 @@ class TableView {
     /**
      * Main Walkontable instance.
      *
-     * @private
      * @type {Walkontable}
      */
     _defineProperty(this, "activeWt", void 0);
@@ -108,42 +110,52 @@ class TableView {
      * @type {boolean}
      */
     _defineProperty(this, "postponedAdjustElementsSize", false);
-    this.instance = instance;
-    this.eventManager = new EventManager(this.instance);
-    this.settings = this.instance.getSettings();
-    privatePool.set(this, {
-      /**
-       * Defines if the text should be selected during mousemove.
-       *
-       * @private
-       * @type {boolean}
-       */
-      selectionMouseDown: false,
-      /**
-       * @private
-       * @type {boolean}
-       */
-      mouseDown: void 0,
-      /**
-       * Main <TABLE> element.
-       *
-       * @private
-       * @type {HTMLTableElement}
-       */
-      table: void 0,
-      /**
-       * Cached width of the rootElement.
-       *
-       * @type {number}
-       */
-      lastWidth: 0,
-      /**
-       * Cached height of the rootElement.
-       *
-       * @type {number}
-       */
-      lastHeight: 0
+    /**
+     * Defines if the text should be selected during mousemove.
+     *
+     * @type {boolean}
+     */
+    _classPrivateFieldInitSpec(this, _selectionMouseDown, {
+      writable: true,
+      value: false
+    });
+    /**
+     * @type {boolean}
+     */
+    _classPrivateFieldInitSpec(this, _mouseDown, {
+      writable: true,
+      value: void 0
+    });
+    /**
+     * Main <TABLE> element.
+     *
+     * @type {HTMLTableElement}
+     */
+    _classPrivateFieldInitSpec(this, _table, {
+      writable: true,
+      value: void 0
+    });
+    /**
+     * Cached width of the rootElement.
+     *
+     * @type {number}
+     */
+    _classPrivateFieldInitSpec(this, _lastWidth, {
+      writable: true,
+      value: 0
+    });
+    /**
+     * Cached height of the rootElement.
+     *
+     * @type {number}
+     */
+    _classPrivateFieldInitSpec(this, _lastHeight, {
+      writable: true,
+      value: 0
     });
+    this.hot = hotInstance;
+    this.eventManager = new EventManager(this.hot);
+    this.settings = this.hot.getSettings();
     this.createElements();
     this.registerEvents();
     this.initializeWalkontable();
@@ -153,16 +165,16 @@ class TableView {
    * Renders WalkontableUI.
    */
   render() {
-    if (!this.instance.isRenderSuspended()) {
-      this.instance.runHooks('beforeRender', this.instance.forceFullRender);
+    if (!this.hot.isRenderSuspended()) {
+      this.hot.runHooks('beforeRender', this.hot.forceFullRender);
       if (this.postponedAdjustElementsSize) {
         this.postponedAdjustElementsSize = false;
         this.adjustElementsSize(true);
       }
-      this._wt.draw(!this.instance.forceFullRender);
-      this.instance.runHooks('afterRender', this.instance.forceFullRender);
-      this.instance.forceFullRender = false;
-      this.instance.renderCall = false;
+      this._wt.draw(!this.hot.forceFullRender);
+      this.hot.runHooks('afterRender', this.hot.forceFullRender);
+      this.hot.forceFullRender = false;
+      this.hot.renderCall = false;
     }
   }
 
@@ -173,7 +185,7 @@ class TableView {
    */
   adjustElementsSize() {
     let force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    if (this.instance.isRenderSuspended()) {
+    if (this.hot.isRenderSuspended()) {
       this.postponedAdjustElementsSize = true;
     } else {
       this._wt.wtOverlays.adjustElementsSize(force);
@@ -240,32 +252,31 @@ class TableView {
    * @private
    */
   createElements() {
-    const priv = privatePool.get(this);
     const {
       rootElement,
       rootDocument
-    } = this.instance;
+    } = this.hot;
     const originalStyle = rootElement.getAttribute('style');
     if (originalStyle) {
       rootElement.setAttribute('data-originalstyle', originalStyle); // needed to retrieve original style in jsFiddle link generator in HT examples. may be removed in future versions
     }
 
     addClass(rootElement, 'handsontable');
-    priv.table = rootDocument.createElement('TABLE');
-    addClass(priv.table, 'htCore');
-    if (this.instance.getSettings().tableClassName) {
-      addClass(priv.table, this.instance.getSettings().tableClassName);
+    _classPrivateFieldSet(this, _table, rootDocument.createElement('TABLE'));
+    addClass(_classPrivateFieldGet(this, _table), 'htCore');
+    if (this.hot.getSettings().tableClassName) {
+      addClass(_classPrivateFieldGet(this, _table), this.hot.getSettings().tableClassName);
     }
     if (this.settings.ariaTags) {
-      setAttribute(priv.table, [A11Y_PRESENTATION()]);
-      setAttribute(rootElement, [A11Y_TREEGRID(), A11Y_ROWCOUNT(this.instance.countRows()), A11Y_COLCOUNT(this.instance.countCols()), A11Y_MULTISELECTABLE()]);
+      setAttribute(_classPrivateFieldGet(this, _table), [A11Y_PRESENTATION()]);
+      setAttribute(rootElement, [A11Y_TREEGRID(), A11Y_ROWCOUNT(this.hot.countRows()), A11Y_COLCOUNT(this.hot.countCols()), A11Y_MULTISELECTABLE()]);
     }
     this.THEAD = rootDocument.createElement('THEAD');
-    priv.table.appendChild(this.THEAD);
+    _classPrivateFieldGet(this, _table).appendChild(this.THEAD);
     this.TBODY = rootDocument.createElement('TBODY');
-    priv.table.appendChild(this.TBODY);
-    this.instance.table = priv.table;
-    this.instance.container.insertBefore(priv.table, this.instance.container.firstChild);
+    _classPrivateFieldGet(this, _table).appendChild(this.TBODY);
+    this.hot.table = _classPrivateFieldGet(this, _table);
+    this.hot.container.insertBefore(_classPrivateFieldGet(this, _table), this.hot.container.firstChild);
   }
 
   /**
@@ -274,19 +285,18 @@ class TableView {
    * @private
    */
   registerEvents() {
-    const priv = privatePool.get(this);
     const {
       rootElement,
       rootDocument,
       selection
-    } = this.instance;
+    } = this.hot;
     const documentElement = rootDocument.documentElement;
     this.eventManager.addEventListener(rootElement, 'mousedown', event => {
-      priv.selectionMouseDown = true;
+      _classPrivateFieldSet(this, _selectionMouseDown, true);
       if (!this.isTextSelectionAllowed(event.target)) {
         const {
           rootWindow
-        } = this.instance;
+        } = this.hot;
         clearTextSelection(rootWindow);
         event.preventDefault();
         rootWindow.focus(); // make sure that window that contains HOT is active. Important when HOT is in iframe.
@@ -294,13 +304,13 @@ class TableView {
     });
 
     this.eventManager.addEventListener(rootElement, 'mouseup', () => {
-      priv.selectionMouseDown = false;
+      _classPrivateFieldSet(this, _selectionMouseDown, false);
     });
     this.eventManager.addEventListener(rootElement, 'mousemove', event => {
-      if (priv.selectionMouseDown && !this.isTextSelectionAllowed(event.target)) {
+      if (_classPrivateFieldGet(this, _selectionMouseDown) && !this.isTextSelectionAllowed(event.target)) {
         // Clear selection only when fragmentSelection is enabled, otherwise clearing selection breaks the IME editor.
         if (this.settings.fragmentSelection) {
-          clearTextSelection(this.instance.rootWindow);
+          clearTextSelection(this.hot.rootWindow);
         }
         event.preventDefault();
       }
@@ -315,40 +325,40 @@ class TableView {
       if (selection.isInProgress() && isLeftClick(event)) {
         selection.finish();
       }
-      priv.mouseDown = false;
+      _classPrivateFieldSet(this, _mouseDown, false);
       const isOutsideInputElement = isOutsideInput(rootDocument.activeElement);
       if (!isOutsideInputElement) {
         return;
       }
       if (isOutsideInputElement || !selection.isSelected() && !selection.isSelectedByAnyHeader() && !rootElement.contains(event.target) && !isRightClick(event)) {
-        this.instance.unlisten();
+        this.hot.unlisten();
       }
     });
     this.eventManager.addEventListener(documentElement, 'contextmenu', event => {
       if (selection.isInProgress() && isRightClick(event)) {
         selection.finish();
-        priv.mouseDown = false;
+        _classPrivateFieldSet(this, _mouseDown, false);
       }
     });
     this.eventManager.addEventListener(documentElement, 'touchend', () => {
       if (selection.isInProgress()) {
         selection.finish();
       }
-      priv.mouseDown = false;
+      _classPrivateFieldSet(this, _mouseDown, false);
     });
     this.eventManager.addEventListener(documentElement, 'mousedown', event => {
       const originalTarget = event.target;
       const eventX = event.x || event.clientX;
       const eventY = event.y || event.clientY;
       let next = event.target;
-      if (priv.mouseDown || !rootElement || !this.instance.view) {
+      if (_classPrivateFieldGet(this, _mouseDown) || !rootElement || !this.hot.view) {
         return; // it must have been started in a cell
       }
 
       // immediate click on "holder" means click on the right side of vertical scrollbar
       const {
         holder
-      } = this.instance.view._wt.wtTable;
+      } = this.hot.view._wt.wtTable;
       if (next === holder) {
         const scrollbarWidth = getScrollbarWidth(rootDocument);
         if (rootDocument.elementFromPoint(eventX + scrollbarWidth, eventY) !== holder || rootDocument.elementFromPoint(eventX, eventY + scrollbarWidth) !== holder) {
@@ -375,12 +385,12 @@ class TableView {
       // function did not return until here, we have an outside click!
       const outsideClickDeselects = typeof this.settings.outsideClickDeselects === 'function' ? this.settings.outsideClickDeselects(originalTarget) : this.settings.outsideClickDeselects;
       if (outsideClickDeselects) {
-        this.instance.deselectCell();
+        this.hot.deselectCell();
       } else {
-        this.instance.destroyEditor(false, false);
+        this.hot.destroyEditor(false, false);
       }
     });
-    this.eventManager.addEventListener(priv.table, 'selectstart', event => {
+    this.eventManager.addEventListener(_classPrivateFieldGet(this, _table), 'selectstart', event => {
       if (this.settings.fragmentSelection || isInput(event.target)) {
         return;
       }
@@ -402,7 +412,7 @@ class TableView {
       col
     } = _ref;
     // TODO: To consider an idea to reusing the CellCoords instance instead creating new one.
-    return this.instance._createCellCoords(...this.translateFromRenderableToVisualIndex(row, col));
+    return this.hot._createCellCoords(...this.translateFromRenderableToVisualIndex(row, col));
   }
 
   /**
@@ -415,8 +425,8 @@ class TableView {
   translateFromRenderableToVisualIndex(renderableRow, renderableColumn) {
     // TODO: Some helper may be needed.
     // We perform translation for indexes (without headers).
-    let visualRow = renderableRow >= 0 ? this.instance.rowIndexMapper.getVisualFromRenderableIndex(renderableRow) : renderableRow;
-    let visualColumn = renderableColumn >= 0 ? this.instance.columnIndexMapper.getVisualFromRenderableIndex(renderableColumn) : renderableColumn;
+    let visualRow = renderableRow >= 0 ? this.hot.rowIndexMapper.getVisualFromRenderableIndex(renderableRow) : renderableRow;
+    let visualColumn = renderableColumn >= 0 ? this.hot.columnIndexMapper.getVisualFromRenderableIndex(renderableColumn) : renderableColumn;
     if (visualRow === null) {
       visualRow = renderableRow;
     }
@@ -453,7 +463,7 @@ class TableView {
    * @returns {number}
    */
   countRenderableColumns() {
-    return this.countRenderableIndexes(this.instance.columnIndexMapper, this.settings.maxCols);
+    return this.countRenderableIndexes(this.hot.columnIndexMapper, this.settings.maxCols);
   }
 
   /**
@@ -462,7 +472,7 @@ class TableView {
    * @returns {number}
    */
   countRenderableRows() {
-    return this.countRenderableIndexes(this.instance.rowIndexMapper, this.settings.maxRows);
+    return this.countRenderableIndexes(this.hot.rowIndexMapper, this.settings.maxRows);
   }
 
   /**
@@ -474,7 +484,7 @@ class TableView {
    * @returns {number}
    */
   countNotHiddenRowIndexes(visualIndex, incrementBy) {
-    return this.countNotHiddenIndexes(visualIndex, incrementBy, this.instance.rowIndexMapper, this.countRenderableRows());
+    return this.countNotHiddenIndexes(visualIndex, incrementBy, this.hot.rowIndexMapper, this.countRenderableRows());
   }
 
   /**
@@ -486,7 +496,7 @@ class TableView {
    * @returns {number}
    */
   countNotHiddenColumnIndexes(visualIndex, incrementBy) {
-    return this.countNotHiddenIndexes(visualIndex, incrementBy, this.instance.columnIndexMapper, this.countRenderableColumns());
+    return this.countNotHiddenIndexes(visualIndex, incrementBy, this.hot.columnIndexMapper, this.countRenderableColumns());
   }
 
   /**
@@ -525,7 +535,7 @@ class TableView {
    * @returns {number}
    */
   countNotHiddenFixedColumnsStart() {
-    const countCols = this.instance.countCols();
+    const countCols = this.hot.countCols();
     const visualFixedColumnsStart = Math.min(parseInt(this.settings.fixedColumnsStart, 10), countCols) - 1;
     return this.countNotHiddenColumnIndexes(visualFixedColumnsStart, -1);
   }
@@ -537,7 +547,7 @@ class TableView {
    * @returns {number}
    */
   countNotHiddenFixedRowsTop() {
-    const countRows = this.instance.countRows();
+    const countRows = this.hot.countRows();
     const visualFixedRowsTop = Math.min(parseInt(this.settings.fixedRowsTop, 10), countRows) - 1;
     return this.countNotHiddenRowIndexes(visualFixedRowsTop, -1);
   }
@@ -549,7 +559,7 @@ class TableView {
    * @returns {number}
    */
   countNotHiddenFixedRowsBottom() {
-    const countRows = this.instance.countRows();
+    const countRows = this.hot.countRows();
     const visualFixedRowsBottom = Math.max(countRows - parseInt(this.settings.fixedRowsBottom, 10), 0);
     return this.countNotHiddenRowIndexes(visualFixedRowsBottom, 1);
   }
@@ -564,7 +574,7 @@ class TableView {
   countRenderableColumnsInRange(columnStart, columnEnd) {
     let count = 0;
     for (let column = columnStart; column <= columnEnd; column++) {
-      if (this.instance.columnIndexMapper.getRenderableFromVisualIndex(column) !== null) {
+      if (this.hot.columnIndexMapper.getRenderableFromVisualIndex(column) !== null) {
         count += 1;
       }
     }
@@ -581,7 +591,7 @@ class TableView {
   countRenderableRowsInRange(rowStart, rowEnd) {
     let count = 0;
     for (let row = rowStart; row <= rowEnd; row++) {
-      if (this.instance.rowIndexMapper.getRenderableFromVisualIndex(row) !== null) {
+      if (this.hot.rowIndexMapper.getRenderableFromVisualIndex(row) !== null) {
         count += 1;
       }
     }
@@ -597,7 +607,7 @@ class TableView {
   isMainTableNotFullyCoveredByOverlays() {
     const fixedAllRows = this.countNotHiddenFixedRowsTop() + this.countNotHiddenFixedRowsBottom();
     const fixedAllColumns = this.countNotHiddenFixedColumnsStart();
-    return this.instance.countRenderedRows() > fixedAllRows && this.instance.countRenderedCols() > fixedAllColumns;
+    return this.hot.countRenderedRows() > fixedAllRows && this.hot.countRenderedCols() > fixedAllColumns;
   }
 
   /**
@@ -606,18 +616,17 @@ class TableView {
    * @private
    */
   initializeWalkontable() {
-    const priv = privatePool.get(this);
     const walkontableConfig = {
       ariaTags: this.settings.ariaTags,
-      rtlMode: this.instance.isRtl(),
-      externalRowCalculator: this.instance.getPlugin('autoRowSize') && this.instance.getPlugin('autoRowSize').isEnabled(),
-      table: priv.table,
-      isDataViewInstance: () => isRootInstance(this.instance),
+      rtlMode: this.hot.isRtl(),
+      externalRowCalculator: this.hot.getPlugin('autoRowSize') && this.hot.getPlugin('autoRowSize').isEnabled(),
+      table: _classPrivateFieldGet(this, _table),
+      isDataViewInstance: () => isRootInstance(this.hot),
       preventOverflow: () => this.settings.preventOverflow,
       preventWheel: () => this.settings.preventWheel,
       stretchH: () => this.settings.stretchH,
       data: (renderableRow, renderableColumn) => {
-        return this.instance.getDataAtCell(...this.translateFromRenderableToVisualIndex(renderableRow, renderableColumn));
+        return this.hot.getDataAtCell(...this.translateFromRenderableToVisualIndex(renderableRow, renderableColumn));
       },
       totalRows: () => this.countRenderableRows(),
       totalColumns: () => this.countRenderableColumns(),
@@ -643,74 +652,74 @@ class TableView {
       renderAllRows: this.settings.renderAllRows,
       rowHeaders: () => {
         const headerRenderers = [];
-        if (this.instance.hasRowHeaders()) {
+        if (this.hot.hasRowHeaders()) {
           headerRenderers.push((renderableRowIndex, TH) => {
             // TODO: Some helper may be needed.
             // We perform translation for row indexes (without row headers).
-            const visualRowIndex = renderableRowIndex >= 0 ? this.instance.rowIndexMapper.getVisualFromRenderableIndex(renderableRowIndex) : renderableRowIndex;
+            const visualRowIndex = renderableRowIndex >= 0 ? this.hot.rowIndexMapper.getVisualFromRenderableIndex(renderableRowIndex) : renderableRowIndex;
             this.appendRowHeader(visualRowIndex, TH);
           });
         }
-        this.instance.runHooks('afterGetRowHeaderRenderers', headerRenderers);
+        this.hot.runHooks('afterGetRowHeaderRenderers', headerRenderers);
         _classPrivateFieldSet(this, _rowHeadersCount, headerRenderers.length);
         return headerRenderers;
       },
       columnHeaders: () => {
         const headerRenderers = [];
-        if (this.instance.hasColHeaders()) {
+        if (this.hot.hasColHeaders()) {
           headerRenderers.push((renderedColumnIndex, TH) => {
             // TODO: Some helper may be needed.
             // We perform translation for columns indexes (without column headers).
-            const visualColumnsIndex = renderedColumnIndex >= 0 ? this.instance.columnIndexMapper.getVisualFromRenderableIndex(renderedColumnIndex) : renderedColumnIndex;
+            const visualColumnsIndex = renderedColumnIndex >= 0 ? this.hot.columnIndexMapper.getVisualFromRenderableIndex(renderedColumnIndex) : renderedColumnIndex;
             this.appendColHeader(visualColumnsIndex, TH);
           });
         }
-        this.instance.runHooks('afterGetColumnHeaderRenderers', headerRenderers);
+        this.hot.runHooks('afterGetColumnHeaderRenderers', headerRenderers);
         _classPrivateFieldSet(this, _columnHeadersCount, headerRenderers.length);
         return headerRenderers;
       },
       columnWidth: renderedColumnIndex => {
-        const visualIndex = this.instance.columnIndexMapper.getVisualFromRenderableIndex(renderedColumnIndex);
+        const visualIndex = this.hot.columnIndexMapper.getVisualFromRenderableIndex(renderedColumnIndex);
 
         // It's not a bug that we can't find visual index for some handled by method indexes. The function is called also
         // for indexes that are not displayed (indexes that are beyond the grid's boundaries), i.e. when `fixedColumnsStart` > `startCols` (wrong config?) or
         // scrolling and dataset is empty (scroll should handle that?).
-        return this.instance.getColWidth(visualIndex === null ? renderedColumnIndex : visualIndex);
+        return this.hot.getColWidth(visualIndex === null ? renderedColumnIndex : visualIndex);
       },
       rowHeight: renderedRowIndex => {
-        const visualIndex = this.instance.rowIndexMapper.getVisualFromRenderableIndex(renderedRowIndex);
-        return this.instance.getRowHeight(visualIndex === null ? renderedRowIndex : visualIndex);
+        const visualIndex = this.hot.rowIndexMapper.getVisualFromRenderableIndex(renderedRowIndex);
+        return this.hot.getRowHeight(visualIndex === null ? renderedRowIndex : visualIndex);
       },
       cellRenderer: (renderedRowIndex, renderedColumnIndex, TD) => {
         const [visualRowIndex, visualColumnIndex] = this.translateFromRenderableToVisualIndex(renderedRowIndex, renderedColumnIndex);
 
         // Coords may be modified. For example, by the `MergeCells` plugin. It should affect cell value and cell meta.
-        const modifiedCellCoords = this.instance.runHooks('modifyGetCellCoords', visualRowIndex, visualColumnIndex);
+        const modifiedCellCoords = this.hot.runHooks('modifyGetCellCoords', visualRowIndex, visualColumnIndex);
         let visualRowToCheck = visualRowIndex;
         let visualColumnToCheck = visualColumnIndex;
         if (Array.isArray(modifiedCellCoords)) {
           [visualRowToCheck, visualColumnToCheck] = modifiedCellCoords;
         }
-        const cellProperties = this.instance.getCellMeta(visualRowToCheck, visualColumnToCheck);
-        const prop = this.instance.colToProp(visualColumnToCheck);
-        let value = this.instance.getDataAtRowProp(visualRowToCheck, prop);
-        if (this.instance.hasHook('beforeValueRender')) {
-          value = this.instance.runHooks('beforeValueRender', value, cellProperties);
+        const cellProperties = this.hot.getCellMeta(visualRowToCheck, visualColumnToCheck);
+        const prop = this.hot.colToProp(visualColumnToCheck);
+        let value = this.hot.getDataAtRowProp(visualRowToCheck, prop);
+        if (this.hot.hasHook('beforeValueRender')) {
+          value = this.hot.runHooks('beforeValueRender', value, cellProperties);
         }
-        this.instance.runHooks('beforeRenderer', TD, visualRowIndex, visualColumnIndex, prop, value, cellProperties);
-        this.instance.getCellRenderer(cellProperties)(this.instance, TD, visualRowIndex, visualColumnIndex, prop, value, cellProperties);
-        this.instance.runHooks('afterRenderer', TD, visualRowIndex, visualColumnIndex, prop, value, cellProperties);
+        this.hot.runHooks('beforeRenderer', TD, visualRowIndex, visualColumnIndex, prop, value, cellProperties);
+        this.hot.getCellRenderer(cellProperties)(this.hot, TD, visualRowIndex, visualColumnIndex, prop, value, cellProperties);
+        this.hot.runHooks('afterRenderer', TD, visualRowIndex, visualColumnIndex, prop, value, cellProperties);
       },
-      selections: this.instance.selection.highlight,
+      selections: this.hot.selection.highlight,
       hideBorderOnMouseDownOver: () => this.settings.fragmentSelection,
       onWindowResize: () => {
-        if (this.instance && !this.instance.isDestroyed) {
-          this.instance.refreshDimensions();
+        if (this.hot && !this.hot.isDestroyed) {
+          this.hot.refreshDimensions();
         }
       },
       onContainerElementResize: () => {
-        if (this.instance && !this.instance.isDestroyed && isVisible(this.instance.rootElement)) {
-          this.instance.refreshDimensions();
+        if (this.hot && !this.hot.isDestroyed && isVisible(this.hot.rootElement)) {
+          this.hot.refreshDimensions();
         }
       },
       onCellMouseDown: (event, coords, TD, wt) => {
@@ -720,44 +729,44 @@ class TableView {
           column: false,
           cell: false
         };
-        this.instance.listen();
+        this.hot.listen();
         this.activeWt = wt;
-        priv.mouseDown = true;
-        this.instance.runHooks('beforeOnCellMouseDown', event, visualCoords, TD, controller);
+        _classPrivateFieldSet(this, _mouseDown, true);
+        this.hot.runHooks('beforeOnCellMouseDown', event, visualCoords, TD, controller);
         if (isImmediatePropagationStopped(event)) {
           return;
         }
         handleMouseEvent(event, {
           coords: visualCoords,
-          selection: this.instance.selection,
+          selection: this.hot.selection,
           controller,
-          cellCoordsFactory: (row, column) => this.instance._createCellCoords(row, column)
+          cellCoordsFactory: (row, column) => this.hot._createCellCoords(row, column)
         });
-        this.instance.runHooks('afterOnCellMouseDown', event, visualCoords, TD);
+        this.hot.runHooks('afterOnCellMouseDown', event, visualCoords, TD);
         this.activeWt = this._wt;
       },
       onCellContextMenu: (event, coords, TD, wt) => {
         const visualCoords = this.translateFromRenderableToVisualCoords(coords);
         this.activeWt = wt;
-        priv.mouseDown = false;
-        if (this.instance.selection.isInProgress()) {
-          this.instance.selection.finish();
+        _classPrivateFieldSet(this, _mouseDown, false);
+        if (this.hot.selection.isInProgress()) {
+          this.hot.selection.finish();
         }
-        this.instance.runHooks('beforeOnCellContextMenu', event, visualCoords, TD);
+        this.hot.runHooks('beforeOnCellContextMenu', event, visualCoords, TD);
         if (isImmediatePropagationStopped(event)) {
           return;
         }
-        this.instance.runHooks('afterOnCellContextMenu', event, visualCoords, TD);
+        this.hot.runHooks('afterOnCellContextMenu', event, visualCoords, TD);
         this.activeWt = this._wt;
       },
       onCellMouseOut: (event, coords, TD, wt) => {
         const visualCoords = this.translateFromRenderableToVisualCoords(coords);
         this.activeWt = wt;
-        this.instance.runHooks('beforeOnCellMouseOut', event, visualCoords, TD);
+        this.hot.runHooks('beforeOnCellMouseOut', event, visualCoords, TD);
         if (isImmediatePropagationStopped(event)) {
           return;
         }
-        this.instance.runHooks('afterOnCellMouseOut', event, visualCoords, TD);
+        this.hot.runHooks('afterOnCellMouseOut', event, visualCoords, TD);
         this.activeWt = this._wt;
       },
       onCellMouseOver: (event, coords, TD, wt) => {
@@ -768,48 +777,48 @@ class TableView {
           cell: false
         };
         this.activeWt = wt;
-        this.instance.runHooks('beforeOnCellMouseOver', event, visualCoords, TD, controller);
+        this.hot.runHooks('beforeOnCellMouseOver', event, visualCoords, TD, controller);
         if (isImmediatePropagationStopped(event)) {
           return;
         }
-        if (priv.mouseDown) {
+        if (_classPrivateFieldGet(this, _mouseDown)) {
           handleMouseEvent(event, {
             coords: visualCoords,
-            selection: this.instance.selection,
+            selection: this.hot.selection,
             controller,
-            cellCoordsFactory: (row, column) => this.instance._createCellCoords(row, column)
+            cellCoordsFactory: (row, column) => this.hot._createCellCoords(row, column)
           });
         }
-        this.instance.runHooks('afterOnCellMouseOver', event, visualCoords, TD);
+        this.hot.runHooks('afterOnCellMouseOver', event, visualCoords, TD);
         this.activeWt = this._wt;
       },
       onCellMouseUp: (event, coords, TD, wt) => {
         const visualCoords = this.translateFromRenderableToVisualCoords(coords);
         this.activeWt = wt;
-        this.instance.runHooks('beforeOnCellMouseUp', event, visualCoords, TD);
+        this.hot.runHooks('beforeOnCellMouseUp', event, visualCoords, TD);
 
         // TODO: The second condition check is a workaround. Callback corresponding the method `updateSettings`
         // disable plugin and enable it again. Disabling plugin closes the menu. Thus, calling the
         // `updateSettings` in a body of any callback executed right after some context-menu action
         // breaks the table (#7231).
-        if (isImmediatePropagationStopped(event) || this.instance.isDestroyed) {
+        if (isImmediatePropagationStopped(event) || this.hot.isDestroyed) {
           return;
         }
-        this.instance.runHooks('afterOnCellMouseUp', event, visualCoords, TD);
+        this.hot.runHooks('afterOnCellMouseUp', event, visualCoords, TD);
         this.activeWt = this._wt;
       },
       onCellCornerMouseDown: event => {
         event.preventDefault();
-        this.instance.runHooks('afterOnCellCornerMouseDown', event);
+        this.hot.runHooks('afterOnCellCornerMouseDown', event);
       },
       onCellCornerDblClick: event => {
         event.preventDefault();
-        this.instance.runHooks('afterOnCellCornerDblClick', event);
+        this.hot.runHooks('afterOnCellCornerDblClick', event);
       },
       beforeDraw: (force, skipRender) => this.beforeRender(force, skipRender),
       onDraw: force => this.afterRender(force),
       onBeforeViewportScrollVertically: renderableRow => {
-        const rowMapper = this.instance.rowIndexMapper;
+        const rowMapper = this.hot.rowIndexMapper;
         const areColumnHeadersSelected = renderableRow < 0;
         let visualRow = renderableRow;
         if (!areColumnHeadersSelected) {
@@ -820,15 +829,15 @@ class TableView {
             return renderableRow;
           }
         }
-        visualRow = this.instance.runHooks('beforeViewportScrollVertically', visualRow);
-        this.instance.runHooks('beforeViewportScroll');
+        visualRow = this.hot.runHooks('beforeViewportScrollVertically', visualRow);
+        this.hot.runHooks('beforeViewportScroll');
         if (!areColumnHeadersSelected) {
           return rowMapper.getRenderableFromVisualIndex(visualRow);
         }
         return visualRow;
       },
       onBeforeViewportScrollHorizontally: renderableColumn => {
-        const columnMapper = this.instance.columnIndexMapper;
+        const columnMapper = this.hot.columnIndexMapper;
         const areRowHeadersSelected = renderableColumn < 0;
         let visualColumn = renderableColumn;
         if (!areRowHeadersSelected) {
@@ -839,43 +848,43 @@ class TableView {
             return renderableColumn;
           }
         }
-        visualColumn = this.instance.runHooks('beforeViewportScrollHorizontally', visualColumn);
-        this.instance.runHooks('beforeViewportScroll');
+        visualColumn = this.hot.runHooks('beforeViewportScrollHorizontally', visualColumn);
+        this.hot.runHooks('beforeViewportScroll');
         if (!areRowHeadersSelected) {
           return columnMapper.getRenderableFromVisualIndex(visualColumn);
         }
         return visualColumn;
       },
       onScrollVertically: () => {
-        this.instance.runHooks('afterScrollVertically');
-        this.instance.runHooks('afterScroll');
+        this.hot.runHooks('afterScrollVertically');
+        this.hot.runHooks('afterScroll');
       },
       onScrollHorizontally: () => {
-        this.instance.runHooks('afterScrollHorizontally');
-        this.instance.runHooks('afterScroll');
+        this.hot.runHooks('afterScrollHorizontally');
+        this.hot.runHooks('afterScroll');
       },
-      onBeforeRemoveCellClassNames: () => this.instance.runHooks('beforeRemoveCellClassNames'),
+      onBeforeRemoveCellClassNames: () => this.hot.runHooks('beforeRemoveCellClassNames'),
       onBeforeHighlightingRowHeader: (renderableRow, headerLevel, highlightMeta) => {
-        const rowMapper = this.instance.rowIndexMapper;
+        const rowMapper = this.hot.rowIndexMapper;
         const areColumnHeadersSelected = renderableRow < 0;
         let visualRow = renderableRow;
         if (!areColumnHeadersSelected) {
           visualRow = rowMapper.getVisualFromRenderableIndex(renderableRow);
         }
-        const newVisualRow = this.instance.runHooks('beforeHighlightingRowHeader', visualRow, headerLevel, highlightMeta);
+        const newVisualRow = this.hot.runHooks('beforeHighlightingRowHeader', visualRow, headerLevel, highlightMeta);
         if (!areColumnHeadersSelected) {
           return rowMapper.getRenderableFromVisualIndex(rowMapper.getNearestNotHiddenIndex(newVisualRow, 1));
         }
         return newVisualRow;
       },
       onBeforeHighlightingColumnHeader: (renderableColumn, headerLevel, highlightMeta) => {
-        const columnMapper = this.instance.columnIndexMapper;
+        const columnMapper = this.hot.columnIndexMapper;
         const areRowHeadersSelected = renderableColumn < 0;
         let visualColumn = renderableColumn;
         if (!areRowHeadersSelected) {
           visualColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn);
         }
-        const newVisualColumn = this.instance.runHooks('beforeHighlightingColumnHeader', visualColumn, headerLevel, highlightMeta);
+        const newVisualColumn = this.hot.runHooks('beforeHighlightingColumnHeader', visualColumn, headerLevel, highlightMeta);
         if (!areRowHeadersSelected) {
           return columnMapper.getRenderableFromVisualIndex(columnMapper.getNearestNotHiddenIndex(newVisualColumn, 1));
         }
@@ -884,34 +893,34 @@ class TableView {
       onAfterDrawSelection: (currentRow, currentColumn, layerLevel) => {
         let cornersOfSelection;
         const [visualRowIndex, visualColumnIndex] = this.translateFromRenderableToVisualIndex(currentRow, currentColumn);
-        const selectedRange = this.instance.selection.getSelectedRange();
+        const selectedRange = this.hot.selection.getSelectedRange();
         const selectionRangeSize = selectedRange.size();
         if (selectionRangeSize > 0) {
           const selectionForLayer = selectedRange.peekByIndex(layerLevel !== null && layerLevel !== void 0 ? layerLevel : 0);
           cornersOfSelection = [selectionForLayer.from.row, selectionForLayer.from.col, selectionForLayer.to.row, selectionForLayer.to.col];
         }
-        return this.instance.runHooks('afterDrawSelection', visualRowIndex, visualColumnIndex, cornersOfSelection, layerLevel);
+        return this.hot.runHooks('afterDrawSelection', visualRowIndex, visualColumnIndex, cornersOfSelection, layerLevel);
       },
       onBeforeDrawBorders: (corners, borderClassName) => {
         const [startRenderableRow, startRenderableColumn, endRenderableRow, endRenderableColumn] = corners;
-        const visualCorners = [this.instance.rowIndexMapper.getVisualFromRenderableIndex(startRenderableRow), this.instance.columnIndexMapper.getVisualFromRenderableIndex(startRenderableColumn), this.instance.rowIndexMapper.getVisualFromRenderableIndex(endRenderableRow), this.instance.columnIndexMapper.getVisualFromRenderableIndex(endRenderableColumn)];
-        return this.instance.runHooks('beforeDrawBorders', visualCorners, borderClassName);
+        const visualCorners = [this.hot.rowIndexMapper.getVisualFromRenderableIndex(startRenderableRow), this.hot.columnIndexMapper.getVisualFromRenderableIndex(startRenderableColumn), this.hot.rowIndexMapper.getVisualFromRenderableIndex(endRenderableRow), this.hot.columnIndexMapper.getVisualFromRenderableIndex(endRenderableColumn)];
+        return this.hot.runHooks('beforeDrawBorders', visualCorners, borderClassName);
       },
-      onBeforeTouchScroll: () => this.instance.runHooks('beforeTouchScroll'),
-      onAfterMomentumScroll: () => this.instance.runHooks('afterMomentumScroll'),
+      onBeforeTouchScroll: () => this.hot.runHooks('beforeTouchScroll'),
+      onAfterMomentumScroll: () => this.hot.runHooks('afterMomentumScroll'),
       onBeforeStretchingColumnWidth: (stretchedWidth, renderedColumnIndex) => {
-        const visualColumnIndex = this.instance.columnIndexMapper.getVisualFromRenderableIndex(renderedColumnIndex);
-        return this.instance.runHooks('beforeStretchingColumnWidth', stretchedWidth, visualColumnIndex);
+        const visualColumnIndex = this.hot.columnIndexMapper.getVisualFromRenderableIndex(renderedColumnIndex);
+        return this.hot.runHooks('beforeStretchingColumnWidth', stretchedWidth, visualColumnIndex);
       },
-      onModifyRowHeaderWidth: rowHeaderWidth => this.instance.runHooks('modifyRowHeaderWidth', rowHeaderWidth),
+      onModifyRowHeaderWidth: rowHeaderWidth => this.hot.runHooks('modifyRowHeaderWidth', rowHeaderWidth),
       onModifyGetCellCoords: (renderableRowIndex, renderableColumnIndex, topmost) => {
-        const rowMapper = this.instance.rowIndexMapper;
-        const columnMapper = this.instance.columnIndexMapper;
+        const rowMapper = this.hot.rowIndexMapper;
+        const columnMapper = this.hot.columnIndexMapper;
 
         // Callback handle also headers. We shouldn't translate them.
         const visualColumnIndex = renderableColumnIndex >= 0 ? columnMapper.getVisualFromRenderableIndex(renderableColumnIndex) : renderableColumnIndex;
         const visualRowIndex = renderableRowIndex >= 0 ? rowMapper.getVisualFromRenderableIndex(renderableRowIndex) : renderableRowIndex;
-        const visualIndexes = this.instance.runHooks('modifyGetCellCoords', visualRowIndex, visualColumnIndex, topmost);
+        const visualIndexes = this.hot.runHooks('modifyGetCellCoords', visualRowIndex, visualColumnIndex, topmost);
         if (Array.isArray(visualIndexes)) {
           const [visualRowFrom, visualColumnFrom, visualRowTo, visualColumnTo] = visualIndexes;
 
@@ -937,7 +946,7 @@ class TableView {
             calc.endRow = Math.min(lastRenderedRow + offset, renderableRows - 1);
           }
         }
-        this.instance.runHooks('afterViewportRowCalculatorOverride', calc);
+        this.hot.runHooks('afterViewportRowCalculatorOverride', calc);
       },
       viewportColumnCalculatorOverride: calc => {
         let viewportOffset = this.settings.viewportColumnRenderingOffset;
@@ -958,15 +967,15 @@ class TableView {
             calc.endColumn = Math.min(lastRenderedColumn + offset, renderableColumns - 1);
           }
         }
-        this.instance.runHooks('afterViewportColumnCalculatorOverride', calc);
+        this.hot.runHooks('afterViewportColumnCalculatorOverride', calc);
       },
       rowHeaderWidth: () => this.settings.rowHeaderWidth,
       columnHeaderHeight: () => {
-        const columnHeaderHeight = this.instance.runHooks('modifyColumnHeaderHeight');
+        const columnHeaderHeight = this.hot.runHooks('modifyColumnHeaderHeight');
         return this.settings.columnHeaderHeight || columnHeaderHeight;
       }
     };
-    this.instance.runHooks('beforeInitWalkontable', walkontableConfig);
+    this.hot.runHooks('beforeInitWalkontable', walkontableConfig);
     this._wt = new Walkontable(walkontableConfig);
     this.activeWt = this._wt;
     const spreader = this._wt.wtTable.spreader;
@@ -974,7 +983,7 @@ class TableView {
     const {
       width,
       height
-    } = this.instance.rootElement.getBoundingClientRect();
+    } = this.hot.rootElement.getBoundingClientRect();
     this.setLastSize(width, height);
     this.eventManager.addEventListener(spreader, 'mousedown', event => {
       // right mouse button exactly on spreader means right click on the right hand side of vertical scrollbar
@@ -988,10 +997,10 @@ class TableView {
         event.stopPropagation();
       }
     });
-    this.eventManager.addEventListener(this.instance.rootDocument.documentElement, 'click', () => {
+    this.eventManager.addEventListener(this.hot.rootDocument.documentElement, 'click', () => {
       if (this.settings.observeDOMVisibility) {
         if (this._wt.drawInterrupted) {
-          this.instance.forceFullRender = true;
+          this.hot.forceFullRender = true;
           this.render();
         }
       }
@@ -1009,7 +1018,7 @@ class TableView {
     if (isInput(el)) {
       return true;
     }
-    const isChildOfTableBody = isChildOf(el, this.instance.view._wt.wtTable.spreader);
+    const isChildOfTableBody = isChildOf(el, this.hot.view._wt.wtTable.spreader);
     if (this.settings.fragmentSelection === true && isChildOfTableBody) {
       return true;
     }
@@ -1029,7 +1038,7 @@ class TableView {
    * @returns {boolean}
    */
   isMouseDown() {
-    return privatePool.get(this).mouseDown;
+    return _classPrivateFieldGet(this, _mouseDown);
   }
 
   /**
@@ -1039,8 +1048,8 @@ class TableView {
    * @returns {boolean}
    */
   isSelectedOnlyCell() {
-    var _this$instance$getSel, _this$instance$getSel2;
-    return (_this$instance$getSel = (_this$instance$getSel2 = this.instance.getSelectedRangeLast()) === null || _this$instance$getSel2 === void 0 ? void 0 : _this$instance$getSel2.isSingleCell()) !== null && _this$instance$getSel !== void 0 ? _this$instance$getSel : false;
+    var _this$hot$getSelected, _this$hot$getSelected2;
+    return (_this$hot$getSelected = (_this$hot$getSelected2 = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected2 === void 0 ? void 0 : _this$hot$getSelected2.isSingleCell()) !== null && _this$hot$getSelected !== void 0 ? _this$hot$getSelected : false;
   }
 
   /**
@@ -1050,7 +1059,7 @@ class TableView {
    * @returns {boolean}
    */
   isCellEdited() {
-    const activeEditor = this.instance.getActiveEditor();
+    const activeEditor = this.hot.getActiveEditor();
     return activeEditor && activeEditor.isOpened();
   }
 
@@ -1065,8 +1074,8 @@ class TableView {
    */
   beforeRender(force, skipRender) {
     if (force) {
-      // this.instance.forceFullRender = did Handsontable request full render?
-      this.instance.runHooks('beforeViewRender', this.instance.forceFullRender, skipRender);
+      // this.hot.forceFullRender = did Handsontable request full render?
+      this.hot.runHooks('beforeViewRender', this.hot.forceFullRender, skipRender);
     }
   }
 
@@ -1079,8 +1088,8 @@ class TableView {
    */
   afterRender(force) {
     if (force) {
-      // this.instance.forceFullRender = did Handsontable request full render?
-      this.instance.runHooks('afterViewRender', this.instance.forceFullRender);
+      // this.hot.forceFullRender = did Handsontable request full render?
+      this.hot.runHooks('afterViewRender', this.hot.forceFullRender);
     }
   }
 
@@ -1099,12 +1108,12 @@ class TableView {
         this.appendRowHeader(visualRowIndex, TH);
         return;
       }
-      this.updateCellHeader(container.querySelector('.rowHeader'), visualRowIndex, this.instance.getRowHeader);
+      this.updateCellHeader(container.querySelector('.rowHeader'), visualRowIndex, this.hot.getRowHeader);
     } else {
       const {
         rootDocument,
         getRowHeader
-      } = this.instance;
+      } = this.hot;
       const div = rootDocument.createElement('div');
       const span = rootDocument.createElement('span');
       div.className = 'relative';
@@ -1113,7 +1122,7 @@ class TableView {
       div.appendChild(span);
       TH.appendChild(div);
     }
-    this.instance.runHooks('afterGetRowHeader', visualRowIndex, TH);
+    this.hot.runHooks('afterGetRowHeader', visualRowIndex, TH);
   }
 
   /**
@@ -1127,7 +1136,7 @@ class TableView {
    *                                 values counting from 0 to N).
    */
   appendColHeader(visualColumnIndex, TH) {
-    let label = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.instance.getColHeader;
+    let label = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.hot.getColHeader;
     let headerLevel = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
     if (TH.firstChild) {
       const container = TH.firstChild;
@@ -1140,7 +1149,7 @@ class TableView {
     } else {
       const {
         rootDocument
-      } = this.instance;
+      } = this.hot;
       const div = rootDocument.createElement('div');
       const span = rootDocument.createElement('span');
       div.className = 'relative';
@@ -1149,7 +1158,7 @@ class TableView {
       div.appendChild(span);
       TH.appendChild(div);
     }
-    this.instance.runHooks('afterGetColHeader', visualColumnIndex, TH, headerLevel);
+    this.hot.runHooks('afterGetColHeader', visualColumnIndex, TH, headerLevel);
   }
 
   /**
@@ -1219,8 +1228,8 @@ class TableView {
    * @param {number} height The table height.
    */
   setLastSize(width, height) {
-    const priv = privatePool.get(this);
-    [priv.lastWidth, priv.lastHeight] = [width, height];
+    _classPrivateFieldSet(this, _lastWidth, width);
+    _classPrivateFieldSet(this, _lastHeight, height);
   }
 
   /**
@@ -1229,10 +1238,9 @@ class TableView {
    * @returns {object}
    */
   getLastSize() {
-    const priv = privatePool.get(this);
     return {
-      width: priv.lastWidth,
-      height: priv.lastHeight
+      width: _classPrivateFieldGet(this, _lastWidth),
+      height: _classPrivateFieldGet(this, _lastHeight)
     };
   }
 
@@ -1242,7 +1250,7 @@ class TableView {
    * @returns {number}
    */
   getFirstFullyVisibleRow() {
-    return this.instance.rowIndexMapper.getVisualFromRenderableIndex(this.instance.view._wt.wtScroll.getFirstVisibleRow());
+    return this.hot.rowIndexMapper.getVisualFromRenderableIndex(this.hot.view._wt.wtScroll.getFirstVisibleRow());
   }
 
   /**
@@ -1251,7 +1259,7 @@ class TableView {
    * @returns {number}
    */
   getLastFullyVisibleRow() {
-    return this.instance.rowIndexMapper.getVisualFromRenderableIndex(this.instance.view._wt.wtScroll.getLastVisibleRow());
+    return this.hot.rowIndexMapper.getVisualFromRenderableIndex(this.hot.view._wt.wtScroll.getLastVisibleRow());
   }
 
   /**
@@ -1260,7 +1268,7 @@ class TableView {
    * @returns {number}
    */
   getFirstFullyVisibleColumn() {
-    return this.instance.columnIndexMapper.getVisualFromRenderableIndex(this.instance.view._wt.wtScroll.getFirstVisibleColumn());
+    return this.hot.columnIndexMapper.getVisualFromRenderableIndex(this.hot.view._wt.wtScroll.getFirstVisibleColumn());
   }
 
   /**
@@ -1269,7 +1277,7 @@ class TableView {
    * @returns {number}
    */
   getLastFullyVisibleColumn() {
-    return this.instance.columnIndexMapper.getVisualFromRenderableIndex(this.instance.view._wt.wtScroll.getLastVisibleColumn());
+    return this.hot.columnIndexMapper.getVisualFromRenderableIndex(this.hot.view._wt.wtScroll.getLastVisibleColumn());
   }
 
   /**