handsontable 17.1.0 → 18.0.0-rc2

package/editors/selectEditor/selectEditor.js

@@ -24,7 +24,9 @@ const EDITOR_VISIBLE_CLASS_NAME = 'ht_editor_visible';
 const SHORTCUTS_GROUP = 'selectEditor';
 const EDITOR_TYPE = 'select';
 class SelectEditor extends _baseEditor.BaseEditor {
-    static get EDITOR_TYPE() {
+    /**
+   * Returns the unique editor type identifier for the select editor.
+   */ static get EDITOR_TYPE() {
         return EDITOR_TYPE;
     }
     /**
@@ -32,7 +34,7 @@ class SelectEditor extends _baseEditor.BaseEditor {
    */ init() {
         this.selectWrapper = this.hot.rootDocument.createElement('div');
         this.select = this.hot.rootDocument.createElement('select');
-        this.select.setAttribute('data-hot-input', 'true');
+        this.select.dataset.hotInput = 'true';
         this.selectWrapper.style.display = 'none';
         const ARROW = this.hot.rootDocument.createElement('DIV');
         const isAriaEnabled = this.hot.getSettings().ariaTags;
@@ -46,6 +48,7 @@ class SelectEditor extends _baseEditor.BaseEditor {
         this.selectWrapper.insertBefore(ARROW, this.selectWrapper.firstChild);
         this.hot.rootElement.appendChild(this.selectWrapper);
         this.registerHooks();
+        this.hot.addHookOnce('afterDestroy', ()=>this.destroy());
     }
     /**
    * Returns select's value.
@@ -59,7 +62,7 @@ class SelectEditor extends _baseEditor.BaseEditor {
    *
    * @param {*} value A new select's value.
    */ setValue(value) {
-        this.select.value = value;
+        this.select.value = value === null || value === undefined ? '' : String(value);
     }
     /**
    * Opens the editor and adjust its size.
@@ -80,7 +83,7 @@ class SelectEditor extends _baseEditor.BaseEditor {
             (0, _element.removeClass)(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME);
         }
         this.unregisterShortcuts();
-        this.clearHooks();
+        this.removeHooksByKey('beforeDialogShow');
     }
     /**
    * Sets focus state on the select element.
@@ -116,29 +119,37 @@ class SelectEditor extends _baseEditor.BaseEditor {
             options = this.prepareOptions(selectOptions);
         }
         (0, _element.empty)(this.select);
-        (0, _object.objectEach)(options, (optionValue, key)=>{
-            const optionElement = this.hot.rootDocument.createElement('OPTION');
-            optionElement.value = key;
-            (0, _element.fastInnerHTML)(optionElement, optionValue, this.hot.getSettings().sanitizer);
-            this.select.appendChild(optionElement);
-        });
+        const { sanitizer } = this.hot.getSettings();
+        if (Array.isArray(options)) {
+            for(let i = 0; i < options.length; i++){
+                const optionElement = this.hot.rootDocument.createElement('OPTION');
+                optionElement.value = String(options[i]);
+                (0, _element.fastInnerHTML)(optionElement, String(options[i]), sanitizer, 'selectEditor', this.hot.rootElement);
+                this.select.appendChild(optionElement);
+            }
+        } else {
+            (0, _object.objectEach)(options, (optionValue, key)=>{
+                const optionElement = this.hot.rootDocument.createElement('OPTION');
+                optionElement.value = key;
+                (0, _element.fastInnerHTML)(optionElement, String(optionValue), sanitizer, 'selectEditor', this.hot.rootElement);
+                this.select.appendChild(optionElement);
+            });
+        }
     }
     /**
    * Creates consistent list of available options.
    *
    * @private
-   * @param {Array|object} optionsToPrepare The list of the values to render in the select eleemnt.
-   * @returns {object}
+   * @param {Array|object} optionsToPrepare The list of the values to render in the select element.
+   * @returns {Array|object}
    */ prepareOptions(optionsToPrepare) {
-        let preparedOptions = {};
         if (Array.isArray(optionsToPrepare)) {
-            for(let i = 0, len = optionsToPrepare.length; i < len; i++){
-                preparedOptions[optionsToPrepare[i]] = optionsToPrepare[i];
-            }
-        } else if (typeof optionsToPrepare === 'object') {
-            preparedOptions = optionsToPrepare;
+            return optionsToPrepare;
+        }
+        if (typeof optionsToPrepare === 'object') {
+            return optionsToPrepare;
         }
-        return preparedOptions;
+        return {};
     }
     /**
    * Refreshes editor's value using source data.
@@ -164,7 +175,11 @@ class SelectEditor extends _baseEditor.BaseEditor {
             this.close();
             return;
         }
-        const { top, start, width, height } = this.getEditedCellRect();
+        const cellRect = this.getEditedCellRect();
+        if (!cellRect) {
+            return;
+        }
+        const { top, start, width, height } = cellRect;
         const selectStyle = this.selectWrapper.style;
         selectStyle.height = `${height}px`;
         selectStyle.width = `${width}px`;
@@ -224,4 +239,11 @@ class SelectEditor extends _baseEditor.BaseEditor {
         const editorContext = shortcutManager.getContext('editor');
         editorContext.removeShortcutsByGroup(SHORTCUTS_GROUP);
     }
+    /**
+   * Clears all attached hooks.
+   *
+   * @private
+   */ destroy() {
+        this.clearHooks();
+    }
 }

package/editors/selectEditor/selectEditor.mjs

@@ -9,7 +9,9 @@ export const EDITOR_TYPE = 'select';
  * @private
  * @class SelectEditor
  */ export class SelectEditor extends BaseEditor {
-    static get EDITOR_TYPE() {
+    /**
+   * Returns the unique editor type identifier for the select editor.
+   */ static get EDITOR_TYPE() {
         return EDITOR_TYPE;
     }
     /**
@@ -17,7 +19,7 @@ export const EDITOR_TYPE = 'select';
    */ init() {
         this.selectWrapper = this.hot.rootDocument.createElement('div');
         this.select = this.hot.rootDocument.createElement('select');
-        this.select.setAttribute('data-hot-input', 'true');
+        this.select.dataset.hotInput = 'true';
         this.selectWrapper.style.display = 'none';
         const ARROW = this.hot.rootDocument.createElement('DIV');
         const isAriaEnabled = this.hot.getSettings().ariaTags;
@@ -31,6 +33,7 @@ export const EDITOR_TYPE = 'select';
         this.selectWrapper.insertBefore(ARROW, this.selectWrapper.firstChild);
         this.hot.rootElement.appendChild(this.selectWrapper);
         this.registerHooks();
+        this.hot.addHookOnce('afterDestroy', ()=>this.destroy());
     }
     /**
    * Returns select's value.
@@ -44,7 +47,7 @@ export const EDITOR_TYPE = 'select';
    *
    * @param {*} value A new select's value.
    */ setValue(value) {
-        this.select.value = value;
+        this.select.value = value === null || value === undefined ? '' : String(value);
     }
     /**
    * Opens the editor and adjust its size.
@@ -65,7 +68,7 @@ export const EDITOR_TYPE = 'select';
             removeClass(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME);
         }
         this.unregisterShortcuts();
-        this.clearHooks();
+        this.removeHooksByKey('beforeDialogShow');
     }
     /**
    * Sets focus state on the select element.
@@ -101,29 +104,37 @@ export const EDITOR_TYPE = 'select';
             options = this.prepareOptions(selectOptions);
         }
         empty(this.select);
-        objectEach(options, (optionValue, key)=>{
-            const optionElement = this.hot.rootDocument.createElement('OPTION');
-            optionElement.value = key;
-            fastInnerHTML(optionElement, optionValue, this.hot.getSettings().sanitizer);
-            this.select.appendChild(optionElement);
-        });
+        const { sanitizer } = this.hot.getSettings();
+        if (Array.isArray(options)) {
+            for(let i = 0; i < options.length; i++){
+                const optionElement = this.hot.rootDocument.createElement('OPTION');
+                optionElement.value = String(options[i]);
+                fastInnerHTML(optionElement, String(options[i]), sanitizer, 'selectEditor', this.hot.rootElement);
+                this.select.appendChild(optionElement);
+            }
+        } else {
+            objectEach(options, (optionValue, key)=>{
+                const optionElement = this.hot.rootDocument.createElement('OPTION');
+                optionElement.value = key;
+                fastInnerHTML(optionElement, String(optionValue), sanitizer, 'selectEditor', this.hot.rootElement);
+                this.select.appendChild(optionElement);
+            });
+        }
     }
     /**
    * Creates consistent list of available options.
    *
    * @private
-   * @param {Array|object} optionsToPrepare The list of the values to render in the select eleemnt.
-   * @returns {object}
+   * @param {Array|object} optionsToPrepare The list of the values to render in the select element.
+   * @returns {Array|object}
    */ prepareOptions(optionsToPrepare) {
-        let preparedOptions = {};
         if (Array.isArray(optionsToPrepare)) {
-            for(let i = 0, len = optionsToPrepare.length; i < len; i++){
-                preparedOptions[optionsToPrepare[i]] = optionsToPrepare[i];
-            }
-        } else if (typeof optionsToPrepare === 'object') {
-            preparedOptions = optionsToPrepare;
+            return optionsToPrepare;
+        }
+        if (typeof optionsToPrepare === 'object') {
+            return optionsToPrepare;
         }
-        return preparedOptions;
+        return {};
     }
     /**
    * Refreshes editor's value using source data.
@@ -149,7 +160,11 @@ export const EDITOR_TYPE = 'select';
             this.close();
             return;
         }
-        const { top, start, width, height } = this.getEditedCellRect();
+        const cellRect = this.getEditedCellRect();
+        if (!cellRect) {
+            return;
+        }
+        const { top, start, width, height } = cellRect;
         const selectStyle = this.selectWrapper.style;
         selectStyle.height = `${height}px`;
         selectStyle.width = `${width}px`;
@@ -209,4 +224,11 @@ export const EDITOR_TYPE = 'select';
         const editorContext = shortcutManager.getContext('editor');
         editorContext.removeShortcutsByGroup(SHORTCUTS_GROUP);
     }
+    /**
+   * Clears all attached hooks.
+   *
+   * @private
+   */ destroy() {
+        this.clearHooks();
+    }
 }

package/editors/textEditor/caretPositioner.d.mts

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

package/editors/textEditor/caretPositioner.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Updates the textarea caret position depends on the action executed on that element.
+ *
+ * The following actions are supported:
+ *  - 'home': Move the caret to the beginning of the current line;
+ *  - 'end': Move the caret to the end of the current line.
+ *
+ * @param {'home'|'end'} actionName The action to perform that modifies the caret behavior.
+ * @param {HTMLTextAreaElement} textareaElement The textarea element where the action is supposed to happen.
+ */
+export declare function updateCaretPosition(actionName: string, textareaElement: HTMLTextAreaElement | HTMLInputElement): void;

package/editors/textEditor/caretPositioner.js

@@ -29,5 +29,5 @@ function updateCaretPosition(actionName, textareaElement) {
             break;
         }
     }
-    (0, _element.setCaretPosition)(textareaElement, newCaretPosition);
+    (0, _element.setCaretPosition)(textareaElement, newCaretPosition, newCaretPosition);
 }

package/editors/textEditor/caretPositioner.mjs

@@ -28,5 +28,5 @@ import { getCaretPosition, setCaretPosition } from '../../helpers/dom/element.mj
             break;
         }
     }
-    setCaretPosition(textareaElement, newCaretPosition);
+    setCaretPosition(textareaElement, newCaretPosition, newCaretPosition);
 }

package/editors/textEditor/index.d.mts

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

package/editors/textEditor/index.d.ts

@@ -1 +1 @@
-export { EDITOR_TYPE, TextEditor } from './textEditor';
+export { EDITOR_TYPE, TextEditor, } from './textEditor';

package/editors/textEditor/textEditor.d.mts

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

package/editors/textEditor/textEditor.d.ts

@@ -1,24 +1,169 @@
-import Core from '../../core';
+import type { HotInstance } from '../../core/types';
+import type { CellProperties } from '../../settings';
 import { BaseEditor } from '../baseEditor';
-
-export const EDITOR_TYPE: 'text';
-export class TextEditor extends BaseEditor {
-  constructor(instance: Core);
-
-  TEXTAREA: HTMLElement;
-  TEXTAREA_PARENT: HTMLElement;
-  textareaStyle: CSSStyleDeclaration;
-  textareaParentStyle: CSSStyleDeclaration;
-
-  close(): void;
-  focus(): void;
-  getValue(): any;
-  open(event?: Event): void;
-  setValue(newValue?: any): void;
-  createElements(): void;
-  hideEditableElement(): void;
-  showEditableElement(): void;
-  refreshValue(): void;
-  refreshDimensions(force?: boolean): void;
-  bindEvents(): void;
+import EventManager from '../../eventManager';
+export declare const EDITOR_TYPE = "text";
+/**
+ * @private
+ * @class TextEditor
+ */
+export declare class TextEditor extends BaseEditor {
+    /**
+     * Returns the unique editor type identifier for the text editor.
+     */
+    static get EDITOR_TYPE(): string;
+    /**
+     * Instance of {@link EventManager}.
+     *
+     * @private
+     * @type {EventManager}
+     */
+    eventManager: EventManager;
+    /**
+     * Autoresize instance. Automagically resizes editor after changes.
+     *
+     * @private
+     * @type {Function}
+     */
+    autoResize: {
+        init: (elementToObserve: HTMLElement, config: Record<string, unknown>, doObserve?: boolean) => void;
+        resize: () => void;
+        unObserve(): void;
+    };
+    /**
+     * An TEXTAREA element.
+     *
+     * @private
+     * @type {HTMLTextAreaElement}
+     */
+    TEXTAREA: HTMLTextAreaElement | HTMLInputElement;
+    /**
+     * Style declaration object of the TEXTAREA element.
+     *
+     * @private
+     * @type {CSSStyleDeclaration}
+     */
+    textareaStyle: CSSStyleDeclaration;
+    /**
+     * Parent element of the TEXTAREA.
+     *
+     * @private
+     * @type {HTMLDivElement}
+     */
+    TEXTAREA_PARENT: HTMLElement;
+    /**
+     * Style declaration object of the TEXTAREA_PARENT element.
+     *
+     * @private
+     * @type {CSSStyleDeclaration}
+     */
+    textareaParentStyle: CSSStyleDeclaration;
+    /**
+     * Z-index class style for the editor.
+     *
+     * @private
+     * @type {string}
+     */
+    layerClass: string;
+    /**
+     * @param {Core} hotInstance The Handsontable instance.
+     */
+    constructor(hotInstance: HotInstance);
+    /**
+     * Gets current value from editable element.
+     *
+     * @returns {number}
+     */
+    getValue(): unknown;
+    /**
+     * Sets new value into editable element.
+     *
+     * @param {*} newValue The editor value.
+     */
+    setValue(newValue?: unknown): void;
+    /**
+     * Opens the editor and adjust its size.
+     */
+    open(): void;
+    /**
+     * Closes the editor.
+     */
+    close(): void;
+    /**
+     * Prepares editor's meta data.
+     *
+     * @param {number} row The visual row index.
+     * @param {number} col The visual column index.
+     * @param {number|string} prop The column property (passed when datasource is an array of objects).
+     * @param {HTMLTableCellElement} td The rendered cell element.
+     * @param {*} value The rendered value.
+     * @param {object} cellProperties The cell meta object (see {@link Core#getCellMeta}).
+     */
+    prepare(row: number, col: number, prop: string | number, td: HTMLTableCellElement, value: unknown, cellProperties: CellProperties): void;
+    /**
+     * Begins editing on a highlighted cell and hides fillHandle corner if was present.
+     *
+     * @param {*} newInitialValue The editor initial value.
+     * @param {Event} event The keyboard event object.
+     */
+    beginEditing(newInitialValue?: unknown, event?: Event): void;
+    /**
+     * Sets focus state on the select element.
+     */
+    focus(): void;
+    /**
+     * Creates an editor's elements and adds necessary CSS classnames.
+     *
+     * @param {string} type The type of the element to create.
+     */
+    createElements(type?: string): void;
+    /**
+     * Moves an editable element out of the viewport, but element must be able to hold focus for IME support.
+     *
+     * @private
+     */
+    hideEditableElement(): void;
+    /**
+     * Resets an editable element position.
+     *
+     * @private
+     */
+    showEditableElement(): void;
+    /**
+     * Refreshes editor's value using source data.
+     *
+     * @private
+     */
+    refreshValue(): void;
+    /**
+     * Refreshes editor's size and position.
+     *
+     * @private
+     * @param {boolean} force Indicates if the refreshing editor dimensions should be triggered.
+     */
+    refreshDimensions(force?: boolean): void;
+    /**
+     * Binds events and hooks.
+     *
+     * @private
+     */
+    bindEvents(): void;
+    /**
+     * Destroys the internal event manager and clears attached hooks.
+     *
+     * @private
+     */
+    destroy(): void;
+    /**
+     * Register shortcuts responsible for handling editor.
+     *
+     * @private
+     */
+    registerShortcuts(): void;
+    /**
+     * Unregister shortcuts responsible for handling editor.
+     *
+     * @private
+     */
+    unregisterShortcuts(): void;
 }

package/editors/textEditor/textEditor.js

@@ -35,7 +35,9 @@ const EDITOR_HIDDEN_CLASS_NAME = 'ht_editor_hidden';
 const SHORTCUTS_GROUP = 'textEditor';
 const EDITOR_TYPE = 'text';
 class TextEditor extends _baseEditor.BaseEditor {
-    static get EDITOR_TYPE() {
+    /**
+   * Returns the unique editor type identifier for the text editor.
+   */ static get EDITOR_TYPE() {
         return EDITOR_TYPE;
     }
     /**
@@ -116,7 +118,7 @@ class TextEditor extends _baseEditor.BaseEditor {
         // Using ".focus" browser automatically scroll into the focused element which
         // is undesired effect.
         this.TEXTAREA.select();
-        (0, _element.setCaretPosition)(this.TEXTAREA, this.TEXTAREA.value.length);
+        (0, _element.setCaretPosition)(this.TEXTAREA, this.TEXTAREA.value.length, this.TEXTAREA.value.length);
     }
     /**
    * Creates an editor's elements and adds necessary CSS classnames.
@@ -136,8 +138,8 @@ class TextEditor extends _baseEditor.BaseEditor {
         ]);
         (0, _element.addClass)(this.TEXTAREA, 'handsontableInput');
         this.textareaStyle = this.TEXTAREA.style;
-        this.textareaStyle.width = 0;
-        this.textareaStyle.height = 0;
+        this.textareaStyle.width = '0';
+        this.textareaStyle.height = '0';
         this.textareaStyle.overflowY = 'visible';
         this.TEXTAREA_PARENT = rootDocument.createElement('DIV');
         (0, _element.addClass)(this.TEXTAREA_PARENT, 'handsontableInputHolder');
@@ -222,7 +224,11 @@ class TextEditor extends _baseEditor.BaseEditor {
             }
             return;
         }
-        const { top, start, width, maxWidth, height, maxHeight } = this.getEditedCellRect();
+        const cellRect = this.getEditedCellRect();
+        if (!cellRect) {
+            return;
+        }
+        const { top, start, width, maxWidth, height, maxHeight } = cellRect;
         this.textareaParentStyle.top = `${top}px`;
         this.textareaParentStyle[this.hot.isRtl() ? 'right' : 'left'] = `${start}px`;
         this.showEditableElement();
@@ -298,7 +304,7 @@ class TextEditor extends _baseEditor.BaseEditor {
                 },
                 runOnlyIf: (event)=>!this.hot.selection.isMultiple() && // We trigger a data population for multiple selection.
                     // catch CTRL but not right ALT (which in some systems triggers ALT+CTRL)
-                    !event.altKey
+                    !event?.altKey
             },
             {
                 keys: [
@@ -331,8 +337,8 @@ class TextEditor extends _baseEditor.BaseEditor {
                         'Home'
                     ]
                 ],
-                callback: (event, [keyName])=>{
-                    (0, _caretPositioner.updateCaretPosition)(keyName, this.TEXTAREA);
+                callback: (_event, keys)=>{
+                    (0, _caretPositioner.updateCaretPosition)(keys?.[0] ?? '', this.TEXTAREA);
                 }
             },
             {
@@ -341,8 +347,8 @@ class TextEditor extends _baseEditor.BaseEditor {
                         'End'
                     ]
                 ],
-                callback: (event, [keyName])=>{
-                    (0, _caretPositioner.updateCaretPosition)(keyName, this.TEXTAREA);
+                callback: (_event, keys)=>{
+                    (0, _caretPositioner.updateCaretPosition)(keys?.[0] ?? '', this.TEXTAREA);
                 }
             }
         ], contextConfig);

package/editors/textEditor/textEditor.mjs

@@ -15,7 +15,9 @@ export const EDITOR_TYPE = 'text';
  * @private
  * @class TextEditor
  */ export class TextEditor extends BaseEditor {
-    static get EDITOR_TYPE() {
+    /**
+   * Returns the unique editor type identifier for the text editor.
+   */ static get EDITOR_TYPE() {
         return EDITOR_TYPE;
     }
     /**
@@ -96,7 +98,7 @@ export const EDITOR_TYPE = 'text';
         // Using ".focus" browser automatically scroll into the focused element which
         // is undesired effect.
         this.TEXTAREA.select();
-        setCaretPosition(this.TEXTAREA, this.TEXTAREA.value.length);
+        setCaretPosition(this.TEXTAREA, this.TEXTAREA.value.length, this.TEXTAREA.value.length);
     }
     /**
    * Creates an editor's elements and adds necessary CSS classnames.
@@ -116,8 +118,8 @@ export const EDITOR_TYPE = 'text';
         ]);
         addClass(this.TEXTAREA, 'handsontableInput');
         this.textareaStyle = this.TEXTAREA.style;
-        this.textareaStyle.width = 0;
-        this.textareaStyle.height = 0;
+        this.textareaStyle.width = '0';
+        this.textareaStyle.height = '0';
         this.textareaStyle.overflowY = 'visible';
         this.TEXTAREA_PARENT = rootDocument.createElement('DIV');
         addClass(this.TEXTAREA_PARENT, 'handsontableInputHolder');
@@ -202,7 +204,11 @@ export const EDITOR_TYPE = 'text';
             }
             return;
         }
-        const { top, start, width, maxWidth, height, maxHeight } = this.getEditedCellRect();
+        const cellRect = this.getEditedCellRect();
+        if (!cellRect) {
+            return;
+        }
+        const { top, start, width, maxWidth, height, maxHeight } = cellRect;
         this.textareaParentStyle.top = `${top}px`;
         this.textareaParentStyle[this.hot.isRtl() ? 'right' : 'left'] = `${start}px`;
         this.showEditableElement();
@@ -278,7 +284,7 @@ export const EDITOR_TYPE = 'text';
                 },
                 runOnlyIf: (event)=>!this.hot.selection.isMultiple() && // We trigger a data population for multiple selection.
                     // catch CTRL but not right ALT (which in some systems triggers ALT+CTRL)
-                    !event.altKey
+                    !event?.altKey
             },
             {
                 keys: [
@@ -311,8 +317,8 @@ export const EDITOR_TYPE = 'text';
                         'Home'
                     ]
                 ],
-                callback: (event, [keyName])=>{
-                    updateCaretPosition(keyName, this.TEXTAREA);
+                callback: (_event, keys)=>{
+                    updateCaretPosition(keys?.[0] ?? '', this.TEXTAREA);
                 }
             },
             {
@@ -321,8 +327,8 @@ export const EDITOR_TYPE = 'text';
                         'End'
                     ]
                 ],
-                callback: (event, [keyName])=>{
-                    updateCaretPosition(keyName, this.TEXTAREA);
+                callback: (_event, keys)=>{
+                    updateCaretPosition(keys?.[0] ?? '', this.TEXTAREA);
                 }
             }
         ], contextConfig);

package/editors/timeEditor/index.d.mts

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

package/editors/timeEditor/index.d.ts

@@ -1 +1 @@
-export { EDITOR_TYPE, TimeEditor } from './timeEditor';
+export { EDITOR_TYPE, TimeEditor, } from './timeEditor';

package/editors/timeEditor/timeEditor.d.mts

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