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

package/core.js

@@ -27,6 +27,7 @@ var _object = require("./helpers/object");
 var _focusManager = require("./focusManager");
 var _array = require("./helpers/array");
 var _parseTable = require("./utils/parseTable");
+var _staticRegister = require("./utils/staticRegister");
 var _registry = require("./plugins/registry");
 var _registry2 = require("./renderers/registry");
 var _registry3 = require("./editors/registry");
@@ -49,6 +50,9 @@ var _uniqueMap = require("./utils/dataStructures/uniqueMap");
 var _shortcuts = require("./shortcuts");
 var _shortcutContexts = require("./shortcutContexts");
 var _themes = require("./helpers/themes");
+var _stylesHandler = require("./utils/stylesHandler");
+var _console = require("./helpers/console");
+var _rangeToRenderableMapper = require("./core/coordsMapper/rangeToRenderableMapper");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 let activeGuid = null;
 
@@ -85,6 +89,12 @@ const deprecationWarns = new Set();
  * by using React's `ref` feature (read more on the [Instance methods](@/guides/getting-started/react-methods/react-methods.md) page).
  * :::
  *
+ * ::: only-for angular
+ * To use these methods, associate a Handsontable instance with your instance
+ * of the [`HotTable` component](@/guides/getting-started/installation/installation.md#5-use-the-hottable-component),
+ * by using `@ViewChild` decorator (read more on the [Instance access](@/guides/getting-started/angular-hot-instance/angular-hot-instance.md) page).
+ * :::
+ *
  * ## How to call a method
  *
  * ::: only-for javascript
@@ -115,11 +125,44 @@ const deprecationWarns = new Set();
  * ```
  * :::
  *
- * @param {HTMLElement} rootElement The element to which the Handsontable instance is injected.
+ * ::: only-for angular
+ * ```ts
+ * import { Component, ViewChild, AfterViewInit } from "@angular/core";
+ * import {
+ *   GridSettings,
+ *   HotTableComponent,
+ *   HotTableModule,
+ * } from "@handsontable/angular-wrapper";
+ *
+ * `@Component`({
+ *   standalone: true,
+ *   imports: [HotTableModule],
+ *   template: ` <div>
+ *     <hot-table themeName="ht-theme-main" [settings]="gridSettings" />
+ *   </div>`,
+ * })
+ * export class ExampleComponent implements AfterViewInit {
+ *   `@ViewChild`(HotTableComponent, { static: false })
+ *   readonly hotTable!: HotTableComponent;
+ *
+ *   readonly gridSettings = <GridSettings>{
+ *     columns: [{}],
+ *   };
+ *
+ *   ngAfterViewInit(): void {
+ *     // Access the Handsontable instance
+ *     // Call a method
+ *     this.hotTable?.hotInstance?.setDataAtCell(0, 0, "new value");
+ *   }
+ * }
+ * ```
+ * :::
+ *
+ * @param {HTMLElement} rootContainer The element to which the Handsontable instance is injected.
  * @param {object} userSettings The user defined options.
  * @param {boolean} [rootInstanceSymbol=false] Indicates if the instance is root of all later instances created.
  */
-function Core(rootElement, userSettings) {
+function Core(rootContainer, userSettings) {
   var _userSettings$layoutD,
     _this = this;
   let rootInstanceSymbol = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
@@ -136,6 +179,30 @@ function Core(rootElement, userSettings) {
     (0, _rootInstance.registerAsRootInstance)(this);
   }
 
+  /**
+   * Reference to the root container.
+   *
+   * @private
+   * @type {HTMLElement}
+   */
+  this.rootContainer = rootContainer;
+
+  /**
+   * Reference to the wrapper element.
+   *
+   * @private
+   * @type {HTMLElement}
+   */
+  this.rootWrapperElement = undefined;
+
+  /**
+   * Reference to the portal element.
+   *
+   * @private
+   * @type {HTMLElement}
+   */
+  this.rootPortalElement = undefined;
+
   // TODO: check if references to DOM elements should be move to UI layer (Walkontable)
   /**
    * Reference to the container element.
@@ -143,14 +210,16 @@ function Core(rootElement, userSettings) {
    * @private
    * @type {HTMLElement}
    */
-  this.rootElement = rootElement;
+  this.rootElement = (0, _rootInstance.isRootInstance)(this) ? rootContainer.ownerDocument.createElement('div') : rootContainer;
+
   /**
    * The nearest document over container.
    *
    * @private
    * @type {Document}
    */
-  this.rootDocument = rootElement.ownerDocument;
+  this.rootDocument = rootContainer.ownerDocument;
+
   /**
    * Window object over container's document.
    *
@@ -158,6 +227,17 @@ function Core(rootElement, userSettings) {
    * @type {Window}
    */
   this.rootWindow = this.rootDocument.defaultView;
+  if ((0, _rootInstance.isRootInstance)(this)) {
+    this.rootWrapperElement = this.rootDocument.createElement('div');
+    this.rootPortalElement = this.rootDocument.createElement('div');
+    (0, _element.addClass)(this.rootElement, 'ht-wrapper');
+    (0, _element.addClass)(this.rootWrapperElement, 'ht-root-wrapper');
+    this.rootWrapperElement.appendChild(this.rootElement);
+    this.rootContainer.appendChild(this.rootWrapperElement);
+    (0, _element.addClass)(this.rootPortalElement, 'ht-portal');
+    this.rootDocument.body.appendChild(this.rootPortalElement);
+  }
+
   /**
    * A boolean to tell if the Handsontable has been fully destroyed. This is set to `true`
    * after `afterDestroy` hook is called.
@@ -167,6 +247,7 @@ function Core(rootElement, userSettings) {
    * @type {boolean}
    */
   this.isDestroyed = false;
+
   /**
    * The counter determines how many times the render suspending was called. It allows
    * tracking the nested suspending calls. For each render suspend resuming call the
@@ -177,6 +258,7 @@ function Core(rootElement, userSettings) {
    * @type {number}
    */
   this.renderSuspendedCounter = 0;
+
   /**
    * The counter determines how many times the execution suspending was called. It allows
    * tracking the nested suspending calls. For each execution suspend resuming call the
@@ -226,6 +308,14 @@ function Core(rootElement, userSettings) {
   this.getDirectionFactor = function () {
     return instance.isLtr() ? 1 : -1;
   };
+
+  /**
+   * Styles handler instance.
+   *
+   * @private
+   * @type {StylesHandler}
+   */
+  this.stylesHandler = new _stylesHandler.StylesHandler(instance.rootElement, instance.rootDocument);
   userSettings.language = (0, _registry5.getValidLanguageCode)(userSettings.language);
   const settingsWithoutHooks = Object.fromEntries(Object.entries(userSettings).filter(_ref => {
     let [key] = _ref;
@@ -236,10 +326,9 @@ function Core(rootElement, userSettings) {
   const globalMeta = metaManager.getGlobalMeta();
   const pluginsRegistry = (0, _uniqueMap.createUniqueMap)();
   this.container = this.rootDocument.createElement('div');
-  rootElement.insertBefore(this.container, rootElement.firstChild);
+  this.rootElement.insertBefore(this.container, this.rootElement.firstChild);
   if ((0, _rootInstance.isRootInstance)(this)) {
-    (0, _mixed._injectProductInfo)(userSettings.licenseKey, rootElement);
-    (0, _element.addClass)(rootElement, 'ht-wrapper');
+    (0, _mixed._injectProductInfo)(userSettings.licenseKey, this.rootWrapperElement);
   }
   this.guid = `ht_${(0, _string.randomString)()}`; // this is the namespace for global events
 
@@ -253,6 +342,7 @@ function Core(rootElement, userSettings) {
    * @type {IndexMapper}
    */
   this.columnIndexMapper = new _translations.IndexMapper();
+
   /**
    * Instance of index mapper which is responsible for managing the row indexes.
    *
@@ -271,6 +361,11 @@ function Core(rootElement, userSettings) {
     instance.runHooks('beforeCompositionStart', event);
   });
   dataSource = new _dataSource.default(instance);
+  const moduleRegisterer = (0, _staticRegister.staticRegister)(this.guid);
+  moduleRegisterer.register('cellRangeMapper', new _rangeToRenderableMapper.CellRangeToRenderableMapper({
+    rowIndexMapper: this.rowIndexMapper,
+    columnIndexMapper: this.columnIndexMapper
+  }));
   if (!this.rootElement.id || this.rootElement.id.substring(0, 3) === 'ht_') {
     this.rootElement.id = this.guid; // if root element does not have an id, assign a random id
   }
@@ -386,11 +481,13 @@ function Core(rootElement, userSettings) {
     } else {
       (0, _element.removeClass)(this.rootElement, ['ht__selection--rows', 'ht__selection--columns']);
     }
-    if (selection.getSelectionSource() !== 'shift') {
+    if (!['shift', 'refresh'].includes(selection.getSelectionSource())) {
       editorManager.closeEditor(null);
     }
-    instance.view.render();
-    editorManager.prepareEditor();
+    if (selection.getSelectionSource() !== 'refresh') {
+      instance.view.render();
+      editorManager.prepareEditor();
+    }
   });
   this.selection.addLocalHook('beforeSetFocus', cellCoords => {
     this.runHooks('beforeSelectionFocusSet', cellCoords.row, cellCoords.col);
@@ -413,6 +510,10 @@ function Core(rootElement, userSettings) {
     } = cellRanges[selectionLayerLevel];
     this.runHooks('afterSelectionEnd', from.row, from.col, to.row, to.col, selectionLayerLevel);
     this.runHooks('afterSelectionEndByProp', from.row, instance.colToProp(from.col), to.row, instance.colToProp(to.col), selectionLayerLevel);
+    if (selection.getSelectionSource() === 'refresh') {
+      instance.view.render();
+      editorManager.prepareEditor();
+    }
   });
   this.selection.addLocalHook('afterIsMultipleSelection', isMultiple => {
     const changedIsMultiple = this.runHooks('afterIsMultipleSelection', isMultiple.value);
@@ -472,33 +573,33 @@ function Core(rootElement, userSettings) {
     }
     return _this.runHooks('afterModifyTransformStart', ...args);
   }).addLocalHook('beforeModifyTransformFocus', function () {
-    for (var _len10 = arguments.length, args = new Array(_len10), _key10 = 0; _key10 < _len10; _key10++) {
-      args[_key10] = arguments[_key10];
+    for (var _len0 = arguments.length, args = new Array(_len0), _key0 = 0; _key0 < _len0; _key0++) {
+      args[_key0] = arguments[_key0];
     }
     return _this.runHooks('modifyTransformFocus', ...args);
   }).addLocalHook('afterModifyTransformFocus', function () {
-    for (var _len11 = arguments.length, args = new Array(_len11), _key11 = 0; _key11 < _len11; _key11++) {
-      args[_key11] = arguments[_key11];
+    for (var _len1 = arguments.length, args = new Array(_len1), _key1 = 0; _key1 < _len1; _key1++) {
+      args[_key1] = arguments[_key1];
     }
     return _this.runHooks('afterModifyTransformFocus', ...args);
   }).addLocalHook('beforeModifyTransformEnd', function () {
-    for (var _len12 = arguments.length, args = new Array(_len12), _key12 = 0; _key12 < _len12; _key12++) {
-      args[_key12] = arguments[_key12];
+    for (var _len10 = arguments.length, args = new Array(_len10), _key10 = 0; _key10 < _len10; _key10++) {
+      args[_key10] = arguments[_key10];
     }
     return _this.runHooks('modifyTransformEnd', ...args);
   }).addLocalHook('afterModifyTransformEnd', function () {
-    for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
-      args[_key13] = arguments[_key13];
+    for (var _len11 = arguments.length, args = new Array(_len11), _key11 = 0; _key11 < _len11; _key11++) {
+      args[_key11] = arguments[_key11];
     }
     return _this.runHooks('afterModifyTransformEnd', ...args);
   }).addLocalHook('beforeRowWrap', function () {
-    for (var _len14 = arguments.length, args = new Array(_len14), _key14 = 0; _key14 < _len14; _key14++) {
-      args[_key14] = arguments[_key14];
+    for (var _len12 = arguments.length, args = new Array(_len12), _key12 = 0; _key12 < _len12; _key12++) {
+      args[_key12] = arguments[_key12];
     }
     return _this.runHooks('beforeRowWrap', ...args);
   }).addLocalHook('beforeColumnWrap', function () {
-    for (var _len15 = arguments.length, args = new Array(_len15), _key15 = 0; _key15 < _len15; _key15++) {
-      args[_key15] = arguments[_key15];
+    for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
+      args[_key13] = arguments[_key13];
     }
     return _this.runHooks('beforeColumnWrap', ...args);
   }).addLocalHook('insertRowRequire', totalRows => this.alter('insert_row_above', totalRows, 1, 'auto')).addLocalHook('insertColRequire', totalCols => this.alter('insert_col_start', totalCols, 1, 'auto'));
@@ -644,6 +745,9 @@ function Core(rootElement, userSettings) {
               if (totalRows === 0) {
                 selection.deselect();
               } else if (source === 'ContextMenu.removeRow') {
+                const selectionRange = selection.getSelectedRange();
+                const lastSelection = selectionRange.pop();
+                selectionRange.clear().set(lastSelection.from).current().setTo(lastSelection.to);
                 selection.refresh();
               } else {
                 selection.shiftRows(groupIndex, -groupAmount);
@@ -692,6 +796,9 @@ function Core(rootElement, userSettings) {
               if (totalColumns === 0) {
                 selection.deselect();
               } else if (source === 'ContextMenu.removeColumn') {
+                const selectionRange = selection.getSelectedRange();
+                const lastSelection = selectionRange.pop();
+                selectionRange.clear().set(lastSelection.from).current().setTo(lastSelection.to);
                 selection.refresh();
               } else {
                 selection.shiftColumns(groupIndex, -groupAmount);
@@ -1043,13 +1150,10 @@ function Core(rootElement, userSettings) {
     }
     this.updateSettings(userSettings, true);
     this.view = new _tableView.default(this);
-    const themeName = tableMeta.themeName || (0, _themes.getThemeClassName)(instance.rootElement);
+    const themeName = tableMeta.themeName || (0, _themes.getThemeClassName)(instance.rootContainer);
 
-    // Use the theme defined as a root element class or in the settings (in that order).
+    // Use the theme defined in the settings object or set as a root container class name (in that order).
     instance.useTheme(themeName);
-
-    // Add the theme class name to the license info element.
-    instance.view.addClassNameToLicenseElement(instance.getCurrentThemeName());
     editorManager = _editorManager.default.getInstance(instance, tableMeta, selection);
     viewportScroller = (0, _index.createViewportScroller)(instance);
     focusManager = new _focusManager.FocusManager(instance);
@@ -1592,8 +1696,8 @@ function Core(rootElement, userSettings) {
    * @returns {Array} Returns removed portion of columns.
    */
   this.spliceCol = function (column, index, amount) {
-    for (var _len16 = arguments.length, elements = new Array(_len16 > 3 ? _len16 - 3 : 0), _key16 = 3; _key16 < _len16; _key16++) {
-      elements[_key16 - 3] = arguments[_key16];
+    for (var _len14 = arguments.length, elements = new Array(_len14 > 3 ? _len14 - 3 : 0), _key14 = 3; _key14 < _len14; _key14++) {
+      elements[_key14 - 3] = arguments[_key14];
     }
     return datamap.spliceCol(column, index, amount, ...elements);
   };
@@ -1610,8 +1714,8 @@ function Core(rootElement, userSettings) {
    * @returns {Array} Returns removed portion of rows.
    */
   this.spliceRow = function (row, index, amount) {
-    for (var _len17 = arguments.length, elements = new Array(_len17 > 3 ? _len17 - 3 : 0), _key17 = 3; _key17 < _len17; _key17++) {
-      elements[_key17 - 3] = arguments[_key17];
+    for (var _len15 = arguments.length, elements = new Array(_len15 > 3 ? _len15 - 3 : 0), _key15 = 3; _key15 < _len15; _key15++) {
+      elements[_key15 - 3] = arguments[_key15];
     }
     return datamap.spliceRow(row, index, amount, ...elements);
   };
@@ -2428,17 +2532,9 @@ function Core(rootElement, userSettings) {
         instance.view._wt.exportSettingsAsClassNames();
         const currentThemeName = instance.getCurrentThemeName();
         const themeNameOptionExists = (0, _object.hasOwnProperty)(settings, 'themeName');
-        if (currentThemeName && themeNameOptionExists && currentThemeName !== settings.themeName) {
-          instance.view.getStylesHandler().removeClassNames();
-          instance.view.removeClassNameFromLicenseElement(currentThemeName);
+        if (themeNameOptionExists && currentThemeName !== settings.themeName) {
+          instance.useTheme(settings.themeName);
         }
-        const themeName = themeNameOptionExists && settings.themeName || (0, _themes.getThemeClassName)(instance.rootElement);
-
-        // Use the theme defined as a root element class or in the settings (in that order).
-        instance.useTheme(themeName);
-
-        // Add the theme class name to the license info element.
-        instance.view.addClassNameToLicenseElement(instance.getCurrentThemeName());
       }
       instance.runHooks('afterUpdateSettings', settings);
     }
@@ -2880,8 +2976,8 @@ function Core(rootElement, userSettings) {
         changeValue]);
       });
     }
-    (0, _array.arrayEach)(input, _ref10 => {
-      let [changeRow, changeProp, changeValue] = _ref10;
+    (0, _array.arrayEach)(input, _ref0 => {
+      let [changeRow, changeProp, changeValue] = _ref0;
       dataSource.setAtCell(changeRow, changeProp, changeValue);
     });
     if (isThereAnySetSourceListener) {
@@ -3019,8 +3115,8 @@ function Core(rootElement, userSettings) {
    */
   this.spliceCellsMeta = function (visualIndex) {
     let deleteAmount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    for (var _len18 = arguments.length, cellMetaRows = new Array(_len18 > 2 ? _len18 - 2 : 0), _key18 = 2; _key18 < _len18; _key18++) {
-      cellMetaRows[_key18 - 2] = arguments[_key18];
+    for (var _len16 = arguments.length, cellMetaRows = new Array(_len16 > 2 ? _len16 - 2 : 0), _key16 = 2; _key16 < _len16; _key16++) {
+      cellMetaRows[_key16 - 2] = arguments[_key16];
     }
     if (cellMetaRows.length > 0 && !Array.isArray(cellMetaRows[0])) {
       throw new Error('The 3rd argument (cellMetaRows) has to be passed as an array of cell meta objects array.');
@@ -3578,7 +3674,7 @@ function Core(rootElement, userSettings) {
    * @returns {number}
    */
   this._getRowHeightFromSettings = function (row) {
-    const defaultRowHeight = this.view.getDefaultRowHeight();
+    const defaultRowHeight = instance.stylesHandler.getDefaultRowHeight();
     let height = tableMeta.rowHeights;
     if (height !== undefined && height !== null) {
       switch (typeof height) {
@@ -4233,27 +4329,27 @@ function Core(rootElement, userSettings) {
     }
     dataSource = null;
     this.getShortcutManager().destroy();
+    moduleRegisterer.clear();
     metaManager.clearCache();
     foreignHotInstances.delete(this.guid);
-    if ((0, _rootInstance.isRootInstance)(instance)) {
-      const licenseInfo = this.rootDocument.querySelector('.hot-display-license-info');
-      if (licenseInfo) {
-        licenseInfo.parentNode.removeChild(licenseInfo);
-      }
-    }
-    (0, _element.empty)(instance.rootElement);
     eventManager.destroy();
     if (editorManager) {
       editorManager.destroy();
     }
+    if (instance.rootContainer) {
+      (0, _element.empty)(instance.rootContainer);
+    }
+    if (instance.rootPortalElement) {
+      instance.rootPortalElement.remove();
+    }
 
     // The plugin's `destroy` method is called as a consequence and it should handle
     // unregistration of plugin's maps. Some unregistered maps reset the cache.
     instance.batchExecution(() => {
       instance.rowIndexMapper.unregisterAll();
       instance.columnIndexMapper.unregisterAll();
-      pluginsRegistry.getItems().forEach(_ref11 => {
-        let [, plugin] = _ref11;
+      pluginsRegistry.getItems().forEach(_ref1 => {
+        let [, plugin] = _ref1;
         plugin.destroy();
       });
       pluginsRegistry.clear();
@@ -4654,8 +4750,32 @@ function Core(rootElement, userSettings) {
    * @param {string|boolean|undefined} themeName The name of the theme to use.
    */
   this.useTheme = themeName => {
-    this.view.getStylesHandler().useTheme(themeName);
-    this.runHooks('afterSetTheme', themeName, !!firstRun);
+    const isFirstRun = !!firstRun;
+    this.stylesHandler.useTheme(themeName);
+    const validThemeName = this.stylesHandler.getThemeName();
+    if ((0, _rootInstance.isRootInstance)(this)) {
+      (0, _element.removeClass)(this.rootWrapperElement, /ht-theme-.*/g);
+      (0, _element.removeClass)(this.rootPortalElement, /ht-theme-.*/g);
+      if (validThemeName) {
+        (0, _element.addClass)(this.rootWrapperElement, validThemeName);
+        (0, _element.addClass)(this.rootPortalElement, validThemeName);
+        if (!getComputedStyle(this.rootWrapperElement).getPropertyValue('--ht-line-height')) {
+          (0, _console.warn)(`The "${validThemeName}" theme is enabled, but its stylesheets are missing or not imported correctly. \
+            Import the correct CSS files in order to use that theme.`);
+        }
+      }
+    }
+    if (!isFirstRun) {
+      instance.render();
+      instance.scrollViewportTo(0, 0);
+      if ((0, _themes.getThemeClassName)(this.rootContainer)) {
+        (0, _element.removeClass)(this.rootContainer, /ht-theme-.*/g);
+        if (validThemeName) {
+          (0, _element.addClass)(this.rootContainer, validThemeName);
+        }
+      }
+    }
+    this.runHooks('afterSetTheme', validThemeName, isFirstRun);
   };
 
   /**
@@ -4667,7 +4787,31 @@ function Core(rootElement, userSettings) {
    * @returns {string|undefined} The name of the currently used theme.
    */
   this.getCurrentThemeName = () => {
-    return this.view.getStylesHandler().getThemeName();
+    return this.stylesHandler.getThemeName();
+  };
+
+  /**
+   * Gets the table's root container element height.
+   *
+   * @memberof Core#
+   * @function getTableHeight
+   * @since 16.0.0
+   * @returns {number}
+   */
+  this.getTableHeight = () => {
+    return this.rootElement.offsetHeight;
+  };
+
+  /**
+   * Gets the table's root container element width.
+   *
+   * @memberof Core#
+   * @function getTableWidth
+   * @since 16.0.0
+   * @returns {number}
+   */
+  this.getTableWidth = () => {
+    return this.rootElement.offsetWidth;
   };
 
   /**