handsontable 0.0.0-next-4b40c99-20241108 → 0.0.0-next-bb36dee-20241108

package/editors/autocompleteEditor/autocompleteEditor.js

@@ -379,7 +379,7 @@ class AutocompleteEditor extends _handsontableEditor.HandsontableEditor {
       let lastRowHeight = 0;
       let height = null;
       do {
-        lastRowHeight = this.htEditor.getRowHeight(i) || this.htEditor.view._wt.getSetting('defaultRowHeight');
+        lastRowHeight = this.htEditor.getRowHeight(i) || this.htEditor.view.getDefaultRowHeight();
         tempHeight += lastRowHeight;
         i += 1;
       } while (tempHeight < spaceAvailable);

package/editors/autocompleteEditor/autocompleteEditor.mjs

@@ -376,7 +376,7 @@ export class AutocompleteEditor extends HandsontableEditor {
       let lastRowHeight = 0;
       let height = null;
       do {
-        lastRowHeight = this.htEditor.getRowHeight(i) || this.htEditor.view._wt.getSetting('defaultRowHeight');
+        lastRowHeight = this.htEditor.getRowHeight(i) || this.htEditor.view.getDefaultRowHeight();
         tempHeight += lastRowHeight;
         i += 1;
       } while (tempHeight < spaceAvailable);

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, 23);
+    const maxHeight = Math.max(this.hot.view.maximumVisibleElementHeight(cellTopOffset) - actualHorizontalScrollbarWidth + topBorderCompensation, this.hot.view.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, 23);
+    const maxHeight = Math.max(this.hot.view.maximumVisibleElementHeight(cellTopOffset) - actualHorizontalScrollbarWidth + topBorderCompensation, this.hot.view.getDefaultRowHeight());
     return {
       top: topPos,
       start: inlineStartPos,

package/editors/dateEditor/dateEditor.js

@@ -52,6 +52,10 @@ class DateEditor extends _textEditor.TextEditor {
       this.parentDestroyed = true;
       this.destroyElements();
     });
+    this.hot.addHook('afterSetTheme', themeName => {
+      (0, _element.removeClass)(this.datePicker, /ht-theme-.*/g);
+      (0, _element.addClass)(this.datePicker, themeName);
+    });
   }
 
   /**
@@ -67,6 +71,9 @@ 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);
 
     /**

package/editors/dateEditor/dateEditor.mjs

@@ -6,7 +6,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, hasClass, outerHeight, outerWidth } from "../../helpers/dom/element.mjs";
+import { addClass, removeClass, hasClass, outerHeight, outerWidth } from "../../helpers/dom/element.mjs";
 import { deepExtend } from "../../helpers/object.mjs";
 import { isFunctionKey } from "../../helpers/unicode.mjs";
 export const EDITOR_TYPE = 'date';
@@ -48,6 +48,10 @@ export class DateEditor extends TextEditor {
       this.parentDestroyed = true;
       this.destroyElements();
     });
+    this.hot.addHook('afterSetTheme', themeName => {
+      removeClass(this.datePicker, /ht-theme-.*/g);
+      addClass(this.datePicker, themeName);
+    });
   }
 
   /**
@@ -63,6 +67,9 @@ 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);
 
     /**

package/editors/handsontableEditor/handsontableEditor.js

@@ -89,6 +89,7 @@ class HandsontableEditor extends _textEditor.TextEditor {
       autoWrapCol: false,
       autoWrapRow: false,
       ariaTags: false,
+      themeName: this.hot.getCurrentThemeName(),
       afterOnCellMouseDown(_, coords) {
         const sourceValue = this.getSourceData(coords.row, coords.col);
 
@@ -162,7 +163,7 @@ class HandsontableEditor extends _textEditor.TextEditor {
    * @returns {number}
    */
   getHeight() {
-    return this.htEditor.view.getTableHeight();
+    return this.htEditor.view.getTableHeight() + 1;
   }
 
   /**
@@ -186,6 +187,9 @@ class HandsontableEditor extends _textEditor.TextEditor {
         this.htEditor.destroy();
       }
     });
+    this.hot.addHook('afterSetTheme', themeName => {
+      this.htEditor.useTheme(themeName);
+    });
   }
 
   /**

package/editors/handsontableEditor/handsontableEditor.mjs

@@ -86,6 +86,7 @@ export class HandsontableEditor extends TextEditor {
       autoWrapCol: false,
       autoWrapRow: false,
       ariaTags: false,
+      themeName: this.hot.getCurrentThemeName(),
       afterOnCellMouseDown(_, coords) {
         const sourceValue = this.getSourceData(coords.row, coords.col);
 
@@ -159,7 +160,7 @@ export class HandsontableEditor extends TextEditor {
    * @returns {number}
    */
   getHeight() {
-    return this.htEditor.view.getTableHeight();
+    return this.htEditor.view.getTableHeight() + 1;
   }
 
   /**
@@ -183,6 +184,9 @@ export class HandsontableEditor extends TextEditor {
         this.htEditor.destroy();
       }
     });
+    this.hot.addHook('afterSetTheme', themeName => {
+      this.htEditor.useTheme(themeName);
+    });
   }
 
   /**

package/editors/selectEditor/selectEditor.js

@@ -4,6 +4,7 @@ exports.__esModule = true;
 var _baseEditor = require("../baseEditor");
 var _element = require("../../helpers/dom/element");
 var _object = require("../../helpers/object");
+var _a11y = require("../../helpers/a11y");
 const EDITOR_VISIBLE_CLASS_NAME = 'ht_editor_visible';
 const SHORTCUTS_GROUP = 'selectEditor';
 const EDITOR_TYPE = exports.EDITOR_TYPE = 'select';
@@ -21,11 +22,21 @@ class SelectEditor extends _baseEditor.BaseEditor {
    * Initializes editor instance, DOM Element and mount hooks.
    */
   init() {
+    this.selectWrapper = this.hot.rootDocument.createElement('div');
     this.select = this.hot.rootDocument.createElement('select');
     this.select.setAttribute('data-hot-input', 'true');
-    this.select.style.display = 'none';
-    (0, _element.addClass)(this.select, 'htSelectEditor');
-    this.hot.rootElement.appendChild(this.select);
+    this.selectWrapper.style.display = 'none';
+    const ARROW = this.hot.rootDocument.createElement('DIV');
+    const isAriaEnabled = this.hot.getSettings().ariaTags;
+    ARROW.className = 'htAutocompleteArrow';
+    if (isAriaEnabled) {
+      ARROW.setAttribute(...(0, _a11y.A11Y_HIDDEN)());
+    }
+    ARROW.appendChild(this.hot.rootDocument.createTextNode(String.fromCharCode(9660)));
+    (0, _element.addClass)(this.selectWrapper, 'htSelectEditor');
+    this.selectWrapper.appendChild(this.select);
+    this.selectWrapper.insertBefore(ARROW, this.selectWrapper.firstChild);
+    this.hot.rootElement.appendChild(this.selectWrapper);
     this.registerHooks();
   }
 
@@ -53,7 +64,7 @@ class SelectEditor extends _baseEditor.BaseEditor {
   open() {
     this._opened = true;
     this.refreshDimensions();
-    this.select.style.display = '';
+    this.selectWrapper.style.display = '';
     const shortcutManager = this.hot.getShortcutManager();
     shortcutManager.setActiveContextName('editor');
     this.registerShortcuts();
@@ -64,9 +75,9 @@ class SelectEditor extends _baseEditor.BaseEditor {
    */
   close() {
     this._opened = false;
-    this.select.style.display = 'none';
-    if ((0, _element.hasClass)(this.select, EDITOR_VISIBLE_CLASS_NAME)) {
-      (0, _element.removeClass)(this.select, EDITOR_VISIBLE_CLASS_NAME);
+    this.selectWrapper.style.display = 'none';
+    if ((0, _element.hasClass)(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME)) {
+      (0, _element.removeClass)(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME);
     }
     this.unregisterShortcuts();
     this.clearHooks();
@@ -172,13 +183,13 @@ class SelectEditor extends _baseEditor.BaseEditor {
       width,
       height
     } = this.getEditedCellRect();
-    const selectStyle = this.select.style;
+    const selectStyle = this.selectWrapper.style;
     selectStyle.height = `${height}px`;
     selectStyle.width = `${width}px`;
     selectStyle.top = `${top}px`;
     selectStyle[this.hot.isRtl() ? 'right' : 'left'] = `${start}px`;
     selectStyle.margin = '0px';
-    (0, _element.addClass)(this.select, EDITOR_VISIBLE_CLASS_NAME);
+    (0, _element.addClass)(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME);
   }
 
   /**

package/editors/selectEditor/selectEditor.mjs

@@ -1,6 +1,7 @@
 import { BaseEditor, EDITOR_STATE } from "../baseEditor/index.mjs";
 import { addClass, empty, fastInnerHTML, hasClass, removeClass } from "../../helpers/dom/element.mjs";
 import { objectEach } from "../../helpers/object.mjs";
+import { A11Y_HIDDEN } from "../../helpers/a11y.mjs";
 const EDITOR_VISIBLE_CLASS_NAME = 'ht_editor_visible';
 const SHORTCUTS_GROUP = 'selectEditor';
 export const EDITOR_TYPE = 'select';
@@ -18,11 +19,21 @@ export class SelectEditor extends BaseEditor {
    * Initializes editor instance, DOM Element and mount hooks.
    */
   init() {
+    this.selectWrapper = this.hot.rootDocument.createElement('div');
     this.select = this.hot.rootDocument.createElement('select');
     this.select.setAttribute('data-hot-input', 'true');
-    this.select.style.display = 'none';
-    addClass(this.select, 'htSelectEditor');
-    this.hot.rootElement.appendChild(this.select);
+    this.selectWrapper.style.display = 'none';
+    const ARROW = this.hot.rootDocument.createElement('DIV');
+    const isAriaEnabled = this.hot.getSettings().ariaTags;
+    ARROW.className = 'htAutocompleteArrow';
+    if (isAriaEnabled) {
+      ARROW.setAttribute(...A11Y_HIDDEN());
+    }
+    ARROW.appendChild(this.hot.rootDocument.createTextNode(String.fromCharCode(9660)));
+    addClass(this.selectWrapper, 'htSelectEditor');
+    this.selectWrapper.appendChild(this.select);
+    this.selectWrapper.insertBefore(ARROW, this.selectWrapper.firstChild);
+    this.hot.rootElement.appendChild(this.selectWrapper);
     this.registerHooks();
   }
 
@@ -50,7 +61,7 @@ export class SelectEditor extends BaseEditor {
   open() {
     this._opened = true;
     this.refreshDimensions();
-    this.select.style.display = '';
+    this.selectWrapper.style.display = '';
     const shortcutManager = this.hot.getShortcutManager();
     shortcutManager.setActiveContextName('editor');
     this.registerShortcuts();
@@ -61,9 +72,9 @@ export class SelectEditor extends BaseEditor {
    */
   close() {
     this._opened = false;
-    this.select.style.display = 'none';
-    if (hasClass(this.select, EDITOR_VISIBLE_CLASS_NAME)) {
-      removeClass(this.select, EDITOR_VISIBLE_CLASS_NAME);
+    this.selectWrapper.style.display = 'none';
+    if (hasClass(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME)) {
+      removeClass(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME);
     }
     this.unregisterShortcuts();
     this.clearHooks();
@@ -169,13 +180,13 @@ export class SelectEditor extends BaseEditor {
       width,
       height
     } = this.getEditedCellRect();
-    const selectStyle = this.select.style;
+    const selectStyle = this.selectWrapper.style;
     selectStyle.height = `${height}px`;
     selectStyle.width = `${width}px`;
     selectStyle.top = `${top}px`;
     selectStyle[this.hot.isRtl() ? 'right' : 'left'] = `${start}px`;
     selectStyle.margin = '0px';
-    addClass(this.select, EDITOR_VISIBLE_CLASS_NAME);
+    addClass(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME);
   }
 
   /**

package/editors/textEditor/textEditor.js

@@ -309,19 +309,12 @@ class TextEditor extends _baseEditor.BaseEditor {
     this.TEXTAREA.style.fontSize = cellComputedStyle.fontSize;
     this.TEXTAREA.style.fontFamily = cellComputedStyle.fontFamily;
     this.TEXTAREA.style.backgroundColor = this.TD.style.backgroundColor;
-    const textareaComputedStyle = this.hot.rootWindow.getComputedStyle(this.TEXTAREA);
-    const horizontalPadding = parseInt(textareaComputedStyle.paddingLeft, 10) + parseInt(textareaComputedStyle.paddingRight, 10);
-    const verticalPadding = parseInt(textareaComputedStyle.paddingTop, 10) + parseInt(textareaComputedStyle.paddingBottom, 10);
-    const finalWidth = width - horizontalPadding;
-    const finalHeight = height - verticalPadding;
-    const finalMaxWidth = maxWidth - horizontalPadding;
-    const finalMaxHeight = maxHeight - verticalPadding;
     this.autoResize.init(this.TEXTAREA, {
-      minWidth: Math.min(finalWidth, finalMaxWidth),
-      minHeight: Math.min(finalHeight, finalMaxHeight),
+      minWidth: Math.min(width, maxWidth),
+      minHeight: Math.min(height, maxHeight),
       // TEXTAREA should never be wider than visible part of the viewport (should not cover the scrollbar)
-      maxWidth: finalMaxWidth,
-      maxHeight: finalMaxHeight
+      maxWidth,
+      maxHeight
     }, true);
   }
 

package/editors/textEditor/textEditor.mjs

@@ -305,19 +305,12 @@ export class TextEditor extends BaseEditor {
     this.TEXTAREA.style.fontSize = cellComputedStyle.fontSize;
     this.TEXTAREA.style.fontFamily = cellComputedStyle.fontFamily;
     this.TEXTAREA.style.backgroundColor = this.TD.style.backgroundColor;
-    const textareaComputedStyle = this.hot.rootWindow.getComputedStyle(this.TEXTAREA);
-    const horizontalPadding = parseInt(textareaComputedStyle.paddingLeft, 10) + parseInt(textareaComputedStyle.paddingRight, 10);
-    const verticalPadding = parseInt(textareaComputedStyle.paddingTop, 10) + parseInt(textareaComputedStyle.paddingBottom, 10);
-    const finalWidth = width - horizontalPadding;
-    const finalHeight = height - verticalPadding;
-    const finalMaxWidth = maxWidth - horizontalPadding;
-    const finalMaxHeight = maxHeight - verticalPadding;
     this.autoResize.init(this.TEXTAREA, {
-      minWidth: Math.min(finalWidth, finalMaxWidth),
-      minHeight: Math.min(finalHeight, finalMaxHeight),
+      minWidth: Math.min(width, maxWidth),
+      minHeight: Math.min(height, maxHeight),
       // TEXTAREA should never be wider than visible part of the viewport (should not cover the scrollbar)
-      maxWidth: finalMaxWidth,
-      maxHeight: finalMaxHeight
+      maxWidth,
+      maxHeight
     }, true);
   }
 

package/focusManager.js

@@ -163,12 +163,11 @@ class FocusManager {
    * @returns {HTMLTextAreaElement|HTMLElement|undefined}
    */
   getRefocusElement() {
+    var _classPrivateFieldGet2;
     if (typeof _classPrivateFieldGet(_refocusElementGetter, this) === 'function') {
       return _classPrivateFieldGet(_refocusElementGetter, this).call(this);
-    } else {
-      var _classPrivateFieldGet2;
-      return (_classPrivateFieldGet2 = _classPrivateFieldGet(_hot, this).getActiveEditor()) === null || _classPrivateFieldGet2 === void 0 ? void 0 : _classPrivateFieldGet2.TEXTAREA;
     }
+    return (_classPrivateFieldGet2 = _classPrivateFieldGet(_hot, this).getActiveEditor()) === null || _classPrivateFieldGet2 === void 0 ? void 0 : _classPrivateFieldGet2.TEXTAREA;
   }
 
   /**
@@ -209,13 +208,12 @@ class FocusManager {
   refocusToEditorTextarea() {
     var _classPrivateFieldGet5;
     let delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _classPrivateFieldGet(_refocusDelay, this);
-    const refocusElement = this.getRefocusElement();
-
     // Re-focus on the editor's `TEXTAREA` element (or a predefined element) if the `imeFastEdit` option is enabled.
-    if (_classPrivateFieldGet(_hot, this).getSettings().imeFastEdit && !((_classPrivateFieldGet5 = _classPrivateFieldGet(_hot, this).getActiveEditor()) !== null && _classPrivateFieldGet5 !== void 0 && _classPrivateFieldGet5.isOpened()) && !!refocusElement) {
+    if (_classPrivateFieldGet(_hot, this).getSettings().imeFastEdit && !((_classPrivateFieldGet5 = _classPrivateFieldGet(_hot, this).getActiveEditor()) !== null && _classPrivateFieldGet5 !== void 0 && _classPrivateFieldGet5.isOpened())) {
       if (!_classPrivateFieldGet(_debouncedSelect, this).has(delay)) {
         _classPrivateFieldGet(_debouncedSelect, this).set(delay, (0, _function.debounce)(() => {
-          refocusElement.select();
+          var _this$getRefocusEleme;
+          (_this$getRefocusEleme = this.getRefocusElement()) === null || _this$getRefocusEleme === void 0 || _this$getRefocusEleme.select();
         }, delay));
       }
       _classPrivateFieldGet(_debouncedSelect, this).get(delay)();

package/focusManager.mjs

@@ -160,12 +160,11 @@ export class FocusManager {
    * @returns {HTMLTextAreaElement|HTMLElement|undefined}
    */
   getRefocusElement() {
+    var _classPrivateFieldGet2;
     if (typeof _classPrivateFieldGet(_refocusElementGetter, this) === 'function') {
       return _classPrivateFieldGet(_refocusElementGetter, this).call(this);
-    } else {
-      var _classPrivateFieldGet2;
-      return (_classPrivateFieldGet2 = _classPrivateFieldGet(_hot, this).getActiveEditor()) === null || _classPrivateFieldGet2 === void 0 ? void 0 : _classPrivateFieldGet2.TEXTAREA;
     }
+    return (_classPrivateFieldGet2 = _classPrivateFieldGet(_hot, this).getActiveEditor()) === null || _classPrivateFieldGet2 === void 0 ? void 0 : _classPrivateFieldGet2.TEXTAREA;
   }
 
   /**
@@ -206,13 +205,12 @@ export class FocusManager {
   refocusToEditorTextarea() {
     var _classPrivateFieldGet5;
     let delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _classPrivateFieldGet(_refocusDelay, this);
-    const refocusElement = this.getRefocusElement();
-
     // Re-focus on the editor's `TEXTAREA` element (or a predefined element) if the `imeFastEdit` option is enabled.
-    if (_classPrivateFieldGet(_hot, this).getSettings().imeFastEdit && !((_classPrivateFieldGet5 = _classPrivateFieldGet(_hot, this).getActiveEditor()) !== null && _classPrivateFieldGet5 !== void 0 && _classPrivateFieldGet5.isOpened()) && !!refocusElement) {
+    if (_classPrivateFieldGet(_hot, this).getSettings().imeFastEdit && !((_classPrivateFieldGet5 = _classPrivateFieldGet(_hot, this).getActiveEditor()) !== null && _classPrivateFieldGet5 !== void 0 && _classPrivateFieldGet5.isOpened())) {
       if (!_classPrivateFieldGet(_debouncedSelect, this).has(delay)) {
         _classPrivateFieldGet(_debouncedSelect, this).set(delay, debounce(() => {
-          refocusElement.select();
+          var _this$getRefocusEleme;
+          (_this$getRefocusEleme = this.getRefocusElement()) === null || _this$getRefocusEleme === void 0 || _this$getRefocusEleme.select();
         }, delay));
       }
       _classPrivateFieldGet(_debouncedSelect, this).get(delay)();

package/helpers/dom/element.js

@@ -9,6 +9,7 @@ exports.closestDown = closestDown;
 exports.empty = empty;
 exports.fastInnerHTML = fastInnerHTML;
 exports.fastInnerText = fastInnerText;
+exports.findFirstParentWithClass = findFirstParentWithClass;
 exports.getCaretPosition = getCaretPosition;
 exports.getCssTransform = getCssTransform;
 exports.getFrameElement = getFrameElement;
@@ -197,6 +198,36 @@ function closestDown(element, nodes, until) {
   return length ? matched[length - 1] : null;
 }
 
+/**
+ * Traverses up the DOM tree from the given element and finds parent elements that have a specified class name
+ * or match a provided class name regular expression.
+ *
+ * @param {HTMLElement} element - The element from which to start traversing.
+ * @param {string|RegExp} className - The class name or class name regular expression to check.
+ * @returns {{element: HTMLElement, classNames: string[]}} - Returns an object containing the matched parent element and an array of matched class names.
+ */
+function findFirstParentWithClass(element, className) {
+  const matched = {
+    element: undefined,
+    classNames: []
+  };
+  let elementToCheck = element;
+  while (elementToCheck !== null && elementToCheck !== element.ownerDocument.documentElement && !matched.element) {
+    if (typeof className === 'string' && elementToCheck.classList.contains(className)) {
+      matched.element = elementToCheck;
+      matched.classNames.push(className);
+    } else if (className instanceof RegExp) {
+      const matchingClasses = Array.from(elementToCheck.classList).filter(cls => className.test(cls));
+      if (matchingClasses.length) {
+        matched.element = elementToCheck;
+        matched.classNames.push(...matchingClasses);
+      }
+    }
+    elementToCheck = elementToCheck.parentElement;
+  }
+  return matched;
+}
+
 /**
  * Goes up the DOM tree and checks if element is child of another element.
  *
@@ -334,7 +365,7 @@ function addClass(element, className) {
  * Remove class name from an element.
  *
  * @param {HTMLElement} element An element to process.
- * @param {string|Array<string|RegExp>} className Class name as string or array of strings.
+ * @param {string|RegExp|Array<string|RegExp>} className Class name as string or array of strings.
  */
 function removeClass(element, className) {
   if (typeof className === 'string') {

package/helpers/dom/element.mjs

@@ -138,6 +138,36 @@ export function closestDown(element, nodes, until) {
   return length ? matched[length - 1] : null;
 }
 
+/**
+ * Traverses up the DOM tree from the given element and finds parent elements that have a specified class name
+ * or match a provided class name regular expression.
+ *
+ * @param {HTMLElement} element - The element from which to start traversing.
+ * @param {string|RegExp} className - The class name or class name regular expression to check.
+ * @returns {{element: HTMLElement, classNames: string[]}} - Returns an object containing the matched parent element and an array of matched class names.
+ */
+export function findFirstParentWithClass(element, className) {
+  const matched = {
+    element: undefined,
+    classNames: []
+  };
+  let elementToCheck = element;
+  while (elementToCheck !== null && elementToCheck !== element.ownerDocument.documentElement && !matched.element) {
+    if (typeof className === 'string' && elementToCheck.classList.contains(className)) {
+      matched.element = elementToCheck;
+      matched.classNames.push(className);
+    } else if (className instanceof RegExp) {
+      const matchingClasses = Array.from(elementToCheck.classList).filter(cls => className.test(cls));
+      if (matchingClasses.length) {
+        matched.element = elementToCheck;
+        matched.classNames.push(...matchingClasses);
+      }
+    }
+    elementToCheck = elementToCheck.parentElement;
+  }
+  return matched;
+}
+
 /**
  * Goes up the DOM tree and checks if element is child of another element.
  *
@@ -275,7 +305,7 @@ export function addClass(element, className) {
  * Remove class name from an element.
  *
  * @param {HTMLElement} element An element to process.
- * @param {string|Array<string|RegExp>} className Class name as string or array of strings.
+ * @param {string|RegExp|Array<string|RegExp>} className Class name as string or array of strings.
  */
 export function removeClass(element, className) {
   if (typeof className === 'string') {

package/helpers/mixed.js

@@ -134,7 +134,7 @@ const domMessages = {
 function _injectProductInfo(key, element) {
   const hasValidType = !isEmpty(key);
   const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
-  const hotVersion = "0.0.0-next-4b40c99-20241108";
+  const hotVersion = "0.0.0-next-bb36dee-20241108";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';
@@ -188,7 +188,7 @@ function _injectProductInfo(key, element) {
     });
     if (message) {
       const messageNode = document.createElement('div');
-      messageNode.className = 'hot-display-license-info';
+      messageNode.className = 'handsontable hot-display-license-info';
       messageNode.innerHTML = domMessages[domMessageState]({
         keyValidityDate,
         hotVersion

package/helpers/mixed.mjs

@@ -124,7 +124,7 @@ const domMessages = {
 export function _injectProductInfo(key, element) {
   const hasValidType = !isEmpty(key);
   const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
-  const hotVersion = "0.0.0-next-4b40c99-20241108";
+  const hotVersion = "0.0.0-next-bb36dee-20241108";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';
@@ -178,7 +178,7 @@ export function _injectProductInfo(key, element) {
     });
     if (message) {
       const messageNode = document.createElement('div');
-      messageNode.className = 'hot-display-license-info';
+      messageNode.className = 'handsontable hot-display-license-info';
       messageNode.innerHTML = domMessages[domMessageState]({
         keyValidityDate,
         hotVersion

package/helpers/themes.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getThemeClassName = getThemeClassName;
+var _element = require("./dom/element");
+/**
+ * Retrieves the theme class name from the closest parent element that matches the specified regex pattern.
+ *
+ * @param {HTMLElement} rootElement - The root element from which to start searching for the theme class.
+ * @returns {string} - The theme class name regex.
+ */
+function getThemeClassName(rootElement) {
+  const {
+    classNames
+  } = (0, _element.findFirstParentWithClass)(rootElement, /ht-theme-[a-zA-Z0-9_-]+/);
+  return classNames.pop();
+}

package/helpers/themes.mjs

@@ -0,0 +1,13 @@
+import { findFirstParentWithClass } from "./dom/element.mjs";
+/**
+ * Retrieves the theme class name from the closest parent element that matches the specified regex pattern.
+ *
+ * @param {HTMLElement} rootElement - The root element from which to start searching for the theme class.
+ * @returns {string} - The theme class name regex.
+ */
+export function getThemeClassName(rootElement) {
+  const {
+    classNames
+  } = findFirstParentWithClass(rootElement, /ht-theme-[a-zA-Z0-9_-]+/);
+  return classNames.pop();
+}

package/package.json

@@ -10,7 +10,7 @@
     "url": "https://github.com/handsontable/handsontable/issues"
   },
   "author": "Handsoncode <hello@handsontable.com>",
-  "version": "0.0.0-next-4b40c99-20241108",
+  "version": "0.0.0-next-bb36dee-20241108",
   "main": "index",
   "module": "index.mjs",
   "jsnext:main": "index.mjs",
@@ -48,7 +48,6 @@
     "@babel/register": "^7.8.3",
     "@babel/runtime": "^7.11.2",
     "@babel/types": "^7.12.12",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.0.4",
     "babel-plugin-forbidden-imports": "^0.1.2",
@@ -92,8 +91,10 @@
     "string-replace-loader": "^3.1.0",
     "stylelint": "^16.3.1",
     "typescript": "3.8.2",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
     "webpack": "^5.88.1",
-    "webpack-cli": "^5.1.4"
+    "webpack-cli": "^5.1.4",
+    "webpack-remove-empty-scripts": "^1.0.4"
   },
   "optionalDependencies": {
     "hyperformula": "^2.6.2"
@@ -770,6 +771,12 @@
     "./dist/languages/zh-CN.min.js": "./dist/languages/zh-CN.min.js",
     "./dist/languages/zh-TW.js": "./dist/languages/zh-TW.js",
     "./dist/languages/zh-TW.min.js": "./dist/languages/zh-TW.min.js",
+    "./styles/handsontable.css": "./styles/handsontable.css",
+    "./styles/handsontable.min.css": "./styles/handsontable.min.css",
+    "./styles/ht-theme-horizon.css": "./styles/ht-theme-horizon.css",
+    "./styles/ht-theme-horizon.min.css": "./styles/ht-theme-horizon.min.css",
+    "./styles/ht-theme-main.css": "./styles/ht-theme-main.css",
+    "./styles/ht-theme-main.min.css": "./styles/ht-theme-main.min.css",
     ".": {
       "types": "./index.d.ts",
       "import": "./index.mjs",

package/plugins/comments/commentEditor.js

@@ -241,6 +241,15 @@ class CommentEditor {
     return _classPrivateFieldGet(_editor, this).querySelector(`.${CommentEditor.CLASS_INPUT}`);
   }
 
+  /**
+   * Get the editor element.
+   *
+   * @returns {HTMLElement} The editor element.
+   */
+  getEditorElement() {
+    return _classPrivateFieldGet(_editor, this);
+  }
+
   /**
    * Destroy the comments editor.
    */

package/plugins/comments/commentEditor.mjs

@@ -237,6 +237,15 @@ class CommentEditor {
     return _classPrivateFieldGet(_editor, this).querySelector(`.${CommentEditor.CLASS_INPUT}`);
   }
 
+  /**
+   * Get the editor element.
+   *
+   * @returns {HTMLElement} The editor element.
+   */
+  getEditorElement() {
+    return _classPrivateFieldGet(_editor, this);
+  }
+
   /**
    * Destroy the comments editor.
    */