handsontable 0.0.0-next-ff10728-20250410 → 0.0.0-next-d9b3885-20250415

package/plugins/collapsibleColumns/collapsibleColumns.mjs

@@ -102,6 +102,37 @@ const actionDictionary = new Map([['collapse', {
  * />
  * ```
  * :::
+ *
+ * ::: only-for angular
+ * ```ts
+ * // Enable the collapsibleColumns plugin
+ * settings = {
+ *   data: generateDataObj(),
+ *   colHeaders: true,
+ *   rowHeaders: true,
+ *   nestedHeaders: true,
+ *   // enable plugin
+ *   collapsibleColumns: true,
+ * };
+ *
+ * // Or enable and configure specific collapsible columns
+ * settings = {
+ *   data: generateDataObj(),
+ *   colHeaders: true,
+ *   rowHeaders: true,
+ *   nestedHeaders: true,
+ *   // enable and configure which columns can be collapsed
+ *   collapsibleColumns: [
+ *     { row: -4, col: 1, collapsible: true },
+ *     { row: -3, col: 5, collapsible: true },
+ *   ],
+ * };
+ * ```
+ *
+ * ```html
+ * <hot-table [settings]="settings"></hot-table>
+ * ```
+ * :::
  */
 var _collapsedColumnsMap = /*#__PURE__*/new WeakMap();
 var _CollapsibleColumns_brand = /*#__PURE__*/new WeakSet();

package/plugins/columnSorting/columnSorting.js

@@ -304,10 +304,6 @@ class ColumnSorting extends _base.BasePlugin {
     this.hot.runHooks('afterColumnSort', currentSortConfig, sortPossible ? destinationSortConfigs : currentSortConfig, sortPossible);
     if (sortPossible) {
       this.hot.render();
-      // TODO: Workaround? This triggers fast redraw. One test won't pass after removal.
-      // It should be refactored / described.
-      this.hot.forceFullRender = false;
-      this.hot.view.render();
     }
   }
 

package/plugins/columnSorting/columnSorting.mjs

@@ -301,10 +301,6 @@ export class ColumnSorting extends BasePlugin {
     this.hot.runHooks('afterColumnSort', currentSortConfig, sortPossible ? destinationSortConfigs : currentSortConfig, sortPossible);
     if (sortPossible) {
       this.hot.render();
-      // TODO: Workaround? This triggers fast redraw. One test won't pass after removal.
-      // It should be refactored / described.
-      this.hot.forceFullRender = false;
-      this.hot.view.render();
     }
   }
 

package/plugins/columnSummary/columnSummary.js

@@ -104,6 +104,39 @@ const PLUGIN_PRIORITY = exports.PLUGIN_PRIORITY = 220;
  * />
  * ```
  * :::
+ *
+ * ::: only-for angular
+ * ```ts
+ * settings = {
+ *   data: getData(),
+ *   colHeaders: true,
+ *   rowHeaders: true,
+ *   columnSummary: [
+ *     {
+ *       type: "min",
+ *       destinationRow: 4,
+ *       destinationColumn: 1,
+ *     },
+ *     {
+ *       type: "max",
+ *       destinationRow: 0,
+ *       destinationColumn: 3,
+ *       reversedRowCoords: true,
+ *     },
+ *     {
+ *       type: "sum",
+ *       destinationRow: 4,
+ *       destinationColumn: 5,
+ *       forceNumeric: true,
+ *     },
+ *   ],
+ * };
+ * ```
+ *
+ * ```html
+ * <hot-table [settings]="settings"></hot-table>
+ * ```
+ * :::
  */
 var _ColumnSummary_brand = /*#__PURE__*/new WeakSet();
 class ColumnSummary extends _base.BasePlugin {

package/plugins/columnSummary/columnSummary.mjs

@@ -100,6 +100,39 @@ export const PLUGIN_PRIORITY = 220;
  * />
  * ```
  * :::
+ *
+ * ::: only-for angular
+ * ```ts
+ * settings = {
+ *   data: getData(),
+ *   colHeaders: true,
+ *   rowHeaders: true,
+ *   columnSummary: [
+ *     {
+ *       type: "min",
+ *       destinationRow: 4,
+ *       destinationColumn: 1,
+ *     },
+ *     {
+ *       type: "max",
+ *       destinationRow: 0,
+ *       destinationColumn: 3,
+ *       reversedRowCoords: true,
+ *     },
+ *     {
+ *       type: "sum",
+ *       destinationRow: 4,
+ *       destinationColumn: 5,
+ *       forceNumeric: true,
+ *     },
+ *   ],
+ * };
+ * ```
+ *
+ * ```html
+ * <hot-table [settings]="settings"></hot-table>
+ * ```
+ * :::
  */
 var _ColumnSummary_brand = /*#__PURE__*/new WeakSet();
 export class ColumnSummary extends BasePlugin {

package/plugins/comments/comments.js

@@ -121,6 +121,59 @@ const SHORTCUTS_CONTEXT_NAME = `plugin:${PLUGIN_KEY}`;
  * commentsPlugin.removeComment();
  * ```
  * :::
+ *
+ * ::: 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 class="ht-theme-main">
+ *     <hot-table [settings]="gridSettings" />
+ *   </div>`,
+ * })
+ * export class ExampleComponent implements AfterViewInit {
+ *   `@ViewChild`(HotTableComponent, { static: false })
+ *   readonly hotTable!: HotTableComponent;
+ *
+ *   readonly gridSettings = <GridSettings>{
+ *     data: this.getData(),
+ *     comments: true,
+ *     cell: [
+ *       { row: 1, col: 1, comment: { value: "Foo" } },
+ *       { row: 2, col: 2, comment: { value: "Bar" } },
+ *     ],
+ *   };
+ *
+ *   ngAfterViewInit(): void {
+ *     // Access to plugin instance:
+ *     const hot = this.hotTable.hotInstance;
+ *     const commentsPlugin = hot.getPlugin("comments");
+ *
+ *     // Manage comments programmatically:
+ *     commentsPlugin.setCommentAtCell(1, 6, "Comment contents");
+ *     commentsPlugin.showAtCell(1, 6);
+ *     commentsPlugin.removeCommentAtCell(1, 6);
+ *
+ *     // You can also set range once and use proper methods:
+ *     commentsPlugin.setRange({ from: { row: 1, col: 6 } });
+ *     commentsPlugin.setComment("Comment contents");
+ *     commentsPlugin.show();
+ *   }
+ *
+ *   private getData(): any[] {
+ *     // get some data
+ *   }
+ * }
+ * ```
+ * :::
  */
 var _editor = /*#__PURE__*/new WeakMap();
 var _displaySwitch = /*#__PURE__*/new WeakMap();
@@ -234,6 +287,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('beforeCompositionStart', event => _assertClassBrand(_Comments_brand, this, _onAfterDocumentKeyDown).call(this, event));
     this.addHook('afterSetTheme', function () {
       for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
         args[_key2] = arguments[_key2];

package/plugins/comments/comments.mjs

@@ -117,6 +117,59 @@ const SHORTCUTS_CONTEXT_NAME = `plugin:${PLUGIN_KEY}`;
  * commentsPlugin.removeComment();
  * ```
  * :::
+ *
+ * ::: 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 class="ht-theme-main">
+ *     <hot-table [settings]="gridSettings" />
+ *   </div>`,
+ * })
+ * export class ExampleComponent implements AfterViewInit {
+ *   `@ViewChild`(HotTableComponent, { static: false })
+ *   readonly hotTable!: HotTableComponent;
+ *
+ *   readonly gridSettings = <GridSettings>{
+ *     data: this.getData(),
+ *     comments: true,
+ *     cell: [
+ *       { row: 1, col: 1, comment: { value: "Foo" } },
+ *       { row: 2, col: 2, comment: { value: "Bar" } },
+ *     ],
+ *   };
+ *
+ *   ngAfterViewInit(): void {
+ *     // Access to plugin instance:
+ *     const hot = this.hotTable.hotInstance;
+ *     const commentsPlugin = hot.getPlugin("comments");
+ *
+ *     // Manage comments programmatically:
+ *     commentsPlugin.setCommentAtCell(1, 6, "Comment contents");
+ *     commentsPlugin.showAtCell(1, 6);
+ *     commentsPlugin.removeCommentAtCell(1, 6);
+ *
+ *     // You can also set range once and use proper methods:
+ *     commentsPlugin.setRange({ from: { row: 1, col: 6 } });
+ *     commentsPlugin.setComment("Comment contents");
+ *     commentsPlugin.show();
+ *   }
+ *
+ *   private getData(): any[] {
+ *     // get some data
+ *   }
+ * }
+ * ```
+ * :::
  */
 var _editor = /*#__PURE__*/new WeakMap();
 var _displaySwitch = /*#__PURE__*/new WeakMap();
@@ -230,6 +283,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('beforeCompositionStart', event => _assertClassBrand(_Comments_brand, this, _onAfterDocumentKeyDown).call(this, event));
     this.addHook('afterSetTheme', function () {
       for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
         args[_key2] = arguments[_key2];

package/plugins/contextMenu/menu/defaultShortcutsList.js

@@ -39,7 +39,7 @@ function createDefaultShortcutsList(menu) {
     keys: [['ArrowUp']],
     callback: () => menu.getNavigator().toPreviousItem()
   }, {
-    keys: [['ArrowRight']],
+    keys: [[hot.isRtl() ? 'ArrowLeft' : 'ArrowRight']],
     callback: () => {
       const selection = hotMenu.getSelectedLast();
       if (selection) {
@@ -50,7 +50,7 @@ function createDefaultShortcutsList(menu) {
       }
     }
   }, {
-    keys: [['ArrowLeft']],
+    keys: [[hot.isRtl() ? 'ArrowRight' : 'ArrowLeft']],
     callback: () => {
       const selection = hotMenu.getSelectedLast();
       if (selection && menu.isSubMenu()) {

package/plugins/contextMenu/menu/defaultShortcutsList.mjs

@@ -35,7 +35,7 @@ export function createDefaultShortcutsList(menu) {
     keys: [['ArrowUp']],
     callback: () => menu.getNavigator().toPreviousItem()
   }, {
-    keys: [['ArrowRight']],
+    keys: [[hot.isRtl() ? 'ArrowLeft' : 'ArrowRight']],
     callback: () => {
       const selection = hotMenu.getSelectedLast();
       if (selection) {
@@ -46,7 +46,7 @@ export function createDefaultShortcutsList(menu) {
       }
     }
   }, {
-    keys: [['ArrowLeft']],
+    keys: [[hot.isRtl() ? 'ArrowRight' : 'ArrowLeft']],
     callback: () => {
       const selection = hotMenu.getSelectedLast();
       if (selection && menu.isSubMenu()) {

package/plugins/contextMenu/menu/menu.js

@@ -293,6 +293,7 @@ class Menu {
       layoutDirection: this.hot.isRtl() ? 'rtl' : 'ltr',
       ariaTags: false,
       themeName: this.hot.getCurrentThemeName(),
+      beforeRefreshDimensions: () => false,
       beforeOnCellMouseOver: (event, coords) => {
         _classPrivateFieldGet(_navigator, this).setCurrentPage(coords.row);
       },

package/plugins/contextMenu/menu/menu.mjs

@@ -289,6 +289,7 @@ export class Menu {
       layoutDirection: this.hot.isRtl() ? 'rtl' : 'ltr',
       ariaTags: false,
       themeName: this.hot.getCurrentThemeName(),
+      beforeRefreshDimensions: () => false,
       beforeOnCellMouseOver: (event, coords) => {
         _classPrivateFieldGet(_navigator, this).setCurrentPage(coords.row);
       },

package/plugins/contextMenu/menu/positioner.js

@@ -143,7 +143,11 @@ class Positioner {
   setPositionAboveCursor() {
     let top = _classPrivateFieldGet(_offset, this).above + _classPrivateFieldGet(_cursor, this).top - _classPrivateFieldGet(_container, this).offsetHeight;
     if (_classPrivateFieldGet(_parentContainer, this)) {
-      top = _classPrivateFieldGet(_cursor, this).top + _classPrivateFieldGet(_cursor, this).cellHeight - _classPrivateFieldGet(_container, this).offsetHeight + 3;
+      const rootWindow = _classPrivateFieldGet(_parentContainer, this).ownerDocument.defaultView;
+      const style = rootWindow.getComputedStyle(_classPrivateFieldGet(_parentContainer, this).querySelector('.ht_master'));
+      const paddingTop = Number.parseInt(style.paddingTop, 10);
+      const borderTop = Number.parseInt(style.borderTop, 10);
+      top = _classPrivateFieldGet(_cursor, this).top + _classPrivateFieldGet(_cursor, this).cellHeight - _classPrivateFieldGet(_container, this).scrollHeight + paddingTop + borderTop;
     }
     _classPrivateFieldGet(_container, this).style.top = `${top}px`;
   }
@@ -154,7 +158,11 @@ class Positioner {
   setPositionBelowCursor() {
     let top = _classPrivateFieldGet(_offset, this).below + _classPrivateFieldGet(_cursor, this).top + 1;
     if (_classPrivateFieldGet(_parentContainer, this)) {
-      top = _classPrivateFieldGet(_cursor, this).top - 1;
+      const rootWindow = _classPrivateFieldGet(_parentContainer, this).ownerDocument.defaultView;
+      const style = rootWindow.getComputedStyle(_classPrivateFieldGet(_parentContainer, this).querySelector('.ht_master'));
+      const paddingTop = Number.parseInt(style.paddingTop, 10);
+      const borderTop = Number.parseInt(style.borderTop, 10);
+      top = _classPrivateFieldGet(_cursor, this).top - paddingTop - borderTop - 1;
     }
     _classPrivateFieldGet(_container, this).style.top = `${top}px`;
   }

package/plugins/contextMenu/menu/positioner.mjs

@@ -140,7 +140,11 @@ export class Positioner {
   setPositionAboveCursor() {
     let top = _classPrivateFieldGet(_offset, this).above + _classPrivateFieldGet(_cursor, this).top - _classPrivateFieldGet(_container, this).offsetHeight;
     if (_classPrivateFieldGet(_parentContainer, this)) {
-      top = _classPrivateFieldGet(_cursor, this).top + _classPrivateFieldGet(_cursor, this).cellHeight - _classPrivateFieldGet(_container, this).offsetHeight + 3;
+      const rootWindow = _classPrivateFieldGet(_parentContainer, this).ownerDocument.defaultView;
+      const style = rootWindow.getComputedStyle(_classPrivateFieldGet(_parentContainer, this).querySelector('.ht_master'));
+      const paddingTop = Number.parseInt(style.paddingTop, 10);
+      const borderTop = Number.parseInt(style.borderTop, 10);
+      top = _classPrivateFieldGet(_cursor, this).top + _classPrivateFieldGet(_cursor, this).cellHeight - _classPrivateFieldGet(_container, this).scrollHeight + paddingTop + borderTop;
     }
     _classPrivateFieldGet(_container, this).style.top = `${top}px`;
   }
@@ -151,7 +155,11 @@ export class Positioner {
   setPositionBelowCursor() {
     let top = _classPrivateFieldGet(_offset, this).below + _classPrivateFieldGet(_cursor, this).top + 1;
     if (_classPrivateFieldGet(_parentContainer, this)) {
-      top = _classPrivateFieldGet(_cursor, this).top - 1;
+      const rootWindow = _classPrivateFieldGet(_parentContainer, this).ownerDocument.defaultView;
+      const style = rootWindow.getComputedStyle(_classPrivateFieldGet(_parentContainer, this).querySelector('.ht_master'));
+      const paddingTop = Number.parseInt(style.paddingTop, 10);
+      const borderTop = Number.parseInt(style.borderTop, 10);
+      top = _classPrivateFieldGet(_cursor, this).top - paddingTop - borderTop - 1;
     }
     _classPrivateFieldGet(_container, this).style.top = `${top}px`;
   }

package/plugins/copyPaste/copyPaste.js

@@ -256,6 +256,9 @@ class CopyPaste extends _base.BasePlugin {
       return _assertClassBrand(_CopyPaste_brand, _this, _onAfterSelection).call(_this, ...args);
     });
     this.addHook('afterSelectionEnd', () => _assertClassBrand(_CopyPaste_brand, this, _onAfterSelectionEnd).call(this));
+
+    // Events are attached to the document, not the root table element - as it should,
+    // for Chrome 133 and lower to copy/paste/cut work properly (#dev-2277).
     this.eventManager.addEventListener(this.hot.rootDocument, 'copy', function () {
       return _this.onCopy(...arguments);
     });
@@ -562,12 +565,10 @@ class CopyPaste extends _base.BasePlugin {
    * @private
    */
   onCopy(event) {
-    var _event$target, _this$hot$getSelected;
+    const eventTarget = event.composedPath()[0];
     const focusedElement = this.hot.getFocusManager().getRefocusElement();
-    const isHotInput = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.hasAttribute('data-hot-input');
-    const selectedCell = (_this$hot$getSelected = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected === void 0 ? void 0 : _this$hot$getSelected.highlight;
-    const TD = selectedCell ? this.hot.getCell(selectedCell.row, selectedCell.col, true) : null;
-    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCopy, this) || this.isEditorOpened() || (0, _element.isHTMLElement)(event.target) && (isHotInput && event.target !== focusedElement || !isHotInput && event.target !== this.hot.rootDocument.body && TD !== event.target)) {
+    const isHotInput = eventTarget === null || eventTarget === void 0 ? void 0 : eventTarget.hasAttribute('data-hot-input');
+    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCopy, this) || this.isEditorOpened() || (0, _element.isHTMLElement)(eventTarget) && (isHotInput && eventTarget !== focusedElement || !isHotInput && eventTarget !== this.hot.rootDocument.body && !(0, _element.isInternalElement)(eventTarget, this.hot.rootElement))) {
       return;
     }
     event.preventDefault();
@@ -597,12 +598,10 @@ class CopyPaste extends _base.BasePlugin {
    * @private
    */
   onCut(event) {
-    var _event$target2, _this$hot$getSelected2;
+    const eventTarget = event.composedPath()[0];
     const focusedElement = this.hot.getFocusManager().getRefocusElement();
-    const isHotInput = (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.hasAttribute('data-hot-input');
-    const selectedCell = (_this$hot$getSelected2 = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected2 === void 0 ? void 0 : _this$hot$getSelected2.highlight;
-    const TD = selectedCell ? this.hot.getCell(selectedCell.row, selectedCell.col, true) : null;
-    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCut, this) || this.isEditorOpened() || (0, _element.isHTMLElement)(event.target) && (isHotInput && event.target !== focusedElement || !isHotInput && event.target !== this.hot.rootDocument.body && TD !== event.target)) {
+    const isHotInput = eventTarget === null || eventTarget === void 0 ? void 0 : eventTarget.hasAttribute('data-hot-input');
+    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCut, this) || this.isEditorOpened() || (0, _element.isHTMLElement)(eventTarget) && (isHotInput && eventTarget !== focusedElement || !isHotInput && eventTarget !== this.hot.rootDocument.body && !(0, _element.isInternalElement)(eventTarget, this.hot.rootElement))) {
       return;
     }
     event.preventDefault();
@@ -631,12 +630,10 @@ class CopyPaste extends _base.BasePlugin {
    * @private
    */
   onPaste(event) {
-    var _event$target3, _this$hot$getSelected3;
+    const eventTarget = event.composedPath()[0];
     const focusedElement = this.hot.getFocusManager().getRefocusElement();
-    const isHotInput = (_event$target3 = event.target) === null || _event$target3 === void 0 ? void 0 : _event$target3.hasAttribute('data-hot-input');
-    const selectedCell = (_this$hot$getSelected3 = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected3 === void 0 ? void 0 : _this$hot$getSelected3.highlight;
-    const TD = selectedCell ? this.hot.getCell(selectedCell.row, selectedCell.col, true) : null;
-    if (!this.hot.isListening() || this.isEditorOpened() || !this.hot.getSelected() || (0, _element.isHTMLElement)(event.target) && (isHotInput && event.target !== focusedElement || !isHotInput && event.target !== this.hot.rootDocument.body && TD !== event.target)) {
+    const isHotInput = eventTarget === null || eventTarget === void 0 ? void 0 : eventTarget.hasAttribute('data-hot-input');
+    if (!this.hot.isListening() || this.isEditorOpened() || !this.hot.getSelected() || (0, _element.isHTMLElement)(eventTarget) && (isHotInput && eventTarget !== focusedElement || !isHotInput && eventTarget !== this.hot.rootDocument.body && !(0, _element.isInternalElement)(eventTarget, this.hot.rootElement))) {
       return;
     }
     event.preventDefault();

package/plugins/copyPaste/copyPaste.mjs

@@ -17,7 +17,7 @@ import { Hooks } from "../../core/hooks/index.mjs";
 import { stringify, parse } from "../../3rdparty/SheetClip/index.mjs";
 import { arrayEach } from "../../helpers/array.mjs";
 import { sanitize } from "../../helpers/string.mjs";
-import { removeContentEditableFromElementAndDeselect, runWithSelectedContendEditableElement, makeElementContentEditableAndSelectItsContent, isHTMLElement } from "../../helpers/dom/element.mjs";
+import { removeContentEditableFromElementAndDeselect, runWithSelectedContendEditableElement, makeElementContentEditableAndSelectItsContent, isHTMLElement, isInternalElement } from "../../helpers/dom/element.mjs";
 import { isSafari } from "../../helpers/browser.mjs";
 import copyItem from "./contextMenuItem/copy.mjs";
 import copyColumnHeadersOnlyItem from "./contextMenuItem/copyColumnHeadersOnly.mjs";
@@ -252,6 +252,9 @@ export class CopyPaste extends BasePlugin {
       return _assertClassBrand(_CopyPaste_brand, _this, _onAfterSelection).call(_this, ...args);
     });
     this.addHook('afterSelectionEnd', () => _assertClassBrand(_CopyPaste_brand, this, _onAfterSelectionEnd).call(this));
+
+    // Events are attached to the document, not the root table element - as it should,
+    // for Chrome 133 and lower to copy/paste/cut work properly (#dev-2277).
     this.eventManager.addEventListener(this.hot.rootDocument, 'copy', function () {
       return _this.onCopy(...arguments);
     });
@@ -558,12 +561,10 @@ export class CopyPaste extends BasePlugin {
    * @private
    */
   onCopy(event) {
-    var _event$target, _this$hot$getSelected;
+    const eventTarget = event.composedPath()[0];
     const focusedElement = this.hot.getFocusManager().getRefocusElement();
-    const isHotInput = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.hasAttribute('data-hot-input');
-    const selectedCell = (_this$hot$getSelected = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected === void 0 ? void 0 : _this$hot$getSelected.highlight;
-    const TD = selectedCell ? this.hot.getCell(selectedCell.row, selectedCell.col, true) : null;
-    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCopy, this) || this.isEditorOpened() || isHTMLElement(event.target) && (isHotInput && event.target !== focusedElement || !isHotInput && event.target !== this.hot.rootDocument.body && TD !== event.target)) {
+    const isHotInput = eventTarget === null || eventTarget === void 0 ? void 0 : eventTarget.hasAttribute('data-hot-input');
+    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCopy, this) || this.isEditorOpened() || isHTMLElement(eventTarget) && (isHotInput && eventTarget !== focusedElement || !isHotInput && eventTarget !== this.hot.rootDocument.body && !isInternalElement(eventTarget, this.hot.rootElement))) {
       return;
     }
     event.preventDefault();
@@ -593,12 +594,10 @@ export class CopyPaste extends BasePlugin {
    * @private
    */
   onCut(event) {
-    var _event$target2, _this$hot$getSelected2;
+    const eventTarget = event.composedPath()[0];
     const focusedElement = this.hot.getFocusManager().getRefocusElement();
-    const isHotInput = (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.hasAttribute('data-hot-input');
-    const selectedCell = (_this$hot$getSelected2 = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected2 === void 0 ? void 0 : _this$hot$getSelected2.highlight;
-    const TD = selectedCell ? this.hot.getCell(selectedCell.row, selectedCell.col, true) : null;
-    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCut, this) || this.isEditorOpened() || isHTMLElement(event.target) && (isHotInput && event.target !== focusedElement || !isHotInput && event.target !== this.hot.rootDocument.body && TD !== event.target)) {
+    const isHotInput = eventTarget === null || eventTarget === void 0 ? void 0 : eventTarget.hasAttribute('data-hot-input');
+    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCut, this) || this.isEditorOpened() || isHTMLElement(eventTarget) && (isHotInput && eventTarget !== focusedElement || !isHotInput && eventTarget !== this.hot.rootDocument.body && !isInternalElement(eventTarget, this.hot.rootElement))) {
       return;
     }
     event.preventDefault();
@@ -627,12 +626,10 @@ export class CopyPaste extends BasePlugin {
    * @private
    */
   onPaste(event) {
-    var _event$target3, _this$hot$getSelected3;
+    const eventTarget = event.composedPath()[0];
     const focusedElement = this.hot.getFocusManager().getRefocusElement();
-    const isHotInput = (_event$target3 = event.target) === null || _event$target3 === void 0 ? void 0 : _event$target3.hasAttribute('data-hot-input');
-    const selectedCell = (_this$hot$getSelected3 = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected3 === void 0 ? void 0 : _this$hot$getSelected3.highlight;
-    const TD = selectedCell ? this.hot.getCell(selectedCell.row, selectedCell.col, true) : null;
-    if (!this.hot.isListening() || this.isEditorOpened() || !this.hot.getSelected() || isHTMLElement(event.target) && (isHotInput && event.target !== focusedElement || !isHotInput && event.target !== this.hot.rootDocument.body && TD !== event.target)) {
+    const isHotInput = eventTarget === null || eventTarget === void 0 ? void 0 : eventTarget.hasAttribute('data-hot-input');
+    if (!this.hot.isListening() || this.isEditorOpened() || !this.hot.getSelected() || isHTMLElement(eventTarget) && (isHotInput && eventTarget !== focusedElement || !isHotInput && eventTarget !== this.hot.rootDocument.body && !isInternalElement(eventTarget, this.hot.rootElement))) {
       return;
     }
     event.preventDefault();

package/plugins/copyPaste/pasteEvent.js

@@ -11,5 +11,8 @@ class PasteEvent {
     this.clipboardData = new _clipboardData.default();
   }
   preventDefault() {}
+  composedPath() {
+    return [];
+  }
 }
 exports.default = PasteEvent;

package/plugins/copyPaste/pasteEvent.mjs

@@ -7,4 +7,7 @@ export default class PasteEvent {
     this.clipboardData = new ClipboardData();
   }
   preventDefault() {}
+  composedPath() {
+    return [];
+  }
 }

package/plugins/dropdownMenu/dropdownMenu.js

@@ -80,6 +80,21 @@ const SHORTCUTS_GROUP = PLUGIN_KEY;
  * />
  * ```
  * :::
+ *
+ * ::: only-for angular
+ * ```ts
+ * settings = {
+ *   data: data,
+ *   comments: true,
+ *   // enable and configure dropdown menu
+ *   dropdownMenu: ["remove_col", "---------", "make_read_only", "alignment"],
+ * };
+ * ```
+ *
+ * ```html
+ * <hot-table [settings]="settings"></hot-table>
+ * ```
+ * :::
  */
 var _isButtonClicked = /*#__PURE__*/new WeakMap();
 var _DropdownMenu_brand = /*#__PURE__*/new WeakSet();

package/plugins/dropdownMenu/dropdownMenu.mjs

@@ -77,6 +77,21 @@ const SHORTCUTS_GROUP = PLUGIN_KEY;
  * />
  * ```
  * :::
+ *
+ * ::: only-for angular
+ * ```ts
+ * settings = {
+ *   data: data,
+ *   comments: true,
+ *   // enable and configure dropdown menu
+ *   dropdownMenu: ["remove_col", "---------", "make_read_only", "alignment"],
+ * };
+ * ```
+ *
+ * ```html
+ * <hot-table [settings]="settings"></hot-table>
+ * ```
+ * :::
  */
 var _isButtonClicked = /*#__PURE__*/new WeakMap();
 var _DropdownMenu_brand = /*#__PURE__*/new WeakSet();

package/plugins/exportFile/exportFile.js

@@ -87,6 +87,64 @@ const PLUGIN_PRIORITY = exports.PLUGIN_PRIORITY = 240;
  * });
  * ```
  * :::
+ *
+ * ::: 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 class="ht-theme-main">
+ *     <hot-table [settings]="gridSettings" />
+ *   </div>`,
+ * })
+ * export class ExampleComponent implements AfterViewInit {
+ *   `@ViewChild`(HotTableComponent, { static: false })
+ *   readonly hotTable!: HotTableComponent;
+ *
+ *   readonly gridSettings = <GridSettings>{
+ *     data: this.getData(),
+ *   };
+ *
+ *   ngAfterViewInit(): void {
+ *     // Access to plugin instance:
+ *     const hot = this.hotTable.hotInstance;
+ *     // Access to exportFile plugin instance
+ *     const exportPlugin = hot.getPlugin("exportFile");
+ *
+ *     // Export as a string
+ *     exportPlugin.exportAsString("csv");
+ *
+ *     // Export as a blob object
+ *     exportPlugin.exportAsBlob("csv");
+ *
+ *     // Export to downloadable file (named: MyFile.csv)
+ *     exportPlugin.downloadFile("csv", { filename: "MyFile" });
+ *
+ *     // Export as a string (with specified data range):
+ *     exportPlugin.exportAsString("csv", {
+ *       exportHiddenRows: true, // default false
+ *       exportHiddenColumns: true, // default false
+ *       columnHeaders: true, // default false
+ *       rowHeaders: true, // default false
+ *       columnDelimiter: ";", // default ','
+ *       range: [1, 1, 6, 6], // [startRow, endRow, startColumn, endColumn]
+ *     });
+ *   }
+ *
+ *   private getData(): any[] {
+ *     // get some data
+ *   }
+ * }
+ * ```
+ * :::
  */
 class ExportFile extends _base.BasePlugin {
   static get PLUGIN_KEY() {