handsontable 17.1.0 → 18.0.0-rc2

package/tableView.js

@@ -190,7 +190,7 @@ var /**
    * @returns {HTMLTableCellElement|null}
    */ getCellAtCoords(coords, topmost) {
         const td = this._wt.getCell(coords, topmost);
-        if (td < 0) {
+        if (typeof td === 'number' && td < 0) {
             return null;
         }
         return td;
@@ -240,10 +240,10 @@ var /**
         const { rootElement, rootDocument } = 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
+            rootElement.dataset.originalstyle = originalStyle; // needed to retrieve original style in jsFiddle link generator in HT examples. may be removed in future versions
         }
         (0, _element.addClass)(rootElement, 'handsontable');
-        _class_private_field_set(this, _table, rootDocument.createElement('TABLE'));
+        _class_private_field_set(this, _table, rootDocument.createElement('table'));
         (0, _element.addClass)(_class_private_field_get(this, _table), 'htCore');
         if (this.hot.getSettings().tableClassName) {
             (0, _element.addClass)(_class_private_field_get(this, _table), this.hot.getSettings().tableClassName);
@@ -259,9 +259,9 @@ var /**
                 (0, _a11y.A11Y_MULTISELECTABLE)()
             ]);
         }
-        this.THEAD = rootDocument.createElement('THEAD');
+        this.THEAD = rootDocument.createElement('thead');
         _class_private_field_get(this, _table).appendChild(this.THEAD);
-        this.TBODY = rootDocument.createElement('TBODY');
+        this.TBODY = rootDocument.createElement('tbody');
         _class_private_field_get(this, _table).appendChild(this.TBODY);
         this.hot.table = _class_private_field_get(this, _table);
         this.hot.container.insertBefore(_class_private_field_get(this, _table), this.hot.container.firstChild);
@@ -278,8 +278,14 @@ var /**
             if (_class_private_method_get(this, _isSyntheticMouseEvent, isSyntheticMouseEvent).call(this, event)) {
                 return;
             }
+            // Leave the middle mouse button (the scroll wheel) untouched so the browser can start its
+            // native autoscroll. Calling `preventDefault()` on a middle-button mousedown cancels that
+            // panning behavior, which is available on Windows and Linux (https://github.com/handsontable/handsontable/issues/2722).
+            if ((0, _event.isMiddleClick)(event)) {
+                return;
+            }
             _class_private_field_set(this, _selectionMouseDown, true);
-            if (!this.isTextSelectionAllowed(event.target)) {
+            if (!this.isTextSelectionAllowed((0, _element.eventTargetEl)(event))) {
                 (0, _element.clearTextSelection)(rootWindow);
                 event.preventDefault();
                 rootWindow.focus(); // make sure that window that contains HOT is active. Important when HOT is in iframe.
@@ -293,7 +299,7 @@ var /**
             _class_private_field_set(this, _selectionMouseDown, false);
         });
         this.eventManager.addEventListener(rootElement, 'mousemove', (event)=>{
-            if (_class_private_field_get(this, _selectionMouseDown) && !this.isTextSelectionAllowed(event.target)) {
+            if (_class_private_field_get(this, _selectionMouseDown) && !this.isTextSelectionAllowed((0, _element.eventTargetEl)(event))) {
                 // Clear selection only when fragmentSelection is enabled, otherwise clearing selection breaks the IME editor.
                 if (this.settings.fragmentSelection) {
                     (0, _element.clearTextSelection)(rootWindow);
@@ -352,8 +358,8 @@ var /**
         });
         this.eventManager.addEventListener(documentElement, 'mousedown', (event)=>{
             const originalTarget = event.target;
-            const eventX = event.x || event.clientX;
-            const eventY = event.y || event.clientY;
+            const eventX = event.clientX;
+            const eventY = event.clientY;
             let next = event.target;
             if (_class_private_field_get(this, _mouseDown) || !rootElement || !this.hot.view) {
                 return; // it must have been started in a cell
@@ -370,6 +376,7 @@ var /**
                     return;
                 }
             } else {
+                const { rootPortalElement } = this.hot;
                 while(next !== documentElement){
                     if (next === null) {
                         if (event.isTargetWebComponent) {
@@ -378,8 +385,8 @@ var /**
                         // click on something that was a row but now is detached (possibly because your click triggered a rerender)
                         return;
                     }
-                    if (next === rootElement) {
-                        // click inside container
+                    if (next === rootElement || next === rootPortalElement) {
+                        // click inside container or portal
                         return;
                     }
                     next = next.parentNode;
@@ -401,7 +408,7 @@ var /**
             parentWindow = (0, _element.getParentWindow)(parentWindow);
         }
         this.eventManager.addEventListener(_class_private_field_get(this, _table), 'selectstart', (event)=>{
-            if (this.settings.fragmentSelection || (0, _element.isInput)(event.target)) {
+            if (this.settings.fragmentSelection || (0, _element.isInput)((0, _element.eventTargetEl)(event))) {
                 return;
             }
             // https://github.com/handsontable/handsontable/issues/160
@@ -443,14 +450,10 @@ var /**
    */ translateFromRenderableToVisualIndex(renderableRow, renderableColumn) {
         // TODO: Some helper may be needed.
         // We perform translation for indexes (without headers).
-        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;
-        }
-        if (visualColumn === null) {
-            visualColumn = renderableColumn;
-        }
+        const mappedRow = renderableRow >= 0 ? this.hot.rowIndexMapper.getVisualFromRenderableIndex(renderableRow) : renderableRow;
+        const mappedColumn = renderableColumn >= 0 ? this.hot.columnIndexMapper.getVisualFromRenderableIndex(renderableColumn) : renderableColumn;
+        const visualRow = mappedRow === null ? renderableRow : mappedRow;
+        const visualColumn = mappedColumn === null ? renderableColumn : mappedColumn;
         return [
             visualRow,
             visualColumn
@@ -472,7 +475,7 @@ var /**
         if (firstNotHiddenIndex === null) {
             return 0;
         }
-        return indexMapper.getRenderableFromVisualIndex(firstNotHiddenIndex) + 1;
+        return (indexMapper.getRenderableFromVisualIndex(firstNotHiddenIndex) ?? 0) + 1;
     }
     /**
    * Returns the number of renderable columns.
@@ -521,9 +524,10 @@ var /**
         if (isNaN(visualIndex) || visualIndex < 0) {
             return 0;
         }
-        const firstVisibleIndex = indexMapper.getNearestNotHiddenIndex(visualIndex, incrementBy);
+        const searchDirection = incrementBy < 0 ? -1 : 1;
+        const firstVisibleIndex = indexMapper.getNearestNotHiddenIndex(visualIndex, searchDirection);
         const renderableIndex = indexMapper.getRenderableFromVisualIndex(firstVisibleIndex);
-        if (!Number.isInteger(renderableIndex)) {
+        if (renderableIndex === null || !Number.isInteger(renderableIndex)) {
             return 0;
         }
         let notHiddenIndexes = 0;
@@ -542,7 +546,7 @@ var /**
    * @returns {number}
    */ countNotHiddenFixedColumnsStart() {
         const countCols = this.hot.countCols();
-        const visualFixedColumnsStart = Math.min(parseInt(this.settings.fixedColumnsStart, 10), countCols) - 1;
+        const visualFixedColumnsStart = Math.min(Number(this.settings.fixedColumnsStart) || 0, countCols) - 1;
         return this.countNotHiddenColumnIndexes(visualFixedColumnsStart, -1);
     }
     /**
@@ -552,7 +556,7 @@ var /**
    * @returns {number}
    */ countNotHiddenFixedRowsTop() {
         const countRows = this.hot.countRows();
-        const visualFixedRowsTop = Math.min(parseInt(this.settings.fixedRowsTop, 10), countRows) - 1;
+        const visualFixedRowsTop = Math.min(Number(this.settings.fixedRowsTop) || 0, countRows) - 1;
         return this.countNotHiddenRowIndexes(visualFixedRowsTop, -1);
     }
     /**
@@ -562,7 +566,7 @@ var /**
    * @returns {number}
    */ countNotHiddenFixedRowsBottom() {
         const countRows = this.hot.countRows();
-        const visualFixedRowsBottom = Math.max(countRows - parseInt(this.settings.fixedRowsBottom, 10), 0);
+        const visualFixedRowsBottom = Math.max(countRows - (Number(this.settings.fixedRowsBottom) || 0), 0);
         return this.countNotHiddenRowIndexes(visualFixedRowsBottom, 1);
     }
     /**
@@ -596,26 +600,6 @@ var /**
         return count;
     }
     /**
-   * Add a class name to the license information element.
-   *
-   * @param {string} className The class name to add.
-   */ addClassNameToLicenseElement(className) {
-        const licenseInfoElement = this.hot.rootElement.parentNode?.querySelector('.hot-display-license-info');
-        if (licenseInfoElement) {
-            (0, _element.addClass)(licenseInfoElement, className);
-        }
-    }
-    /**
-   * Remove a class name from the license information element.
-   *
-   * @param {string} className The class name to remove.
-   */ removeClassNameFromLicenseElement(className) {
-        const licenseInfoElement = this.hot.rootElement.parentNode?.querySelector('.hot-display-license-info');
-        if (licenseInfoElement) {
-            (0, _element.removeClass)(licenseInfoElement, className);
-        }
-    }
-    /**
    * Checks if at least one cell than belongs to the main table is not covered by the top, left or
    * bottom overlay.
    *
@@ -641,7 +625,8 @@ var /**
             viewportColumnRenderingThreshold: ()=>this.settings.viewportColumnRenderingThreshold,
             viewportRowRenderingThreshold: ()=>this.settings.viewportRowRenderingThreshold,
             data: (renderableRow, renderableColumn)=>{
-                return this.hot.getDataAtCell(...this.translateFromRenderableToVisualIndex(renderableRow, renderableColumn));
+                const [visualRow, visualCol] = this.translateFromRenderableToVisualIndex(renderableRow, renderableColumn);
+                return this.hot.getDataAtCell(visualRow, visualCol);
             },
             totalRows: ()=>this.countRenderableRows(),
             totalColumns: ()=>this.countRenderableColumns(),
@@ -653,15 +638,15 @@ var /**
             fixedRowsBottom: ()=>this.countNotHiddenFixedRowsBottom(),
             // Enable the inline start overlay when conditions are met.
             shouldRenderInlineStartOverlay: ()=>{
-                return this.settings.fixedColumnsStart > 0 || walkontableConfig.rowHeaders().length > 0;
+                return (this.settings.fixedColumnsStart ?? 0) > 0 || walkontableConfig.rowHeaders().length > 0;
             },
             // Enable the top overlay when conditions are met.
             shouldRenderTopOverlay: ()=>{
-                return this.settings.fixedRowsTop > 0 || walkontableConfig.columnHeaders().length > 0;
+                return (this.settings.fixedRowsTop ?? 0) > 0 || walkontableConfig.columnHeaders().length > 0;
             },
             // Enable the bottom overlay when conditions are met.
             shouldRenderBottomOverlay: ()=>{
-                return this.settings.fixedRowsBottom > 0;
+                return (this.settings.fixedRowsBottom ?? 0) > 0;
             },
             minSpareRows: ()=>this.settings.minSpareRows,
             renderAllRows: this.settings.renderAllRows,
@@ -736,8 +721,11 @@ var /**
                 let formattedValue = value;
                 if (typeof cellProperties.valueFormatter === 'function') {
                     formattedValue = cellProperties.valueFormatter(formattedValue, cellProperties);
-                } else if (typeof renderer.valueFormatter === 'function') {
-                    formattedValue = renderer.valueFormatter.call(cellProperties, formattedValue, cellProperties);
+                } else if (typeof renderer === 'function' && 'valueFormatter' in renderer) {
+                    const { valueFormatter } = renderer;
+                    if (typeof valueFormatter === 'function') {
+                        formattedValue = valueFormatter.call(cellProperties, formattedValue, cellProperties);
+                    }
                 }
                 this.hot.runHooks('beforeRenderer', TD, visualRowIndex, visualColumnIndex, prop, value, cellProperties);
                 const rendererArgs = [
@@ -781,8 +769,8 @@ var /**
                 this.activeWt = wt;
                 _class_private_field_set(this, _mouseDown, true);
                 _class_private_field_set(this, _mouseDownLastPos, {
-                    x: event.clientX,
-                    y: event.clientY
+                    row: event.clientX,
+                    col: event.clientY
                 });
                 this.hot.runHooks('beforeOnCellMouseDown', event, visualCoords, TD, controller);
                 if ((0, _event.isImmediatePropagationStopped)(event)) {
@@ -836,7 +824,7 @@ var /**
                 // Ignore mouseover events when the mouse has not moved. This solves an issue (#dev-1479) where
                 // column resizing triggered by the long text in the cell causes the mouseover event to be fired,
                 // thus selecting multiple cells with no user intention.
-                if (_class_private_field_get(this, _mouseDown) && (!_class_private_field_get(this, _mouseDownLastPos) || _class_private_field_get(this, _mouseDownLastPos).x !== event.clientX || _class_private_field_get(this, _mouseDownLastPos).y !== event.clientY)) {
+                if (_class_private_field_get(this, _mouseDown) && (!_class_private_field_get(this, _mouseDownLastPos) || _class_private_field_get(this, _mouseDownLastPos).row !== event.clientX || _class_private_field_get(this, _mouseDownLastPos).col !== event.clientY)) {
                     (0, _mouseEventHandler.handleMouseEvent)(event, {
                         coords: visualCoords,
                         selection: this.hot.selection,
@@ -848,6 +836,28 @@ var /**
                 this.activeWt = this._wt;
                 _class_private_field_set(this, _mouseDownLastPos, null);
             },
+            onCellMouseOverOutside: (event, coords, TD, wt)=>{
+                const visualCoords = this.translateFromRenderableToVisualCoords(coords);
+                const controller = {
+                    row: false,
+                    column: false,
+                    cell: false
+                };
+                this.activeWt = wt;
+                this.hot.runHooks('beforeOnCellMouseOverOutside', event, visualCoords, TD, controller);
+                if ((0, _event.isImmediatePropagationStopped)(event)) {
+                    return;
+                }
+                (0, _mouseEventHandler.handleMouseEvent)(event, {
+                    coords: visualCoords,
+                    selection: this.hot.selection,
+                    controller,
+                    cellCoordsFactory: (row, column)=>this.hot._createCellCoords(row, column)
+                });
+                this.hot.runHooks('afterOnCellMouseOverOutside', event, visualCoords, TD);
+                this.activeWt = this._wt;
+                _class_private_field_set(this, _mouseDownLastPos, null);
+            },
             onCellMouseUp: (event, coords, TD, wt)=>{
                 const visualCoords = this.translateFromRenderableToVisualCoords(coords);
                 this.activeWt = wt;
@@ -882,11 +892,12 @@ var /**
                 const areColumnHeadersSelected = renderableRow < 0;
                 let visualRow = renderableRow;
                 if (!areColumnHeadersSelected) {
-                    visualRow = rowMapper.getVisualFromRenderableIndex(renderableRow);
+                    const mappedRow = rowMapper.getVisualFromRenderableIndex(renderableRow);
                     // for an empty data return index as is
-                    if (visualRow === null) {
+                    if (mappedRow === null) {
                         return renderableRow;
                     }
+                    visualRow = mappedRow;
                 }
                 visualRow = this.hot.runHooks('beforeViewportScrollVertically', visualRow, snapping);
                 this.hot.runHooks('beforeViewportScroll');
@@ -900,11 +911,12 @@ var /**
                 const areRowHeadersSelected = renderableColumn < 0;
                 let visualColumn = renderableColumn;
                 if (!areRowHeadersSelected) {
-                    visualColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn);
+                    const mappedColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn);
                     // for an empty data return index as is
-                    if (visualColumn === null) {
+                    if (mappedColumn === null) {
                         return renderableColumn;
                     }
+                    visualColumn = mappedColumn;
                 }
                 visualColumn = this.hot.runHooks('beforeViewportScrollHorizontally', visualColumn, snapping);
                 this.hot.runHooks('beforeViewportScroll');
@@ -927,7 +939,7 @@ var /**
                 const areColumnHeadersSelected = renderableRow < 0;
                 let visualRow = renderableRow;
                 if (!areColumnHeadersSelected) {
-                    visualRow = rowMapper.getVisualFromRenderableIndex(renderableRow);
+                    visualRow = rowMapper.getVisualFromRenderableIndex(renderableRow) ?? renderableRow;
                 }
                 const newVisualRow = this.hot.runHooks('beforeHighlightingRowHeader', visualRow, headerLevel, highlightMeta);
                 if (!areColumnHeadersSelected) {
@@ -940,7 +952,7 @@ var /**
                 const areRowHeadersSelected = renderableColumn < 0;
                 let visualColumn = renderableColumn;
                 if (!areRowHeadersSelected) {
-                    visualColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn);
+                    visualColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn) ?? renderableColumn;
                 }
                 const newVisualColumn = this.hot.runHooks('beforeHighlightingColumnHeader', visualColumn, headerLevel, highlightMeta);
                 if (!areRowHeadersSelected) {
@@ -1010,30 +1022,24 @@ var /**
                 }
             },
             viewportRowCalculatorOverride: (calc)=>{
-                let viewportOffset = this.settings.viewportRowRenderingOffset;
-                if (viewportOffset === 'auto') {
-                    viewportOffset = 1;
-                }
-                if (viewportOffset > 0) {
+                const viewportOffset = this.settings.viewportRowRenderingOffset === 'auto' ? 1 : this.settings.viewportRowRenderingOffset;
+                if ((viewportOffset ?? 0) > 0) {
                     const renderableRows = this.countRenderableRows();
                     const firstRenderedRow = calc.startRow;
                     const lastRenderedRow = calc.endRow;
-                    calc.startRow = Math.max(firstRenderedRow - viewportOffset, 0);
-                    calc.endRow = Math.min(lastRenderedRow + viewportOffset, renderableRows - 1);
+                    calc.startRow = Math.max(firstRenderedRow - (viewportOffset ?? 0), 0);
+                    calc.endRow = Math.min(lastRenderedRow + (viewportOffset ?? 0), renderableRows - 1);
                 }
                 this.hot.runHooks('afterViewportRowCalculatorOverride', calc);
             },
             viewportColumnCalculatorOverride: (calc)=>{
-                let viewportOffset = this.settings.viewportColumnRenderingOffset;
-                if (viewportOffset === 'auto') {
-                    viewportOffset = 1;
-                }
-                if (viewportOffset > 0) {
+                const viewportOffset = this.settings.viewportColumnRenderingOffset === 'auto' ? 1 : this.settings.viewportColumnRenderingOffset;
+                if ((viewportOffset ?? 0) > 0) {
                     const renderableColumns = this.countRenderableColumns();
                     const firstRenderedColumn = calc.startColumn;
                     const lastRenderedColumn = calc.endColumn;
-                    calc.startColumn = Math.max(firstRenderedColumn - viewportOffset, 0);
-                    calc.endColumn = Math.min(lastRenderedColumn + viewportOffset, renderableColumns - 1);
+                    calc.startColumn = Math.max(firstRenderedColumn - (viewportOffset ?? 0), 0);
+                    calc.endColumn = Math.min(lastRenderedColumn + (viewportOffset ?? 0), renderableColumns - 1);
                 }
                 this.hot.runHooks('afterViewportColumnCalculatorOverride', calc);
             },
@@ -1111,7 +1117,7 @@ var /**
    * @returns {boolean}
    */ isCellEdited() {
         const activeEditor = this.hot.getActiveEditor();
-        return activeEditor && activeEditor.isOpened();
+        return activeEditor?.isOpened();
     }
     /**
    * `beforeDraw` callback.
@@ -1176,7 +1182,11 @@ var /**
    */ appendColHeader(visualColumnIndex, TH, label = this.hot.getColHeader, headerLevel = 0) {
         const getColumnHeaderClassNames = ()=>{
             const metaHeaderClassNames = visualColumnIndex >= 0 ? this.hot.getColumnMeta(visualColumnIndex).headerClassName : null;
-            return metaHeaderClassNames ? metaHeaderClassNames.split(' ') : [];
+            if (!metaHeaderClassNames) {
+                return [];
+            }
+            const classes = Array.isArray(metaHeaderClassNames) ? metaHeaderClassNames : metaHeaderClassNames.split(' ');
+            return classes.flatMap((cls)=>cls.split(' ')).filter((cls)=>cls.length > 0);
         };
         if (TH.firstChild) {
             const container = TH.firstChild;
@@ -1199,8 +1209,12 @@ var /**
             div.classList.add('relative', ...classNames);
             span.className = 'colHeader';
             if (this.settings.ariaTags) {
-                (0, _element.setAttribute)(div, ...(0, _a11y.A11Y_PRESENTATION)());
-                (0, _element.setAttribute)(span, ...(0, _a11y.A11Y_PRESENTATION)());
+                (0, _element.setAttribute)(div, [
+                    (0, _a11y.A11Y_PRESENTATION)()
+                ]);
+                (0, _element.setAttribute)(span, [
+                    (0, _a11y.A11Y_PRESENTATION)()
+                ]);
             }
             this.updateCellHeader(span, visualColumnIndex, label, headerLevel);
             div.appendChild(span);
@@ -1229,7 +1243,7 @@ var /**
             }
         }
         if (renderedIndex > -1) {
-            (0, _element.fastInnerHTML)(element, content(index, headerLevel), this.hot.getSettings().sanitizer);
+            (0, _element.fastInnerHTML)(element, String(content(index, headerLevel)), this.hot.getSettings().sanitizer ?? true, 'header', this.hot.rootGridElement ?? undefined);
         } else {
             // workaround for https://github.com/handsontable/handsontable/issues/1946
             (0, _element.fastInnerText)(element, String.fromCharCode(160));
@@ -1635,6 +1649,8 @@ var /**
    * @type {boolean}
    */ this.postponedAdjustElementsSize = false;
         _class_private_field_set(this, _selectionMouseDown, false);
+        _class_private_field_set(this, _mouseDown, false);
+        _class_private_field_set(this, _table, null);
         _class_private_field_set(this, _lastWidth, 0);
         _class_private_field_set(this, _lastHeight, 0);
         _class_private_field_set(this, _mouseDownLastPos, null);
@@ -1655,11 +1671,13 @@ function isSyntheticMouseEvent(event) {
     return _class_private_field_get(this, _recentTouchEnd);
 }
 function getAriaColcount() {
-    return parseInt(this.hot.rootElement.getAttribute((0, _a11y.A11Y_COLCOUNT)()[0]), 10);
+    return parseInt(this.hot.rootElement.getAttribute('aria-colcount') ?? '0', 10);
 }
 function updateAriaColcount(delta) {
     const colCount = _class_private_method_get(this, _getAriaColcount, getAriaColcount).call(this) + delta;
-    (0, _element.setAttribute)(this.hot.rootElement, ...(0, _a11y.A11Y_COLCOUNT)(colCount));
+    (0, _element.setAttribute)(this.hot.rootElement, [
+        (0, _a11y.A11Y_COLCOUNT)(colCount)
+    ]);
 }
 function updateScrollbarClassNames() {
     const rootElement = this.hot.rootElement;