handsontable 0.0.0-next-a01036f-20230508 → 0.0.0-next-48677e7-20230509

package/core.js

@@ -39,6 +39,7 @@ var _templateLiteralTag = require("./helpers/templateLiteralTag");
 var _editorManager = _interopRequireDefault(require("./editorManager"));
 var _eventManager = _interopRequireDefault(require("./eventManager"));
 var _object = require("./helpers/object");
+var _focusManager = _interopRequireDefault(require("./focusManager"));
 var _array = require("./helpers/array");
 var _parseTable = require("./utils/parseTable");
 var _registry = require("./plugins/registry");
@@ -107,7 +108,7 @@ var deprecationWarns = new Set();
  * :::
  *
  * ::: only-for react
- * ```jsx
+ * ```jsx{3,7,13}
  * import { useRef } from 'react';
  *
  * const hotTableComponent = useRef(null);
@@ -139,6 +140,7 @@ function Core(rootElement, userSettings) {
   var dataSource;
   var grid;
   var editorManager;
+  var focusManager;
   var firstRun = true;
   if ((0, _rootInstance.hasValidParameter)(rootInstanceSymbol)) {
     (0, _rootInstance.registerAsRootInstance)(this);
@@ -263,12 +265,6 @@ function Core(rootElement, userSettings) {
    * @type {IndexMapper}
    */
   this.rowIndexMapper = new _translations.IndexMapper();
-  this.columnIndexMapper.addLocalHook('indexesSequenceChange', function (source) {
-    instance.runHooks('afterColumnSequenceChange', source);
-  });
-  this.rowIndexMapper.addLocalHook('indexesSequenceChange', function (source) {
-    instance.runHooks('afterRowSequenceChange', source);
-  });
   dataSource = new _dataSource.default(instance);
   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
@@ -315,6 +311,12 @@ function Core(rootElement, userSettings) {
     countRowsTranslated: function countRowsTranslated() {
       return _this.view.countRenderableRows();
     },
+    countRowHeaders: function countRowHeaders() {
+      return _this.countRowHeaders();
+    },
+    countColHeaders: function countColHeaders() {
+      return _this.countColHeaders();
+    },
     getShortcutManager: function getShortcutManager() {
       return instance.getShortcutManager();
     },
@@ -1113,6 +1115,7 @@ function Core(rootElement, userSettings) {
     this.updateSettings(tableMeta, true);
     this.view = new _tableView.default(this);
     editorManager = _editorManager.default.getInstance(instance, tableMeta, selection);
+    focusManager = new _focusManager.default(instance);
     instance.runHooks('init');
     this.forceFullRender = true; // used when data was changed
     this.view.render();
@@ -2448,13 +2451,11 @@ function Core(rootElement, userSettings) {
   };
 
   /**
-   * Gets the value of the currently focused cell.
-   *
-   * For column headers and row headers, returns `null`.
+   * Get value from the selected cell.
    *
    * @memberof Core#
    * @function getValue
-   * @returns {*} The value of the focused cell.
+   * @returns {*} Value of selected cell.
    */
   this.getValue = function () {
     var sel = instance.getSelectedLast();
@@ -3146,13 +3147,7 @@ function Core(rootElement, userSettings) {
   };
 
   /**
-   * Checks if your [data format](@/guides/getting-started/binding-to-data.md#compatible-data-types)
-   * and [configuration options](@/guides/getting-started/configuration-options.md)
-   * allow for changing the number of columns.
-   *
-   * Returns `false` when your data is an array of objects,
-   * or when you use the [`columns`](@/api/options.md#columns) option.
-   * Otherwise, returns `true`.
+   * Checks if the data format and config allows user to modify the column structure.
    *
    * @memberof Core#
    * @function isColumnModificationAllowed
@@ -3718,6 +3713,30 @@ function Core(rootElement, userSettings) {
     return instance.view._wt.drawn ? instance.view._wt.wtTable.getVisibleColumnsCount() : -1;
   };
 
+  /**
+   * Returns the number of rendered row headers.
+   *
+   * @since 13.0.0
+   * @memberof Core#
+   * @function countRowHeaders
+   * @returns {number} Number of row headers.
+   */
+  this.countRowHeaders = function () {
+    return this.view.getRowHeadersCount();
+  };
+
+  /**
+   * Returns the number of rendered column headers.
+   *
+   * @since 13.0.0
+   * @memberof Core#
+   * @function countColHeaders
+   * @returns {number} Number of column headers.
+   */
+  this.countColHeaders = function () {
+    return this.view.getColumnHeadersCount();
+  };
+
   /**
    * Returns the number of empty rows. If the optional ending parameter is `true`, returns the
    * number of empty rows at the bottom of the table.
@@ -4118,6 +4137,8 @@ function Core(rootElement, userSettings) {
     if (datamap) {
       datamap.destroy();
     }
+    instance.rowIndexMapper = null;
+    instance.columnIndexMapper = null;
     datamap = null;
     grid = null;
     selection = null;
@@ -4473,6 +4494,18 @@ function Core(rootElement, userSettings) {
   this.getShortcutManager = function () {
     return shortcutManager;
   };
+
+  /**
+   * Return the Focus Manager responsible for managing the browser's focus in the table.
+   *
+   * @memberof Core#
+   * @since 13.0.0
+   * @function getFocusManager
+   * @returns {FocusManager}
+   */
+  this.getFocusManager = function () {
+    return focusManager;
+  };
   var gridContext = shortcutManager.addContext('grid');
   var gridConfig = {
     runOnlyIf: function runOnlyIf() {
@@ -4482,7 +4515,7 @@ function Core(rootElement, userSettings) {
   };
   shortcutManager.setActiveContextName('grid');
   gridContext.addShortcuts([{
-    keys: [['Control/Meta', 'A']],
+    keys: [['Control/Meta', 'A'], ['Control/Meta', 'Shift', 'Space']],
     callback: function callback() {
       instance.selectAll();
     }

package/core.mjs

@@ -48,6 +48,7 @@ import { toSingleLine } from "./helpers/templateLiteralTag.mjs";
 import EditorManager from "./editorManager.mjs";
 import EventManager from "./eventManager.mjs";
 import { deepClone, duckSchema, isObjectEqual, isObject, deepObjectSize, hasOwnProperty, createObjectPropListener, objectEach } from "./helpers/object.mjs";
+import FocusManager from "./focusManager.mjs";
 import { arrayMap, arrayEach, arrayReduce, getDifferenceOfArrays, stringToArray, pivot } from "./helpers/array.mjs";
 import { instanceToHTML } from "./utils/parseTable.mjs";
 import { getPlugin, getPluginsNames } from "./plugins/registry.mjs";
@@ -102,7 +103,7 @@ var deprecationWarns = new Set();
  * :::
  *
  * ::: only-for react
- * ```jsx
+ * ```jsx{3,7,13}
  * import { useRef } from 'react';
  *
  * const hotTableComponent = useRef(null);
@@ -134,6 +135,7 @@ export default function Core(rootElement, userSettings) {
   var dataSource;
   var grid;
   var editorManager;
+  var focusManager;
   var firstRun = true;
   if (hasValidParameter(rootInstanceSymbol)) {
     registerAsRootInstance(this);
@@ -258,12 +260,6 @@ export default function Core(rootElement, userSettings) {
    * @type {IndexMapper}
    */
   this.rowIndexMapper = new IndexMapper();
-  this.columnIndexMapper.addLocalHook('indexesSequenceChange', function (source) {
-    instance.runHooks('afterColumnSequenceChange', source);
-  });
-  this.rowIndexMapper.addLocalHook('indexesSequenceChange', function (source) {
-    instance.runHooks('afterRowSequenceChange', source);
-  });
   dataSource = new DataSource(instance);
   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
@@ -310,6 +306,12 @@ export default function Core(rootElement, userSettings) {
     countRowsTranslated: function countRowsTranslated() {
       return _this.view.countRenderableRows();
     },
+    countRowHeaders: function countRowHeaders() {
+      return _this.countRowHeaders();
+    },
+    countColHeaders: function countColHeaders() {
+      return _this.countColHeaders();
+    },
     getShortcutManager: function getShortcutManager() {
       return instance.getShortcutManager();
     },
@@ -1108,6 +1110,7 @@ export default function Core(rootElement, userSettings) {
     this.updateSettings(tableMeta, true);
     this.view = new TableView(this);
     editorManager = EditorManager.getInstance(instance, tableMeta, selection);
+    focusManager = new FocusManager(instance);
     instance.runHooks('init');
     this.forceFullRender = true; // used when data was changed
     this.view.render();
@@ -2443,13 +2446,11 @@ export default function Core(rootElement, userSettings) {
   };
 
   /**
-   * Gets the value of the currently focused cell.
-   *
-   * For column headers and row headers, returns `null`.
+   * Get value from the selected cell.
    *
    * @memberof Core#
    * @function getValue
-   * @returns {*} The value of the focused cell.
+   * @returns {*} Value of selected cell.
    */
   this.getValue = function () {
     var sel = instance.getSelectedLast();
@@ -3141,13 +3142,7 @@ export default function Core(rootElement, userSettings) {
   };
 
   /**
-   * Checks if your [data format](@/guides/getting-started/binding-to-data.md#compatible-data-types)
-   * and [configuration options](@/guides/getting-started/configuration-options.md)
-   * allow for changing the number of columns.
-   *
-   * Returns `false` when your data is an array of objects,
-   * or when you use the [`columns`](@/api/options.md#columns) option.
-   * Otherwise, returns `true`.
+   * Checks if the data format and config allows user to modify the column structure.
    *
    * @memberof Core#
    * @function isColumnModificationAllowed
@@ -3713,6 +3708,30 @@ export default function Core(rootElement, userSettings) {
     return instance.view._wt.drawn ? instance.view._wt.wtTable.getVisibleColumnsCount() : -1;
   };
 
+  /**
+   * Returns the number of rendered row headers.
+   *
+   * @since 13.0.0
+   * @memberof Core#
+   * @function countRowHeaders
+   * @returns {number} Number of row headers.
+   */
+  this.countRowHeaders = function () {
+    return this.view.getRowHeadersCount();
+  };
+
+  /**
+   * Returns the number of rendered column headers.
+   *
+   * @since 13.0.0
+   * @memberof Core#
+   * @function countColHeaders
+   * @returns {number} Number of column headers.
+   */
+  this.countColHeaders = function () {
+    return this.view.getColumnHeadersCount();
+  };
+
   /**
    * Returns the number of empty rows. If the optional ending parameter is `true`, returns the
    * number of empty rows at the bottom of the table.
@@ -4113,6 +4132,8 @@ export default function Core(rootElement, userSettings) {
     if (datamap) {
       datamap.destroy();
     }
+    instance.rowIndexMapper = null;
+    instance.columnIndexMapper = null;
     datamap = null;
     grid = null;
     selection = null;
@@ -4468,6 +4489,18 @@ export default function Core(rootElement, userSettings) {
   this.getShortcutManager = function () {
     return shortcutManager;
   };
+
+  /**
+   * Return the Focus Manager responsible for managing the browser's focus in the table.
+   *
+   * @memberof Core#
+   * @since 13.0.0
+   * @function getFocusManager
+   * @returns {FocusManager}
+   */
+  this.getFocusManager = function () {
+    return focusManager;
+  };
   var gridContext = shortcutManager.addContext('grid');
   var gridConfig = {
     runOnlyIf: function runOnlyIf() {
@@ -4477,7 +4510,7 @@ export default function Core(rootElement, userSettings) {
   };
   shortcutManager.setActiveContextName('grid');
   gridContext.addShortcuts([{
-    keys: [['Control/Meta', 'A']],
+    keys: [['Control/Meta', 'A'], ['Control/Meta', 'Shift', 'Space']],
     callback: function callback() {
       instance.selectAll();
     }

package/dataMap/dataSource.js

@@ -195,7 +195,7 @@ var DataSource = /*#__PURE__*/function () {
       }
       if (this.hot.hasHook('modifySourceData')) {
         var valueHolder = (0, _object.createObjectPropListener)(value);
-        this.hot.runHooks('modifySourceData', row, column, valueHolder, 'set');
+        this.hot.runHooks('modifySourceData', row, this.propToCol(column), valueHolder, 'set');
         if (valueHolder.isTouched()) {
           value = valueHolder.value;
         }
@@ -232,7 +232,7 @@ var DataSource = /*#__PURE__*/function () {
       }
       if (this.hot.hasHook('modifySourceData')) {
         var valueHolder = (0, _object.createObjectPropListener)(result);
-        this.hot.runHooks('modifySourceData', row, column, valueHolder, 'get');
+        this.hot.runHooks('modifySourceData', row, this.colToProp(column), valueHolder, 'get');
         if (valueHolder.isTouched()) {
           result = valueHolder.value;
         }
@@ -244,14 +244,14 @@ var DataSource = /*#__PURE__*/function () {
      * Returns a single value from the data.
      *
      * @param {number} row Physical row index.
-     * @param {number} columnOrProp Visual column index or property.
+     * @param {number} column Visual column index.
      * @returns {*}
      */
   }, {
     key: "getAtCell",
-    value: function getAtCell(row, columnOrProp) {
+    value: function getAtCell(row, column) {
       var dataRow = this.modifyRowData(row);
-      return this.getAtPhysicalCell(row, this.colToProp(columnOrProp), dataRow);
+      return this.getAtPhysicalCell(row, this.colToProp(column), dataRow);
     }
 
     /**

package/dataMap/dataSource.mjs

@@ -191,7 +191,7 @@ var DataSource = /*#__PURE__*/function () {
       }
       if (this.hot.hasHook('modifySourceData')) {
         var valueHolder = createObjectPropListener(value);
-        this.hot.runHooks('modifySourceData', row, column, valueHolder, 'set');
+        this.hot.runHooks('modifySourceData', row, this.propToCol(column), valueHolder, 'set');
         if (valueHolder.isTouched()) {
           value = valueHolder.value;
         }
@@ -228,7 +228,7 @@ var DataSource = /*#__PURE__*/function () {
       }
       if (this.hot.hasHook('modifySourceData')) {
         var valueHolder = createObjectPropListener(result);
-        this.hot.runHooks('modifySourceData', row, column, valueHolder, 'get');
+        this.hot.runHooks('modifySourceData', row, this.colToProp(column), valueHolder, 'get');
         if (valueHolder.isTouched()) {
           result = valueHolder.value;
         }
@@ -240,14 +240,14 @@ var DataSource = /*#__PURE__*/function () {
      * Returns a single value from the data.
      *
      * @param {number} row Physical row index.
-     * @param {number} columnOrProp Visual column index or property.
+     * @param {number} column Visual column index.
      * @returns {*}
      */
   }, {
     key: "getAtCell",
-    value: function getAtCell(row, columnOrProp) {
+    value: function getAtCell(row, column) {
       var dataRow = this.modifyRowData(row);
-      return this.getAtPhysicalCell(row, this.colToProp(columnOrProp), dataRow);
+      return this.getAtPhysicalCell(row, this.colToProp(column), dataRow);
     }
 
     /**

package/dataMap/metaManager/metaSchema.js

@@ -21,7 +21,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
  * [Configuration options](@/guides/getting-started/configuration-options.md) let you heavily customize your Handsontable instance. For example, you can:
  *
  * - Enable and disable built-in features
- * - Enable and configure additional [plugins](@/api/plugins.md)
+ * - Enable and configure additional [plugins](@/guides/tools-and-building/custom-plugins.md)
  * - Personalize Handsontable's look
  * - Adjust Handsontable's behavior
  * - Implement your own custom features
@@ -2437,6 +2437,13 @@ var _default = function _default() {
      * ```
      */
     invalidCellClassName: 'htInvalid',
+    /**
+     * The `imeFastEdit` option allows using the "fast edit" feature for the IME users. It's disabled by default
+     * because of its incompatibility with some of the accessibility features.
+     *
+     * Enabling this option can make a negative impact on how some screen readers handle reading the table cells.
+     */
+    imeFastEdit: false,
     /**
      * The `isEmptyCol` option lets you define your own custom method
      * for checking if a column at a given visual index is empty.

package/dataMap/metaManager/metaSchema.mjs

@@ -17,7 +17,7 @@ import { isObjectEqual } from "../../helpers/object.mjs";
  * [Configuration options](@/guides/getting-started/configuration-options.md) let you heavily customize your Handsontable instance. For example, you can:
  *
  * - Enable and disable built-in features
- * - Enable and configure additional [plugins](@/api/plugins.md)
+ * - Enable and configure additional [plugins](@/guides/tools-and-building/custom-plugins.md)
  * - Personalize Handsontable's look
  * - Adjust Handsontable's behavior
  * - Implement your own custom features
@@ -2433,6 +2433,13 @@ export default (function () {
      * ```
      */
     invalidCellClassName: 'htInvalid',
+    /**
+     * The `imeFastEdit` option allows using the "fast edit" feature for the IME users. It's disabled by default
+     * because of its incompatibility with some of the accessibility features.
+     *
+     * Enabling this option can make a negative impact on how some screen readers handle reading the table cells.
+     */
+    imeFastEdit: false,
     /**
      * The `isEmptyCol` option lets you define your own custom method
      * for checking if a column at a given visual index is empty.

package/dist/handsontable.css

@@ -25,8 +25,8 @@
  * INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM
  * USE OR INABILITY TO USE THIS SOFTWARE.
  * 
- * Version: 0.0.0-next-a01036f-20230508
- * Release date: 28/03/2023 (built at 08/05/2023 10:47:21)
+ * Version: 0.0.0-next-48677e7-20230509
+ * Release date: 28/03/2023 (built at 09/05/2023 07:28:55)
  */
 /**
  * Fix for bootstrap styles
@@ -607,6 +607,11 @@ innerBorderBottom - Property controlled by bottom overlay
   opacity: 0.58;
 }
 
+.handsontable tbody th.current,
+.handsontable thead th.current {
+  box-shadow: inset 0 0 0 2px #5292f7;
+}
+
 .handsontable tbody th.ht__highlight,
 .handsontable thead th.ht__highlight {
   background-color: #dcdcdc;

package/dist/handsontable.full.css

@@ -25,8 +25,8 @@
  * INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM
  * USE OR INABILITY TO USE THIS SOFTWARE.
  * 
- * Version: 0.0.0-next-a01036f-20230508
- * Release date: 28/03/2023 (built at 08/05/2023 10:47:21)
+ * Version: 0.0.0-next-48677e7-20230509
+ * Release date: 28/03/2023 (built at 09/05/2023 07:28:55)
  */
 /**
  * Fix for bootstrap styles
@@ -607,6 +607,11 @@ innerBorderBottom - Property controlled by bottom overlay
   opacity: 0.58;
 }
 
+.handsontable tbody th.current,
+.handsontable thead th.current {
+  box-shadow: inset 0 0 0 2px #5292f7;
+}
+
 .handsontable tbody th.ht__highlight,
 .handsontable thead th.ht__highlight {
   background-color: #dcdcdc;