handsontable 16.1.1 → 16.2.0-next-216dbd0-20251112

package/core.js

@@ -24,7 +24,6 @@ var _browser = require("./helpers/browser");
 var _editorManager = _interopRequireDefault(require("./editorManager"));
 var _eventManager = _interopRequireDefault(require("./eventManager"));
 var _object = require("./helpers/object");
-var _focusManager = require("./focusManager");
 var _array = require("./helpers/array");
 var _parseTable = require("./utils/parseTable");
 var _staticRegister = require("./utils/staticRegister");
@@ -40,19 +39,18 @@ var _data = require("./helpers/data");
 var _translations = require("./translations");
 var _rootInstance = require("./utils/rootInstance");
 var _src = require("./3rdparty/walkontable/src");
-var _hooks = require("./core/hooks");
 var _registry5 = require("./i18n/registry");
 var _utils = require("./i18n/utils");
 var _selection = require("./selection");
 var _dataMap = require("./dataMap");
 var _index = require("./core/index");
+var _focusManager = require("./focusManager");
 var _uniqueMap = require("./utils/dataStructures/uniqueMap");
 var _shortcuts = require("./shortcuts");
 var _shortcutContexts = require("./shortcutContexts");
 var _themes = require("./helpers/themes");
 var _stylesHandler = require("./utils/stylesHandler");
 var _console = require("./helpers/console");
-var _rangeToRenderableMapper = require("./core/coordsMapper/rangeToRenderableMapper");
 var _a11yAnnouncer = require("./utils/a11yAnnouncer");
 var _valueAccessors = require("./utils/valueAccessors");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -182,7 +180,7 @@ function Core(rootContainer, userSettings) {
   let dataSource;
   let grid;
   let editorManager;
-  let focusManager;
+  let focusGridManager;
   let viewportScroller;
   let firstRun = true;
   const mergedUserSettings = {
@@ -342,6 +340,7 @@ function Core(rootContainer, userSettings) {
    * @type {StylesHandler}
    */
   this.stylesHandler = new _stylesHandler.StylesHandler({
+    hot: instance,
     rootElement: instance.rootElement,
     rootDocument: instance.rootDocument,
     onThemeChange: validThemeName => {
@@ -362,7 +361,7 @@ function Core(rootContainer, userSettings) {
   mergedUserSettings.language = (0, _registry5.getValidLanguageCode)(mergedUserSettings.language);
   const settingsWithoutHooks = Object.fromEntries(Object.entries(mergedUserSettings).filter(_ref => {
     let [key] = _ref;
-    return !(_hooks.Hooks.getSingleton().isRegistered(key) || _hooks.Hooks.getSingleton().isDeprecated(key));
+    return !(_index.Hooks.getSingleton().isRegistered(key) || _index.Hooks.getSingleton().isDeprecated(key));
   }));
   const metaManager = new _dataMap.MetaManager(instance, settingsWithoutHooks, [_dataMap.DynamicCellMetaMod, _dataMap.ExtendMetaPropertiesMod]);
   const tableMeta = metaManager.getTableMeta();
@@ -402,7 +401,7 @@ function Core(rootContainer, userSettings) {
   });
   dataSource = new _dataSource.default(instance);
   const moduleRegisterer = (0, _staticRegister.staticRegister)(this.guid);
-  moduleRegisterer.register('cellRangeMapper', new _rangeToRenderableMapper.CellRangeToRenderableMapper({
+  moduleRegisterer.register('cellRangeMapper', new _index.CellRangeToRenderableMapper({
     rowIndexMapper: this.rowIndexMapper,
     columnIndexMapper: this.columnIndexMapper
   }));
@@ -489,8 +488,14 @@ function Core(rootContainer, userSettings) {
       this.selection.commit();
     }
   };
-  this.columnIndexMapper.addLocalHook('cacheUpdated', onIndexMapperCacheUpdate);
-  this.rowIndexMapper.addLocalHook('cacheUpdated', onIndexMapperCacheUpdate);
+  this.columnIndexMapper.addLocalHook('cacheUpdated', indexesChangesState => {
+    onIndexMapperCacheUpdate(indexesChangesState);
+    this.runHooks('afterColumnSequenceCacheUpdate', indexesChangesState);
+  });
+  this.rowIndexMapper.addLocalHook('cacheUpdated', indexesChangesState => {
+    onIndexMapperCacheUpdate(indexesChangesState);
+    this.runHooks('afterRowSequenceCacheUpdate', indexesChangesState);
+  });
   this.selection.addLocalHook('afterSetRangeEnd', (cellCoords, isLastSelectionLayer) => {
     const preventScrolling = (0, _object.createObjectPropListener)(false);
     const selectionRange = this.selection.getSelectedRange();
@@ -1207,9 +1212,8 @@ function Core(rootContainer, userSettings) {
     this.view = new _tableView.default(this);
     editorManager = _editorManager.default.getInstance(instance, tableMeta, selection);
     viewportScroller = (0, _index.createViewportScroller)(instance);
-    focusManager = new _focusManager.FocusManager(instance);
+    focusGridManager.init();
     if ((0, _rootInstance.isRootInstance)(this)) {
-      (0, _index.installFocusCatcher)(instance);
       (0, _a11yAnnouncer.install)(instance.rootPortalElement);
       (0, _mixed._injectProductInfo)(mergedUserSettings.licenseKey, this.rootWrapperElement);
     }
@@ -2509,6 +2513,9 @@ function Core(rootContainer, userSettings) {
     if ((0, _mixed.isDefined)(settings.ganttChart)) {
       throw new Error('Since 8.0.0 the "ganttChart" setting is no longer supported.');
     }
+    if ((0, _mixed.isDefined)(settings.rowHeights) && (0, _mixed.isDefined)(settings.minRowHeights)) {
+      (0, _console.warn)('Both `rowHeights` and `minRowHeights` are defined in your configuration. ' + 'As one is the alias of the other, only one of them can be used at a time. ' + '`rowHeights` will be used as the row height configuration.');
+    }
 
     // eslint-disable-next-line no-restricted-syntax
     for (i in settings) {
@@ -2519,13 +2526,13 @@ function Core(rootContainer, userSettings) {
       } else if (i === 'tableClassName' && instance.table) {
         setClassName('tableClassName', settings.tableClassName);
         instance.view._wt.wtOverlays.syncOverlayTableClassNames();
-      } else if (_hooks.Hooks.getSingleton().isRegistered(i) || _hooks.Hooks.getSingleton().isDeprecated(i)) {
+      } else if (_index.Hooks.getSingleton().isRegistered(i) || _index.Hooks.getSingleton().isDeprecated(i)) {
         const hook = settings[i];
         if ((0, _function.isFunction)(hook)) {
-          _hooks.Hooks.getSingleton().addAsFixed(i, hook, instance);
+          _index.Hooks.getSingleton().addAsFixed(i, hook, instance);
           tableMeta[i] = hook;
         } else if (Array.isArray(hook)) {
-          _hooks.Hooks.getSingleton().add(i, hook, instance);
+          _index.Hooks.getSingleton().add(i, hook, instance);
           tableMeta[i] = hook;
         }
       } else if (!init && (0, _object.hasOwnProperty)(settings, i)) {
@@ -2548,7 +2555,7 @@ function Core(rootContainer, userSettings) {
     }
     if ((0, _rootInstance.isRootInstance)(instance) && !deprecatedWarnInstances.has(instance) && instance.stylesHandler.isClassicTheme()) {
       // eslint-disable-next-line max-len
-      (0, _console.deprecatedWarn)('Handsontable classic theme is a legacy theme and will be removed in version 17.0. Please update your theme settings to ensure compatibility with future versions.');
+      (0, _console.deprecatedWarn)('The stylesheet you are using is deprecated and will be removed in version 17.0. Please update your theme configuration to ensure compatibility with future releases.');
       deprecatedWarnInstances.add(instance);
     }
 
@@ -3757,7 +3764,7 @@ function Core(rootContainer, userSettings) {
           break;
       }
       if (typeof width === 'string') {
-        width = parseInt(width, 10);
+        width = Number.parseInt(width, 10);
       }
     }
     return width;
@@ -3792,8 +3799,9 @@ function Core(rootContainer, userSettings) {
    * @returns {number}
    */
   this._getRowHeightFromSettings = function (row) {
-    const defaultRowHeight = instance.stylesHandler.getDefaultRowHeight();
-    let height = tableMeta.rowHeights;
+    var _tableMeta$rowHeights;
+    const defaultRowHeight = instance.stylesHandler.getDefaultRowHeight(row);
+    let height = (_tableMeta$rowHeights = tableMeta.rowHeights) !== null && _tableMeta$rowHeights !== void 0 ? _tableMeta$rowHeights : tableMeta.minRowHeights;
     if (height !== undefined && height !== null) {
       switch (typeof height) {
         case 'object':
@@ -3807,7 +3815,7 @@ function Core(rootContainer, userSettings) {
           break;
       }
       if (typeof height === 'string') {
-        height = parseInt(height, 10);
+        height = Number.parseInt(height, 10);
       }
     }
     return height !== undefined && height !== null && height < defaultRowHeight ? defaultRowHeight : height;
@@ -4448,6 +4456,7 @@ function Core(rootContainer, userSettings) {
     dataSource = null;
     if ((0, _rootInstance.isRootInstance)(this)) {
       (0, _a11yAnnouncer.uninstall)();
+      this.getFocusScopeManager().destroy();
     }
     this.getShortcutManager().destroy();
     moduleRegisterer.clear();
@@ -4476,7 +4485,7 @@ function Core(rootContainer, userSettings) {
       pluginsRegistry.clear();
       instance.runHooks('afterDestroy');
     }, true);
-    _hooks.Hooks.getSingleton().destroy(instance);
+    _index.Hooks.getSingleton().destroy(instance);
     (0, _object.objectEach)(instance, (property, key, obj) => {
       // replace instance methods with post mortem
       if ((0, _function.isFunction)(property)) {
@@ -4734,7 +4743,7 @@ function Core(rootContainer, userSettings) {
    * ```
    */
   this.addHook = function (key, callback, orderIndex) {
-    _hooks.Hooks.getSingleton().add(key, callback, instance, orderIndex);
+    _index.Hooks.getSingleton().add(key, callback, instance, orderIndex);
   };
 
   /**
@@ -4753,7 +4762,7 @@ function Core(rootContainer, userSettings) {
    * ```
    */
   this.hasHook = function (key) {
-    return _hooks.Hooks.getSingleton().has(key, instance) || _hooks.Hooks.getSingleton().has(key);
+    return _index.Hooks.getSingleton().has(key, instance) || _index.Hooks.getSingleton().has(key);
   };
 
   /**
@@ -4775,7 +4784,7 @@ function Core(rootContainer, userSettings) {
    * ```
    */
   this.addHookOnce = function (key, callback, orderIndex) {
-    _hooks.Hooks.getSingleton().once(key, callback, instance, orderIndex);
+    _index.Hooks.getSingleton().once(key, callback, instance, orderIndex);
   };
 
   /**
@@ -4793,7 +4802,7 @@ function Core(rootContainer, userSettings) {
    * ```
    */
   this.removeHook = function (key, callback) {
-    _hooks.Hooks.getSingleton().remove(key, callback, instance);
+    _index.Hooks.getSingleton().remove(key, callback, instance);
   };
 
   /**
@@ -4820,7 +4829,7 @@ function Core(rootContainer, userSettings) {
    * ```
    */
   this.runHooks = function (key, p1, p2, p3, p4, p5, p6) {
-    return _hooks.Hooks.getSingleton().run(instance, key, p1, p2, p3, p4, p5, p6);
+    return _index.Hooks.getSingleton().run(instance, key, p1, p2, p3, p4, p5, p6);
   };
 
   /**
@@ -5031,6 +5040,8 @@ function Core(rootContainer, userSettings) {
   this.getShortcutManager = function () {
     return shortcutManager;
   };
+  focusGridManager = new _focusManager.FocusGridManager(instance);
+  const focusScopeManager = (0, _rootInstance.isRootInstance)(this) ? (0, _focusManager.createFocusScopeManager)(instance) : null;
 
   /**
    * Return the Focus Manager responsible for managing the browser's focus in the table.
@@ -5041,13 +5052,43 @@ function Core(rootContainer, userSettings) {
    * @returns {FocusManager}
    */
   this.getFocusManager = function () {
-    return focusManager;
+    return focusGridManager;
+  };
+
+  /**
+   * Returns the Focus Scope Manager. The module allows to register focus scopes for different parts of the grid
+   * e.g. for dialogs, pagination, and other plugins that have own UI elements and need separate context.
+   *
+   * @memberof Core#
+   * @since 16.2.0
+   * @function getFocusScopeManager
+   * @returns {FocusScopeManager} Instance of {@link FocusScopeManager}
+   *
+   * @example
+   * ```js
+   * hot.getFocusScopeManager().registerScope('myPluginName', containerElement, {
+   *   shortcutsContextName: 'plugin:myPluginName',
+   *   onActivate: (focusSource) => {
+   *     // Focus the internal focusable element within the plugin UI element
+   *     // depends on the activation focus source.
+   *   },
+   * });
+   * ```
+   */
+  this.getFocusScopeManager = function () {
+    if (!(0, _rootInstance.isRootInstance)(instance)) {
+      throw new Error('The FocusScopeManager is only available for the main Handsontable instance.');
+    }
+    return focusScopeManager;
   };
   (0, _registry.getPluginsNames)().forEach(pluginName => {
     const PluginClass = (0, _registry.getPlugin)(pluginName);
     pluginsRegistry.addItem(pluginName, new PluginClass(this));
   });
   (0, _shortcutContexts.registerAllShortcutContexts)(instance);
+  if ((0, _rootInstance.isRootInstance)(this)) {
+    (0, _focusManager.registerAllFocusScopes)(instance);
+  }
   shortcutManager.setActiveContextName('grid');
-  _hooks.Hooks.getSingleton().run(instance, 'construct');
+  _index.Hooks.getSingleton().run(instance, 'construct');
 }

package/core.mjs

@@ -20,7 +20,6 @@ import { isMobileBrowser, isIpadOS } from "./helpers/browser.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 { staticRegister } from "./utils/staticRegister.mjs";
@@ -36,19 +35,18 @@ import { spreadsheetColumnLabel } from "./helpers/data.mjs";
 import { IndexMapper } from "./translations/index.mjs";
 import { registerAsRootInstance, hasValidParameter, isRootInstance } from "./utils/rootInstance.mjs";
 import { DEFAULT_COLUMN_WIDTH } from "./3rdparty/walkontable/src/index.mjs";
-import { Hooks } from "./core/hooks/index.mjs";
 import { hasLanguageDictionary, getValidLanguageCode, getTranslatedPhrase } from "./i18n/registry.mjs";
 import { warnUserAboutLanguageRegistration, normalizeLanguageCode } from "./i18n/utils.mjs";
 import { Selection } from "./selection/index.mjs";
 import { MetaManager, DynamicCellMetaMod, ExtendMetaPropertiesMod, replaceData } from "./dataMap/index.mjs";
-import { installFocusCatcher, createViewportScroller } from "./core/index.mjs";
+import { createViewportScroller, Hooks, CellRangeToRenderableMapper } from "./core/index.mjs";
+import { FocusGridManager, createFocusScopeManager, registerAllFocusScopes } from "./focusManager/index.mjs";
 import { createUniqueMap } from "./utils/dataStructures/uniqueMap.mjs";
 import { createShortcutManager } from "./shortcuts/index.mjs";
 import { registerAllShortcutContexts } from "./shortcutContexts/index.mjs";
 import { getThemeClassName } from "./helpers/themes.mjs";
 import { StylesHandler } from "./utils/stylesHandler.mjs";
 import { deprecatedWarn, warn } from "./helpers/console.mjs";
-import { CellRangeToRenderableMapper } from "./core/coordsMapper/rangeToRenderableMapper.mjs";
 import { install as installAccessibilityAnnouncer, uninstall as uninstallAccessibilityAnnouncer } from "./utils/a11yAnnouncer.mjs";
 import { getValueSetterValue } from "./utils/valueAccessors.mjs";
 let activeGuid = null;
@@ -177,7 +175,7 @@ export default function Core(rootContainer, userSettings) {
   let dataSource;
   let grid;
   let editorManager;
-  let focusManager;
+  let focusGridManager;
   let viewportScroller;
   let firstRun = true;
   const mergedUserSettings = {
@@ -337,6 +335,7 @@ export default function Core(rootContainer, userSettings) {
    * @type {StylesHandler}
    */
   this.stylesHandler = new StylesHandler({
+    hot: instance,
     rootElement: instance.rootElement,
     rootDocument: instance.rootDocument,
     onThemeChange: validThemeName => {
@@ -484,8 +483,14 @@ export default function Core(rootContainer, userSettings) {
       this.selection.commit();
     }
   };
-  this.columnIndexMapper.addLocalHook('cacheUpdated', onIndexMapperCacheUpdate);
-  this.rowIndexMapper.addLocalHook('cacheUpdated', onIndexMapperCacheUpdate);
+  this.columnIndexMapper.addLocalHook('cacheUpdated', indexesChangesState => {
+    onIndexMapperCacheUpdate(indexesChangesState);
+    this.runHooks('afterColumnSequenceCacheUpdate', indexesChangesState);
+  });
+  this.rowIndexMapper.addLocalHook('cacheUpdated', indexesChangesState => {
+    onIndexMapperCacheUpdate(indexesChangesState);
+    this.runHooks('afterRowSequenceCacheUpdate', indexesChangesState);
+  });
   this.selection.addLocalHook('afterSetRangeEnd', (cellCoords, isLastSelectionLayer) => {
     const preventScrolling = createObjectPropListener(false);
     const selectionRange = this.selection.getSelectedRange();
@@ -1202,9 +1207,8 @@ export default function Core(rootContainer, userSettings) {
     this.view = new TableView(this);
     editorManager = EditorManager.getInstance(instance, tableMeta, selection);
     viewportScroller = createViewportScroller(instance);
-    focusManager = new FocusManager(instance);
+    focusGridManager.init();
     if (isRootInstance(this)) {
-      installFocusCatcher(instance);
       installAccessibilityAnnouncer(instance.rootPortalElement);
       _injectProductInfo(mergedUserSettings.licenseKey, this.rootWrapperElement);
     }
@@ -2504,6 +2508,9 @@ export default function Core(rootContainer, userSettings) {
     if (isDefined(settings.ganttChart)) {
       throw new Error('Since 8.0.0 the "ganttChart" setting is no longer supported.');
     }
+    if (isDefined(settings.rowHeights) && isDefined(settings.minRowHeights)) {
+      warn('Both `rowHeights` and `minRowHeights` are defined in your configuration. ' + 'As one is the alias of the other, only one of them can be used at a time. ' + '`rowHeights` will be used as the row height configuration.');
+    }
 
     // eslint-disable-next-line no-restricted-syntax
     for (i in settings) {
@@ -2543,7 +2550,7 @@ export default function Core(rootContainer, userSettings) {
     }
     if (isRootInstance(instance) && !deprecatedWarnInstances.has(instance) && instance.stylesHandler.isClassicTheme()) {
       // eslint-disable-next-line max-len
-      deprecatedWarn('Handsontable classic theme is a legacy theme and will be removed in version 17.0. Please update your theme settings to ensure compatibility with future versions.');
+      deprecatedWarn('The stylesheet you are using is deprecated and will be removed in version 17.0. Please update your theme configuration to ensure compatibility with future releases.');
       deprecatedWarnInstances.add(instance);
     }
 
@@ -3752,7 +3759,7 @@ export default function Core(rootContainer, userSettings) {
           break;
       }
       if (typeof width === 'string') {
-        width = parseInt(width, 10);
+        width = Number.parseInt(width, 10);
       }
     }
     return width;
@@ -3787,8 +3794,9 @@ export default function Core(rootContainer, userSettings) {
    * @returns {number}
    */
   this._getRowHeightFromSettings = function (row) {
-    const defaultRowHeight = instance.stylesHandler.getDefaultRowHeight();
-    let height = tableMeta.rowHeights;
+    var _tableMeta$rowHeights;
+    const defaultRowHeight = instance.stylesHandler.getDefaultRowHeight(row);
+    let height = (_tableMeta$rowHeights = tableMeta.rowHeights) !== null && _tableMeta$rowHeights !== void 0 ? _tableMeta$rowHeights : tableMeta.minRowHeights;
     if (height !== undefined && height !== null) {
       switch (typeof height) {
         case 'object':
@@ -3802,7 +3810,7 @@ export default function Core(rootContainer, userSettings) {
           break;
       }
       if (typeof height === 'string') {
-        height = parseInt(height, 10);
+        height = Number.parseInt(height, 10);
       }
     }
     return height !== undefined && height !== null && height < defaultRowHeight ? defaultRowHeight : height;
@@ -4443,6 +4451,7 @@ export default function Core(rootContainer, userSettings) {
     dataSource = null;
     if (isRootInstance(this)) {
       uninstallAccessibilityAnnouncer();
+      this.getFocusScopeManager().destroy();
     }
     this.getShortcutManager().destroy();
     moduleRegisterer.clear();
@@ -5026,6 +5035,8 @@ export default function Core(rootContainer, userSettings) {
   this.getShortcutManager = function () {
     return shortcutManager;
   };
+  focusGridManager = new FocusGridManager(instance);
+  const focusScopeManager = isRootInstance(this) ? createFocusScopeManager(instance) : null;
 
   /**
    * Return the Focus Manager responsible for managing the browser's focus in the table.
@@ -5036,13 +5047,43 @@ export default function Core(rootContainer, userSettings) {
    * @returns {FocusManager}
    */
   this.getFocusManager = function () {
-    return focusManager;
+    return focusGridManager;
+  };
+
+  /**
+   * Returns the Focus Scope Manager. The module allows to register focus scopes for different parts of the grid
+   * e.g. for dialogs, pagination, and other plugins that have own UI elements and need separate context.
+   *
+   * @memberof Core#
+   * @since 16.2.0
+   * @function getFocusScopeManager
+   * @returns {FocusScopeManager} Instance of {@link FocusScopeManager}
+   *
+   * @example
+   * ```js
+   * hot.getFocusScopeManager().registerScope('myPluginName', containerElement, {
+   *   shortcutsContextName: 'plugin:myPluginName',
+   *   onActivate: (focusSource) => {
+   *     // Focus the internal focusable element within the plugin UI element
+   *     // depends on the activation focus source.
+   *   },
+   * });
+   * ```
+   */
+  this.getFocusScopeManager = function () {
+    if (!isRootInstance(instance)) {
+      throw new Error('The FocusScopeManager is only available for the main Handsontable instance.');
+    }
+    return focusScopeManager;
   };
   getPluginsNames().forEach(pluginName => {
     const PluginClass = getPlugin(pluginName);
     pluginsRegistry.addItem(pluginName, new PluginClass(this));
   });
   registerAllShortcutContexts(instance);
+  if (isRootInstance(this)) {
+    registerAllFocusScopes(instance);
+  }
   shortcutManager.setActiveContextName('grid');
   Hooks.getSingleton().run(instance, 'construct');
 }