handsontable 0.0.0-next-9059914-20231025 → 0.0.0-next-21d91d0-20231025

package/plugins/collapsibleColumns/collapsibleColumns.js

@@ -10,6 +10,7 @@ var _console = require("../../helpers/console");
 var _element = require("../../helpers/dom/element");
 var _eventManager = _interopRequireDefault(require("../../eventManager"));
 var _event = require("../../helpers/dom/event");
+var _a11y = require("../../helpers/a11y");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
@@ -27,6 +28,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 +193,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 +241,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 +417,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 +425,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,14 +497,16 @@ 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;
+    const isAriaTagsEnabled = this.hot.getSettings().ariaTags;
     let collapsibleElement = TH.querySelector(`.${COLLAPSIBLE_ELEMENT_CLASS}`);
+    (0, _element.removeAttribute)(TH, [(0, _a11y.A11Y_EXPANDED)('')[0]]);
     if (isNodeCollapsible) {
       if (!collapsibleElement) {
         collapsibleElement = this.hot.rootDocument.createElement('div');
@@ -460,9 +517,22 @@ class CollapsibleColumns extends _base.BasePlugin {
       if (isCollapsed) {
         (0, _element.addClass)(collapsibleElement, 'collapsed');
         (0, _element.fastInnerText)(collapsibleElement, '+');
+
+        // Add ARIA tags
+        if (isAriaTagsEnabled) {
+          (0, _element.setAttribute)(TH, ...(0, _a11y.A11Y_EXPANDED)(false));
+        }
       } else {
         (0, _element.addClass)(collapsibleElement, 'expanded');
         (0, _element.fastInnerText)(collapsibleElement, '-');
+
+        // Add ARIA tags
+        if (isAriaTagsEnabled) {
+          (0, _element.setAttribute)(TH, ...(0, _a11y.A11Y_EXPANDED)(true));
+        }
+      }
+      if (isAriaTagsEnabled) {
+        (0, _element.setAttribute)(collapsibleElement, ...(0, _a11y.A11Y_HIDDEN)());
       }
     } else {
       var _collapsibleElement;

package/plugins/collapsibleColumns/collapsibleColumns.mjs

@@ -14,13 +14,15 @@ import { BasePlugin } from "../base/index.mjs";
 import { arrayEach, arrayFilter, arrayUnique } from "../../helpers/array.mjs";
 import { rangeEach } from "../../helpers/number.mjs";
 import { warn } from "../../helpers/console.mjs";
-import { addClass, hasClass, removeClass, fastInnerText } from "../../helpers/dom/element.mjs";
+import { addClass, hasClass, removeClass, fastInnerText, removeAttribute, setAttribute } from "../../helpers/dom/element.mjs";
 import EventManager from "../../eventManager.mjs";
 import { stopImmediatePropagation } from "../../helpers/dom/event.mjs";
+import { A11Y_EXPANDED, A11Y_HIDDEN } from "../../helpers/a11y.mjs";
 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 +187,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 +235,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 +411,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 +419,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,14 +491,16 @@ 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;
+    const isAriaTagsEnabled = this.hot.getSettings().ariaTags;
     let collapsibleElement = TH.querySelector(`.${COLLAPSIBLE_ELEMENT_CLASS}`);
+    removeAttribute(TH, [A11Y_EXPANDED('')[0]]);
     if (isNodeCollapsible) {
       if (!collapsibleElement) {
         collapsibleElement = this.hot.rootDocument.createElement('div');
@@ -454,9 +511,22 @@ export class CollapsibleColumns extends BasePlugin {
       if (isCollapsed) {
         addClass(collapsibleElement, 'collapsed');
         fastInnerText(collapsibleElement, '+');
+
+        // Add ARIA tags
+        if (isAriaTagsEnabled) {
+          setAttribute(TH, ...A11Y_EXPANDED(false));
+        }
       } else {
         addClass(collapsibleElement, 'expanded');
         fastInnerText(collapsibleElement, '-');
+
+        // Add ARIA tags
+        if (isAriaTagsEnabled) {
+          setAttribute(TH, ...A11Y_EXPANDED(true));
+        }
+      }
+      if (isAriaTagsEnabled) {
+        setAttribute(collapsibleElement, ...A11Y_HIDDEN());
       }
     } else {
       var _collapsibleElement;

package/plugins/columnSorting/columnSorting.js

@@ -15,13 +15,17 @@ var _utils = require("./utils");
 var _domHelpers = require("./domHelpers");
 var _rootComparator = require("./rootComparator");
 var _sortService = require("./sortService");
+var _a11y = require("../../helpers/a11y");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const PLUGIN_KEY = 'columnSorting';
 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 +160,7 @@ class ColumnSorting extends _base.BasePlugin {
     if (this.hot.view) {
       this.loadOrSortBySettings();
     }
+    this.registerShortcuts();
     super.enablePlugin();
   }
 
@@ -186,9 +191,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.
@@ -608,6 +647,10 @@ class ColumnSorting extends _base.BasePlugin {
     const showSortIndicator = pluginSettingsForColumn.indicator;
     const headerActionEnabled = pluginSettingsForColumn.headerAction;
     this.updateHeaderClasses(headerSpanElement, this.columnStatesManager, column, showSortIndicator, headerActionEnabled);
+    if (this.hot.getSettings().ariaTags) {
+      const currentSortState = this.columnStatesManager.getSortOrderOfColumn(column);
+      (0, _element.setAttribute)(TH, ...(0, _a11y.A11Y_SORT)(currentSortState ? `${currentSortState}ending` : 'none'));
+    }
   }
 
   /**

package/plugins/columnSorting/columnSorting.mjs

@@ -1,5 +1,5 @@
 import "core-js/modules/es.array.push.js";
-import { addClass, removeClass } from "../../helpers/dom/element.mjs";
+import { addClass, removeClass, setAttribute } from "../../helpers/dom/element.mjs";
 import { isUndefined, isDefined } from "../../helpers/mixed.mjs";
 import { isObject } from "../../helpers/object.mjs";
 import { isFunction } from "../../helpers/function.mjs";
@@ -12,10 +12,12 @@ import { getNextSortOrder, areValidSortStates, getHeaderSpanElement, isFirstLeve
 import { getClassesToRemove, getClassesToAdd } from "./domHelpers.mjs";
 import { rootComparator } from "./rootComparator.mjs";
 import { registerRootComparator, sort } from "./sortService/index.mjs";
+import { A11Y_SORT } from "../../helpers/a11y.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 +152,7 @@ export class ColumnSorting extends BasePlugin {
     if (this.hot.view) {
       this.loadOrSortBySettings();
     }
+    this.registerShortcuts();
     super.enablePlugin();
   }
 
@@ -180,9 +183,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.
@@ -602,6 +639,10 @@ export class ColumnSorting extends BasePlugin {
     const showSortIndicator = pluginSettingsForColumn.indicator;
     const headerActionEnabled = pluginSettingsForColumn.headerAction;
     this.updateHeaderClasses(headerSpanElement, this.columnStatesManager, column, showSortIndicator, headerActionEnabled);
+    if (this.hot.getSettings().ariaTags) {
+      const currentSortState = this.columnStatesManager.getSortOrderOfColumn(column);
+      setAttribute(TH, ...A11Y_SORT(currentSortState ? `${currentSortState}ending` : 'none'));
+    }
   }
 
   /**

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;