handsontable 15.3.0-next-175012b-20250429 → 16.0.0-next-f486b48-20250702

package/editors/autocompleteEditor/autocompleteEditor.js

@@ -285,7 +285,6 @@ class AutocompleteEditor extends _handsontableEditor.HandsontableEditor {
   /**
    * Prepares choices list based on applied argument.
    *
-   * @private
    * @param {string} query The query.
    */
   queryChoices(query) {
@@ -350,7 +349,7 @@ class AutocompleteEditor extends _handsontableEditor.HandsontableEditor {
     this.htEditor.loadData((0, _array.pivot)([choices]));
     if (choices.length > 0) {
       this.updateDropdownDimensions();
-      this.flipDropdownIfNeeded();
+      this.flipDropdownVerticallyIfNeeded();
       if (this.cellProperties.strict === true) {
         this.highlightBestMatchingChoice(highlightIndex);
       }
@@ -360,29 +359,20 @@ class AutocompleteEditor extends _handsontableEditor.HandsontableEditor {
   }
 
   /**
-   * Checks where is enough place to open editor.
+   * Calculates the space above and below the editor and flips it vertically if needed.
    *
    * @private
-   * @returns {boolean}
+   * @returns {{ isFlipped: boolean, spaceAbove: number, spaceBelow: number}}
    */
-  flipDropdownIfNeeded() {
-    const editorRect = this.getEditedCellRect();
-    const editorHeight = editorRect.height;
-    let spaceAbove = editorRect.top;
-    if (this.hot.view.isVerticallyScrollableByWindow()) {
-      const topOffset = this.hot.view.getTableOffset().top - this.hot.rootWindow.scrollY;
-      spaceAbove = Math.max(spaceAbove + topOffset, 0);
-    }
-    const dropdownHeight = this.getHeight();
-    const spaceBelow = this.hot.view.getWorkspaceHeight() - spaceAbove - editorHeight;
-    const flipNeeded = dropdownHeight > spaceBelow && spaceAbove > spaceBelow + editorHeight;
-    if (flipNeeded) {
-      this.flipDropdown(dropdownHeight);
-    } else {
-      this.unflipDropdown();
-    }
-    this.limitDropdownIfNeeded(flipNeeded ? spaceAbove : spaceBelow, dropdownHeight);
-    return flipNeeded;
+  flipDropdownVerticallyIfNeeded() {
+    const result = super.flipDropdownVerticallyIfNeeded();
+    const {
+      isFlipped,
+      spaceAbove,
+      spaceBelow
+    } = result;
+    this.limitDropdownIfNeeded(isFlipped ? spaceAbove : spaceBelow);
+    return result;
   }
 
   /**
@@ -390,60 +380,36 @@ class AutocompleteEditor extends _handsontableEditor.HandsontableEditor {
    *
    * @private
    * @param {number} spaceAvailable The free space as height defined in px available for dropdown list.
-   * @param {number} dropdownHeight The dropdown height.
    */
-  limitDropdownIfNeeded(spaceAvailable, dropdownHeight) {
+  limitDropdownIfNeeded(spaceAvailable) {
+    const dropdownHeight = this.getDropdownHeight();
     if (dropdownHeight > spaceAvailable) {
       let tempHeight = 0;
-      let i = 0;
       let lastRowHeight = 0;
       let height = null;
       do {
-        lastRowHeight = this.htEditor.getRowHeight(i) || this.htEditor.view.getDefaultRowHeight();
+        lastRowHeight = this.htEditor.stylesHandler.getDefaultRowHeight();
         tempHeight += lastRowHeight;
-        i += 1;
       } while (tempHeight < spaceAvailable);
       height = tempHeight - lastRowHeight;
-      if (this.htEditor.flipped) {
+      if (this.isFlippedVertically) {
         this.htEditor.rootElement.style.top = `${parseInt(this.htEditor.rootElement.style.top, 10) + dropdownHeight - height}px`;
       }
       this.setDropdownHeight(tempHeight - lastRowHeight);
     }
   }
-
-  /**
-   * Configures editor to open it at the top.
-   *
-   * @private
-   * @param {number} dropdownHeight The dropdown height.
-   */
-  flipDropdown(dropdownHeight) {
-    const dropdownStyle = this.htEditor.rootElement.style;
-    dropdownStyle.position = 'absolute';
-    dropdownStyle.top = `${-dropdownHeight}px`;
-    this.htEditor.flipped = true;
-  }
-
-  /**
-   * Configures editor to open it at the bottom.
-   *
-   * @private
-   */
-  unflipDropdown() {
-    const dropdownStyle = this.htEditor.rootElement.style;
-    dropdownStyle.position = 'absolute';
-    dropdownStyle.top = '';
-    this.htEditor.flipped = undefined;
-  }
   /**
    * Updates width and height of the internal Handsontable's instance.
    *
    * @private
    */
   updateDropdownDimensions() {
+    const fractionalScalingCompensation = (0, _element.getFractionalScalingCompensation)();
+    const targetWidth = this.getTargetEditorWidth() + fractionalScalingCompensation;
+    const targetHeight = this.getTargetEditorHeight() + fractionalScalingCompensation;
     this.htEditor.updateSettings({
-      width: this.getWidth(),
-      height: this.getHeight()
+      width: targetWidth,
+      height: targetHeight
     });
     _assertClassBrand(_AutocompleteEditor_brand, this, _fixDropdownWidth).call(this);
     this.htEditor.view._wt.wtTable.alignOverlaysWithTrimmingContainer();
@@ -478,34 +444,41 @@ class AutocompleteEditor extends _handsontableEditor.HandsontableEditor {
   }
 
   /**
-   * Calculates and return the internal Handsontable's height.
+   * Calculates the proposed/target editor height that should be set once the editor is opened.
+   * The method may be overwritten in the child class to provide a custom size logic.
    *
-   * @private
    * @returns {number}
    */
-  getHeight() {
-    const containerStyle = this.hot.rootWindow.getComputedStyle(this.htContainer.querySelector('.htCore'));
-    const borderVerticalCompensation = parseInt(containerStyle.borderTopWidth, 10) + parseInt(containerStyle.borderBottomWidth, 10);
+  getTargetEditorHeight() {
+    let borderCompensation = 0;
+    if (!this.hot.getCurrentThemeName()) {
+      const containerStyle = this.hot.rootWindow.getComputedStyle(this.htContainer.querySelector('.htCore'));
+      borderCompensation = parseInt(containerStyle.borderTopWidth, 10) + parseInt(containerStyle.borderBottomWidth, 10);
+    }
     const maxItems = Math.min(this.cellProperties.visibleRows, this.strippedChoices.length);
     const height = Array.from({
       length: maxItems
     }, (_, i) => i).reduce((totalHeight, index) => {
-      const rowHeight = this.htEditor.getRowHeight(index) || this.htEditor.view.getDefaultRowHeight();
+      // for the first row, we need to add 1px (border-top compensation)
+      const rowHeight = this.hot.stylesHandler.getDefaultRowHeight() + (index === 0 ? 1 : 0);
       return totalHeight + rowHeight;
     }, 0);
-    return height + borderVerticalCompensation + 1;
+    return height + borderCompensation;
   }
 
   /**
-   * Calculates and return the internal Handsontable's width.
+   * Calculates the proposed/target editor width that should be set once the editor is opened.
+   * The method may be overwritten in the child class to provide a custom size logic.
    *
-   * @private
    * @returns {number}
    */
-  getWidth() {
-    const containerStyle = this.hot.rootWindow.getComputedStyle(this.htContainer.querySelector('.htCore'));
-    const borderHorizontalCompensation = parseInt(containerStyle.borderInlineStartWidth, 10) + parseInt(containerStyle.borderInlineEndWidth, 10);
-    return this.htEditor.getColWidth(0) + borderHorizontalCompensation;
+  getTargetEditorWidth() {
+    let borderCompensation = 0;
+    if (!this.hot.getCurrentThemeName()) {
+      const containerStyle = this.hot.rootWindow.getComputedStyle(this.htContainer.querySelector('.htCore'));
+      borderCompensation = parseInt(containerStyle.borderInlineStartWidth, 10) + parseInt(containerStyle.borderInlineEndWidth, 10);
+    }
+    return this.htEditor.getColWidth(0) + borderCompensation;
   }
 
   /**
@@ -590,7 +563,7 @@ exports.AutocompleteEditor = AutocompleteEditor;
 function _fixDropdownWidth() {
   if (this.htEditor.view.hasVerticalScroll()) {
     this.htEditor.updateSettings({
-      width: this.getWidth() + (0, _element.getScrollbarWidth)(this.hot.rootDocument)
+      width: this.getTargetEditorWidth() + (0, _element.getScrollbarWidth)(this.hot.rootDocument)
     });
   }
 }

package/editors/autocompleteEditor/autocompleteEditor.mjs

@@ -14,7 +14,7 @@ function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
 function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
 import { HandsontableEditor } from "../handsontableEditor/index.mjs";
 import { arrayMap, pivot } from "../../helpers/array.mjs";
-import { addClass, getCaretPosition, getScrollbarWidth, getSelectionEndPosition, outerWidth, setAttribute, setCaretPosition } from "../../helpers/dom/element.mjs";
+import { addClass, getCaretPosition, getFractionalScalingCompensation, getScrollbarWidth, getSelectionEndPosition, outerWidth, setAttribute, setCaretPosition } from "../../helpers/dom/element.mjs";
 import { isDefined, stringify } from "../../helpers/mixed.mjs";
 import { stripTags } from "../../helpers/string.mjs";
 import { KEY_CODES, isPrintableChar } from "../../helpers/unicode.mjs";
@@ -282,7 +282,6 @@ export class AutocompleteEditor extends HandsontableEditor {
   /**
    * Prepares choices list based on applied argument.
    *
-   * @private
    * @param {string} query The query.
    */
   queryChoices(query) {
@@ -347,7 +346,7 @@ export class AutocompleteEditor extends HandsontableEditor {
     this.htEditor.loadData(pivot([choices]));
     if (choices.length > 0) {
       this.updateDropdownDimensions();
-      this.flipDropdownIfNeeded();
+      this.flipDropdownVerticallyIfNeeded();
       if (this.cellProperties.strict === true) {
         this.highlightBestMatchingChoice(highlightIndex);
       }
@@ -357,29 +356,20 @@ export class AutocompleteEditor extends HandsontableEditor {
   }
 
   /**
-   * Checks where is enough place to open editor.
+   * Calculates the space above and below the editor and flips it vertically if needed.
    *
    * @private
-   * @returns {boolean}
+   * @returns {{ isFlipped: boolean, spaceAbove: number, spaceBelow: number}}
    */
-  flipDropdownIfNeeded() {
-    const editorRect = this.getEditedCellRect();
-    const editorHeight = editorRect.height;
-    let spaceAbove = editorRect.top;
-    if (this.hot.view.isVerticallyScrollableByWindow()) {
-      const topOffset = this.hot.view.getTableOffset().top - this.hot.rootWindow.scrollY;
-      spaceAbove = Math.max(spaceAbove + topOffset, 0);
-    }
-    const dropdownHeight = this.getHeight();
-    const spaceBelow = this.hot.view.getWorkspaceHeight() - spaceAbove - editorHeight;
-    const flipNeeded = dropdownHeight > spaceBelow && spaceAbove > spaceBelow + editorHeight;
-    if (flipNeeded) {
-      this.flipDropdown(dropdownHeight);
-    } else {
-      this.unflipDropdown();
-    }
-    this.limitDropdownIfNeeded(flipNeeded ? spaceAbove : spaceBelow, dropdownHeight);
-    return flipNeeded;
+  flipDropdownVerticallyIfNeeded() {
+    const result = super.flipDropdownVerticallyIfNeeded();
+    const {
+      isFlipped,
+      spaceAbove,
+      spaceBelow
+    } = result;
+    this.limitDropdownIfNeeded(isFlipped ? spaceAbove : spaceBelow);
+    return result;
   }
 
   /**
@@ -387,60 +377,36 @@ export class AutocompleteEditor extends HandsontableEditor {
    *
    * @private
    * @param {number} spaceAvailable The free space as height defined in px available for dropdown list.
-   * @param {number} dropdownHeight The dropdown height.
    */
-  limitDropdownIfNeeded(spaceAvailable, dropdownHeight) {
+  limitDropdownIfNeeded(spaceAvailable) {
+    const dropdownHeight = this.getDropdownHeight();
     if (dropdownHeight > spaceAvailable) {
       let tempHeight = 0;
-      let i = 0;
       let lastRowHeight = 0;
       let height = null;
       do {
-        lastRowHeight = this.htEditor.getRowHeight(i) || this.htEditor.view.getDefaultRowHeight();
+        lastRowHeight = this.htEditor.stylesHandler.getDefaultRowHeight();
         tempHeight += lastRowHeight;
-        i += 1;
       } while (tempHeight < spaceAvailable);
       height = tempHeight - lastRowHeight;
-      if (this.htEditor.flipped) {
+      if (this.isFlippedVertically) {
         this.htEditor.rootElement.style.top = `${parseInt(this.htEditor.rootElement.style.top, 10) + dropdownHeight - height}px`;
       }
       this.setDropdownHeight(tempHeight - lastRowHeight);
     }
   }
-
-  /**
-   * Configures editor to open it at the top.
-   *
-   * @private
-   * @param {number} dropdownHeight The dropdown height.
-   */
-  flipDropdown(dropdownHeight) {
-    const dropdownStyle = this.htEditor.rootElement.style;
-    dropdownStyle.position = 'absolute';
-    dropdownStyle.top = `${-dropdownHeight}px`;
-    this.htEditor.flipped = true;
-  }
-
-  /**
-   * Configures editor to open it at the bottom.
-   *
-   * @private
-   */
-  unflipDropdown() {
-    const dropdownStyle = this.htEditor.rootElement.style;
-    dropdownStyle.position = 'absolute';
-    dropdownStyle.top = '';
-    this.htEditor.flipped = undefined;
-  }
   /**
    * Updates width and height of the internal Handsontable's instance.
    *
    * @private
    */
   updateDropdownDimensions() {
+    const fractionalScalingCompensation = getFractionalScalingCompensation();
+    const targetWidth = this.getTargetEditorWidth() + fractionalScalingCompensation;
+    const targetHeight = this.getTargetEditorHeight() + fractionalScalingCompensation;
     this.htEditor.updateSettings({
-      width: this.getWidth(),
-      height: this.getHeight()
+      width: targetWidth,
+      height: targetHeight
     });
     _assertClassBrand(_AutocompleteEditor_brand, this, _fixDropdownWidth).call(this);
     this.htEditor.view._wt.wtTable.alignOverlaysWithTrimmingContainer();
@@ -475,34 +441,41 @@ export class AutocompleteEditor extends HandsontableEditor {
   }
 
   /**
-   * Calculates and return the internal Handsontable's height.
+   * Calculates the proposed/target editor height that should be set once the editor is opened.
+   * The method may be overwritten in the child class to provide a custom size logic.
    *
-   * @private
    * @returns {number}
    */
-  getHeight() {
-    const containerStyle = this.hot.rootWindow.getComputedStyle(this.htContainer.querySelector('.htCore'));
-    const borderVerticalCompensation = parseInt(containerStyle.borderTopWidth, 10) + parseInt(containerStyle.borderBottomWidth, 10);
+  getTargetEditorHeight() {
+    let borderCompensation = 0;
+    if (!this.hot.getCurrentThemeName()) {
+      const containerStyle = this.hot.rootWindow.getComputedStyle(this.htContainer.querySelector('.htCore'));
+      borderCompensation = parseInt(containerStyle.borderTopWidth, 10) + parseInt(containerStyle.borderBottomWidth, 10);
+    }
     const maxItems = Math.min(this.cellProperties.visibleRows, this.strippedChoices.length);
     const height = Array.from({
       length: maxItems
     }, (_, i) => i).reduce((totalHeight, index) => {
-      const rowHeight = this.htEditor.getRowHeight(index) || this.htEditor.view.getDefaultRowHeight();
+      // for the first row, we need to add 1px (border-top compensation)
+      const rowHeight = this.hot.stylesHandler.getDefaultRowHeight() + (index === 0 ? 1 : 0);
       return totalHeight + rowHeight;
     }, 0);
-    return height + borderVerticalCompensation + 1;
+    return height + borderCompensation;
   }
 
   /**
-   * Calculates and return the internal Handsontable's width.
+   * Calculates the proposed/target editor width that should be set once the editor is opened.
+   * The method may be overwritten in the child class to provide a custom size logic.
    *
-   * @private
    * @returns {number}
    */
-  getWidth() {
-    const containerStyle = this.hot.rootWindow.getComputedStyle(this.htContainer.querySelector('.htCore'));
-    const borderHorizontalCompensation = parseInt(containerStyle.borderInlineStartWidth, 10) + parseInt(containerStyle.borderInlineEndWidth, 10);
-    return this.htEditor.getColWidth(0) + borderHorizontalCompensation;
+  getTargetEditorWidth() {
+    let borderCompensation = 0;
+    if (!this.hot.getCurrentThemeName()) {
+      const containerStyle = this.hot.rootWindow.getComputedStyle(this.htContainer.querySelector('.htCore'));
+      borderCompensation = parseInt(containerStyle.borderInlineStartWidth, 10) + parseInt(containerStyle.borderInlineEndWidth, 10);
+    }
+    return this.htEditor.getColWidth(0) + borderCompensation;
   }
 
   /**
@@ -586,7 +559,7 @@ export class AutocompleteEditor extends HandsontableEditor {
 function _fixDropdownWidth() {
   if (this.htEditor.view.hasVerticalScroll()) {
     this.htEditor.updateSettings({
-      width: this.getWidth() + getScrollbarWidth(this.hot.rootDocument)
+      width: this.getTargetEditorWidth() + getScrollbarWidth(this.hot.rootDocument)
     });
   }
 }

package/editors/baseEditor/baseEditor.js

@@ -492,7 +492,7 @@ class BaseEditor {
     const actualVerticalScrollbarWidth = (0, _element.hasVerticalScrollbar)(scrollableContainerTop) ? scrollbarWidth : 0;
     const actualHorizontalScrollbarWidth = (0, _element.hasHorizontalScrollbar)(scrollableContainerLeft) ? scrollbarWidth : 0;
     const maxWidth = this.hot.view.maximumVisibleElementWidth(cellStartOffset) - actualVerticalScrollbarWidth + inlineStartBorderCompensation;
-    const maxHeight = Math.max(this.hot.view.maximumVisibleElementHeight(cellTopOffset) - actualHorizontalScrollbarWidth + topBorderCompensation, this.hot.view.getDefaultRowHeight());
+    const maxHeight = Math.max(this.hot.view.maximumVisibleElementHeight(cellTopOffset) - actualHorizontalScrollbarWidth + topBorderCompensation, this.hot.stylesHandler.getDefaultRowHeight());
     return {
       top: topPos,
       start: inlineStartPos,

package/editors/baseEditor/baseEditor.mjs

@@ -488,7 +488,7 @@ export class BaseEditor {
     const actualVerticalScrollbarWidth = hasVerticalScrollbar(scrollableContainerTop) ? scrollbarWidth : 0;
     const actualHorizontalScrollbarWidth = hasHorizontalScrollbar(scrollableContainerLeft) ? scrollbarWidth : 0;
     const maxWidth = this.hot.view.maximumVisibleElementWidth(cellStartOffset) - actualVerticalScrollbarWidth + inlineStartBorderCompensation;
-    const maxHeight = Math.max(this.hot.view.maximumVisibleElementHeight(cellTopOffset) - actualHorizontalScrollbarWidth + topBorderCompensation, this.hot.view.getDefaultRowHeight());
+    const maxHeight = Math.max(this.hot.view.maximumVisibleElementHeight(cellTopOffset) - actualHorizontalScrollbarWidth + topBorderCompensation, this.hot.stylesHandler.getDefaultRowHeight());
     return {
       top: topPos,
       start: inlineStartPos,

package/editors/dateEditor/dateEditor.js

@@ -61,8 +61,7 @@ class DateEditor extends _textEditor.TextEditor {
     });
     this.hot.addHook('afterSetTheme', (themeName, firstRun) => {
       if (!firstRun) {
-        (0, _element.removeClass)(this.datePicker, /ht-theme-.*/g);
-        (0, _element.addClass)(this.datePicker, themeName);
+        this.close();
       }
     });
   }
@@ -80,10 +79,7 @@ class DateEditor extends _textEditor.TextEditor {
     this.datePickerStyle.zIndex = 9999;
     this.datePicker.setAttribute('dir', this.hot.isRtl() ? 'rtl' : 'ltr');
     (0, _element.addClass)(this.datePicker, 'htDatepickerHolder');
-    const themeClassName = this.hot.getCurrentThemeName();
-    (0, _element.removeClass)(this.datePicker, /ht-theme-.*/g);
-    (0, _element.addClass)(this.datePicker, themeClassName);
-    this.hot.rootDocument.body.appendChild(this.datePicker);
+    this.hot.rootPortalElement.appendChild(this.datePicker);
 
     /**
      * Prevent recognizing clicking on datepicker as clicking outside of table.
@@ -164,8 +160,6 @@ class DateEditor extends _textEditor.TextEditor {
    */
   close() {
     var _this$$datePicker;
-    this._opened = false;
-
     // If the date picker was never initialized (e.g. during autofill), there's nothing to destroy.
     if ((_this$$datePicker = this.$datePicker) !== null && _this$$datePicker !== void 0 && _this$$datePicker.destroy) {
       this.$datePicker.destroy();

package/editors/dateEditor/dateEditor.mjs

@@ -9,7 +9,7 @@ import moment from 'moment';
 import Pikaday from '@handsontable/pikaday';
 import { EDITOR_STATE } from "../baseEditor/index.mjs";
 import { TextEditor } from "../textEditor/index.mjs";
-import { addClass, removeClass, hasClass, outerHeight, outerWidth } from "../../helpers/dom/element.mjs";
+import { addClass, hasClass, outerHeight, outerWidth } from "../../helpers/dom/element.mjs";
 import { deepExtend } from "../../helpers/object.mjs";
 import { isFunctionKey } from "../../helpers/unicode.mjs";
 import { isMobileBrowser } from "../../helpers/browser.mjs";
@@ -57,8 +57,7 @@ export class DateEditor extends TextEditor {
     });
     this.hot.addHook('afterSetTheme', (themeName, firstRun) => {
       if (!firstRun) {
-        removeClass(this.datePicker, /ht-theme-.*/g);
-        addClass(this.datePicker, themeName);
+        this.close();
       }
     });
   }
@@ -76,10 +75,7 @@ export class DateEditor extends TextEditor {
     this.datePickerStyle.zIndex = 9999;
     this.datePicker.setAttribute('dir', this.hot.isRtl() ? 'rtl' : 'ltr');
     addClass(this.datePicker, 'htDatepickerHolder');
-    const themeClassName = this.hot.getCurrentThemeName();
-    removeClass(this.datePicker, /ht-theme-.*/g);
-    addClass(this.datePicker, themeClassName);
-    this.hot.rootDocument.body.appendChild(this.datePicker);
+    this.hot.rootPortalElement.appendChild(this.datePicker);
 
     /**
      * Prevent recognizing clicking on datepicker as clicking outside of table.
@@ -160,8 +156,6 @@ export class DateEditor extends TextEditor {
    */
   close() {
     var _this$$datePicker;
-    this._opened = false;
-
     // If the date picker was never initialized (e.g. during autofill), there's nothing to destroy.
     if ((_this$$datePicker = this.$datePicker) !== null && _this$$datePicker !== void 0 && _this$$datePicker.destroy) {
       this.$datePicker.destroy();

package/editors/handsontableEditor/handsontableEditor.d.ts

@@ -7,4 +7,12 @@ export class HandsontableEditor extends TextEditor {
 
   htEditor: Core;
   htContainer: HTMLElement;
+  isFlippedVertically: boolean;
+  isFlippedHorizontally: boolean;
+
+  getValue(): string;
+  getDropdownHeight(): number;
+  getDropdownWidth(): number;
+  getTargetDropdownWidth(): number;
+  getTargetDropdownHeight(): number;
 }