handsontable 13.1.0 → 14.0.0-next-d97b156-20231027

package/tableView.js

@@ -9,6 +9,7 @@ var _event = require("./helpers/dom/event");
 var _src = _interopRequireDefault(require("./3rdparty/walkontable/src"));
 var _mouseEventHandler = require("./selection/mouseEventHandler");
 var _rootInstance = require("./utils/rootInstance");
+var _a11y = require("./helpers/a11y");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
@@ -259,6 +260,10 @@ class TableView {
     if (this.instance.getSettings().tableClassName) {
       (0, _element.addClass)(priv.table, this.instance.getSettings().tableClassName);
     }
+    if (this.settings.ariaTags) {
+      (0, _element.setAttribute)(priv.table, [(0, _a11y.A11Y_PRESENTATION)()]);
+      (0, _element.setAttribute)(rootElement, [(0, _a11y.A11Y_TREEGRID)(), (0, _a11y.A11Y_ROWCOUNT)(this.instance.countRows()), (0, _a11y.A11Y_COLCOUNT)(this.instance.countCols()), (0, _a11y.A11Y_MULTISELECTABLE)()]);
+    }
     this.THEAD = rootDocument.createElement('THEAD');
     priv.table.appendChild(this.THEAD);
     this.TBODY = rootDocument.createElement('TBODY');
@@ -312,11 +317,14 @@ class TableView {
     });
     this.eventManager.addEventListener(documentElement, 'mouseup', event => {
       if (selection.isInProgress() && (0, _event.isLeftClick)(event)) {
-        // is left mouse button
         selection.finish();
       }
       priv.mouseDown = false;
-      if ((0, _element.isOutsideInput)(rootDocument.activeElement) || !selection.isSelected() && !selection.isSelectedByAnyHeader() && !rootElement.contains(event.target) && !(0, _event.isRightClick)(event)) {
+      const isOutsideInputElement = (0, _element.isOutsideInput)(rootDocument.activeElement);
+      if (!isOutsideInputElement) {
+        return;
+      }
+      if (isOutsideInputElement || !selection.isSelected() && !selection.isSelectedByAnyHeader() && !rootElement.contains(event.target) && !(0, _event.isRightClick)(event)) {
         this.instance.unlisten();
       }
     });
@@ -550,6 +558,40 @@ class TableView {
     return this.countNotHiddenRowIndexes(visualFixedRowsBottom, 1);
   }
 
+  /**
+   * The function returns the number of renderable column indexes within the passed range of the visual indexes.
+   *
+   * @param {number} columnStart The column visual start index.
+   * @param {number} columnEnd The column visual end index.
+   * @returns {number}
+   */
+  countRenderableColumnsInRange(columnStart, columnEnd) {
+    let count = 0;
+    for (let column = columnStart; column <= columnEnd; column++) {
+      if (this.instance.columnIndexMapper.getRenderableFromVisualIndex(column) !== null) {
+        count += 1;
+      }
+    }
+    return count;
+  }
+
+  /**
+   * The function returns the number of renderable row indexes within the passed range of the visual indexes.
+   *
+   * @param {number} rowStart The row visual start index.
+   * @param {number} rowEnd The row visual end index.
+   * @returns {number}
+   */
+  countRenderableRowsInRange(rowStart, rowEnd) {
+    let count = 0;
+    for (let row = rowStart; row <= rowEnd; row++) {
+      if (this.instance.rowIndexMapper.getRenderableFromVisualIndex(row) !== null) {
+        count += 1;
+      }
+    }
+    return count;
+  }
+
   /**
    * Checks if at least one cell than belongs to the main table is not covered by the top, left or
    * bottom overlay.
@@ -570,6 +612,7 @@ class TableView {
   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,
@@ -670,7 +713,7 @@ class TableView {
         }
       },
       onContainerElementResize: () => {
-        if (this.instance && !this.instance.isDestroyed) {
+        if (this.instance && !this.instance.isDestroyed && (0, _element.isVisible)(this.instance.rootElement)) {
           this.instance.refreshDimensions();
         }
       },
@@ -769,20 +812,78 @@ class TableView {
       },
       beforeDraw: (force, skipRender) => this.beforeRender(force, skipRender),
       onDraw: force => this.afterRender(force),
-      onScrollVertically: () => this.instance.runHooks('afterScrollVertically'),
-      onScrollHorizontally: () => this.instance.runHooks('afterScrollHorizontally'),
+      onBeforeViewportScrollVertically: renderableRow => {
+        const rowMapper = this.instance.rowIndexMapper;
+        const areColumnHeadersSelected = renderableRow < 0;
+        let visualRow = renderableRow;
+        if (!areColumnHeadersSelected) {
+          visualRow = rowMapper.getVisualFromRenderableIndex(renderableRow);
+
+          // for an empty data return index as is
+          if (visualRow === null) {
+            return renderableRow;
+          }
+        }
+        visualRow = this.instance.runHooks('beforeViewportScrollVertically', visualRow);
+        this.instance.runHooks('beforeViewportScroll');
+        if (!areColumnHeadersSelected) {
+          return rowMapper.getRenderableFromVisualIndex(visualRow);
+        }
+        return visualRow;
+      },
+      onBeforeViewportScrollHorizontally: renderableColumn => {
+        const columnMapper = this.instance.columnIndexMapper;
+        const areRowHeadersSelected = renderableColumn < 0;
+        let visualColumn = renderableColumn;
+        if (!areRowHeadersSelected) {
+          visualColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn);
+
+          // for an empty data return index as is
+          if (visualColumn === null) {
+            return renderableColumn;
+          }
+        }
+        visualColumn = this.instance.runHooks('beforeViewportScrollHorizontally', visualColumn);
+        this.instance.runHooks('beforeViewportScroll');
+        if (!areRowHeadersSelected) {
+          return columnMapper.getRenderableFromVisualIndex(visualColumn);
+        }
+        return visualColumn;
+      },
+      onScrollVertically: () => {
+        this.instance.runHooks('afterScrollVertically');
+        this.instance.runHooks('afterScroll');
+      },
+      onScrollHorizontally: () => {
+        this.instance.runHooks('afterScrollHorizontally');
+        this.instance.runHooks('afterScroll');
+      },
       onBeforeRemoveCellClassNames: () => this.instance.runHooks('beforeRemoveCellClassNames'),
       onBeforeHighlightingRowHeader: (renderableRow, headerLevel, highlightMeta) => {
         const rowMapper = this.instance.rowIndexMapper;
-        const visualRow = rowMapper.getVisualFromRenderableIndex(renderableRow);
+        const areColumnHeadersSelected = renderableRow < 0;
+        let visualRow = renderableRow;
+        if (!areColumnHeadersSelected) {
+          visualRow = rowMapper.getVisualFromRenderableIndex(renderableRow);
+        }
         const newVisualRow = this.instance.runHooks('beforeHighlightingRowHeader', visualRow, headerLevel, highlightMeta);
-        return rowMapper.getRenderableFromVisualIndex(rowMapper.getNearestNotHiddenIndex(newVisualRow, 1));
+        if (!areColumnHeadersSelected) {
+          return rowMapper.getRenderableFromVisualIndex(rowMapper.getNearestNotHiddenIndex(newVisualRow, 1));
+        }
+        return newVisualRow;
       },
       onBeforeHighlightingColumnHeader: (renderableColumn, headerLevel, highlightMeta) => {
         const columnMapper = this.instance.columnIndexMapper;
-        const visualColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn);
+        const areRowHeadersSelected = renderableColumn < 0;
+        let visualColumn = renderableColumn;
+        if (!areRowHeadersSelected) {
+          visualColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn);
+        }
         const newVisualColumn = this.instance.runHooks('beforeHighlightingColumnHeader', visualColumn, headerLevel, highlightMeta);
-        return columnMapper.getRenderableFromVisualIndex(columnMapper.getNearestNotHiddenIndex(newVisualColumn, 1));
+        if (!areRowHeadersSelected) {
+          return columnMapper.getRenderableFromVisualIndex(columnMapper.getNearestNotHiddenIndex(newVisualColumn, 1));
+        }
+        return newVisualColumn;
       },
       onAfterDrawSelection: (currentRow, currentColumn, layerLevel) => {
         let cornersOfSelection;
@@ -790,10 +891,7 @@ class TableView {
         const selectedRange = this.instance.selection.getSelectedRange();
         const selectionRangeSize = selectedRange.size();
         if (selectionRangeSize > 0) {
-          // Selection layers are stored from the "oldest" to the "newest". We should calculate the offset.
-          // Please look at the `SelectedRange` class and it's method for getting selection's layer for more information.
-          const selectionOffset = (layerLevel !== null && layerLevel !== void 0 ? layerLevel : 0) + 1 - selectionRangeSize;
-          const selectionForLayer = selectedRange.peekByIndex(selectionOffset);
+          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);
@@ -946,7 +1044,7 @@ class TableView {
    */
   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.isSingle()) !== null && _this$instance$getSel !== void 0 ? _this$instance$getSel : false;
+    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;
   }
 
   /**
@@ -1206,5 +1304,4 @@ class TableView {
     this.eventManager.destroy();
   }
 }
-var _default = TableView;
-exports.default = _default;
+var _default = exports.default = TableView;

package/tableView.mjs

@@ -10,12 +10,13 @@ function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) {
 function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
 function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
 function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
-import { addClass, clearTextSelection, empty, fastInnerHTML, fastInnerText, getScrollbarWidth, hasClass, isChildOf, isInput, isOutsideInput } from "./helpers/dom/element.mjs";
+import { addClass, clearTextSelection, empty, fastInnerHTML, fastInnerText, getScrollbarWidth, hasClass, isChildOf, isInput, isOutsideInput, isVisible, setAttribute } from "./helpers/dom/element.mjs";
 import EventManager from "./eventManager.mjs";
 import { isImmediatePropagationStopped, isRightClick, isLeftClick } from "./helpers/dom/event.mjs";
 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();
 
 /**
@@ -255,6 +256,10 @@ class TableView {
     if (this.instance.getSettings().tableClassName) {
       addClass(priv.table, this.instance.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()]);
+    }
     this.THEAD = rootDocument.createElement('THEAD');
     priv.table.appendChild(this.THEAD);
     this.TBODY = rootDocument.createElement('TBODY');
@@ -308,11 +313,14 @@ class TableView {
     });
     this.eventManager.addEventListener(documentElement, 'mouseup', event => {
       if (selection.isInProgress() && isLeftClick(event)) {
-        // is left mouse button
         selection.finish();
       }
       priv.mouseDown = false;
-      if (isOutsideInput(rootDocument.activeElement) || !selection.isSelected() && !selection.isSelectedByAnyHeader() && !rootElement.contains(event.target) && !isRightClick(event)) {
+      const isOutsideInputElement = isOutsideInput(rootDocument.activeElement);
+      if (!isOutsideInputElement) {
+        return;
+      }
+      if (isOutsideInputElement || !selection.isSelected() && !selection.isSelectedByAnyHeader() && !rootElement.contains(event.target) && !isRightClick(event)) {
         this.instance.unlisten();
       }
     });
@@ -546,6 +554,40 @@ class TableView {
     return this.countNotHiddenRowIndexes(visualFixedRowsBottom, 1);
   }
 
+  /**
+   * The function returns the number of renderable column indexes within the passed range of the visual indexes.
+   *
+   * @param {number} columnStart The column visual start index.
+   * @param {number} columnEnd The column visual end index.
+   * @returns {number}
+   */
+  countRenderableColumnsInRange(columnStart, columnEnd) {
+    let count = 0;
+    for (let column = columnStart; column <= columnEnd; column++) {
+      if (this.instance.columnIndexMapper.getRenderableFromVisualIndex(column) !== null) {
+        count += 1;
+      }
+    }
+    return count;
+  }
+
+  /**
+   * The function returns the number of renderable row indexes within the passed range of the visual indexes.
+   *
+   * @param {number} rowStart The row visual start index.
+   * @param {number} rowEnd The row visual end index.
+   * @returns {number}
+   */
+  countRenderableRowsInRange(rowStart, rowEnd) {
+    let count = 0;
+    for (let row = rowStart; row <= rowEnd; row++) {
+      if (this.instance.rowIndexMapper.getRenderableFromVisualIndex(row) !== null) {
+        count += 1;
+      }
+    }
+    return count;
+  }
+
   /**
    * Checks if at least one cell than belongs to the main table is not covered by the top, left or
    * bottom overlay.
@@ -566,6 +608,7 @@ class TableView {
   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,
@@ -666,7 +709,7 @@ class TableView {
         }
       },
       onContainerElementResize: () => {
-        if (this.instance && !this.instance.isDestroyed) {
+        if (this.instance && !this.instance.isDestroyed && isVisible(this.instance.rootElement)) {
           this.instance.refreshDimensions();
         }
       },
@@ -765,20 +808,78 @@ class TableView {
       },
       beforeDraw: (force, skipRender) => this.beforeRender(force, skipRender),
       onDraw: force => this.afterRender(force),
-      onScrollVertically: () => this.instance.runHooks('afterScrollVertically'),
-      onScrollHorizontally: () => this.instance.runHooks('afterScrollHorizontally'),
+      onBeforeViewportScrollVertically: renderableRow => {
+        const rowMapper = this.instance.rowIndexMapper;
+        const areColumnHeadersSelected = renderableRow < 0;
+        let visualRow = renderableRow;
+        if (!areColumnHeadersSelected) {
+          visualRow = rowMapper.getVisualFromRenderableIndex(renderableRow);
+
+          // for an empty data return index as is
+          if (visualRow === null) {
+            return renderableRow;
+          }
+        }
+        visualRow = this.instance.runHooks('beforeViewportScrollVertically', visualRow);
+        this.instance.runHooks('beforeViewportScroll');
+        if (!areColumnHeadersSelected) {
+          return rowMapper.getRenderableFromVisualIndex(visualRow);
+        }
+        return visualRow;
+      },
+      onBeforeViewportScrollHorizontally: renderableColumn => {
+        const columnMapper = this.instance.columnIndexMapper;
+        const areRowHeadersSelected = renderableColumn < 0;
+        let visualColumn = renderableColumn;
+        if (!areRowHeadersSelected) {
+          visualColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn);
+
+          // for an empty data return index as is
+          if (visualColumn === null) {
+            return renderableColumn;
+          }
+        }
+        visualColumn = this.instance.runHooks('beforeViewportScrollHorizontally', visualColumn);
+        this.instance.runHooks('beforeViewportScroll');
+        if (!areRowHeadersSelected) {
+          return columnMapper.getRenderableFromVisualIndex(visualColumn);
+        }
+        return visualColumn;
+      },
+      onScrollVertically: () => {
+        this.instance.runHooks('afterScrollVertically');
+        this.instance.runHooks('afterScroll');
+      },
+      onScrollHorizontally: () => {
+        this.instance.runHooks('afterScrollHorizontally');
+        this.instance.runHooks('afterScroll');
+      },
       onBeforeRemoveCellClassNames: () => this.instance.runHooks('beforeRemoveCellClassNames'),
       onBeforeHighlightingRowHeader: (renderableRow, headerLevel, highlightMeta) => {
         const rowMapper = this.instance.rowIndexMapper;
-        const visualRow = rowMapper.getVisualFromRenderableIndex(renderableRow);
+        const areColumnHeadersSelected = renderableRow < 0;
+        let visualRow = renderableRow;
+        if (!areColumnHeadersSelected) {
+          visualRow = rowMapper.getVisualFromRenderableIndex(renderableRow);
+        }
         const newVisualRow = this.instance.runHooks('beforeHighlightingRowHeader', visualRow, headerLevel, highlightMeta);
-        return rowMapper.getRenderableFromVisualIndex(rowMapper.getNearestNotHiddenIndex(newVisualRow, 1));
+        if (!areColumnHeadersSelected) {
+          return rowMapper.getRenderableFromVisualIndex(rowMapper.getNearestNotHiddenIndex(newVisualRow, 1));
+        }
+        return newVisualRow;
       },
       onBeforeHighlightingColumnHeader: (renderableColumn, headerLevel, highlightMeta) => {
         const columnMapper = this.instance.columnIndexMapper;
-        const visualColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn);
+        const areRowHeadersSelected = renderableColumn < 0;
+        let visualColumn = renderableColumn;
+        if (!areRowHeadersSelected) {
+          visualColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn);
+        }
         const newVisualColumn = this.instance.runHooks('beforeHighlightingColumnHeader', visualColumn, headerLevel, highlightMeta);
-        return columnMapper.getRenderableFromVisualIndex(columnMapper.getNearestNotHiddenIndex(newVisualColumn, 1));
+        if (!areRowHeadersSelected) {
+          return columnMapper.getRenderableFromVisualIndex(columnMapper.getNearestNotHiddenIndex(newVisualColumn, 1));
+        }
+        return newVisualColumn;
       },
       onAfterDrawSelection: (currentRow, currentColumn, layerLevel) => {
         let cornersOfSelection;
@@ -786,10 +887,7 @@ class TableView {
         const selectedRange = this.instance.selection.getSelectedRange();
         const selectionRangeSize = selectedRange.size();
         if (selectionRangeSize > 0) {
-          // Selection layers are stored from the "oldest" to the "newest". We should calculate the offset.
-          // Please look at the `SelectedRange` class and it's method for getting selection's layer for more information.
-          const selectionOffset = (layerLevel !== null && layerLevel !== void 0 ? layerLevel : 0) + 1 - selectionRangeSize;
-          const selectionForLayer = selectedRange.peekByIndex(selectionOffset);
+          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);
@@ -942,7 +1040,7 @@ class TableView {
    */
   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.isSingle()) !== null && _this$instance$getSel !== void 0 ? _this$instance$getSel : false;
+    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;
   }
 
   /**

package/utils/dataStructures/linkedList.js

@@ -237,5 +237,4 @@ class LinkedList {
     this.last = temp;
   }
 }
-var _default = LinkedList;
-exports.default = _default;
+var _default = exports.default = LinkedList;

package/utils/dataStructures/priorityMap.js

@@ -5,10 +5,8 @@ exports.createPriorityMap = createPriorityMap;
 require("core-js/modules/es.error.cause.js");
 var _number = require("../../helpers/number");
 var _function = require("../../helpers/function");
-const ASC = 'asc';
-exports.ASC = ASC;
-const DESC = 'desc';
-exports.DESC = DESC;
+const ASC = exports.ASC = 'asc';
+const DESC = exports.DESC = 'desc';
 const ORDER_MAP = new Map([[ASC, [-1, 1]], [DESC, [1, -1]]]);
 const DEFAULT_ERROR_PRIORITY_EXISTS = priority => `The priority '${priority}' is already declared in a map.`;
 const DEFAULT_ERROR_PRIORITY_NAN = priority => `The priority '${priority}' is not a number.`;

package/utils/dataStructures/queue.js

@@ -62,5 +62,4 @@ class Queue {
     return this.items.length;
   }
 }
-var _default = Queue;
-exports.default = _default;
+var _default = exports.default = Queue;

package/utils/dataStructures/stack.js

@@ -62,5 +62,4 @@ class Stack {
     return this.items.length;
   }
 }
-var _default = Stack;
-exports.default = _default;
+var _default = exports.default = Stack;

package/utils/dataStructures/tree.js

@@ -12,13 +12,12 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
  *
  * @type {string}
  */
-const TRAVERSAL_DF_PRE = 'DF-pre-order';
+const TRAVERSAL_DF_PRE = exports.TRAVERSAL_DF_PRE = 'DF-pre-order';
 /**
  * @param {Function} callback A callback which will be called on each visited node.
  * @param {*} context A context to pass through.
  * @returns {boolean}
  */
-exports.TRAVERSAL_DF_PRE = TRAVERSAL_DF_PRE;
 function depthFirstPreOrder(callback, context) {
   let continueTraverse = callback.call(context, this);
   for (let i = 0; i < this.childs.length; i++) {
@@ -35,13 +34,12 @@ function depthFirstPreOrder(callback, context) {
  *
  * @type {string}
  */
-const TRAVERSAL_DF_POST = 'DF-post-order';
+const TRAVERSAL_DF_POST = exports.TRAVERSAL_DF_POST = 'DF-post-order';
 /**
  * @param {Function} callback A callback which will be called on each visited node.
  * @param {*} context A context to pass through.
  * @returns {boolean}
  */
-exports.TRAVERSAL_DF_POST = TRAVERSAL_DF_POST;
 function depthFirstPostOrder(callback, context) {
   for (let i = 0; i < this.childs.length; i++) {
     const continueTraverse = depthFirstPostOrder.call(this.childs[i], callback, context);
@@ -57,12 +55,11 @@ function depthFirstPostOrder(callback, context) {
  *
  * @type {string}
  */
-const TRAVERSAL_BF = 'BF';
+const TRAVERSAL_BF = exports.TRAVERSAL_BF = 'BF';
 /**
  * @param {Function} callback A callback which will be called on each visited node.
  * @param {*} context A context to pass through.
  */
-exports.TRAVERSAL_BF = TRAVERSAL_BF;
 function breadthFirst(callback, context) {
   const queue = [this];
 

package/utils/ghostTable.js

@@ -5,6 +5,9 @@ require("core-js/modules/es.error.cause.js");
 require("core-js/modules/es.array.push.js");
 var _element = require("./../helpers/dom/element");
 var _array = require("./../helpers/array");
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 /**
  * @class GhostTable
  */
@@ -15,47 +18,48 @@ class GhostTable {
      *
      * @type {Core}
      */
-    this.hot = hotInstance;
+    _defineProperty(this, "hot", null);
     /**
      * Container element where every table will be injected.
      *
      * @type {HTMLElement|null}
      */
-    this.container = null;
+    _defineProperty(this, "container", null);
     /**
      * Flag which determine is table was injected to DOM.
      *
      * @type {boolean}
      */
-    this.injected = false;
+    _defineProperty(this, "injected", false);
     /**
      * Added rows collection.
      *
      * @type {Array}
      */
-    this.rows = [];
+    _defineProperty(this, "rows", []);
     /**
      * Added columns collection.
      *
      * @type {Array}
      */
-    this.columns = [];
+    _defineProperty(this, "columns", []);
     /**
      * Samples prepared for calculations.
      *
      * @type {Map}
      * @default {null}
      */
-    this.samples = null;
+    _defineProperty(this, "samples", null);
     /**
      * Ghost table settings.
      *
      * @type {object}
      * @default {Object}
      */
-    this.settings = {
+    _defineProperty(this, "settings", {
       useHeaders: true
-    };
+    });
+    this.hot = hotInstance;
   }
 
   /**
@@ -77,7 +81,7 @@ class GhostTable {
     this.rows.push(rowObject);
     this.samples = samples;
     this.table = this.createTable(this.hot.table.className);
-    this.table.colGroup.appendChild(this.createColGroupsCol());
+    this.table.colGroup.appendChild(this.createColGroupsCol(row));
     this.table.tr.appendChild(this.createRow(row));
     this.container.container.appendChild(this.table.fragment);
     rowObject.table = this.table.table;
@@ -221,16 +225,17 @@ class GhostTable {
   /**
    * Create colgroup col elements.
    *
+   * @param {number} row Visual row index.
    * @returns {DocumentFragment}
    */
-  createColGroupsCol() {
+  createColGroupsCol(row) {
     const fragment = this.hot.rootDocument.createDocumentFragment();
     if (this.hot.hasRowHeaders()) {
-      fragment.appendChild(this.createColElement(-1));
+      fragment.appendChild(this.createColElement(-1, -1));
     }
     this.samples.forEach(sample => {
       (0, _array.arrayEach)(sample.strings, string => {
-        fragment.appendChild(this.createColElement(string.col));
+        fragment.appendChild(this.createColElement(string.col, row));
       });
     });
     return fragment;
@@ -377,12 +382,23 @@ class GhostTable {
   /**
    * Create col element.
    *
-   * @param {number} column Column index.
+   * @param {number} column Visual column index.
+   * @param {number} row Visual row index.
    * @returns {HTMLElement}
    */
-  createColElement(column) {
+  createColElement(column, row) {
     const col = this.hot.rootDocument.createElement('col');
-    col.style.width = `${this.hot.view._wt.wtTable.getStretchedColumnWidth(column)}px`;
+    let colspan = 0;
+    if (row >= 0 && column >= 0) {
+      colspan = this.hot.getCellMeta(row, column).colspan;
+    }
+    let width = this.hot.view._wt.wtTable.getStretchedColumnWidth(column);
+    if (colspan > 1) {
+      for (let nextColumn = column + 1; nextColumn < column + colspan; nextColumn++) {
+        width += this.hot.view._wt.wtTable.getStretchedColumnWidth(nextColumn);
+      }
+    }
+    col.style.width = `${width}px`;
     return col;
   }
 
@@ -471,5 +487,4 @@ class GhostTable {
     return !!(this.columns.length && !this.rows.length);
   }
 }
-var _default = GhostTable;
-exports.default = _default;
+var _default = exports.default = GhostTable;