handsontable 0.0.0-next-8d0643b-20230809 → 0.0.0-next-be16baf-20230809

package/pluginHooks.mjs

@@ -552,6 +552,13 @@ const REGISTERED_HOOKS = [/* eslint-disable jsdoc/require-description-complete-s
  * @event Hooks#afterScrollVertically
  */
 'afterScrollVertically',
+/**
+ * Fired after the vertical or horizontal scroll event.
+ *
+ * @since 14.0.0
+ * @event Hooks#afterScroll
+ */
+'afterScroll',
 /**
  * Fired after one or more cells are selected (e.g. During mouse move).
  *
@@ -655,6 +662,94 @@ const REGISTERED_HOOKS = [/* eslint-disable jsdoc/require-description-complete-s
  * @param {number} selectionLayerLevel The number which indicates what selection layer is currently modified.
  */
 'afterSelectionEndByProp',
+/**
+ * Fired before one or more columns are selected (e.g. During mouse header click or {@link Core#selectColumns} API call).
+ *
+ * @since 14.0.0
+ * @event Hooks#beforeSelectColumns
+ * @param {CellCoords} from Selection start coords object.
+ * @param {CellCoords} to Selection end coords object.
+ * @param {CellCoords} highlight Selection cell focus coords object.
+ * @example
+ * ::: only-for javascript
+ * ```js
+ * new Handsontable(element, {
+ *   beforeSelectColumns: (from, to, highlight) => {
+ *     // Extend the column selection by one column left and one column right.
+ *     from.col = Math.max(from.col - 1, 0);
+ *     to.col = Math.min(to.col + 1, this.countCols() - 1);
+ *   }
+ * })
+ * ```
+ * :::
+ *
+ * ::: only-for react
+ * ```jsx
+ * <HotTable
+ *   beforeSelectColumns={(from, to, highlight) => {
+ *     // Extend the column selection by one column left and one column right.
+ *     from.col = Math.max(from.col - 1, 0);
+ *     to.col = Math.min(to.col + 1, this.countCols() - 1);
+ *   }}
+ * />
+ * ```
+ * :::
+ */
+'beforeSelectColumns',
+/**
+ * Fired after one or more columns are selected (e.g. During mouse header click or {@link Core#selectColumns} API call).
+ *
+ * @since 14.0.0
+ * @event Hooks#afterSelectColumns
+ * @param {CellCoords} from Selection start coords object.
+ * @param {CellCoords} to Selection end coords object.
+ * @param {CellCoords} highlight Selection cell focus coords object.
+ */
+'afterSelectColumns',
+/**
+ * Fired before one or more rows are selected (e.g. During mouse header click or {@link Core#selectRows} API call).
+ *
+ * @since 14.0.0
+ * @event Hooks#beforeSelectRows
+ * @param {CellCoords} from Selection start coords object.
+ * @param {CellCoords} to Selection end coords object.
+ * @param {CellCoords} highlight Selection cell focus coords object.
+ * @example
+ * ::: only-for javascript
+ * ```js
+ * new Handsontable(element, {
+ *   beforeSelectRows: (from, to, highlight) => {
+ *     // Extend the row selection by one row up and one row bottom more.
+ *     from.row = Math.max(from.row - 1, 0);
+ *     to.row = Math.min(to.row + 1, this.countRows() - 1);
+ *   }
+ * })
+ * ```
+ * :::
+ *
+ * ::: only-for react
+ * ```jsx
+ * <HotTable
+ *   beforeSelectRows={(from, to, highlight) => {
+ *     // Extend the row selection by one row up and one row bottom more.
+ *     from.row = Math.max(from.row - 1, 0);
+ *     to.row = Math.min(to.row + 1, this.countRows() - 1);
+ *   }}
+ * />
+ * ```
+ * :::
+ */
+'beforeSelectRows',
+/**
+ * Fired after one or more rows are selected (e.g. During mouse header click or {@link Core#selectRows} API call).
+ *
+ * @since 14.0.0
+ * @event Hooks#afterSelectRows
+ * @param {CellCoords} from Selection start coords object.
+ * @param {CellCoords} to Selection end coords object.
+ * @param {CellCoords} highlight Selection cell focus coords object.
+ */
+'afterSelectRows',
 /**
  * Fired after cell meta is changed.
  *
@@ -1223,6 +1318,16 @@ const REGISTERED_HOOKS = [/* eslint-disable jsdoc/require-description-complete-s
  * @returns {undefined|number[]}
  */
 'modifyGetCellCoords',
+/**
+ * Used to modify the cell coordinates when the table is activated (going into the listen mode).
+ *
+ * @event Hooks#modifyFocusOnTabNavigation
+ * @since 14.0.0
+ * @param {'from_above' | 'from_below'} tabActivationDir The browsers Tab navigation direction. Depending on
+ * whether the user activated the table from the element above or below, another cell can be selected.
+ * @param {CellCoords} visualCoords The coords that will be used to select a cell.
+ */
+'modifyFocusOnTabNavigation',
 /**
  * Allows modify the visual row index that is used to retrieve the row header element (TH) before it's
  * highlighted (proper CSS class names are added). Modifying the visual row index allows building a custom
@@ -2380,7 +2485,7 @@ const REMOVED_HOOKS = new Map([['modifyRow', '8.0.0'], ['modifyCol', '8.0.0'], [
  * @type {Map<string, string>}
  */
 /* eslint-enable jsdoc/require-description-complete-sentence */
-const DEPRECATED_HOOKS = new Map([]);
+const DEPRECATED_HOOKS = new Map([['beforeRemoveCellClassNames', 'The hook "beforeRemoveCellClassNames" is deprecated and will be removed in the next major release.']]);
 class Hooks {
   static getSingleton() {
     return getGlobalSingleton();

package/plugins/collapsibleColumns/collapsibleColumns.js

@@ -27,6 +27,7 @@ const PLUGIN_PRIORITY = 290;
 exports.PLUGIN_PRIORITY = PLUGIN_PRIORITY;
 const SETTING_KEYS = ['nestedHeaders'];
 const COLLAPSIBLE_ELEMENT_CLASS = 'collapsibleIndicator';
+const SHORTCUTS_GROUP = PLUGIN_KEY;
 const actionDictionary = new Map([['collapse', {
   hideColumn: true,
   beforeHook: 'beforeColumnCollapse',
@@ -191,6 +192,7 @@ class CollapsibleColumns extends _base.BasePlugin {
       return _this.onAfterGetColHeader(...arguments);
     });
     this.addHook('beforeOnCellMouseDown', (event, coords, TD) => this.onBeforeOnCellMouseDown(event, coords, TD));
+    this.registerShortcuts();
     super.enablePlugin();
     // @TODO: Workaround for broken plugin initialization abstraction (#6806).
     this.updatePlugin();
@@ -238,10 +240,62 @@ class CollapsibleColumns extends _base.BasePlugin {
     this.hot.columnIndexMapper.unregisterMap(this.pluginName);
     _classPrivateFieldSet(this, _collapsedColumnsMap, null);
     this.nestedHeadersPlugin = null;
+    this.unregisterShortcuts();
     this.clearButtons();
     super.disablePlugin();
   }
 
+  /**
+   * Register shortcuts responsible for toggling collapsible columns.
+   *
+   * @private
+   */
+  registerShortcuts() {
+    this.hot.getShortcutManager().getContext('grid').addShortcut({
+      keys: [['Enter']],
+      callback: () => {
+        var _this$headerStateMana;
+        const {
+          row,
+          col
+        } = this.hot.getSelectedRangeLast().highlight;
+        const {
+          collapsible,
+          isCollapsed,
+          columnIndex
+        } = (_this$headerStateMana = this.headerStateManager.getHeaderTreeNodeData(row, col)) !== null && _this$headerStateMana !== void 0 ? _this$headerStateMana : {};
+        if (!collapsible) {
+          return;
+        }
+        if (isCollapsed) {
+          this.expandSection({
+            row,
+            col: columnIndex
+          });
+        } else {
+          this.collapseSection({
+            row,
+            col: columnIndex
+          });
+        }
+      },
+      runOnlyIf: () => {
+        var _this$hot$getSelected;
+        return (_this$hot$getSelected = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected === void 0 ? void 0 : _this$hot$getSelected.highlight.isHeader();
+      },
+      group: SHORTCUTS_GROUP
+    });
+  }
+
+  /**
+   * Unregister shortcuts responsible for toggling collapsible columns.
+   *
+   * @private
+   */
+  unregisterShortcuts() {
+    this.hot.getShortcutManager().getContext('grid').removeShortcutsByGroup(SHORTCUTS_GROUP);
+  }
+
   /**
    * Clears the expand/collapse buttons.
    *
@@ -362,7 +416,7 @@ class CollapsibleColumns extends _base.BasePlugin {
     });
     let isActionPossible = filteredCoords.length > 0;
     (0, _array.arrayEach)(filteredCoords, _ref2 => {
-      var _this$headerStateMana;
+      var _this$headerStateMana2;
       let {
         row,
         col: column
@@ -370,7 +424,7 @@ class CollapsibleColumns extends _base.BasePlugin {
       const {
         collapsible,
         isCollapsed
-      } = (_this$headerStateMana = this.headerStateManager.getHeaderSettings(row, column)) !== null && _this$headerStateMana !== void 0 ? _this$headerStateMana : {};
+      } = (_this$headerStateMana2 = this.headerStateManager.getHeaderSettings(row, column)) !== null && _this$headerStateMana2 !== void 0 ? _this$headerStateMana2 : {};
       if (!collapsible || isCollapsed && action === 'collapse' || !isCollapsed && action === 'expand') {
         isActionPossible = false;
         return false;
@@ -442,12 +496,12 @@ class CollapsibleColumns extends _base.BasePlugin {
    *                             values counting from 0 to N).
    */
   onAfterGetColHeader(column, TH, headerLevel) {
-    var _this$headerStateMana2;
+    var _this$headerStateMana3;
     const {
       collapsible,
       origColspan,
       isCollapsed
-    } = (_this$headerStateMana2 = this.headerStateManager.getHeaderSettings(headerLevel, column)) !== null && _this$headerStateMana2 !== void 0 ? _this$headerStateMana2 : {};
+    } = (_this$headerStateMana3 = this.headerStateManager.getHeaderSettings(headerLevel, column)) !== null && _this$headerStateMana3 !== void 0 ? _this$headerStateMana3 : {};
     const isNodeCollapsible = collapsible && origColspan > 1 && column >= this.hot.getSettings().fixedColumnsStart;
     let collapsibleElement = TH.querySelector(`.${COLLAPSIBLE_ELEMENT_CLASS}`);
     if (isNodeCollapsible) {

package/plugins/collapsibleColumns/collapsibleColumns.mjs

@@ -21,6 +21,7 @@ export const PLUGIN_KEY = 'collapsibleColumns';
 export const PLUGIN_PRIORITY = 290;
 const SETTING_KEYS = ['nestedHeaders'];
 const COLLAPSIBLE_ELEMENT_CLASS = 'collapsibleIndicator';
+const SHORTCUTS_GROUP = PLUGIN_KEY;
 const actionDictionary = new Map([['collapse', {
   hideColumn: true,
   beforeHook: 'beforeColumnCollapse',
@@ -185,6 +186,7 @@ export class CollapsibleColumns extends BasePlugin {
       return _this.onAfterGetColHeader(...arguments);
     });
     this.addHook('beforeOnCellMouseDown', (event, coords, TD) => this.onBeforeOnCellMouseDown(event, coords, TD));
+    this.registerShortcuts();
     super.enablePlugin();
     // @TODO: Workaround for broken plugin initialization abstraction (#6806).
     this.updatePlugin();
@@ -232,10 +234,62 @@ export class CollapsibleColumns extends BasePlugin {
     this.hot.columnIndexMapper.unregisterMap(this.pluginName);
     _classPrivateFieldSet(this, _collapsedColumnsMap, null);
     this.nestedHeadersPlugin = null;
+    this.unregisterShortcuts();
     this.clearButtons();
     super.disablePlugin();
   }
 
+  /**
+   * Register shortcuts responsible for toggling collapsible columns.
+   *
+   * @private
+   */
+  registerShortcuts() {
+    this.hot.getShortcutManager().getContext('grid').addShortcut({
+      keys: [['Enter']],
+      callback: () => {
+        var _this$headerStateMana;
+        const {
+          row,
+          col
+        } = this.hot.getSelectedRangeLast().highlight;
+        const {
+          collapsible,
+          isCollapsed,
+          columnIndex
+        } = (_this$headerStateMana = this.headerStateManager.getHeaderTreeNodeData(row, col)) !== null && _this$headerStateMana !== void 0 ? _this$headerStateMana : {};
+        if (!collapsible) {
+          return;
+        }
+        if (isCollapsed) {
+          this.expandSection({
+            row,
+            col: columnIndex
+          });
+        } else {
+          this.collapseSection({
+            row,
+            col: columnIndex
+          });
+        }
+      },
+      runOnlyIf: () => {
+        var _this$hot$getSelected;
+        return (_this$hot$getSelected = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected === void 0 ? void 0 : _this$hot$getSelected.highlight.isHeader();
+      },
+      group: SHORTCUTS_GROUP
+    });
+  }
+
+  /**
+   * Unregister shortcuts responsible for toggling collapsible columns.
+   *
+   * @private
+   */
+  unregisterShortcuts() {
+    this.hot.getShortcutManager().getContext('grid').removeShortcutsByGroup(SHORTCUTS_GROUP);
+  }
+
   /**
    * Clears the expand/collapse buttons.
    *
@@ -356,7 +410,7 @@ export class CollapsibleColumns extends BasePlugin {
     });
     let isActionPossible = filteredCoords.length > 0;
     arrayEach(filteredCoords, _ref2 => {
-      var _this$headerStateMana;
+      var _this$headerStateMana2;
       let {
         row,
         col: column
@@ -364,7 +418,7 @@ export class CollapsibleColumns extends BasePlugin {
       const {
         collapsible,
         isCollapsed
-      } = (_this$headerStateMana = this.headerStateManager.getHeaderSettings(row, column)) !== null && _this$headerStateMana !== void 0 ? _this$headerStateMana : {};
+      } = (_this$headerStateMana2 = this.headerStateManager.getHeaderSettings(row, column)) !== null && _this$headerStateMana2 !== void 0 ? _this$headerStateMana2 : {};
       if (!collapsible || isCollapsed && action === 'collapse' || !isCollapsed && action === 'expand') {
         isActionPossible = false;
         return false;
@@ -436,12 +490,12 @@ export class CollapsibleColumns extends BasePlugin {
    *                             values counting from 0 to N).
    */
   onAfterGetColHeader(column, TH, headerLevel) {
-    var _this$headerStateMana2;
+    var _this$headerStateMana3;
     const {
       collapsible,
       origColspan,
       isCollapsed
-    } = (_this$headerStateMana2 = this.headerStateManager.getHeaderSettings(headerLevel, column)) !== null && _this$headerStateMana2 !== void 0 ? _this$headerStateMana2 : {};
+    } = (_this$headerStateMana3 = this.headerStateManager.getHeaderSettings(headerLevel, column)) !== null && _this$headerStateMana3 !== void 0 ? _this$headerStateMana3 : {};
     const isNodeCollapsible = collapsible && origColspan > 1 && column >= this.hot.getSettings().fixedColumnsStart;
     let collapsibleElement = TH.querySelector(`.${COLLAPSIBLE_ELEMENT_CLASS}`);
     if (isNodeCollapsible) {

package/plugins/columnSorting/columnSorting.js

@@ -21,7 +21,10 @@ exports.PLUGIN_KEY = PLUGIN_KEY;
 const PLUGIN_PRIORITY = 50;
 exports.PLUGIN_PRIORITY = PLUGIN_PRIORITY;
 const APPEND_COLUMN_CONFIG_STRATEGY = 'append';
+exports.APPEND_COLUMN_CONFIG_STRATEGY = APPEND_COLUMN_CONFIG_STRATEGY;
 const REPLACE_COLUMN_CONFIG_STRATEGY = 'replace';
+exports.REPLACE_COLUMN_CONFIG_STRATEGY = REPLACE_COLUMN_CONFIG_STRATEGY;
+const SHORTCUTS_GROUP = PLUGIN_KEY;
 (0, _sortService.registerRootComparator)(PLUGIN_KEY, _rootComparator.rootComparator);
 _pluginHooks.default.getSingleton().register('beforeColumnSort');
 _pluginHooks.default.getSingleton().register('afterColumnSort');
@@ -156,6 +159,7 @@ class ColumnSorting extends _base.BasePlugin {
     if (this.hot.view) {
       this.loadOrSortBySettings();
     }
+    this.registerShortcuts();
     super.enablePlugin();
   }
 
@@ -186,9 +190,43 @@ class ColumnSorting extends _base.BasePlugin {
     this.columnStatesManager.destroy();
     this.columnMetaCache = null;
     this.columnStatesManager = null;
+    this.unregisterShortcuts();
     super.disablePlugin();
   }
 
+  /**
+   * Register shortcuts responsible for toggling column sorting functionality.
+   *
+   * @private
+   */
+  registerShortcuts() {
+    this.hot.getShortcutManager().getContext('grid').addShortcut({
+      keys: [['Enter']],
+      callback: () => {
+        const {
+          highlight
+        } = this.hot.getSelectedRangeLast();
+        if (highlight.row === -1 && highlight.col >= 0) {
+          this.sort(this.getColumnNextConfig(highlight.col));
+        }
+      },
+      runOnlyIf: () => {
+        var _this$hot$getSelected;
+        return (_this$hot$getSelected = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected === void 0 ? void 0 : _this$hot$getSelected.highlight.isHeader();
+      },
+      group: SHORTCUTS_GROUP
+    });
+  }
+
+  /**
+   * Unregister shortcuts responsible for toggling column sorting functionality.
+   *
+   * @private
+   */
+  unregisterShortcuts() {
+    this.hot.getShortcutManager().getContext('grid').removeShortcutsByGroup(SHORTCUTS_GROUP);
+  }
+
   // DIFF - MultiColumnSorting & ColumnSorting: changed function documentation.
   /**
    * Sorts the table by chosen columns and orders.

package/plugins/columnSorting/columnSorting.mjs

@@ -14,8 +14,9 @@ import { rootComparator } from "./rootComparator.mjs";
 import { registerRootComparator, sort } from "./sortService/index.mjs";
 export const PLUGIN_KEY = 'columnSorting';
 export const PLUGIN_PRIORITY = 50;
-const APPEND_COLUMN_CONFIG_STRATEGY = 'append';
-const REPLACE_COLUMN_CONFIG_STRATEGY = 'replace';
+export const APPEND_COLUMN_CONFIG_STRATEGY = 'append';
+export const REPLACE_COLUMN_CONFIG_STRATEGY = 'replace';
+const SHORTCUTS_GROUP = PLUGIN_KEY;
 registerRootComparator(PLUGIN_KEY, rootComparator);
 Hooks.getSingleton().register('beforeColumnSort');
 Hooks.getSingleton().register('afterColumnSort');
@@ -150,6 +151,7 @@ export class ColumnSorting extends BasePlugin {
     if (this.hot.view) {
       this.loadOrSortBySettings();
     }
+    this.registerShortcuts();
     super.enablePlugin();
   }
 
@@ -180,9 +182,43 @@ export class ColumnSorting extends BasePlugin {
     this.columnStatesManager.destroy();
     this.columnMetaCache = null;
     this.columnStatesManager = null;
+    this.unregisterShortcuts();
     super.disablePlugin();
   }
 
+  /**
+   * Register shortcuts responsible for toggling column sorting functionality.
+   *
+   * @private
+   */
+  registerShortcuts() {
+    this.hot.getShortcutManager().getContext('grid').addShortcut({
+      keys: [['Enter']],
+      callback: () => {
+        const {
+          highlight
+        } = this.hot.getSelectedRangeLast();
+        if (highlight.row === -1 && highlight.col >= 0) {
+          this.sort(this.getColumnNextConfig(highlight.col));
+        }
+      },
+      runOnlyIf: () => {
+        var _this$hot$getSelected;
+        return (_this$hot$getSelected = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected === void 0 ? void 0 : _this$hot$getSelected.highlight.isHeader();
+      },
+      group: SHORTCUTS_GROUP
+    });
+  }
+
+  /**
+   * Unregister shortcuts responsible for toggling column sorting functionality.
+   *
+   * @private
+   */
+  unregisterShortcuts() {
+    this.hot.getShortcutManager().getContext('grid').removeShortcutsByGroup(SHORTCUTS_GROUP);
+  }
+
   // DIFF - MultiColumnSorting & ColumnSorting: changed function documentation.
   /**
    * Sorts the table by chosen columns and orders.

package/plugins/columnSorting/index.js

@@ -4,4 +4,6 @@ exports.__esModule = true;
 var _columnSorting = require("./columnSorting");
 exports.PLUGIN_KEY = _columnSorting.PLUGIN_KEY;
 exports.PLUGIN_PRIORITY = _columnSorting.PLUGIN_PRIORITY;
-exports.ColumnSorting = _columnSorting.ColumnSorting;
+exports.ColumnSorting = _columnSorting.ColumnSorting;
+exports.APPEND_COLUMN_CONFIG_STRATEGY = _columnSorting.APPEND_COLUMN_CONFIG_STRATEGY;
+exports.REPLACE_COLUMN_CONFIG_STRATEGY = _columnSorting.REPLACE_COLUMN_CONFIG_STRATEGY;

package/plugins/columnSorting/index.mjs

@@ -1 +1 @@
-export { PLUGIN_KEY, PLUGIN_PRIORITY, ColumnSorting } from "./columnSorting.mjs";
+export { PLUGIN_KEY, PLUGIN_PRIORITY, ColumnSorting, APPEND_COLUMN_CONFIG_STRATEGY, REPLACE_COLUMN_CONFIG_STRATEGY } from "./columnSorting.mjs";

package/plugins/comments/commentEditor.js

@@ -165,6 +165,7 @@ class CommentEditor {
     this.rootDocument.body.appendChild(this.container);
     (0, _element.addClass)(editor, CommentEditor.CLASS_EDITOR);
     (0, _element.addClass)(textArea, CommentEditor.CLASS_INPUT);
+    textArea.setAttribute('data-hot-input', true);
     editor.appendChild(textArea);
     this.container.appendChild(editor);
     return editor;

package/plugins/comments/commentEditor.mjs

@@ -162,6 +162,7 @@ class CommentEditor {
     this.rootDocument.body.appendChild(this.container);
     addClass(editor, CommentEditor.CLASS_EDITOR);
     addClass(textArea, CommentEditor.CLASS_INPUT);
+    textArea.setAttribute('data-hot-input', true);
     editor.appendChild(textArea);
     this.container.appendChild(editor);
     return editor;