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

package/plugins/comments/comments.js

@@ -234,6 +234,7 @@ class Comments extends _base.BasePlugin {
     this.addHook('afterScroll', () => _assertClassBrand(_Comments_brand, this, _onAfterScroll).call(this));
     this.addHook('afterBeginEditing', () => this.hide());
     this.addHook('afterDocumentKeyDown', event => _assertClassBrand(_Comments_brand, this, _onAfterDocumentKeyDown).call(this, event));
+    this.addHook('afterSetTheme', () => _assertClassBrand(_Comments_brand, this, _updateEditorThemeClassName).call(this));
     _classPrivateFieldGet(_displaySwitch, this).addLocalHook('hide', () => this.hide());
     _classPrivateFieldGet(_displaySwitch, this).addLocalHook('show', (row, col) => this.showAtCell(row, col));
     this.registerShortcuts();
@@ -788,4 +789,12 @@ function _onAfterScroll() {
   if (!_classPrivateFieldGet(_preventEditorHiding, this)) {
     this.hide();
   }
+}
+/**
+ * Updates the editor theme class name.
+ */
+function _updateEditorThemeClassName() {
+  const editorElement = _classPrivateFieldGet(_editor, this).getEditorElement();
+  (0, _element.removeClass)(editorElement, /ht-theme-.*/g);
+  (0, _element.addClass)(editorElement, this.hot.getCurrentThemeName());
 }

package/plugins/comments/comments.mjs

@@ -9,7 +9,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
 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 { addClass, closest, isChildOf, hasClass, outerHeight } from "../../helpers/dom/element.mjs";
+import { addClass, removeClass, closest, isChildOf, hasClass, outerHeight } from "../../helpers/dom/element.mjs";
 import { stopImmediatePropagation } from "../../helpers/dom/event.mjs";
 import { deepClone, deepExtend } from "../../helpers/object.mjs";
 import { BasePlugin } from "../base/index.mjs";
@@ -230,6 +230,7 @@ export class Comments extends BasePlugin {
     this.addHook('afterScroll', () => _assertClassBrand(_Comments_brand, this, _onAfterScroll).call(this));
     this.addHook('afterBeginEditing', () => this.hide());
     this.addHook('afterDocumentKeyDown', event => _assertClassBrand(_Comments_brand, this, _onAfterDocumentKeyDown).call(this, event));
+    this.addHook('afterSetTheme', () => _assertClassBrand(_Comments_brand, this, _updateEditorThemeClassName).call(this));
     _classPrivateFieldGet(_displaySwitch, this).addLocalHook('hide', () => this.hide());
     _classPrivateFieldGet(_displaySwitch, this).addLocalHook('show', (row, col) => this.showAtCell(row, col));
     this.registerShortcuts();
@@ -783,4 +784,12 @@ function _onAfterScroll() {
   if (!_classPrivateFieldGet(_preventEditorHiding, this)) {
     this.hide();
   }
+}
+/**
+ * Updates the editor theme class name.
+ */
+function _updateEditorThemeClassName() {
+  const editorElement = _classPrivateFieldGet(_editor, this).getEditorElement();
+  removeClass(editorElement, /ht-theme-.*/g);
+  addClass(editorElement, this.hot.getCurrentThemeName());
 }

package/plugins/contextMenu/contextMenu.d.ts

@@ -49,7 +49,8 @@ export interface SubmenuItemConfig extends Omit<MenuItemConfig, "key"> {
 
 export interface DetailedSettings {
   callback?: (key: string, selection: Selection[], clickEvent: MouseEvent) => void;
-  items: PredefinedMenuItemKey[] | MenuConfig;
+  uiContainer?: HTMLElement,
+  items?: PredefinedMenuItemKey[] | MenuConfig;
 }
 
 export type Settings = boolean | PredefinedMenuItemKey[] | DetailedSettings;

package/plugins/contextMenu/menu/menu.js

@@ -162,6 +162,10 @@ class Menu {
         return _this.parentMenu.runLocalHooks('afterSelectionChange', ...args);
       });
     }
+    this.hot.addHook('afterSetTheme', themeName => {
+      var _this$hotMenu;
+      (_this$hotMenu = this.hotMenu) === null || _this$hotMenu === void 0 || _this$hotMenu.useTheme(themeName);
+    });
   }
 
   /**
@@ -286,6 +290,7 @@ class Menu {
       disableVisualSelection: 'area',
       layoutDirection: this.hot.isRtl() ? 'rtl' : 'ltr',
       ariaTags: false,
+      themeName: this.hot.getCurrentThemeName(),
       beforeOnCellMouseOver: (event, coords) => {
         _classPrivateFieldGet(_navigator, this).setCurrentPage(coords.row);
       },
@@ -579,10 +584,8 @@ class Menu {
       const currentRowHeight = itemCell ? (0, _element.outerHeight)(this.hotMenu.getCell(index, 0)) : 0;
       return accumulator + (value.name === _predefinedItems.SEPARATOR ? 1 : currentRowHeight);
     }, 0);
-
-    // Additional 3px to menu's size because of additional border around its `table.htCore`.
-    holderStyle.width = `${currentHiderWidth + 3}px`;
-    holderStyle.height = `${realHeight + 3}px`;
+    holderStyle.width = `${currentHiderWidth}px`;
+    holderStyle.height = `${realHeight}px`;
     hiderStyle.height = holderStyle.height;
   }
 

package/plugins/contextMenu/menu/menu.mjs

@@ -158,6 +158,10 @@ export class Menu {
         return _this.parentMenu.runLocalHooks('afterSelectionChange', ...args);
       });
     }
+    this.hot.addHook('afterSetTheme', themeName => {
+      var _this$hotMenu;
+      (_this$hotMenu = this.hotMenu) === null || _this$hotMenu === void 0 || _this$hotMenu.useTheme(themeName);
+    });
   }
 
   /**
@@ -282,6 +286,7 @@ export class Menu {
       disableVisualSelection: 'area',
       layoutDirection: this.hot.isRtl() ? 'rtl' : 'ltr',
       ariaTags: false,
+      themeName: this.hot.getCurrentThemeName(),
       beforeOnCellMouseOver: (event, coords) => {
         _classPrivateFieldGet(_navigator, this).setCurrentPage(coords.row);
       },
@@ -575,10 +580,8 @@ export class Menu {
       const currentRowHeight = itemCell ? outerHeight(this.hotMenu.getCell(index, 0)) : 0;
       return accumulator + (value.name === SEPARATOR ? 1 : currentRowHeight);
     }, 0);
-
-    // Additional 3px to menu's size because of additional border around its `table.htCore`.
-    holderStyle.width = `${currentHiderWidth + 3}px`;
-    holderStyle.height = `${realHeight + 3}px`;
+    holderStyle.width = `${currentHiderWidth}px`;
+    holderStyle.height = `${realHeight}px`;
     hiderStyle.height = holderStyle.height;
   }
 

package/plugins/copyPaste/copyPaste.d.ts

@@ -9,6 +9,7 @@ export interface DetailedSettings {
   copyColumnHeaders?: boolean;
   copyColumnGroupHeaders?: boolean;
   copyColumnHeadersOnly?: boolean;
+  uiContainer?: HTMLElement;
 }
 
 export type Settings = boolean | DetailedSettings;

package/plugins/dropdownMenu/dropdownMenu.d.ts

@@ -8,7 +8,8 @@ export interface SeparatorObject {
 
 export interface DetailedSettings {
   callback?: (key: string, selection: Selection[], clickEvent: MouseEvent) => void;
-  items: PredefinedMenuItemKey[] | MenuConfig;
+  uiContainer?: HTMLElement,
+  items?: PredefinedMenuItemKey[] | MenuConfig;
 }
 
 export type Settings = boolean | PredefinedMenuItemKey[] | DetailedSettings;

package/plugins/filters/ui/multipleSelect.js

@@ -265,9 +265,13 @@ class MultipleSelectUI extends _base.BaseUI {
           row: 1,
           col: 0
         },
+        themeName: this.hot.getCurrentThemeName(),
         layoutDirection: this.hot.isRtl() ? 'rtl' : 'ltr'
       }));
       _classPrivateFieldGet(_itemsBox, this).init();
+      this.hot.addHook('afterSetTheme', () => {
+        _classPrivateFieldGet(_itemsBox, this).useTheme(this.hot.getCurrentThemeName());
+      });
       const shortcutManager = _classPrivateFieldGet(_itemsBox, this).getShortcutManager();
       const gridContext = shortcutManager.getContext('grid');
       gridContext.removeShortcutsByKeys(['Tab']);

package/plugins/filters/ui/multipleSelect.mjs

@@ -260,9 +260,13 @@ export class MultipleSelectUI extends BaseUI {
           row: 1,
           col: 0
         },
+        themeName: this.hot.getCurrentThemeName(),
         layoutDirection: this.hot.isRtl() ? 'rtl' : 'ltr'
       }));
       _classPrivateFieldGet(_itemsBox, this).init();
+      this.hot.addHook('afterSetTheme', () => {
+        _classPrivateFieldGet(_itemsBox, this).useTheme(this.hot.getCurrentThemeName());
+      });
       const shortcutManager = _classPrivateFieldGet(_itemsBox, this).getShortcutManager();
       const gridContext = shortcutManager.getContext('grid');
       gridContext.removeShortcutsByKeys(['Tab']);

package/plugins/manualRowMove/manualRowMove.js

@@ -319,7 +319,7 @@ class ManualRowMove extends _base.BasePlugin {
     for (let visualRowIndex = fromRow; visualRowIndex <= toRow; visualRowIndex++) {
       const renderableIndex = rowMapper.getRenderableFromVisualIndex(visualRowIndex);
       if (renderableIndex !== null) {
-        rowsHeight += this.hot.view._wt.wtTable.getRowHeight(renderableIndex) || 23;
+        rowsHeight += this.hot.view._wt.wtTable.getRowHeight(renderableIndex) || this.hot.view.getDefaultRowHeight();
       }
     }
     return rowsHeight;

package/plugins/manualRowMove/manualRowMove.mjs

@@ -315,7 +315,7 @@ export class ManualRowMove extends BasePlugin {
     for (let visualRowIndex = fromRow; visualRowIndex <= toRow; visualRowIndex++) {
       const renderableIndex = rowMapper.getRenderableFromVisualIndex(visualRowIndex);
       if (renderableIndex !== null) {
-        rowsHeight += this.hot.view._wt.wtTable.getRowHeight(renderableIndex) || 23;
+        rowsHeight += this.hot.view._wt.wtTable.getRowHeight(renderableIndex) || this.hot.view.getDefaultRowHeight();
       }
     }
     return rowsHeight;

package/plugins/manualRowResize/manualRowResize.js

@@ -10,7 +10,6 @@ var _element = require("../../helpers/dom/element");
 var _array = require("../../helpers/array");
 var _number = require("../../helpers/number");
 var _translations = require("../../translations");
-var _src = require("../../3rdparty/walkontable/src");
 function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
 function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
 function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
@@ -229,7 +228,7 @@ class ManualRowResize extends _base.BasePlugin {
    */
   setManualSize(row, height) {
     const physicalRow = this.hot.toPhysicalRow(row);
-    const newHeight = Math.max(height, _src.DEFAULT_ROW_HEIGHT);
+    const newHeight = Math.max(height, this.hot.view.getDefaultRowHeight());
     _classPrivateFieldGet(_rowHeightsMap, this).setValueAtIndex(physicalRow, newHeight);
     return newHeight;
   }

package/plugins/manualRowResize/manualRowResize.mjs

@@ -12,8 +12,7 @@ import { BasePlugin } from "../base/index.mjs";
 import { addClass, closest, hasClass, removeClass, outerWidth, isDetached } from "../../helpers/dom/element.mjs";
 import { arrayEach } from "../../helpers/array.mjs";
 import { rangeEach } from "../../helpers/number.mjs";
-import { PhysicalIndexToValueMap as IndexToValueMap } from "../../translations/index.mjs";
-import { DEFAULT_ROW_HEIGHT } from "../../3rdparty/walkontable/src/index.mjs"; // Developer note! Whenever you make a change in this file, make an analogous change in manualColumnResize.js
+import { PhysicalIndexToValueMap as IndexToValueMap } from "../../translations/index.mjs"; // Developer note! Whenever you make a change in this file, make an analogous change in manualColumnResize.js
 export const PLUGIN_KEY = 'manualRowResize';
 export const PLUGIN_PRIORITY = 30;
 const PERSISTENT_STATE_KEY = 'manualRowHeights';
@@ -224,7 +223,7 @@ export class ManualRowResize extends BasePlugin {
    */
   setManualSize(row, height) {
     const physicalRow = this.hot.toPhysicalRow(row);
-    const newHeight = Math.max(height, DEFAULT_ROW_HEIGHT);
+    const newHeight = Math.max(height, this.hot.view.getDefaultRowHeight());
     _classPrivateFieldGet(_rowHeightsMap, this).setValueAtIndex(physicalRow, newHeight);
     return newHeight;
   }

package/plugins/mergeCells/mergeCells.js

@@ -1496,7 +1496,7 @@ function _onModifyRowHeightByOverlayName(height, row, overlayType) {
  * @returns {number}
  */
 function _sumCellsHeights(row, rowspan) {
-  const defaultHeight = this.hot.view._wt.wtSettings.getSettingPure('defaultRowHeight');
+  const defaultHeight = this.hot.view.getDefaultRowHeight();
   const autoRowSizePlugin = this.hot.getPlugin('autoRowSize');
   let height = 0;
   for (let i = row; i < row + rowspan; i++) {

package/plugins/mergeCells/mergeCells.mjs

@@ -1491,7 +1491,7 @@ function _onModifyRowHeightByOverlayName(height, row, overlayType) {
  * @returns {number}
  */
 function _sumCellsHeights(row, rowspan) {
-  const defaultHeight = this.hot.view._wt.wtSettings.getSettingPure('defaultRowHeight');
+  const defaultHeight = this.hot.view.getDefaultRowHeight();
   const autoRowSizePlugin = this.hot.getPlugin('autoRowSize');
   let height = 0;
   for (let i = row; i < row + rowspan; i++) {

package/plugins/nestedRows/ui/headers.js

@@ -125,7 +125,13 @@ class HeadersUI extends _base.default {
     if (!deepestLevelIndex) {
       deepestLevelIndex = this.dataManager.cache.levelCount;
     }
-    this.rowHeaderWidthCache = Math.max(50, 11 + 10 * deepestLevelIndex + 25);
+    const stylesHandler = this.hot.view.getStylesHandler();
+    let completeVerticalPadding = 11;
+    if (!stylesHandler.isClassicTheme()) {
+      const verticalPadding = stylesHandler.getCSSVariableValue('cell-horizontal-padding');
+      completeVerticalPadding = verticalPadding * 2;
+    }
+    this.rowHeaderWidthCache = Math.max(50, completeVerticalPadding + 10 * deepestLevelIndex + 25);
     this.hot.render();
   }
 }

package/plugins/nestedRows/ui/headers.mjs

@@ -121,7 +121,13 @@ class HeadersUI extends BaseUI {
     if (!deepestLevelIndex) {
       deepestLevelIndex = this.dataManager.cache.levelCount;
     }
-    this.rowHeaderWidthCache = Math.max(50, 11 + 10 * deepestLevelIndex + 25);
+    const stylesHandler = this.hot.view.getStylesHandler();
+    let completeVerticalPadding = 11;
+    if (!stylesHandler.isClassicTheme()) {
+      const verticalPadding = stylesHandler.getCSSVariableValue('cell-horizontal-padding');
+      completeVerticalPadding = verticalPadding * 2;
+    }
+    this.rowHeaderWidthCache = Math.max(50, completeVerticalPadding + 10 * deepestLevelIndex + 25);
     this.hot.render();
   }
 }

package/plugins/stretchColumns/calculator.js

@@ -127,11 +127,12 @@ function _willVerticalScrollAppear() {
   }
   const viewportHeight = view.getViewportHeight();
   const totalRows = _classPrivateFieldGet(_hot, this).countRows();
+  const defaultRowHeight = view.getStylesHandler().getDefaultRowHeight();
   let totalHeight = 0;
   let hasVerticalScroll = false;
   for (let row = 0; row < totalRows; row++) {
     var _classPrivateFieldGet2;
-    totalHeight += ((_classPrivateFieldGet2 = _classPrivateFieldGet(_hot, this).getRowHeight(row)) !== null && _classPrivateFieldGet2 !== void 0 ? _classPrivateFieldGet2 : _src.DEFAULT_ROW_HEIGHT) + (row === 0 ? 1 : 0);
+    totalHeight += ((_classPrivateFieldGet2 = _classPrivateFieldGet(_hot, this).getRowHeight(row)) !== null && _classPrivateFieldGet2 !== void 0 ? _classPrivateFieldGet2 : defaultRowHeight) + (row === 0 ? 1 : 0);
     if (totalHeight > viewportHeight) {
       hasVerticalScroll = true;
       break;

package/plugins/stretchColumns/calculator.mjs

@@ -7,7 +7,7 @@ function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("C
 function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
 function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
 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 { DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_HEIGHT } from "../../3rdparty/walkontable/src/index.mjs";
+import { DEFAULT_COLUMN_WIDTH } from "../../3rdparty/walkontable/src/index.mjs";
 import { getScrollbarWidth } from "../../helpers/dom/element.mjs";
 import { StretchAllStrategy } from "./strategies/all.mjs";
 import { StretchLastStrategy } from "./strategies/last.mjs";
@@ -123,11 +123,12 @@ function _willVerticalScrollAppear() {
   }
   const viewportHeight = view.getViewportHeight();
   const totalRows = _classPrivateFieldGet(_hot, this).countRows();
+  const defaultRowHeight = view.getStylesHandler().getDefaultRowHeight();
   let totalHeight = 0;
   let hasVerticalScroll = false;
   for (let row = 0; row < totalRows; row++) {
     var _classPrivateFieldGet2;
-    totalHeight += ((_classPrivateFieldGet2 = _classPrivateFieldGet(_hot, this).getRowHeight(row)) !== null && _classPrivateFieldGet2 !== void 0 ? _classPrivateFieldGet2 : DEFAULT_ROW_HEIGHT) + (row === 0 ? 1 : 0);
+    totalHeight += ((_classPrivateFieldGet2 = _classPrivateFieldGet(_hot, this).getRowHeight(row)) !== null && _classPrivateFieldGet2 !== void 0 ? _classPrivateFieldGet2 : defaultRowHeight) + (row === 0 ? 1 : 0);
     if (totalHeight > viewportHeight) {
       hasVerticalScroll = true;
       break;

package/settings.d.ts

@@ -214,6 +214,7 @@ export interface GridSettings extends Events {
   strict?: boolean;
   tableClassName?: string | string[];
   tabMoves?: CellCoords | SimpleCellCoords | ((event: KeyboardEvent) => CellCoords | SimpleCellCoords);
+  themeName?: string;
   title?: string;
   trimDropdown?: boolean;
   trimRows?: TrimRowsSettings;