handsontable 18.0.0 → 18.1.0-rc7

package/plugins/dialog/ui.d.ts

@@ -1,3 +1,4 @@
+import type { SanitizerFn } from '../../utils/sanitizer';
 /**
  * Represents the compiled template object returned by template factory functions.
  */
@@ -20,12 +21,13 @@ export interface DialogTemplateResult {
 export declare class DialogUI {
     #private;
     /**
-     * Initializes the dialog UI with an overlay container, RTL layout flag, and an optional HTML sanitizer, then installs the DOM structure.
+     * Initializes the dialog UI with an overlay container, RTL layout flag, and an HTML sanitizer, then installs the DOM structure.
      */
-    constructor({ overlayContainer, isRtl, sanitizer }: {
+    constructor({ overlayContainer, isRtl, sanitizer, warnScope }: {
         overlayContainer: HTMLElement;
         isRtl: boolean;
-        sanitizer?: (html: string) => string | undefined;
+        sanitizer: boolean | SanitizerFn;
+        warnScope: HTMLElement;
     });
     /**
      * Uses the specified template for the dialog.

package/plugins/dialog/ui.js

@@ -101,8 +101,11 @@ var /**
    *
    * @type {Array<function(MouseEvent)>}
    */ _templateButtonCallbacks = /*#__PURE__*/ new WeakMap(), /**
-   * Optional sanitizer for dialog content (from settings).
+   * Sanitizer for dialog content, resolved from the grid settings.
    */ _sanitizer = /*#__PURE__*/ new WeakMap(), /**
+   * Object the missing-sanitizer "warn once" state is bound to. The grid root element, so this
+   * plugin shares one warning per instance with every other HTML write surface.
+   */ _warnScope = /*#__PURE__*/ new WeakMap(), /**
    * Handles the transition end event.
    */ _onTransitionEnd = /*#__PURE__*/ new WeakSet(), /**
    * Handles the transition start event. This is used to track if the animation has started.
@@ -243,7 +246,7 @@ class DialogUI {
             contentElement.innerHTML = '';
             // Render new dialog content
             if (typeof content === 'string') {
-                (0, _element.fastInnerHTML)(contentElement, content, _class_private_field_get(this, _sanitizer) ? (html, ctx)=>_class_private_field_get(this, _sanitizer).call(this, html) ?? html : undefined, 'dialog', _class_private_field_get(this, _overlayContainer));
+                (0, _element.fastInnerHTML)(contentElement, content, _class_private_field_get(this, _sanitizer), 'dialog', _class_private_field_get(this, _warnScope));
             } else if ((0, _element.isHTMLElement)(content) || content instanceof DocumentFragment) {
                 contentElement.appendChild(content);
             }
@@ -310,8 +313,8 @@ class DialogUI {
         _class_private_field_set(this, _refs, undefined);
     }
     /**
-   * Initializes the dialog UI with an overlay container, RTL layout flag, and an optional HTML sanitizer, then installs the DOM structure.
-   */ constructor({ overlayContainer, isRtl, sanitizer }){
+   * Initializes the dialog UI with an overlay container, RTL layout flag, and an HTML sanitizer, then installs the DOM structure.
+   */ constructor({ overlayContainer, isRtl, sanitizer, warnScope }){
         _class_private_method_init(this, _onTransitionEnd);
         _class_private_method_init(this, _onTransitionStart);
         _class_private_field_init(this, _overlayContainer, {
@@ -342,6 +345,10 @@ class DialogUI {
             writable: true,
             value: void 0
         });
+        _class_private_field_init(this, _warnScope, {
+            writable: true,
+            value: void 0
+        });
         _class_private_field_set(this, _isRtl, false);
         _class_private_field_set(this, _animationStarted, false);
         _class_private_field_set(this, _template, _templates.TEMPLATES.get('base')());
@@ -349,6 +356,7 @@ class DialogUI {
         _class_private_field_set(this, _overlayContainer, overlayContainer);
         _class_private_field_set(this, _isRtl, isRtl);
         _class_private_field_set(this, _sanitizer, sanitizer);
+        _class_private_field_set(this, _warnScope, warnScope);
         this.install();
     }
 }

package/plugins/dialog/ui.mjs

@@ -86,8 +86,11 @@ var /**
    *
    * @type {Array<function(MouseEvent)>}
    */ _templateButtonCallbacks = /*#__PURE__*/ new WeakMap(), /**
-   * Optional sanitizer for dialog content (from settings).
+   * Sanitizer for dialog content, resolved from the grid settings.
    */ _sanitizer = /*#__PURE__*/ new WeakMap(), /**
+   * Object the missing-sanitizer "warn once" state is bound to. The grid root element, so this
+   * plugin shares one warning per instance with every other HTML write surface.
+   */ _warnScope = /*#__PURE__*/ new WeakMap(), /**
    * Handles the transition end event.
    */ _onTransitionEnd = /*#__PURE__*/ new WeakSet(), /**
    * Handles the transition start event. This is used to track if the animation has started.
@@ -234,7 +237,7 @@ var /**
             contentElement.innerHTML = '';
             // Render new dialog content
             if (typeof content === 'string') {
-                fastInnerHTML(contentElement, content, _class_private_field_get(this, _sanitizer) ? (html, ctx)=>_class_private_field_get(this, _sanitizer).call(this, html) ?? html : undefined, 'dialog', _class_private_field_get(this, _overlayContainer));
+                fastInnerHTML(contentElement, content, _class_private_field_get(this, _sanitizer), 'dialog', _class_private_field_get(this, _warnScope));
             } else if (isHTMLElement(content) || content instanceof DocumentFragment) {
                 contentElement.appendChild(content);
             }
@@ -301,8 +304,8 @@ var /**
         _class_private_field_set(this, _refs, undefined);
     }
     /**
-   * Initializes the dialog UI with an overlay container, RTL layout flag, and an optional HTML sanitizer, then installs the DOM structure.
-   */ constructor({ overlayContainer, isRtl, sanitizer }){
+   * Initializes the dialog UI with an overlay container, RTL layout flag, and an HTML sanitizer, then installs the DOM structure.
+   */ constructor({ overlayContainer, isRtl, sanitizer, warnScope }){
         _class_private_method_init(this, _onTransitionEnd);
         _class_private_method_init(this, _onTransitionStart);
         _class_private_field_init(this, _overlayContainer, {
@@ -333,6 +336,10 @@ var /**
             writable: true,
             value: void 0
         });
+        _class_private_field_init(this, _warnScope, {
+            writable: true,
+            value: void 0
+        });
         _class_private_field_set(this, _isRtl, false);
         _class_private_field_set(this, _animationStarted, false);
         _class_private_field_set(this, _template, TEMPLATES.get('base')());
@@ -340,6 +347,7 @@ var /**
         _class_private_field_set(this, _overlayContainer, overlayContainer);
         _class_private_field_set(this, _isRtl, isRtl);
         _class_private_field_set(this, _sanitizer, sanitizer);
+        _class_private_field_set(this, _warnScope, warnScope);
         this.install();
     }
 }

package/plugins/dragToScroll/dragToScroll.d.ts

@@ -105,13 +105,13 @@ export declare class DragToScroll extends BasePlugin {
      */
     check(x: number, y: number): void;
     /**
-     * Enables listening on `mousemove` event.
+     * Enables listening on the `mousemove` and `touchmove` events.
      *
      * @private
      */
     listen(): void;
     /**
-     * Disables listening on `mousemove` event.
+     * Disables listening on the `mousemove` and `touchmove` events.
      *
      * @private
      */

package/plugins/dragToScroll/dragToScroll.js

@@ -85,11 +85,11 @@ var /**
    *
    * @type {boolean}
    */ _isOutsideViewport = /*#__PURE__*/ new WeakMap(), /**
-   * Kind of drag currently active: `'cell'` for a regular mouse-drag selection,
-   * `'corner'` for an autofill fill-handle drag, or `null` when no drag is active.
-   * Only `'cell'` drags extend the selection via `#onAfterScroll`.
+   * Kind of drag currently active. Cell drags extend the selection directly. Corner,
+   * move, and handle drags only use the auto-scroll timers because their owning plugins
+   * update their state through the `afterScroll` hook.
    *
-   * @type {('cell' | 'corner' | null)}
+   * @type {('cell'|'corner'|'move'|'handle'|null)}
    */ _activeDragKind = /*#__PURE__*/ new WeakMap(), /**
    * Last observed mouse X coordinate (client space). Cached so that the viewport
    * can recompute the edge cell on each `afterScroll` tick even when the mouse
@@ -107,13 +107,56 @@ var /**
    *
    * @type {object | null}
    */ _mouseDownController = /*#__PURE__*/ new WeakMap(), /**
+   * `Touch.identifier` of the finger that started a touch drag, so later touch events can be told
+   * apart from any other finger on the screen.
+   *
+   * @type {number | null}
+   */ _dragTouchId = /*#__PURE__*/ new WeakMap(), /**
    * On after on cell/cellCorner mouse down listener.
    *
-   * @param {('cell' | 'corner')} kind Which drag started — a regular cell selection drag
-   *   (`'cell'`) or an autofill fill-handle drag (`'corner'`).
-   * @param {MouseEvent} event The mouse event object.
+   * @param {('cell'|'corner'|'move'|'handle')} kind The active drag interaction.
+   * @param {Event} event The pointer event that started the drag - a `mousedown` on desktop, a
+   * `touchstart` on mobile.
    * @param {object} [controller] The controller object from `beforeOnCellMouseDown`.
    */ _setupListening = /*#__PURE__*/ new WeakSet(), /**
+   * Starts auto-scrolling for a move-zone drag, but only if MoveCells actually began one.
+   *
+   * The `afterOnSelectionEdgeMouseDown` hook fires unconditionally from `TableView`, while MoveCells
+   * may reject the press (no movable range, a drag already running). MoveCells owns the drag and its
+   * listener runs first — plugins initialize in ascending `PLUGIN_PRIORITY` order, and MoveCells is
+   * 25 against this plugin's 100 — so the drag state is already settled by the time this runs.
+   * Without the check, auto-scroll would run with no drag in progress.
+   *
+   * @param {MouseEvent} event The move-zone mouse event.
+   */ _onSelectionEdgeMouseDown = /*#__PURE__*/ new WeakMap(), /**
+   * Starts auto-scrolling for a selection-handle drag, but only if SelectionHandles actually began
+   * one. Same ordering guarantee as `#onSelectionEdgeMouseDown` (SelectionHandles is priority 24).
+   *
+   * @param {MouseEvent} event The selection-handle mouse event.
+   */ _onSelectionHandleMouseDown = /*#__PURE__*/ new WeakMap(), /**
+   * Starts auto-scrolling for a mobile selection-handle drag.
+   *
+   * The mobile handles run entirely on touch events, so no `mousedown` reaches them and the
+   * `afterOnSelectionHandleMouseDown` hook never fires - hence this separate entry point. The
+   * ordering is guaranteed by DOM bubbling rather than by plugin priority: MultipleSelectionHandles
+   * listens on `rootElement`, a descendant of the document this listener sits on, so it has already
+   * recorded the drag by the time this runs.
+   *
+   * @param {Event} event The `touchstart` event.
+   */ _onTouchStart = /*#__PURE__*/ new WeakMap(), /**
+   * Feeds the moving finger's position to the auto-scroller.
+   *
+   * @param {Event} event The `touchmove` event.
+   */ _onTouchMove = /*#__PURE__*/ new WeakMap(), /**
+   * Stops auto-scrolling once the finger that started the drag leaves the screen.
+   *
+   * `touchend` and `touchcancel` fire once per finger, so "a finger lifted" is not the same question
+   * as "the dragging finger lifted". Answering the first would let a palm or a second finger stop a
+   * drag still in progress - and nothing re-arms short of a new `touchstart`, so auto-scroll would
+   * stay dead for the rest of it.
+   *
+   * @param {Event} event The `touchend` or `touchcancel` event.
+   */ _onTouchEnd = /*#__PURE__*/ new WeakMap(), /**
    * Scrolls the viewport horizontally by one column. Stops the horizontal axis
    * of the auto-scroller when `scrollViewportTo` reports that no scroll
    * happened — meaning the viewport is already pegged against the first or
@@ -148,6 +191,12 @@ var /**
    * @private
    * @param {MouseEvent} event `mousemove` event properties.
    */ _onMouseMove = /*#__PURE__*/ new WeakSet(), /**
+   * Records the latest pointer position and runs the viewport-boundary check that drives the
+   * auto-scroller. Shared by the mouse and the touch input paths.
+   *
+   * @param {number} clientX The pointer's viewport X coordinate.
+   * @param {number} clientY The pointer's viewport Y coordinate.
+   */ _trackPointer = /*#__PURE__*/ new WeakSet(), /**
    * Extends the regular drag-select selection to the cell at the clamped mouse position
    * after each viewport auto-scroll tick. Autofill drags are skipped — the autofill plugin
    * owns its own selection extension via its `afterScroll` hook.
@@ -197,6 +246,8 @@ class DragToScroll extends _base.BasePlugin {
             _class_private_method_get(this, _setupListening, setupListening).call(this, 'cell', event, typedController);
         });
         this.addHook('afterOnCellCornerMouseDown', (event)=>_class_private_method_get(this, _setupListening, setupListening).call(this, 'corner', event));
+        this.addHook('afterOnSelectionEdgeMouseDown', _class_private_field_get(this, _onSelectionEdgeMouseDown));
+        this.addHook('afterOnSelectionHandleMouseDown', _class_private_field_get(this, _onSelectionHandleMouseDown));
         this.addHook('afterSelection', _class_private_field_get(this, _onAfterSelection));
         this.addHook('afterScroll', _class_private_field_get(this, _onAfterScroll));
         this.registerEvents();
@@ -271,19 +322,20 @@ class DragToScroll extends _base.BasePlugin {
         }
     }
     /**
-   * Enables listening on `mousemove` event.
+   * Enables listening on the `mousemove` and `touchmove` events.
    *
    * @private
    */ listen() {
         this.listening = true;
     }
     /**
-   * Disables listening on `mousemove` event.
+   * Disables listening on the `mousemove` and `touchmove` events.
    *
    * @private
    */ unlisten() {
         this.listening = false;
         _class_private_field_set(this, _activeDragKind, null);
+        _class_private_field_set(this, _dragTouchId, null);
         _class_private_field_set(this, _lastClientX, null);
         _class_private_field_set(this, _lastClientY, null);
         _class_private_field_set(this, _isOutsideViewport, false);
@@ -308,9 +360,20 @@ class DragToScroll extends _base.BasePlugin {
         while(frame){
             this.eventManager.addEventListener(frame.document, 'contextmenu', ()=>this.unlisten());
             this.eventManager.addEventListener(frame.document, 'mouseup', ()=>this.unlisten());
+            this.eventManager.addEventListener(frame.document, 'keydown', (event)=>{
+                if ('key' in event && event.key === 'Escape') {
+                    this.unlisten();
+                }
+            });
             this.eventManager.addEventListener(frame.document, 'mousemove', (event)=>{
                 _class_private_method_get(this, _onMouseMove, onMouseMove).call(this, event);
             });
+            // Touch input needs its own listeners: a browser fires no `mousemove` while a finger is
+            // down, so without these the auto-scroller never receives a position on mobile (#11658).
+            this.eventManager.addEventListener(frame.document, 'touchstart', _class_private_field_get(this, _onTouchStart));
+            this.eventManager.addEventListener(frame.document, 'touchmove', _class_private_field_get(this, _onTouchMove));
+            this.eventManager.addEventListener(frame.document, 'touchend', _class_private_field_get(this, _onTouchEnd));
+            this.eventManager.addEventListener(frame.document, 'touchcancel', _class_private_field_get(this, _onTouchEnd));
             frame = (0, _element.getParentWindow)(frame);
         }
     }
@@ -328,7 +391,7 @@ class DragToScroll extends _base.BasePlugin {
         super.destroy();
     }
     constructor(...args){
-        super(...args), _class_private_method_init(this, _setupListening), _class_private_method_init(this, _scrollHorizontal), _class_private_method_init(this, _scrollVertical), _class_private_method_init(this, _onMouseMove), _class_private_field_init(this, _autoScroller1, {
+        super(...args), _class_private_method_init(this, _setupListening), _class_private_method_init(this, _scrollHorizontal), _class_private_method_init(this, _scrollVertical), _class_private_method_init(this, _onMouseMove), _class_private_method_init(this, _trackPointer), _class_private_field_init(this, _autoScroller1, {
             writable: true,
             value: void 0
         }), _class_private_field_init(this, _isOutsideViewport, {
@@ -346,6 +409,24 @@ class DragToScroll extends _base.BasePlugin {
         }), _class_private_field_init(this, _mouseDownController, {
             writable: true,
             value: void 0
+        }), _class_private_field_init(this, _dragTouchId, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onSelectionEdgeMouseDown, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onSelectionHandleMouseDown, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onTouchStart, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onTouchMove, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onTouchEnd, {
+            writable: true,
+            value: void 0
         }), _class_private_field_init(this, _onAfterSelection, {
             writable: true,
             value: void 0
@@ -367,7 +448,59 @@ class DragToScroll extends _base.BasePlugin {
    *
    * @private
    * @type {boolean}
-   */ this.listening = false, _class_private_field_set(this, _autoScroller1, new _autoScroller.AutoScroller((fn, delay)=>this.hot._registerTimeout(fn, delay)).addLocalHook('scrollHorizontal', (distance)=>_class_private_method_get(this, _scrollHorizontal, scrollHorizontal).call(this, distance)).addLocalHook('scrollVertical', (distance)=>_class_private_method_get(this, _scrollVertical, scrollVertical).call(this, distance))), _class_private_field_set(this, _isOutsideViewport, false), _class_private_field_set(this, _activeDragKind, null), _class_private_field_set(this, _lastClientX, null), _class_private_field_set(this, _lastClientY, null), _class_private_field_set(this, _mouseDownController, null), _class_private_field_set(this, _onAfterSelection, (row, column, endRow, endColumn, preventScrolling)=>{
+   */ this.listening = false, _class_private_field_set(this, _autoScroller1, new _autoScroller.AutoScroller((fn, delay)=>this.hot._registerTimeout(fn, delay)).addLocalHook('scrollHorizontal', (distance)=>_class_private_method_get(this, _scrollHorizontal, scrollHorizontal).call(this, distance)).addLocalHook('scrollVertical', (distance)=>_class_private_method_get(this, _scrollVertical, scrollVertical).call(this, distance))), _class_private_field_set(this, _isOutsideViewport, false), _class_private_field_set(this, _activeDragKind, null), _class_private_field_set(this, _lastClientX, null), _class_private_field_set(this, _lastClientY, null), _class_private_field_set(this, _mouseDownController, null), _class_private_field_set(this, _dragTouchId, null), _class_private_field_set(this, _onSelectionEdgeMouseDown, (event)=>{
+            if (this.hot.getPlugin('moveCells')?.isDragActive() !== true) {
+                return;
+            }
+            _class_private_method_get(this, _setupListening, setupListening).call(this, 'move', event);
+        }), _class_private_field_set(this, _onSelectionHandleMouseDown, (event)=>{
+            if (this.hot.getPlugin('selectionHandles')?.isDragActive() !== true) {
+                return;
+            }
+            _class_private_method_get(this, _setupListening, setupListening).call(this, 'handle', event);
+        }), _class_private_field_set(this, _onTouchStart, (event)=>{
+            // Every later finger lands while the handle drag is still running, so this fires again for each
+            // one. Keep following the finger that started the drag - taking the newest instead would leave
+            // auto-scroll chasing a resting thumb, and would end the drag when that thumb lifted.
+            if (_class_private_field_get(this, _dragTouchId) !== null) {
+                return;
+            }
+            const touch = (0, _event.getFirstChangedTouch)(event);
+            // No identifier means no way to tell this finger from any other later on, so there would be no
+            // safe moment to stop. Better not to start: `#dragTouchId` stays in step with being touch-armed,
+            // which is what `#onTouchEnd` relies on.
+            if (touch === null) {
+                return;
+            }
+            // Ask about THIS finger, not merely whether some drag is running. A drag can outlive the
+            // auto-scroller - `unlisten()` also runs on Escape and on `contextmenu` - and `isDragged()`
+            // alone would then let the next touch anywhere in the document start scrolling the grid.
+            if (this.hot.getPlugin('multipleSelectionHandles')?.isDraggedBy(touch.identifier) !== true) {
+                return;
+            }
+            _class_private_field_set(this, _dragTouchId, touch.identifier);
+            _class_private_method_get(this, _setupListening, setupListening).call(this, 'handle', event);
+        }), _class_private_field_set(this, _onTouchMove, (event)=>{
+            if (!this.isListening() || _class_private_field_get(this, _dragTouchId) === null) {
+                return;
+            }
+            const point = (0, _event.getTouchPointById)(event, _class_private_field_get(this, _dragTouchId));
+            if (point === null) {
+                return;
+            }
+            _class_private_method_get(this, _trackPointer, trackPointer).call(this, point.clientX, point.clientY);
+        }), _class_private_field_set(this, _onTouchEnd, (event)=>{
+            // Nothing of ours is running on touch. A mouse drag can be, though - these listeners sit on the
+            // document, and a hybrid device fires touch events during one - and it is not this handler's to
+            // end.
+            if (_class_private_field_get(this, _dragTouchId) === null) {
+                return;
+            }
+            if ((0, _event.getTouchPointById)(event, _class_private_field_get(this, _dragTouchId)) !== null) {
+                return;
+            }
+            this.unlisten();
+        }), _class_private_field_set(this, _onAfterSelection, (row, column, endRow, endColumn, preventScrolling)=>{
             if (this.listening && _class_private_field_get(this, _isOutsideViewport)) {
                 preventScrolling.value = true;
             }
@@ -509,7 +642,10 @@ function onMouseMove(event) {
     if (!this.isListening()) {
         return;
     }
-    _class_private_field_set(this, _lastClientX, event.clientX);
-    _class_private_field_set(this, _lastClientY, event.clientY);
-    this.check(event.clientX, event.clientY);
+    _class_private_method_get(this, _trackPointer, trackPointer).call(this, event.clientX, event.clientY);
+}
+function trackPointer(clientX, clientY) {
+    _class_private_field_set(this, _lastClientX, clientX);
+    _class_private_field_set(this, _lastClientY, clientY);
+    this.check(clientX, clientY);
 }