handsontable 18.0.0 → 18.1.0-rc7

package/tableView.js

@@ -10,10 +10,13 @@ Object.defineProperty(exports, "default", {
 });
 const _element = require("./helpers/dom/element");
 const _eventManager = /*#__PURE__*/ _interop_require_default(require("./eventManager"));
+const _renderCell = require("./renderers/renderCell");
+const _renderSizeProbe = require("./renderSizeProbe");
 const _event = require("./helpers/dom/event");
 const _src = /*#__PURE__*/ _interop_require_default(require("./3rdparty/walkontable/src"));
 const _mouseEventHandler = require("./selection/mouseEventHandler");
 const _rootInstance = require("./utils/rootInstance");
+const _sanitizer = require("./utils/sanitizer");
 const _staticRegister = require("./utils/staticRegister");
 const _a11y = require("./helpers/a11y");
 function _check_private_redeclaration(obj, privateCollection) {
@@ -71,6 +74,16 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
+/**
+ * Checks whether a size setting (`rowHeights`, `minRowHeights`, or `colWidths`) guarantees a uniform
+ * size for every item. Only a plain number (or unset) is uniform; an array or function defines
+ * per-item sizes, and a string is treated conservatively as non-uniform.
+ *
+ * @param {unknown} value The size setting value.
+ * @returns {boolean}
+ */ function isUniformSizeSetting(value) {
+    return value === undefined || value === null || typeof value === 'number';
+}
 var /**
    * The total number of the column header renderers applied to the table through the
    * `afterGetColumnHeaderRenderers` hook.
@@ -82,12 +95,24 @@ var /**
    *
    * @type {number}
    */ _rowHeadersCount = /*#__PURE__*/ new WeakMap(), /**
+   * Whether the sizes measured from theme values cached against unresolved styles still have to be
+   * dropped. Set by the first render that finds the styles resolvable again, and kept until a render
+   * has actually reached the cells and re-measured them (see `#discardSizesMeasuredWithoutStyles`).
+   *
+   * @type {boolean}
+   */ _sizesMeasuredWithoutStylesPending = /*#__PURE__*/ new WeakMap(), /**
    * Defines if the text should be selected during mousemove.
    *
    * @type {boolean}
    */ _selectionMouseDown = /*#__PURE__*/ new WeakMap(), /**
    * @type {boolean}
    */ _mouseDown = /*#__PURE__*/ new WeakMap(), /**
+   * Tracks whether the document-level mousedown handler already classified the current click
+   * cycle as an outside click and consulted the `outsideClickDeselects` setting. The mouseup
+   * handler skips its own deselect pass then, so the setting's callback fires once per click.
+   *
+   * @type {boolean}
+   */ _outsideClickHandled = /*#__PURE__*/ new WeakMap(), /**
    * Main <TABLE> element.
    *
    * @type {HTMLTableElement}
@@ -132,6 +157,38 @@ var /**
    * @private
    * @returns {boolean}
    */ _isSyntheticMouseEvent = /*#__PURE__*/ new WeakSet(), /**
+   * Checks whether the event path points into the grid. The path counts as internal when it
+   * contains the grid's root element or its portal element. A complete path (one that crosses
+   * shadow boundaries and therefore contains ShadowRoot entries) is trusted as-is - a miss
+   * means a genuine outside click, even when the path shares the grid's shadow hosts. Only a
+   * filtered path (no ShadowRoot entries) falls back to the shadow host chain check, which
+   * matters for sandboxed hosts (e.g. Salesforce Lightning Web Security) that collapse paths
+   * observed at the document level to the visible host chain, hiding the grid internals.
+   *
+   * @param {EventTarget[]} eventPath The event propagation path (`event.composedPath()`).
+   * @private
+   * @returns {boolean}
+   */ _isPathWithinGrid = /*#__PURE__*/ new WeakSet(), /**
+   * Discards the row heights measured from theme values that were cached while the grid's root
+   * element resolved no computed styles, on the first draw that finds them resolvable again.
+   *
+   * A grid whose theme variables were cached against unresolved styles has an unknown default row
+   * height, so every rendered row is recorded oversized at a height it never had, and nothing
+   * re-measures those records on its own (DEV-2515 – the theme half of the unrendered-table problem
+   * described in `walkontable/AGENTS.md`).
+   *
+   * The styles handler answers both halves, because it is what cached the values: whether an earlier
+   * pass read them against unresolved styles, and whether they resolve now. Gating on the unknown row
+   * height instead would wipe the caches on every draw of a page that loads no grid stylesheet at
+   * all, where that value never resolves.
+   *
+   * Runs before `_wt.draw()`, not from the engine's `beforeDraw` setting: that setting fires after
+   * `createCalculators()`, so the rendered row band of that very draw would still be built from the
+   * heights this drops – the grid renders short for one frame and nothing schedules another draw. The
+   * drop stays pending (`#sizesMeasuredWithoutStylesPending`) until a draw has actually rendered the
+   * cells and re-measured them, which is what `afterRender` reports; a `beforeViewRender` listener
+   * that sets `skipRender` cancels the render, and then nothing takes the row heights again.
+   */ _discardSizesMeasuredWithoutStyles = /*#__PURE__*/ new WeakSet(), /**
    * Return the value of the `aria-colcount` attribute.
    *
    * @returns {number} The value of the `aria-colcount` attribute.
@@ -156,6 +213,7 @@ var /**
         if (!this.hot.isRenderSuspended()) {
             const isFullRender = this.hot.forceFullRender;
             this.hot.runHooks('beforeRender', isFullRender);
+            _class_private_method_get(this, _discardSizesMeasuredWithoutStyles, discardSizesMeasuredWithoutStyles).call(this);
             this._wt.draw(!isFullRender);
             _class_private_method_get(this, _updateScrollbarClassNames, updateScrollbarClassNames).call(this);
             if (this.postponedAdjustElementsSize) {
@@ -317,18 +375,34 @@ var /**
             if (selection.isInProgress() && (0, _event.isLeftClick)(event)) {
                 selection.finish();
             }
+            const wasInsideGridClick = _class_private_field_get(this, _mouseDown);
+            const wasOutsideClickHandled = _class_private_field_get(this, _outsideClickHandled);
             _class_private_field_set(this, _mouseDown, false);
+            _class_private_field_set(this, _outsideClickHandled, false);
             // Ignore synthetic mouseup events from Android touch interactions.
             if (_class_private_method_get(this, _isSyntheticMouseEvent, isSyntheticMouseEvent).call(this, event)) {
                 return;
             }
-            const isOutsideInputElement = (0, _element.isOutsideInput)(rootDocument.activeElement);
-            if ((0, _element.isInput)(rootDocument.activeElement) && !isOutsideInputElement) {
+            const activeElement = (0, _element.getDeepActiveElement)(rootDocument);
+            const activeHTMLElement = (0, _element.isHTMLElement)(activeElement) ? activeElement : null;
+            const isOutsideInputElement = activeHTMLElement !== null && (0, _element.isOutsideInput)(activeHTMLElement);
+            if (activeHTMLElement !== null && (0, _element.isInput)(activeHTMLElement) && !isOutsideInputElement) {
                 return;
             }
-            if (isOutsideInputElement || !selection.isSelected() && !selection.isSelectedByAnyHeader() && !(rootWrapperElement ?? rootElement).contains(event.target) && !(0, _event.isRightClick)(event)) {
+            const eventPath = event.composedPath();
+            const isPathThroughGridUi = eventPath.includes(rootWrapperElement ?? rootElement) || this.hot.rootPortalElement && eventPath.includes(this.hot.rootPortalElement);
+            const isFocusLostToOutside = this.hot.getFocusManager().isForeignFocusTarget(activeHTMLElement) || !wasInsideGridClick && !this.hot.getFocusManager().hasBrowserFocus() && !isPathThroughGridUi;
+            if (isOutsideInputElement || isFocusLostToOutside || !selection.isSelected() && !selection.isSelectedByAnyHeader() && !_class_private_method_get(this, _isPathWithinGrid, isPathWithinGrid).call(this, eventPath) && !(0, _event.isRightClick)(event)) {
                 this.hot.unlisten();
             }
+            if (!wasOutsideClickHandled && activeHTMLElement !== null && isFocusLostToOutside && selection.isSelected() && !_class_private_method_get(this, _isPathWithinGrid, isPathWithinGrid).call(this, eventPath) && !(0, _event.isRightClick)(event)) {
+                const clickTarget = eventPath.length > 0 ? eventPath[0] : event.target;
+                const clickTargetElement = (0, _element.isHTMLElement)(clickTarget) ? clickTarget : activeHTMLElement;
+                const outsideClickDeselects = typeof this.settings.outsideClickDeselects === 'function' ? this.settings.outsideClickDeselects(clickTargetElement) : this.settings.outsideClickDeselects;
+                if (outsideClickDeselects) {
+                    this.hot.deselectCell();
+                }
+            }
         });
         this.eventManager.addEventListener(documentElement, 'contextmenu', (event)=>{
             if (selection.isInProgress() && (0, _event.isRightClick)(event)) {
@@ -357,10 +431,11 @@ var /**
             }, 400));
         });
         this.eventManager.addEventListener(documentElement, 'mousedown', (event)=>{
-            const originalTarget = event.target;
+            const eventPath = event.composedPath();
+            const originalTarget = eventPath.length > 0 ? eventPath[0] : event.target;
             const eventX = event.clientX;
             const eventY = event.clientY;
-            let next = event.target;
+            _class_private_field_set(this, _outsideClickHandled, false);
             if (_class_private_field_get(this, _mouseDown) || !rootElement || !this.hot.view) {
                 return; // it must have been started in a cell
             }
@@ -370,29 +445,19 @@ var /**
             }
             // immediate click on "holder" means click on the right side of vertical scrollbar
             const { holder } = this._wt.wtTable;
-            if (next === holder) {
+            if (originalTarget === holder) {
                 const scrollbarWidth = (0, _element.getScrollbarWidth)(rootDocument);
-                if (rootDocument.elementFromPoint(eventX + scrollbarWidth, eventY) !== holder || rootDocument.elementFromPoint(eventX, eventY + scrollbarWidth) !== holder) {
+                const rootNode = rootElement.getRootNode();
+                const pointReader = (0, _element.isShadowRoot)(rootNode) ? rootNode : rootDocument;
+                if (pointReader.elementFromPoint(eventX + scrollbarWidth, eventY) !== holder || pointReader.elementFromPoint(eventX, eventY + scrollbarWidth) !== holder) {
                     return;
                 }
-            } else {
-                const { rootPortalElement } = this.hot;
-                while(next !== documentElement){
-                    if (next === null) {
-                        if (event.isTargetWebComponent) {
-                            break;
-                        }
-                        // click on something that was a row but now is detached (possibly because your click triggered a rerender)
-                        return;
-                    }
-                    if (next === rootElement || next === rootPortalElement) {
-                        // click inside container or portal
-                        return;
-                    }
-                    next = next.parentNode;
-                }
+            } else if (_class_private_method_get(this, _isPathWithinGrid, isPathWithinGrid).call(this, eventPath)) {
+                // click inside container, portal, or a shadow host the grid is rendered within
+                return;
             }
             // function did not return until here, we have an outside click!
+            _class_private_field_set(this, _outsideClickHandled, true);
             const outsideClickDeselects = typeof this.settings.outsideClickDeselects === 'function' ? this.settings.outsideClickDeselects(originalTarget) : this.settings.outsideClickDeselects;
             if (outsideClickDeselects) {
                 this.hot.deselectCell();
@@ -618,12 +683,21 @@ var /**
             ariaTags: this.settings.ariaTags,
             rtlMode: this.hot.isRtl(),
             externalRowCalculator: this.hot.getPlugin('autoRowSize') && this.hot.getPlugin('autoRowSize').isEnabled(),
+            // Single-pass rendering is on by default; the `modifySinglePassLayout` hook lets a plugin or
+            // user code force the legacy measure-then-render path by returning `false` (e.g. `mergeCells`,
+            // whose virtualized row heights depend on the viewport the layout is computing). Evaluated per
+            // read so toggling a plugin via `updateSettings` takes effect without re-initializing Walkontable.
+            singlePassLayout: ()=>this.hot.runHooks('modifySinglePassLayout', true),
             table: _class_private_field_get(this, _table),
             isDataViewInstance: ()=>(0, _rootInstance.isRootInstance)(this.hot),
             preventOverflow: ()=>this.settings.preventOverflow,
             preventWheel: ()=>this.settings.preventWheel,
             viewportColumnRenderingThreshold: ()=>this.settings.viewportColumnRenderingThreshold,
             viewportRowRenderingThreshold: ()=>this.settings.viewportRowRenderingThreshold,
+            // 'auto' is the dynamic-overscan mode; an explicit number is an exact manual offset, which
+            // also opts the axis out of the engine's directional scroll-overscan.
+            viewportColumnRenderingOffsetIsAuto: ()=>this.settings.viewportColumnRenderingOffset === 'auto',
+            viewportRowRenderingOffsetIsAuto: ()=>this.settings.viewportRowRenderingOffset === 'auto',
             data: (renderableRow, renderableColumn)=>{
                 const [visualRow, visualCol] = this.translateFromRenderableToVisualIndex(renderableRow, renderableColumn);
                 return this.hot.getDataAtCell(visualRow, visualCol);
@@ -702,6 +776,13 @@ var /**
                 const visualRowIndex = visualIndex === null ? renderedRowIndex : visualIndex;
                 return this.hot.runHooks('modifyRowHeightByOverlayName', this.hot.getRowHeight(visualRowIndex), visualRowIndex, overlayType);
             },
+            rowHeightsUniform: ()=>{
+                const { rowHeights, minRowHeights } = this.hot.getSettings();
+                return isUniformSizeSetting(rowHeights) && isUniformSizeSetting(minRowHeights) && !this.hot.hasHook('modifyRowHeight');
+            },
+            columnWidthsUniform: ()=>{
+                return isUniformSizeSetting(this.hot.getSettings().colWidths) && !this.hot.hasHook('modifyColWidth');
+            },
             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.
@@ -718,15 +799,7 @@ var /**
                     value = this.hot.runHooks('beforeValueRender', value, cellProperties);
                 }
                 const renderer = this.hot.getCellRenderer(cellProperties);
-                let formattedValue = value;
-                if (typeof cellProperties.valueFormatter === 'function') {
-                    formattedValue = cellProperties.valueFormatter(formattedValue, cellProperties);
-                } else if (typeof renderer === 'function' && 'valueFormatter' in renderer) {
-                    const { valueFormatter } = renderer;
-                    if (typeof valueFormatter === 'function') {
-                        formattedValue = valueFormatter.call(cellProperties, formattedValue, cellProperties);
-                    }
-                }
+                const formattedValue = (0, _renderCell.formatCellValue)(value, cellProperties, renderer);
                 this.hot.runHooks('beforeRenderer', TD, visualRowIndex, visualColumnIndex, prop, value, cellProperties);
                 const rendererArgs = [
                     this.hot,
@@ -737,14 +810,8 @@ var /**
                     formattedValue,
                     cellProperties
                 ];
-                renderer(...rendererArgs);
-                if (!cellProperties._isBaseRendererCalled) {
-                    this.hot.getCellRenderer({
-                        renderer: 'base'
-                    })(...rendererArgs);
-                }
+                (0, _renderCell.renderCell)(renderer, rendererArgs);
                 this.hot.runHooks('afterRenderer', TD, visualRowIndex, visualColumnIndex, prop, value, cellProperties);
-                cellProperties._isBaseRendererCalled = false;
             },
             selections: this.hot.selection.highlight,
             hideBorderOnMouseDownOver: ()=>this.settings.fragmentSelection,
@@ -885,6 +952,12 @@ var /**
                 event.preventDefault();
                 this.hot.runHooks('afterOnCellCornerDblClick', event);
             },
+            onSelectionHandleMouseDown: (event, edge)=>{
+                this.hot.runHooks('afterOnSelectionHandleMouseDown', event, edge);
+            },
+            onSelectionEdgeMouseDown: (event, edge)=>{
+                this.hot.runHooks('afterOnSelectionEdgeMouseDown', event, edge);
+            },
             beforeDraw: (force, skipRender)=>this.beforeRender(force, skipRender),
             onDraw: (force)=>this.afterRender(force),
             onBeforeViewportScrollVertically: (renderableRow, snapping)=>{
@@ -1045,8 +1118,41 @@ var /**
             },
             rowHeaderWidth: ()=>this.settings.rowHeaderWidth,
             columnHeaderHeight: ()=>{
-                const columnHeaderHeight = this.hot.runHooks('modifyColumnHeaderHeight');
-                return this.settings.columnHeaderHeight || columnHeaderHeight;
+                const hookHeight = this.hot.runHooks('modifyColumnHeaderHeight');
+                const configured = this.settings.columnHeaderHeight;
+                const probe = this.renderSizeProbe.columnHeaderHeights;
+                // Merge the three provided-height sources per header level: the `columnHeaderHeight` option
+                // (scalar or per-level array), the `modifyColumnHeaderHeight` hook (AutoRowSize), and the
+                // render-size probe (content-driven headers with no plugin). The engine reads this per level.
+                const levels = Math.max(Array.isArray(configured) ? configured.length : 0, probe.size ? Math.max(...probe.keys()) + 1 : 0);
+                if (levels === 0) {
+                    return configured || hookHeight;
+                }
+                const perLevel = [];
+                for(let level = 0; level < levels; level++){
+                    const configuredAtLevel = Array.isArray(configured) ? configured[level] : configured;
+                    // The explicit `columnHeaderHeight` option takes precedence over the
+                    // `modifyColumnHeaderHeight` hook (the legacy `option || hook` semantics — an explicit
+                    // option caps the header and the hook must not override it). The render-size probe may
+                    // still grow the header past that when the actual header content is taller, replacing the
+                    // old oversized-header DOM measurement.
+                    let base;
+                    if (typeof configuredAtLevel === 'number') {
+                        base = configuredAtLevel;
+                    } else if (typeof hookHeight === 'number') {
+                        base = hookHeight;
+                    }
+                    const probeAtLevel = probe.get(level);
+                    const candidates = [];
+                    if (typeof base === 'number') {
+                        candidates.push(base);
+                    }
+                    if (typeof probeAtLevel === 'number') {
+                        candidates.push(probeAtLevel);
+                    }
+                    perLevel[level] = candidates.length ? Math.max(...candidates) : undefined;
+                }
+                return perLevel;
             },
             stylesHandler: ()=>{
                 return this.hot.stylesHandler;
@@ -1135,11 +1241,27 @@ var /**
     /**
    * `afterRender` callback.
    *
+   * The engine fires `onDraw` only from a draw that rendered the cell band, which is what spends the
+   * pending theme-measurement drop: the sizes it invalidated have just been taken again against the
+   * resolved styles (see `#discardSizesMeasuredWithoutStyles`).
+   *
    * @private
    * @param {boolean} force If `true` rendering was triggered by a change of settings or data or `false` if
    *                        rendering was triggered by scrolling or moving selection.
    */ afterRender(force) {
+        _class_private_field_set(this, _sizesMeasuredWithoutStylesPending, false);
         if (force) {
+            // Measure the rendered grid while the DOM is final, before external `afterViewRender` listeners
+            // may mutate it.
+            this.renderSizeProbe.measure(this._wt);
+            // Single-pass header reconcile: the probe has just measured content-driven column-header
+            // heights (which the engine no longer measures mid-draw). If a header is taller than the
+            // default, re-apply the heights so the overlays match the master. This is a synchronous,
+            // hook-free reconcile - it never calls `hot.render()`, so the render-hook counts are unchanged.
+            const defaultRowHeight = this.hot.stylesHandler.getDefaultRowHeight() ?? 0;
+            if (this.renderSizeProbe.hasColumnHeaderTallerThan(defaultRowHeight)) {
+                this._wt.wtOverlays.refreshColumnHeaderHeights();
+            }
             this.hot.runHooks('afterViewRender', this.hot.forceFullRender);
         }
     }
@@ -1243,7 +1365,7 @@ var /**
             }
         }
         if (renderedIndex > -1) {
-            (0, _element.fastInnerHTML)(element, String(content(index, headerLevel)), this.hot.getSettings().sanitizer ?? true, 'header', this.hot.rootGridElement ?? undefined);
+            (0, _element.fastInnerHTML)(element, String(content(index, headerLevel)), (0, _sanitizer.getSanitizer)(this.hot), 'header', this.hot.rootElement);
         } else {
             // workaround for https://github.com/handsontable/handsontable/issues/1946
             (0, _element.fastInnerText)(element, String.fromCharCode(160));
@@ -1595,6 +1717,8 @@ var /**
    * @param {Hanstontable} hotInstance Instance of {@link Handsontable}.
    */ constructor(hotInstance){
         _class_private_method_init(this, _isSyntheticMouseEvent);
+        _class_private_method_init(this, _isPathWithinGrid);
+        _class_private_method_init(this, _discardSizesMeasuredWithoutStyles);
         _class_private_method_init(this, _getAriaColcount);
         _class_private_method_init(this, _updateAriaColcount);
         _class_private_method_init(this, _updateScrollbarClassNames);
@@ -1606,6 +1730,10 @@ var /**
             writable: true,
             value: void 0
         });
+        _class_private_field_init(this, _sizesMeasuredWithoutStylesPending, {
+            writable: true,
+            value: void 0
+        });
         _class_private_field_init(this, _selectionMouseDown, {
             writable: true,
             value: void 0
@@ -1614,6 +1742,10 @@ var /**
             writable: true,
             value: void 0
         });
+        _class_private_field_init(this, _outsideClickHandled, {
+            writable: true,
+            value: void 0
+        });
         _class_private_field_init(this, _table, {
             writable: true,
             value: void 0
@@ -1648,8 +1780,17 @@ var /**
    * @private
    * @type {boolean}
    */ this.postponedAdjustElementsSize = false;
+        /**
+   * The measurement-only probe of the rendered grid. Runs after each full master draw to record
+   * content-driven row and column-header heights. It does not yet feed those values back into
+   * rendering (see {@link RenderSizeProbe}).
+   *
+   * @type {RenderSizeProbe}
+   */ this.renderSizeProbe = new _renderSizeProbe.RenderSizeProbe();
+        _class_private_field_set(this, _sizesMeasuredWithoutStylesPending, false);
         _class_private_field_set(this, _selectionMouseDown, false);
         _class_private_field_set(this, _mouseDown, false);
+        _class_private_field_set(this, _outsideClickHandled, false);
         _class_private_field_set(this, _table, null);
         _class_private_field_set(this, _lastWidth, 0);
         _class_private_field_set(this, _lastHeight, 0);
@@ -1670,6 +1811,31 @@ function isSyntheticMouseEvent(event) {
     }
     return _class_private_field_get(this, _recentTouchEnd);
 }
+function isPathWithinGrid(eventPath) {
+    const { rootElement, rootPortalElement } = this.hot;
+    if (eventPath.includes(rootElement) || !!rootPortalElement && eventPath.includes(rootPortalElement)) {
+        return true;
+    }
+    if (eventPath.some((entry)=>(0, _element.isShadowRoot)(entry))) {
+        return false;
+    }
+    return (0, _element.getShadowHostChain)(rootElement).some((host)=>eventPath.includes(host));
+}
+function discardSizesMeasuredWithoutStyles() {
+    if (this.hot.stylesHandler.recacheValuesMeasuredWithoutStyles()) {
+        _class_private_field_set(this, _sizesMeasuredWithoutStylesPending, true);
+    }
+    if (!_class_private_field_get(this, _sizesMeasuredWithoutStylesPending)) {
+        return;
+    }
+    // `resetAllOversizedRows` already invalidates the row-height cache, so only the width cache is
+    // left to drop. `invalidateIndexSizesCache()` would invalidate the row heights a second time, and
+    // this is the same pair the engine-side reset performs. Dropping the width cache re-asks
+    // `modifyColWidth`, so a width `AutoColumnSize` measured against no layout comes straight back –
+    // that is the narrow-container follow-up, not this pass.
+    this._wt.wtViewport.resetAllOversizedRows();
+    this.invalidateColumnWidthCache();
+}
 function getAriaColcount() {
     return parseInt(this.hot.rootElement.getAttribute('aria-colcount') ?? '0', 10);
 }