handsontable 15.3.0 → 16.0.0-next-f486b48-20250702

package/plugins/trimRows/trimRows.js

@@ -110,6 +110,67 @@ const PLUGIN_PRIORITY = exports.PLUGIN_PRIORITY = 330;
  * hot.render();
  * ```
  * :::
+ *
+ * ::: only-for angular
+ * ```ts
+ * import { AfterViewInit, Component, ViewChild } from "@angular/core";
+ * import {
+ *   GridSettings,
+ *   HotTableModule,
+ *   HotTableComponent,
+ * } from "@handsontable/angular-wrapper";
+ *
+ * `@Component`({
+ *   selector: "app-example",
+ *   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>{
+ *     data: this.getData(),
+ *     // Hide selected rows on table initialization
+ *     trimRows: [1, 2, 5],
+ *   };
+ *
+ *   ngAfterViewInit(): void {
+ *     // Access the trimRows plugin instance
+ *     const hot = this.hotTable.hotInstance;
+ *     const trimRowsPlugin = hot.getPlugin("trimRows");
+ *
+ *     // Hide a single row
+ *     trimRowsPlugin.trimRow(1);
+ *
+ *     // Hide multiple rows
+ *     trimRowsPlugin.trimRow(1, 2, 9);
+ *
+ *     // Or as an array
+ *     trimRowsPlugin.trimRows([1, 2, 9]);
+ *
+ *     // Show a single row
+ *     trimRowsPlugin.untrimRow(1);
+ *
+ *     // Show multiple rows
+ *     trimRowsPlugin.untrimRow(1, 2, 9);
+ *
+ *     // Or as an array
+ *     trimRowsPlugin.untrimRows([1, 2, 9]);
+ *
+ *     // Re-render table to see the changes
+ *     hot.render();
+ *   }
+ *
+ *   private getData(): any[] {
+ *     // Get some data
+ *   }
+ * }
+ * ```
+ * :::
  */
 var _TrimRows_brand = /*#__PURE__*/new WeakSet();
 class TrimRows extends _base.BasePlugin {

package/plugins/trimRows/trimRows.mjs

@@ -107,6 +107,67 @@ export const PLUGIN_PRIORITY = 330;
  * hot.render();
  * ```
  * :::
+ *
+ * ::: only-for angular
+ * ```ts
+ * import { AfterViewInit, Component, ViewChild } from "@angular/core";
+ * import {
+ *   GridSettings,
+ *   HotTableModule,
+ *   HotTableComponent,
+ * } from "@handsontable/angular-wrapper";
+ *
+ * `@Component`({
+ *   selector: "app-example",
+ *   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>{
+ *     data: this.getData(),
+ *     // Hide selected rows on table initialization
+ *     trimRows: [1, 2, 5],
+ *   };
+ *
+ *   ngAfterViewInit(): void {
+ *     // Access the trimRows plugin instance
+ *     const hot = this.hotTable.hotInstance;
+ *     const trimRowsPlugin = hot.getPlugin("trimRows");
+ *
+ *     // Hide a single row
+ *     trimRowsPlugin.trimRow(1);
+ *
+ *     // Hide multiple rows
+ *     trimRowsPlugin.trimRow(1, 2, 9);
+ *
+ *     // Or as an array
+ *     trimRowsPlugin.trimRows([1, 2, 9]);
+ *
+ *     // Show a single row
+ *     trimRowsPlugin.untrimRow(1);
+ *
+ *     // Show multiple rows
+ *     trimRowsPlugin.untrimRow(1, 2, 9);
+ *
+ *     // Or as an array
+ *     trimRowsPlugin.untrimRows([1, 2, 9]);
+ *
+ *     // Re-render table to see the changes
+ *     hot.render();
+ *   }
+ *
+ *   private getData(): any[] {
+ *     // Get some data
+ *   }
+ * }
+ * ```
+ * :::
  */
 var _TrimRows_brand = /*#__PURE__*/new WeakSet();
 export class TrimRows extends BasePlugin {

package/renderers/baseRenderer/baseRenderer.js

@@ -10,6 +10,7 @@ var _a11y = require("../../helpers/a11y");
  */
 
 const RENDERER_TYPE = exports.RENDERER_TYPE = 'base';
+const TEXT_ELLIPSIS_CLASS_NAME = 'htTextEllipsis';
 
 /**
  * @param {Core} hotInstance The Handsontable instance.
@@ -54,6 +55,9 @@ function baseRenderer(hotInstance, TD, row, col, prop, value, cellProperties) {
   if (!value && cellProperties.placeholder) {
     classesToAdd.push(cellProperties.placeholderCellClassName);
   }
+  if (cellProperties.textEllipsis) {
+    classesToAdd.push(TEXT_ELLIPSIS_CLASS_NAME);
+  }
   (0, _element.removeClass)(TD, classesToRemove);
   (0, _element.addClass)(TD, classesToAdd);
   (0, _element.removeAttribute)(TD, attributesToRemove);

package/renderers/baseRenderer/baseRenderer.mjs

@@ -5,6 +5,7 @@ import "core-js/modules/es.array.push.js";
 import { addClass, removeAttribute, removeClass, setAttribute } from "../../helpers/dom/element.mjs";
 import { A11Y_INVALID, A11Y_READONLY } from "../../helpers/a11y.mjs";
 export const RENDERER_TYPE = 'base';
+const TEXT_ELLIPSIS_CLASS_NAME = 'htTextEllipsis';
 
 /**
  * @param {Core} hotInstance The Handsontable instance.
@@ -49,6 +50,9 @@ export function baseRenderer(hotInstance, TD, row, col, prop, value, cellPropert
   if (!value && cellProperties.placeholder) {
     classesToAdd.push(cellProperties.placeholderCellClassName);
   }
+  if (cellProperties.textEllipsis) {
+    classesToAdd.push(TEXT_ELLIPSIS_CLASS_NAME);
+  }
   removeClass(TD, classesToRemove);
   addClass(TD, classesToAdd);
   removeAttribute(TD, attributesToRemove);

package/renderers/registry.js

@@ -4,15 +4,14 @@ exports.__esModule = true;
 exports.getRenderer = _getItem;
 exports.registerRenderer = _register;
 require("core-js/modules/es.error.cause.js");
-var _staticRegister = _interopRequireDefault(require("../utils/staticRegister"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _staticRegister = require("../utils/staticRegister");
 const {
   register,
   getItem,
   hasItem,
   getNames,
   getValues
-} = (0, _staticRegister.default)('renderers');
+} = (0, _staticRegister.staticRegister)('renderers');
 
 /**
  * Retrieve renderer function.

package/renderers/registry.mjs

@@ -1,5 +1,5 @@
 import "core-js/modules/es.error.cause.js";
-import staticRegister from "../utils/staticRegister.mjs";
+import { staticRegister } from "../utils/staticRegister.mjs";
 const {
   register,
   getItem,

package/selection/mouseEventHandler.js

@@ -4,6 +4,9 @@ exports.__esModule = true;
 exports.handleMouseEvent = handleMouseEvent;
 exports.mouseDown = mouseDown;
 exports.mouseOver = mouseOver;
+exports.mouseUp = mouseUp;
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.map.js");
 var _event = require("./../helpers/dom/event");
 /**
  * MouseDown handler.
@@ -114,7 +117,48 @@ function mouseOver(_ref2) {
   }
   selection.markEndSource();
 }
-const handlers = new Map([['mousedown', mouseDown], ['mouseover', mouseOver], ['touchstart', mouseDown]]);
+
+/**
+ * Mouse up handler.
+ *
+ * @param {object} options The handler options.
+ * @param {boolean} options.isLeftClick Indicates that event was fired using the left mouse button.
+ * @param {Selection} options.selection The Selection class instance.
+ * @param {CellRangeToRenderableMapper} options.cellRangeMapper Mapper for converting cell ranges
+ * to renderable indexes.
+ */
+function mouseUp(_ref3) {
+  let {
+    isLeftClick,
+    selection,
+    cellRangeMapper
+  } = _ref3;
+  if (!isLeftClick || selection.settings.selectionMode !== 'multiple') {
+    return;
+  }
+  const selectionRange = selection.getSelectedRange();
+  const renderableRange = selectionRange.clone().map(range => cellRangeMapper.toRenderable(range));
+  const lastRenderableRange = renderableRange.current();
+  if (renderableRange.size() > 1 && !lastRenderableRange.isHeader() && !selection.isMultiple(lastRenderableRange)) {
+    const ranges = renderableRange.findAll(lastRenderableRange);
+
+    // if the last selection range is the same as the first one (case when the single cell
+    // is selected twice or more) remove duplicate ranges
+    if (ranges.length === renderableRange.size()) {
+      selectionRange.pop();
+      selection.refresh();
+    } else if (ranges.length > 1) {
+      selectionRange.removeLayers(ranges.map(_ref4 => {
+        let {
+          layer
+        } = _ref4;
+        return layer;
+      }));
+      selection.refresh();
+    }
+  }
+}
+const handlers = new Map([['touchstart', mouseDown], ['mousedown', mouseDown], ['mouseover', mouseOver], ['mouseup', mouseUp]]);
 
 /**
  * Mouse handler for selection functionality.
@@ -127,20 +171,11 @@ const handlers = new Map([['mousedown', mouseDown], ['mouseover', mouseOver], ['
  *                                    operation will be performed in later selection stages.
  * @param {Function} options.cellCoordsFactory The function factory for CellCoords objects.
  */
-function handleMouseEvent(event, _ref3) {
-  let {
-    coords,
-    selection,
-    controller,
-    cellCoordsFactory
-  } = _ref3;
+function handleMouseEvent(event, options) {
   handlers.get(event.type)({
-    coords,
-    selection,
-    controller,
-    cellCoordsFactory,
     isShiftKey: event.shiftKey,
     isLeftClick: (0, _event.isLeftClick)(event) || event.type === 'touchstart',
-    isRightClick: (0, _event.isRightClick)(event)
+    isRightClick: (0, _event.isRightClick)(event),
+    ...options
   });
 }

package/selection/mouseEventHandler.mjs

@@ -1,3 +1,5 @@
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.map.js";
 import { isRightClick as isRightClickEvent, isLeftClick as isLeftClickEvent } from "./../helpers/dom/event.mjs";
 /**
  * MouseDown handler.
@@ -108,7 +110,48 @@ export function mouseOver(_ref2) {
   }
   selection.markEndSource();
 }
-const handlers = new Map([['mousedown', mouseDown], ['mouseover', mouseOver], ['touchstart', mouseDown]]);
+
+/**
+ * Mouse up handler.
+ *
+ * @param {object} options The handler options.
+ * @param {boolean} options.isLeftClick Indicates that event was fired using the left mouse button.
+ * @param {Selection} options.selection The Selection class instance.
+ * @param {CellRangeToRenderableMapper} options.cellRangeMapper Mapper for converting cell ranges
+ * to renderable indexes.
+ */
+export function mouseUp(_ref3) {
+  let {
+    isLeftClick,
+    selection,
+    cellRangeMapper
+  } = _ref3;
+  if (!isLeftClick || selection.settings.selectionMode !== 'multiple') {
+    return;
+  }
+  const selectionRange = selection.getSelectedRange();
+  const renderableRange = selectionRange.clone().map(range => cellRangeMapper.toRenderable(range));
+  const lastRenderableRange = renderableRange.current();
+  if (renderableRange.size() > 1 && !lastRenderableRange.isHeader() && !selection.isMultiple(lastRenderableRange)) {
+    const ranges = renderableRange.findAll(lastRenderableRange);
+
+    // if the last selection range is the same as the first one (case when the single cell
+    // is selected twice or more) remove duplicate ranges
+    if (ranges.length === renderableRange.size()) {
+      selectionRange.pop();
+      selection.refresh();
+    } else if (ranges.length > 1) {
+      selectionRange.removeLayers(ranges.map(_ref4 => {
+        let {
+          layer
+        } = _ref4;
+        return layer;
+      }));
+      selection.refresh();
+    }
+  }
+}
+const handlers = new Map([['touchstart', mouseDown], ['mousedown', mouseDown], ['mouseover', mouseOver], ['mouseup', mouseUp]]);
 
 /**
  * Mouse handler for selection functionality.
@@ -121,20 +164,11 @@ const handlers = new Map([['mousedown', mouseDown], ['mouseover', mouseOver], ['
  *                                    operation will be performed in later selection stages.
  * @param {Function} options.cellCoordsFactory The function factory for CellCoords objects.
  */
-export function handleMouseEvent(event, _ref3) {
-  let {
-    coords,
-    selection,
-    controller,
-    cellCoordsFactory
-  } = _ref3;
+export function handleMouseEvent(event, options) {
   handlers.get(event.type)({
-    coords,
-    selection,
-    controller,
-    cellCoordsFactory,
     isShiftKey: event.shiftKey,
     isLeftClick: isLeftClickEvent(event) || event.type === 'touchstart',
-    isRightClick: isRightClickEvent(event)
+    isRightClick: isRightClickEvent(event),
+    ...options
   });
 }

package/selection/range.js

@@ -4,6 +4,9 @@ exports.__esModule = true;
 require("core-js/modules/es.error.cause.js");
 require("core-js/modules/es.array.push.js");
 require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/esnext.iterator.map.js");
 require("core-js/modules/esnext.iterator.some.js");
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
@@ -66,11 +69,10 @@ class SelectionRange {
   /**
    * Removes from the stack the last added coordinates.
    *
-   * @returns {SelectionRange}
+   * @returns {CellRange}
    */
   pop() {
-    this.ranges.pop();
-    return this;
+    return this.ranges.pop();
   }
 
   /**
@@ -92,14 +94,57 @@ class SelectionRange {
   }
 
   /**
-   * Returns `true` if coords is within selection coords. This method iterates through all selection layers to check if
-   * the coords object is within selection range.
+   * Returns `true` if coords is within any selection coords. This method iterates through
+   * all selection layers to check if the coords object is within selection range.
    *
    * @param {CellCoords} coords The CellCoords instance with defined visual coordinates.
+   * @param {function(CellRange, number): boolean} [criteria] The function that allows injecting custom criteria.
    * @returns {boolean}
    */
   includes(coords) {
-    return this.ranges.some(cellRange => cellRange.includes(coords));
+    let criteria = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => true;
+    return this.ranges.some((cellRange, index) => cellRange.includes(coords) && criteria(cellRange, index));
+  }
+
+  /**
+   * Find all ranges that are equal to the provided range.
+   *
+   * @param {CellRange} cellRange The CellRange instance with defined visual coordinates.
+   * @returns {Array<{range: CellRange, layer: number}>}
+   */
+  findAll(cellRange) {
+    const result = [];
+    this.ranges.forEach((range, layer) => {
+      if (range.isEqual(cellRange)) {
+        result.push({
+          range,
+          layer
+        });
+      }
+    });
+    return result;
+  }
+
+  /**
+   * Removes all ranges that are equal to the provided ranges.
+   *
+   * @param {CellRange[]} cellRanges The array of CellRange instances with defined visual coordinates.
+   * @returns {SelectionRange}
+   */
+  remove(cellRanges) {
+    this.ranges = this.ranges.filter(range => !cellRanges.some(cellRange => cellRange.isEqual(range)));
+    return this;
+  }
+
+  /**
+   * Removes the ranges based on the provided index layers (0 no N).
+   *
+   * @param {number[]} layerIndexes The array of indexes that will be removed from the selection.
+   * @returns {SelectionRange}
+   */
+  removeLayers(layerIndexes) {
+    this.ranges = this.ranges.filter((_, index) => !layerIndexes.includes(index));
+    return this;
   }
 
   /**
@@ -121,6 +166,28 @@ class SelectionRange {
     return this.ranges.length;
   }
 
+  /**
+   * Creates a clone of this class.
+   *
+   * @returns {SelectionRange}
+   */
+  clone() {
+    const clone = new SelectionRange(this.createCellRange);
+    clone.ranges = this.ranges.map(cellRange => cellRange.clone());
+    return clone;
+  }
+
+  /**
+   * Allows applying custom index translations for any range within the class instance.
+   *
+   * @param {function(CellRange): CellRange} mapFunction The function that allows injecting custom index translation logic.
+   * @returns {SelectionRange}
+   */
+  map(mapFunction) {
+    this.ranges = this.ranges.map((cellRange, index) => mapFunction(cellRange, index));
+    return this;
+  }
+
   /**
    * Peek the coordinates based on the index where that coordinate resides in the collection.
    *

package/selection/range.mjs

@@ -1,6 +1,9 @@
 import "core-js/modules/es.error.cause.js";
 import "core-js/modules/es.array.push.js";
 import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/esnext.iterator.map.js";
 import "core-js/modules/esnext.iterator.some.js";
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
@@ -63,11 +66,10 @@ class SelectionRange {
   /**
    * Removes from the stack the last added coordinates.
    *
-   * @returns {SelectionRange}
+   * @returns {CellRange}
    */
   pop() {
-    this.ranges.pop();
-    return this;
+    return this.ranges.pop();
   }
 
   /**
@@ -89,14 +91,57 @@ class SelectionRange {
   }
 
   /**
-   * Returns `true` if coords is within selection coords. This method iterates through all selection layers to check if
-   * the coords object is within selection range.
+   * Returns `true` if coords is within any selection coords. This method iterates through
+   * all selection layers to check if the coords object is within selection range.
    *
    * @param {CellCoords} coords The CellCoords instance with defined visual coordinates.
+   * @param {function(CellRange, number): boolean} [criteria] The function that allows injecting custom criteria.
    * @returns {boolean}
    */
   includes(coords) {
-    return this.ranges.some(cellRange => cellRange.includes(coords));
+    let criteria = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => true;
+    return this.ranges.some((cellRange, index) => cellRange.includes(coords) && criteria(cellRange, index));
+  }
+
+  /**
+   * Find all ranges that are equal to the provided range.
+   *
+   * @param {CellRange} cellRange The CellRange instance with defined visual coordinates.
+   * @returns {Array<{range: CellRange, layer: number}>}
+   */
+  findAll(cellRange) {
+    const result = [];
+    this.ranges.forEach((range, layer) => {
+      if (range.isEqual(cellRange)) {
+        result.push({
+          range,
+          layer
+        });
+      }
+    });
+    return result;
+  }
+
+  /**
+   * Removes all ranges that are equal to the provided ranges.
+   *
+   * @param {CellRange[]} cellRanges The array of CellRange instances with defined visual coordinates.
+   * @returns {SelectionRange}
+   */
+  remove(cellRanges) {
+    this.ranges = this.ranges.filter(range => !cellRanges.some(cellRange => cellRange.isEqual(range)));
+    return this;
+  }
+
+  /**
+   * Removes the ranges based on the provided index layers (0 no N).
+   *
+   * @param {number[]} layerIndexes The array of indexes that will be removed from the selection.
+   * @returns {SelectionRange}
+   */
+  removeLayers(layerIndexes) {
+    this.ranges = this.ranges.filter((_, index) => !layerIndexes.includes(index));
+    return this;
   }
 
   /**
@@ -118,6 +163,28 @@ class SelectionRange {
     return this.ranges.length;
   }
 
+  /**
+   * Creates a clone of this class.
+   *
+   * @returns {SelectionRange}
+   */
+  clone() {
+    const clone = new SelectionRange(this.createCellRange);
+    clone.ranges = this.ranges.map(cellRange => cellRange.clone());
+    return clone;
+  }
+
+  /**
+   * Allows applying custom index translations for any range within the class instance.
+   *
+   * @param {function(CellRange): CellRange} mapFunction The function that allows injecting custom index translation logic.
+   * @returns {SelectionRange}
+   */
+  map(mapFunction) {
+    this.ranges = this.ranges.map((cellRange, index) => mapFunction(cellRange, index));
+    return this;
+  }
+
   /**
    * Peek the coordinates based on the index where that coordinate resides in the collection.
    *