handsontable 17.1.0 → 18.0.0-rc2

package/plugins/dialog/ui.mjs

@@ -52,7 +52,7 @@ import { html, toSingleLine } from '../../helpers/templateLiteralTag.mjs';
 import { throwWithCause } from '../../helpers/errors.mjs';
 import { mixin } from '../../helpers/object.mjs';
 import localHooks from '../../mixins/localHooks.mjs';
-import { addClass, removeClass, hasClass, fastInnerHTML, setAttribute, removeAttribute } from '../../helpers/dom/element.mjs';
+import { addClass, removeClass, hasClass, fastInnerHTML, isHTMLElement, setAttribute, removeAttribute } from '../../helpers/dom/element.mjs';
 import { A11Y_DIALOG, A11Y_MODAL, A11Y_TABINDEX, A11Y_LABEL, A11Y_LABELED_BY, A11Y_DESCRIBED_BY, A11Y_ALERTDIALOG } from '../../helpers/a11y.mjs';
 import { TEMPLATES } from './templates/index.mjs';
 import { DIALOG_CLASS_NAME } from './constants.mjs';
@@ -62,10 +62,10 @@ const CONTAINER_TEMPLATE = `
 </div>
 `;
 var /**
-   * The root element where the dialog UI will be installed.
+   * The overlay container where the dialog UI will be installed.
    *
    * @type {HTMLElement}
-   */ _rootElement = /*#__PURE__*/ new WeakMap(), /**
+   */ _overlayContainer = /*#__PURE__*/ new WeakMap(), /**
    * The references to the UI elements.
    *
    * @type {object}
@@ -86,9 +86,7 @@ var /**
    *
    * @type {Array<function(MouseEvent)>}
    */ _templateButtonCallbacks = /*#__PURE__*/ new WeakMap(), /**
-   * The sanitizer to use for the dialog.
-   *
-   * @type {function(string): string}
+   * Optional sanitizer for dialog content (from settings).
    */ _sanitizer = /*#__PURE__*/ new WeakMap(), /**
    * Handles the transition end event.
    */ _onTransitionEnd = /*#__PURE__*/ new WeakSet(), /**
@@ -140,8 +138,9 @@ var /**
         ]);
         dialogElement.addEventListener('transitionstart', ()=>_class_private_method_get(this, _onTransitionStart, onTransitionStart).call(this));
         dialogElement.addEventListener('transitionend', ()=>_class_private_method_get(this, _onTransitionEnd, onTransitionEnd).call(this));
-        // Append to Handsontable after table grid element
-        _class_private_field_get(this, _rootElement).after(elements.fragment);
+        if (_class_private_field_get(this, _overlayContainer)) {
+            _class_private_field_get(this, _overlayContainer).appendChild(elements.fragment);
+        }
     }
     /**
    * Returns the dialog element.
@@ -173,12 +172,13 @@ var /**
    */ updateDialog({ isVisible, content, customClassName, background, contentBackground, animation, a11y }) {
         const elements = _class_private_field_get(this, _template).compile();
         const { dialogElement, dialogWrapperElement } = _class_private_field_get(this, _refs);
+        const typedA11y = a11y;
         dialogWrapperElement.innerHTML = '';
         dialogWrapperElement.appendChild(elements.fragment);
         Object.assign(_class_private_field_get(this, _refs), elements.refs);
         const { contentElement, buttonsContainer } = _class_private_field_get(this, _refs);
         if (_class_private_field_get(this, _template).TEMPLATE_NAME !== 'base') {
-            Object.assign(a11y, _class_private_field_get(this, _template).dialogA11YOptions());
+            Object.assign(typedA11y, _class_private_field_get(this, _template).dialogA11YOptions());
         }
         // Dialog class name
         const customClass = customClassName ? ` ${customClassName}` : '';
@@ -195,30 +195,32 @@ var /**
             animationClass,
             showClass
         ].join(' ');
-        setAttribute(dialogElement, [
-            _class_private_field_get(this, _template).TEMPLATE_NAME === 'base' ? A11Y_TABINDEX(-1) : undefined
-        ]);
+        if (_class_private_field_get(this, _template).TEMPLATE_NAME === 'base') {
+            setAttribute(dialogElement, [
+                A11Y_TABINDEX(-1)
+            ]);
+        }
         // Dialog aria attributes
         setAttribute(dialogElement, [
-            a11y.role === 'alertdialog' ? A11Y_ALERTDIALOG() : A11Y_DIALOG()
+            typedA11y.role === 'alertdialog' ? A11Y_ALERTDIALOG() : A11Y_DIALOG()
         ]);
-        if (a11y.ariaLabel && !a11y.ariaLabelledby) {
+        if (typedA11y.ariaLabel && !typedA11y.ariaLabelledby) {
             setAttribute(dialogElement, [
-                a11y.ariaLabel ? A11Y_LABEL(a11y.ariaLabel) : undefined
+                A11Y_LABEL(typedA11y.ariaLabel)
             ]);
         } else {
             removeAttribute(dialogElement, 'aria-label');
         }
-        if (a11y.ariaLabelledby) {
+        if (typedA11y.ariaLabelledby) {
             setAttribute(dialogElement, [
-                A11Y_LABELED_BY(a11y.ariaLabelledby)
+                A11Y_LABELED_BY(typedA11y.ariaLabelledby)
             ]);
         } else {
             removeAttribute(dialogElement, 'aria-labelledby');
         }
-        if (a11y.ariaDescribedby) {
+        if (typedA11y.ariaDescribedby) {
             setAttribute(dialogElement, [
-                A11Y_DESCRIBED_BY(a11y.ariaDescribedby)
+                A11Y_DESCRIBED_BY(typedA11y.ariaDescribedby)
             ]);
         } else {
             removeAttribute(dialogElement, 'aria-describedby');
@@ -232,8 +234,8 @@ var /**
             contentElement.innerHTML = '';
             // Render new dialog content
             if (typeof content === 'string') {
-                fastInnerHTML(contentElement, content, _class_private_field_get(this, _sanitizer));
-            } else if (content instanceof HTMLElement || content instanceof DocumentFragment) {
+                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));
+            } else if (isHTMLElement(content) || content instanceof DocumentFragment) {
                 contentElement.appendChild(content);
             }
         } else if (buttonsContainer) {
@@ -293,24 +295,17 @@ var /**
         return this;
     }
     /**
-   * Updates the height of the dialog container.
-   *
-   * @param {number} licenseInfoHeight - The height of the license info.
-   * @returns {DialogUI} The instance of the DialogUI.
-   */ updateHeight(licenseInfoHeight) {
-        _class_private_field_get(this, _refs).dialogElement.style.height = `calc(100% - ${licenseInfoHeight}px)`;
-        return this;
-    }
-    /**
    * Removes the dialog UI elements from the DOM and clears the refs.
    */ destroyDialog() {
         _class_private_field_get(this, _refs)?.dialogElement.remove();
-        _class_private_field_set(this, _refs, null);
+        _class_private_field_set(this, _refs, undefined);
     }
-    constructor({ rootElement, isRtl, sanitizer }){
+    /**
+   * 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 }){
         _class_private_method_init(this, _onTransitionEnd);
         _class_private_method_init(this, _onTransitionStart);
-        _class_private_field_init(this, _rootElement, {
+        _class_private_field_init(this, _overlayContainer, {
             writable: true,
             value: void 0
         });
@@ -340,9 +335,9 @@ var /**
         });
         _class_private_field_set(this, _isRtl, false);
         _class_private_field_set(this, _animationStarted, false);
-        _class_private_field_set(this, _template, TEMPLATES.get('base'));
+        _class_private_field_set(this, _template, TEMPLATES.get('base')());
         _class_private_field_set(this, _templateButtonCallbacks, []);
-        _class_private_field_set(this, _rootElement, rootElement);
+        _class_private_field_set(this, _overlayContainer, overlayContainer);
         _class_private_field_set(this, _isRtl, isRtl);
         _class_private_field_set(this, _sanitizer, sanitizer);
         this.install();

package/plugins/dragToScroll/autoScroller.d.mts

@@ -0,0 +1 @@
+export * from './autoScroller.js';

package/plugins/dragToScroll/autoScroller.d.ts

@@ -0,0 +1,78 @@
+/**
+ * Manages independent horizontal and vertical scroll timers for drag-to-scroll
+ * behavior. Handles interval calculation internally based on mouse distance from
+ * table viewport boundaries. Each axis runs independently - horizontal can scroll
+ * fast while vertical scrolls slow.
+ */
+export declare class AutoScroller {
+    #private;
+    /**
+     * @param {Function} registerTimeout Timeout registration function (typically `hot._registerTimeout`).
+     */
+    constructor(registerTimeout: (fn: () => void, delay: number) => number);
+    /**
+     * Whether any axis is currently scrolling.
+     *
+     * @type {boolean}
+     */
+    get isActive(): boolean;
+    /**
+     * Whether the horizontal axis is currently scrolling.
+     *
+     * @type {boolean}
+     */
+    get isHorizontalActive(): boolean;
+    /**
+     * Whether the vertical axis is currently scrolling.
+     *
+     * @type {boolean}
+     */
+    get isVerticalActive(): boolean;
+    /**
+     * Configures scroll timing settings for both axes.
+     *
+     * @param {object} settings Scroll settings.
+     * @param {object} settings.intervalRange Interval range in milliseconds.
+     * @param {object} settings.intervalRange.min Minimum interval in milliseconds.
+     * @param {object} settings.intervalRange.max Maximum interval in milliseconds.
+     * @param {number} settings.rampDistance Distance at which interval reaches minimum.
+     */
+    configure(settings: {
+        intervalRange: {
+            min: number;
+            max: number;
+        };
+        rampDistance: number;
+    }): void;
+    /**
+     * Updates scroll state based on cursor overflow from viewport boundaries.
+     *
+     * @param {{ x: number, y: number }} overflow Distance past viewport edges (0 = inside, N >0 || N < 0 = pixels outside).
+     */
+    update({ x, y }: {
+        x: number;
+        y: number;
+    }): void;
+    /**
+     * Stops all scrolling.
+     */
+    stop(): void;
+    /**
+     * Stops the horizontal axis scrolling only.
+     */
+    stopHorizontal(): void;
+    /**
+     * Stops the vertical axis scrolling only.
+     */
+    stopVertical(): void;
+    /**
+     * Destroys the scroll looper.
+     */
+    destroy(): void;
+}
+export interface AutoScroller {
+    addLocalHook(key: string, callback: Function): this;
+    removeLocalHook(key: string, callback: Function): this;
+    runLocalHooks(key: string, ...args: unknown[]): void;
+    clearLocalHooks(): this;
+}

package/plugins/dragToScroll/autoScroller.js

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "AutoScroller", {
+    enumerable: true,
+    get: function() {
+        return AutoScroller;
+    }
+});
+const _object = require("../../helpers/object");
+const _localHooks = /*#__PURE__*/ _interop_require_default(require("../../mixins/localHooks"));
+const _scrollTimer = require("./scrollTimer");
+function _check_private_redeclaration(obj, privateCollection) {
+    if (privateCollection.has(obj)) {
+        throw new TypeError("Cannot initialize the same private elements twice on an object");
+    }
+}
+function _class_apply_descriptor_get(receiver, descriptor) {
+    if (descriptor.get) {
+        return descriptor.get.call(receiver);
+    }
+    return descriptor.value;
+}
+function _class_apply_descriptor_set(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;
+    }
+}
+function _class_extract_field_descriptor(receiver, privateMap, action) {
+    if (!privateMap.has(receiver)) {
+        throw new TypeError("attempted to " + action + " private field on non-instance");
+    }
+    return privateMap.get(receiver);
+}
+function _class_private_field_get(receiver, privateMap) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "get");
+    return _class_apply_descriptor_get(receiver, descriptor);
+}
+function _class_private_field_init(obj, privateMap, value) {
+    _check_private_redeclaration(obj, privateMap);
+    privateMap.set(obj, value);
+}
+function _class_private_field_set(receiver, privateMap, value) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "set");
+    _class_apply_descriptor_set(receiver, descriptor, value);
+    return value;
+}
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var /**
+   * Horizontal scroll timer.
+   *
+   * @type {ScrollTimer}
+   */ _horizontal = /*#__PURE__*/ new WeakMap(), /**
+   * Vertical scroll timer.
+   *
+   * @type {ScrollTimer}
+   */ _vertical = /*#__PURE__*/ new WeakMap();
+class AutoScroller {
+    /**
+   * Whether any axis is currently scrolling.
+   *
+   * @type {boolean}
+   */ get isActive() {
+        return _class_private_field_get(this, _horizontal).isActive || _class_private_field_get(this, _vertical).isActive;
+    }
+    /**
+   * Whether the horizontal axis is currently scrolling.
+   *
+   * @type {boolean}
+   */ get isHorizontalActive() {
+        return _class_private_field_get(this, _horizontal).isActive;
+    }
+    /**
+   * Whether the vertical axis is currently scrolling.
+   *
+   * @type {boolean}
+   */ get isVerticalActive() {
+        return _class_private_field_get(this, _vertical).isActive;
+    }
+    /**
+   * Configures scroll timing settings for both axes.
+   *
+   * @param {object} settings Scroll settings.
+   * @param {object} settings.intervalRange Interval range in milliseconds.
+   * @param {object} settings.intervalRange.min Minimum interval in milliseconds.
+   * @param {object} settings.intervalRange.max Maximum interval in milliseconds.
+   * @param {number} settings.rampDistance Distance at which interval reaches minimum.
+   */ configure(settings) {
+        _class_private_field_get(this, _horizontal).configure(settings);
+        _class_private_field_get(this, _vertical).configure(settings);
+    }
+    /**
+   * Updates scroll state based on cursor overflow from viewport boundaries.
+   *
+   * @param {{ x: number, y: number }} overflow Distance past viewport edges (0 = inside, N >0 || N < 0 = pixels outside).
+   */ update({ x, y }) {
+        _class_private_field_get(this, _horizontal).update(x);
+        _class_private_field_get(this, _vertical).update(y);
+    }
+    /**
+   * Stops all scrolling.
+   */ stop() {
+        _class_private_field_get(this, _horizontal).stop();
+        _class_private_field_get(this, _vertical).stop();
+    }
+    /**
+   * Stops the horizontal axis scrolling only.
+   */ stopHorizontal() {
+        _class_private_field_get(this, _horizontal).stop();
+    }
+    /**
+   * Stops the vertical axis scrolling only.
+   */ stopVertical() {
+        _class_private_field_get(this, _vertical).stop();
+    }
+    /**
+   * Destroys the scroll looper.
+   */ destroy() {
+        this.stop();
+        _class_private_field_set(this, _horizontal, null);
+        _class_private_field_set(this, _vertical, null);
+    }
+    /**
+   * @param {Function} registerTimeout Timeout registration function (typically `hot._registerTimeout`).
+   */ constructor(registerTimeout){
+        _class_private_field_init(this, _horizontal, {
+            writable: true,
+            value: void 0
+        });
+        _class_private_field_init(this, _vertical, {
+            writable: true,
+            value: void 0
+        });
+        _class_private_field_set(this, _horizontal, new _scrollTimer.ScrollTimer(registerTimeout));
+        _class_private_field_set(this, _vertical, new _scrollTimer.ScrollTimer(registerTimeout));
+        _class_private_field_get(this, _horizontal).addLocalHook('tick', (distance)=>this.runLocalHooks('scrollHorizontal', distance));
+        _class_private_field_get(this, _vertical).addLocalHook('tick', (distance)=>this.runLocalHooks('scrollVertical', distance));
+    }
+}
+(0, _object.mixin)(AutoScroller, _localHooks.default);

package/plugins/dragToScroll/autoScroller.mjs

@@ -0,0 +1,140 @@
+function _check_private_redeclaration(obj, privateCollection) {
+    if (privateCollection.has(obj)) {
+        throw new TypeError("Cannot initialize the same private elements twice on an object");
+    }
+}
+function _class_apply_descriptor_get(receiver, descriptor) {
+    if (descriptor.get) {
+        return descriptor.get.call(receiver);
+    }
+    return descriptor.value;
+}
+function _class_apply_descriptor_set(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;
+    }
+}
+function _class_extract_field_descriptor(receiver, privateMap, action) {
+    if (!privateMap.has(receiver)) {
+        throw new TypeError("attempted to " + action + " private field on non-instance");
+    }
+    return privateMap.get(receiver);
+}
+function _class_private_field_get(receiver, privateMap) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "get");
+    return _class_apply_descriptor_get(receiver, descriptor);
+}
+function _class_private_field_init(obj, privateMap, value) {
+    _check_private_redeclaration(obj, privateMap);
+    privateMap.set(obj, value);
+}
+function _class_private_field_set(receiver, privateMap, value) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "set");
+    _class_apply_descriptor_set(receiver, descriptor, value);
+    return value;
+}
+import { mixin } from '../../helpers/object.mjs';
+import localHooks from '../../mixins/localHooks.mjs';
+import { ScrollTimer } from './scrollTimer.mjs';
+var /**
+   * Horizontal scroll timer.
+   *
+   * @type {ScrollTimer}
+   */ _horizontal = /*#__PURE__*/ new WeakMap(), /**
+   * Vertical scroll timer.
+   *
+   * @type {ScrollTimer}
+   */ _vertical = /*#__PURE__*/ new WeakMap();
+/**
+ * Manages independent horizontal and vertical scroll timers for drag-to-scroll
+ * behavior. Handles interval calculation internally based on mouse distance from
+ * table viewport boundaries. Each axis runs independently - horizontal can scroll
+ * fast while vertical scrolls slow.
+ */ export class AutoScroller {
+    /**
+   * Whether any axis is currently scrolling.
+   *
+   * @type {boolean}
+   */ get isActive() {
+        return _class_private_field_get(this, _horizontal).isActive || _class_private_field_get(this, _vertical).isActive;
+    }
+    /**
+   * Whether the horizontal axis is currently scrolling.
+   *
+   * @type {boolean}
+   */ get isHorizontalActive() {
+        return _class_private_field_get(this, _horizontal).isActive;
+    }
+    /**
+   * Whether the vertical axis is currently scrolling.
+   *
+   * @type {boolean}
+   */ get isVerticalActive() {
+        return _class_private_field_get(this, _vertical).isActive;
+    }
+    /**
+   * Configures scroll timing settings for both axes.
+   *
+   * @param {object} settings Scroll settings.
+   * @param {object} settings.intervalRange Interval range in milliseconds.
+   * @param {object} settings.intervalRange.min Minimum interval in milliseconds.
+   * @param {object} settings.intervalRange.max Maximum interval in milliseconds.
+   * @param {number} settings.rampDistance Distance at which interval reaches minimum.
+   */ configure(settings) {
+        _class_private_field_get(this, _horizontal).configure(settings);
+        _class_private_field_get(this, _vertical).configure(settings);
+    }
+    /**
+   * Updates scroll state based on cursor overflow from viewport boundaries.
+   *
+   * @param {{ x: number, y: number }} overflow Distance past viewport edges (0 = inside, N >0 || N < 0 = pixels outside).
+   */ update({ x, y }) {
+        _class_private_field_get(this, _horizontal).update(x);
+        _class_private_field_get(this, _vertical).update(y);
+    }
+    /**
+   * Stops all scrolling.
+   */ stop() {
+        _class_private_field_get(this, _horizontal).stop();
+        _class_private_field_get(this, _vertical).stop();
+    }
+    /**
+   * Stops the horizontal axis scrolling only.
+   */ stopHorizontal() {
+        _class_private_field_get(this, _horizontal).stop();
+    }
+    /**
+   * Stops the vertical axis scrolling only.
+   */ stopVertical() {
+        _class_private_field_get(this, _vertical).stop();
+    }
+    /**
+   * Destroys the scroll looper.
+   */ destroy() {
+        this.stop();
+        _class_private_field_set(this, _horizontal, null);
+        _class_private_field_set(this, _vertical, null);
+    }
+    /**
+   * @param {Function} registerTimeout Timeout registration function (typically `hot._registerTimeout`).
+   */ constructor(registerTimeout){
+        _class_private_field_init(this, _horizontal, {
+            writable: true,
+            value: void 0
+        });
+        _class_private_field_init(this, _vertical, {
+            writable: true,
+            value: void 0
+        });
+        _class_private_field_set(this, _horizontal, new ScrollTimer(registerTimeout));
+        _class_private_field_set(this, _vertical, new ScrollTimer(registerTimeout));
+        _class_private_field_get(this, _horizontal).addLocalHook('tick', (distance)=>this.runLocalHooks('scrollHorizontal', distance));
+        _class_private_field_get(this, _vertical).addLocalHook('tick', (distance)=>this.runLocalHooks('scrollVertical', distance));
+    }
+}
+mixin(AutoScroller, localHooks);

package/plugins/dragToScroll/dragToScroll.d.mts

@@ -0,0 +1 @@
+export * from './dragToScroll.js';