handsontable 15.3.0 → 16.0.0-next-f486b48-20250702

package/CHANGELOG.md

@@ -9,49 +9,71 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 <!-- UNVERSIONED -->
 
+## [16.0.0] - 2025-07-09
+
+### Added
+- **Breaking change**: Added an context and dropdown menu focus outline [#11669](https://github.com/handsontable/handsontable/pull/11669)
+- Improve Handsontable editor types positioning [#11593](https://github.com/handsontable/handsontable/pull/11593)
+- Add second click deselects cell feature [#11602](https://github.com/handsontable/handsontable/pull/11602)
+- Added new `textEllipsis` option to the core [#11609](https://github.com/handsontable/handsontable/pull/11609)
+- Added an backward compatibility for renamed CSS variables [#11676](https://github.com/handsontable/handsontable/pull/11676)
+- Angular: Introduced a new Angular wrapper - `@handsontable/angular-wrapper`. [#11511](https://github.com/handsontable/handsontable/pull/11511)
+
+### Changed
+- **Breaking change**: Updated CSS theme variables and added input radio variables [#11470](https://github.com/handsontable/handsontable/pull/11470)
+- **Breaking change**: Change `modifyData` hook to use visual indxes for both row and column. [#11501](https://github.com/handsontable/handsontable/pull/11501)
+
+### Fixed
+- **Breaking change**: Fixed and issue with custom border overlapping [#11551](https://github.com/handsontable/handsontable/pull/11551)
+- **Breaking change**: Fixed an issue with accessibility and new DOM structure with wrapper and portal [#11579](https://github.com/handsontable/handsontable/pull/11579)
+- Fixed a problem with the dropdown editor having a horizontal scrollbar on Windows with fractional scaling applied. [#11613](https://github.com/handsontable/handsontable/pull/11613)
+- Fixed an issue with scrollbar styles on Safari browser [#11614](https://github.com/handsontable/handsontable/pull/11614)
+- Fix column filter behavior when adding new column [#11616](https://github.com/handsontable/handsontable/pull/11616)
+- Fixed an issue with dropdown elements color [#11661](https://github.com/handsontable/handsontable/pull/11661)
+- Angular: Fixed error `this.hotInstance.getSettings(...).columns?.filter is not a function` in angular-wrapper. [#11695](https://github.com/handsontable/handsontable/pull/11695)
+
 ## [15.3.0] - 2025-04-29
 
 ### Added
-- Added missing boolean type to the editor in the react wrapper [#11514](https://github.com/handsontable/handsontable/pull/11514)
-- Fixed comments for IME and add a new `beforeCompositionstart` hook. [#11521](https://github.com/handsontable/handsontable/pull/11521)
-- Added horizontal scroll to the Filter's by value component [#11561](https://github.com/handsontable/handsontable/pull/11561)
-- Add optional formula sanitization for csv export to prevent CSV Injection attacks [#11592](https://github.com/handsontable/handsontable/pull/11592)
+- Added a missing boolean type to the editor in the React wrapper. [#11514](https://github.com/handsontable/handsontable/pull/11514)
+- Fixed the Comments plugin for IME editing and added a new `beforeCompositionstart` hook. [#11521](https://github.com/handsontable/handsontable/pull/11521)
+- Added horizontal scroll to the Filter's "by value" component. [#11561](https://github.com/handsontable/handsontable/pull/11561)
+- Added optional formula sanitization for CSV export to prevent CSV Injection attacks. [#11592](https://github.com/handsontable/handsontable/pull/11592)
 
 ### Changed
-- Improved the initialization time of Handsontable with formulas enabled [#11474](https://github.com/handsontable/handsontable/pull/11474)
-- Changed the size of the manual row and row resize guide line [#11507](https://github.com/handsontable/handsontable/pull/11507)
-- Improve viewport scrolling behavior [#11577](https://github.com/handsontable/handsontable/pull/11577)
+- Improved the initialization time of Handsontable with Formulas enabled. [#11474](https://github.com/handsontable/handsontable/pull/11474)
+- Changed the size of the Manual Row Resize and Manual Column Resize guide lines. [#11507](https://github.com/handsontable/handsontable/pull/11507)
+- Improved the viewport scrolling behavior. [#11577](https://github.com/handsontable/handsontable/pull/11577)
 
 ### Fixed
-- Fixing issue with NestedRows plugin duplicating rows when moving children [#11362](https://github.com/handsontable/handsontable/pull/11362)
-- Fixed an issue with row resize line alignment and resize handle flickering [#11500](https://github.com/handsontable/handsontable/pull/11500)
-- Fixed an issue with autocomplete caret position after using scroll on a list of choices and dropdown width fixer [#11503](https://github.com/handsontable/handsontable/pull/11503)
-- Fixed copy, cut an paste actions on tables with a selection reaching outside of the rendered viewport. [#11504](https://github.com/handsontable/handsontable/pull/11504)
-- Fix submenu positiongin for all themes. [#11505](https://github.com/handsontable/handsontable/pull/11505)
+- Fixed an issue with the NestedRows plugin duplicating rows when moving child rows. [#11362](https://github.com/handsontable/handsontable/pull/11362)
+- Fixed an issue with row resize line alignment and resize handle flickering. [#11500](https://github.com/handsontable/handsontable/pull/11500)
+- Fixed an issue with the Autocomplete caret position after using scroll on a list of choices and a problem with the dropdown width. [#11503](https://github.com/handsontable/handsontable/pull/11503)
+- Fixed the submenu positioning for all themes. [#11505](https://github.com/handsontable/handsontable/pull/11505)
 - Fixed a problem where re-enabling the Hidden Columns configuration caused an error to be thrown if a selection was a part of the hidden range. [#11508](https://github.com/handsontable/handsontable/pull/11508)
-- Fixed an issue with empty parentNode in the table getCords method [#11509](https://github.com/handsontable/handsontable/pull/11509)
-- Improved undo/redo working for removed rows/columns [#11515](https://github.com/handsontable/handsontable/pull/11515)
-- Fixed rows height calculations for merged cells on Safari [#11517](https://github.com/handsontable/handsontable/pull/11517)
-- Fixed missing (incorrect) render call after dataset change [#11529](https://github.com/handsontable/handsontable/pull/11529)
-- Fixed an issue with the mobile keyboard closing after clicking the filter search input on Android devices  [#11532](https://github.com/handsontable/handsontable/pull/11532)
+- Fixed an issue with an empty `parentNode` in the table's `getCords` method. [#11509](https://github.com/handsontable/handsontable/pull/11509)
+- Improved the Undo/Redo actions for removing rows and columns. [#11515](https://github.com/handsontable/handsontable/pull/11515)
+- Fixed rows' height calculations for merged cells on Safari. [#11517](https://github.com/handsontable/handsontable/pull/11517)
+- Fixed the missing (incorrect) render call after dataset change. [#11529](https://github.com/handsontable/handsontable/pull/11529)
+- Fixed an issue with the mobile keyboard closing after clicking the filter search input on Android devices.  [#11532](https://github.com/handsontable/handsontable/pull/11532)
 - Fixed a problem with multiple row header levels being rendered in reverse order. [#11533](https://github.com/handsontable/handsontable/pull/11533)
-- Fixed `TypeError` error for AutoRowSize plugin [#11537](https://github.com/handsontable/handsontable/pull/11537)
-- Allow changing the selection after filter is applied [#11538](https://github.com/handsontable/handsontable/pull/11538)
-- Fixed a problem with the autocomplete editor rendering very slowly when provided with a long list of choices. [#11552](https://github.com/handsontable/handsontable/pull/11552)
-- Fixed an issue with focus catcher accessibility [#11553](https://github.com/handsontable/handsontable/pull/11553)
-- Fixed `TypeError` for rows removal for bottom overlay [#11555](https://github.com/handsontable/handsontable/pull/11555)
-- Fixed calculating the first row height [#11557](https://github.com/handsontable/handsontable/pull/11557)
-- Fixed an issue with highlighting the cell  after call updateData [#11558](https://github.com/handsontable/handsontable/pull/11558)
-- Fixed unmerge cells action triggered form keyboard shortcut [#11559](https://github.com/handsontable/handsontable/pull/11559)
-- Fixed arrow left/right shortcuts for menu when the table was configured as `layoutDirection: rtl`. [#11562](https://github.com/handsontable/handsontable/pull/11562)
-- Fixed an issue with duplicate boolean values in filters [#11563](https://github.com/handsontable/handsontable/pull/11563)
-- Fixed an issue with data source for non-string values in the `name` property [#11565](https://github.com/handsontable/handsontable/pull/11565)
-- Fixed settings object not being updated after new hooks [#11566](https://github.com/handsontable/handsontable/pull/11566)
+- Fixed a `TypeError` error for the `AutoRowSize` plugin. [#11537](https://github.com/handsontable/handsontable/pull/11537)
+- Allow changing the selection after a filter was applied. [#11538](https://github.com/handsontable/handsontable/pull/11538)
+- Fixed a problem with the Autocomplete editor rendering very slowly when provided with a long list of choices. [#11552](https://github.com/handsontable/handsontable/pull/11552)
+- Fixed an issue with the focus catcher accessibility. [#11553](https://github.com/handsontable/handsontable/pull/11553)
+- Fixed a `TypeError` error being thrown after removing rows on the bottom overlay. [#11555](https://github.com/handsontable/handsontable/pull/11555)
+- Fixed calculating the first row height. [#11557](https://github.com/handsontable/handsontable/pull/11557)
+- Fixed an issue with highlighting a cell after calling `updateData`. [#11558](https://github.com/handsontable/handsontable/pull/11558)
+- Fixed the "unmerge cells" action triggered form keyboard shortcut. [#11559](https://github.com/handsontable/handsontable/pull/11559)
+- Fixed the left/right-arrow shortcuts for menus when the table was configured with `layoutDirection: rtl`. [#11562](https://github.com/handsontable/handsontable/pull/11562)
+- Fixed an issue with duplicate boolean values in the filters. [#11563](https://github.com/handsontable/handsontable/pull/11563)
+- Fixed an issue with data sources with non-string values under the `name` property. [#11565](https://github.com/handsontable/handsontable/pull/11565)
+- Fixed the settings object not being updated after adding new hooks. [#11566](https://github.com/handsontable/handsontable/pull/11566)
 - Fixed a problem with the table rendering all rows when it's configured to have `0px` height. [#11567](https://github.com/handsontable/handsontable/pull/11567)
-- Fixed copy/paste/cut functionalities for web components [#11572](https://github.com/handsontable/handsontable/pull/11572)
+- Fixed the copy/paste/cut functionalities for web components. [#11572](https://github.com/handsontable/handsontable/pull/11572)
 - Fixed the `allowInvalid` option (both `true` and `false`) for the Dropdown Editor.  [#11587](https://github.com/handsontable/handsontable/pull/11587)
 - Fixed a problem with a deprecation warnings being thrown when using Context Menu's Undo and Redo items. [#11588](https://github.com/handsontable/handsontable/pull/11588)
-- Fixed an error being thrown when editing a Autocomplete-typed cells with a long list of choices rendered in a small container. [#11589](https://github.com/handsontable/handsontable/pull/11589)
+- Fixed an error being thrown when editing Autocomplete-typed cells with a long list of choices rendered in a small container. [#11589](https://github.com/handsontable/handsontable/pull/11589)
 - Ensured that there's a single `@charset` entry in the classic theme's CSS files and that it's placed at the beginning of those files. [#11591](https://github.com/handsontable/handsontable/pull/11591)
 
 ## [15.2.0] - 2025-03-19

package/README.md

@@ -80,8 +80,8 @@ You can also use [Yarn](https://yarnpkg.com/package/handsontable), [NuGet](https
 ### Provide an HTML container
 
   ```html
-  <!-- Set the container's ID and apply the desired theme -->
-  <div id="handsontable-example" class="ht-theme-main-dark-auto"></div>
+  <!-- Set the container's ID -->
+  <div id="handsontable-grid"></div>
   ```
 
 ### Setup
@@ -96,6 +96,9 @@ You can also use [Yarn](https://yarnpkg.com/package/handsontable), [NuGet](https
   const element = document.getElementById('handsontable-grid');
   
   new Handsontable(element, {
+    // theme name with obligatory ht-theme-* prefix
+    themeName: 'ht-theme-main-dark-auto',
+    // other options
     data: [
       { company: 'Tagcat', country: 'United Kingdom', rating: 4.4 },
       { company: 'Zoomzone', country: 'Japan', rating: 4.5 },
@@ -143,12 +146,15 @@ You can also use [Yarn](https://yarnpkg.com/package/handsontable), [NuGet](https
       />
     </head>
     <body>
-      <div id="handsontable-grid" class="ht-theme-main-dark-auto"></div>
+      <div id="handsontable-grid"></div>
       <script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
       <script>
         const element = document.getElementById("handsontable-grid");
   
         new Handsontable(element, {
+          // theme name with obligatory ht-theme-* prefix
+          themeName: 'ht-theme-main-dark-auto',
+          // other options
           data: [
             { company: "Tagcat", country: "United Kingdom", rating: 4.4 },
             { company: "Zoomzone", country: "Japan", rating: 4.5 },
@@ -218,7 +224,7 @@ At first glance, it might seem that a data table, spreadsheet, and data grid are
 If you're using Handsontable with a free, non-commercial license, you can:
 - Join the conversation on [GitHub Discussions](https://github.com/handsontable/handsontable/discussions) to share ideas, suggest features, or discuss changes.
 - Report any bugs you find on our [GitHub Issue Board](https://github.com/handsontable/handsontable/issues).
-- Connect with other developers and find answers on our [Developer Forum](https://handsontable.com/forum).
+- Connect with other developers and find answers on our [Developer Forum](https://forum.handsontable.com).
 
 If you have a commercial license, feel free to contact us directly at [support@handsontable.com](mailto:support@handsontable.com) or use our [contact form](https://handsontable.com/contact?category=technical_support).
 

package/base.js

@@ -45,8 +45,8 @@ Handsontable.hooks = _hooks.Hooks.getSingleton();
 Handsontable.CellCoords = _src.CellCoords;
 Handsontable.CellRange = _src.CellRange;
 Handsontable.packageName = 'handsontable';
-Handsontable.buildDate = "24/04/2025 10:58:57";
-Handsontable.version = "15.3.0";
+Handsontable.buildDate = "02/07/2025 09:18:40";
+Handsontable.version = "16.0.0-next-f486b48-20250702";
 Handsontable.languages = {
   dictionaryKeys: _registry.dictionaryKeys,
   getLanguageDictionary: _registry.getLanguageDictionary,

package/base.mjs

@@ -35,8 +35,8 @@ Handsontable.hooks = Hooks.getSingleton();
 Handsontable.CellCoords = CellCoords;
 Handsontable.CellRange = CellRange;
 Handsontable.packageName = 'handsontable';
-Handsontable.buildDate = "24/04/2025 10:59:00";
-Handsontable.version = "15.3.0";
+Handsontable.buildDate = "02/07/2025 09:18:46";
+Handsontable.version = "16.0.0-next-f486b48-20250702";
 Handsontable.languages = {
   dictionaryKeys,
   getLanguageDictionary,

package/cellTypes/registry.js

@@ -4,18 +4,17 @@ exports.__esModule = true;
 exports.getCellType = _getItem;
 exports.registerCellType = _register;
 require("core-js/modules/es.error.cause.js");
-var _staticRegister = _interopRequireDefault(require("../utils/staticRegister"));
+var _staticRegister = require("../utils/staticRegister");
 var _registry = require("../editors/registry");
 var _registry2 = require("../renderers/registry");
 var _registry3 = require("../validators/registry");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const {
   register,
   getItem,
   hasItem,
   getNames,
   getValues
-} = (0, _staticRegister.default)('cellTypes');
+} = (0, _staticRegister.staticRegister)('cellTypes');
 
 /**
  * Retrieve cell type object.

package/cellTypes/registry.mjs

@@ -1,5 +1,5 @@
 import "core-js/modules/es.error.cause.js";
-import staticRegister from "../utils/staticRegister.mjs";
+import { staticRegister } from "../utils/staticRegister.mjs";
 import { registerEditor } from "../editors/registry.mjs";
 import { registerRenderer } from "../renderers/registry.mjs";
 import { registerValidator } from "../validators/registry.mjs";

package/core/coordsMapper/rangeToRenderableMapper.js

@@ -0,0 +1,124 @@
+"use strict";
+
+exports.__esModule = true;
+require("core-js/modules/es.error.cause.js");
+function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
+function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
+function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
+function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
+function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
+function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
+var _rowIndexMapper = /*#__PURE__*/new WeakMap();
+var _columnIndexMapper = /*#__PURE__*/new WeakMap();
+var _CellRangeToRenderableMapper_brand = /*#__PURE__*/new WeakSet();
+/* eslint-disable jsdoc/require-description-complete-sentence */
+/**
+ * CellRangeToRenderableMapper is a utility responsible for converting CellRange instances
+ * defined in visual coordinates (which may include hidden rows/columns) into renderable
+ * coordinates (excluding hidden indices).
+ *
+ * This class encapsulates the translation logic, allowing other modules to operate
+ * on renderable coordinates without needing to be aware of the underlying index mapping implementation.
+ *
+ * It promotes separation of concerns by decoupling the transformation logic from data structures
+ * like CellRange or CellCoords, keeping those classes clean and focused on structural concerns.
+ *
+ * Example usage:
+ *   import { resolveWithInstance } from './utils/staticRegister';
+ *
+ *   const cellRange = new CellRange(...);
+ *   const renderableRange = resolveWithInstance(this.hot, 'cellRangeMapper')
+ *     .toRenderable(cellRange);
+ */
+class CellRangeToRenderableMapper {
+  constructor(_ref) {
+    let {
+      rowIndexMapper,
+      columnIndexMapper
+    } = _ref;
+    /**
+     * Gets nearest coordinates that points to the visible row and column indexes. If there are no visible
+     * rows and/or columns the `null` value is returned.
+     *
+     * @private
+     * @param {CellCoords} coords The coords object as starting point for finding the nearest visible coordinates.
+     * @param {1|-1} rowSearchDirection The search direction. For value 1, it means searching from top to bottom for
+     *                                  rows and from left to right for columns. For -1, it is the other way around.
+     * @param {1|-1} columnSearchDirection The same as above but for rows.
+     * @returns {CellCoords|null} Visual cell coordinates.
+     */
+    _classPrivateMethodInitSpec(this, _CellRangeToRenderableMapper_brand);
+    /**
+     * The instance of the IndexMapper class for row indexes.
+     *
+     * @param {IndexMapper}
+     */
+    _classPrivateFieldInitSpec(this, _rowIndexMapper, void 0);
+    /**
+     * The instance of the IndexMapper class for row indexes.
+     *
+     * @param {IndexMapper}
+     */
+    _classPrivateFieldInitSpec(this, _columnIndexMapper, void 0);
+    _classPrivateFieldSet(_rowIndexMapper, this, rowIndexMapper);
+    _classPrivateFieldSet(_columnIndexMapper, this, columnIndexMapper);
+  }
+
+  /**
+   * Converts the visual coordinates of the CellRange instance to the renderable coordinates.
+   *
+   * @param {CellRange} range The CellRange instance with defined visual coordinates.
+   * @returns {CellRange | null}
+   */
+  toRenderable(range) {
+    const rowDirection = range.getVerticalDirection() === 'N-S' ? 1 : -1;
+    const columnDirection = range.getHorizontalDirection() === 'W-E' ? 1 : -1;
+    const from = _assertClassBrand(_CellRangeToRenderableMapper_brand, this, _getNearestNotHiddenCoords).call(this, range.from, rowDirection, columnDirection);
+    if (from === null) {
+      return null;
+    }
+    const to = _assertClassBrand(_CellRangeToRenderableMapper_brand, this, _getNearestNotHiddenCoords).call(this, range.to, -rowDirection, -columnDirection);
+    if (to === null) {
+      return null;
+    }
+    const newRange = range.clone();
+    newRange.from = from;
+    newRange.to = to;
+    if (!newRange.includes(range.highlight)) {
+      newRange.highlight = from;
+    }
+    return newRange;
+  }
+}
+exports.CellRangeToRenderableMapper = CellRangeToRenderableMapper;
+function _getNearestNotHiddenCoords(coords, rowSearchDirection) {
+  let columnSearchDirection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : rowSearchDirection;
+  const nextVisibleRow = _assertClassBrand(_CellRangeToRenderableMapper_brand, this, _getNearestNotHiddenIndex).call(this, _classPrivateFieldGet(_rowIndexMapper, this), coords.row, rowSearchDirection);
+  if (nextVisibleRow === null) {
+    return null;
+  }
+  const nextVisibleColumn = _assertClassBrand(_CellRangeToRenderableMapper_brand, this, _getNearestNotHiddenIndex).call(this, _classPrivateFieldGet(_columnIndexMapper, this), coords.col, columnSearchDirection);
+  if (nextVisibleColumn === null) {
+    return null;
+  }
+  return coords.clone().assign({
+    row: nextVisibleRow,
+    col: nextVisibleColumn
+  });
+}
+/**
+ * Gets nearest visual index. If there are no visible rows or columns the `null` value is returned.
+ *
+ * @private
+ * @param {IndexMapper} indexMapper The IndexMapper instance for specific axis.
+ * @param {number} visualIndex The index as starting point for finding the nearest visible index.
+ * @param {1|-1} searchDirection The search direction. For value 1, it means searching from top to bottom for
+ *                               rows and from left to right for columns. For -1, it is the other way around.
+ * @returns {number|null} Visual row/column index.
+ */
+function _getNearestNotHiddenIndex(indexMapper, visualIndex, searchDirection) {
+  if (visualIndex < 0) {
+    return visualIndex;
+  }
+  return indexMapper.getNearestNotHiddenIndex(visualIndex, searchDirection);
+}

package/core/coordsMapper/rangeToRenderableMapper.mjs

@@ -0,0 +1,120 @@
+import "core-js/modules/es.error.cause.js";
+function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
+function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
+function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
+function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
+function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
+function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
+var _rowIndexMapper = /*#__PURE__*/new WeakMap();
+var _columnIndexMapper = /*#__PURE__*/new WeakMap();
+var _CellRangeToRenderableMapper_brand = /*#__PURE__*/new WeakSet();
+/* eslint-disable jsdoc/require-description-complete-sentence */
+/**
+ * CellRangeToRenderableMapper is a utility responsible for converting CellRange instances
+ * defined in visual coordinates (which may include hidden rows/columns) into renderable
+ * coordinates (excluding hidden indices).
+ *
+ * This class encapsulates the translation logic, allowing other modules to operate
+ * on renderable coordinates without needing to be aware of the underlying index mapping implementation.
+ *
+ * It promotes separation of concerns by decoupling the transformation logic from data structures
+ * like CellRange or CellCoords, keeping those classes clean and focused on structural concerns.
+ *
+ * Example usage:
+ *   import { resolveWithInstance } from './utils/staticRegister';
+ *
+ *   const cellRange = new CellRange(...);
+ *   const renderableRange = resolveWithInstance(this.hot, 'cellRangeMapper')
+ *     .toRenderable(cellRange);
+ */
+export class CellRangeToRenderableMapper {
+  constructor(_ref) {
+    let {
+      rowIndexMapper,
+      columnIndexMapper
+    } = _ref;
+    /**
+     * Gets nearest coordinates that points to the visible row and column indexes. If there are no visible
+     * rows and/or columns the `null` value is returned.
+     *
+     * @private
+     * @param {CellCoords} coords The coords object as starting point for finding the nearest visible coordinates.
+     * @param {1|-1} rowSearchDirection The search direction. For value 1, it means searching from top to bottom for
+     *                                  rows and from left to right for columns. For -1, it is the other way around.
+     * @param {1|-1} columnSearchDirection The same as above but for rows.
+     * @returns {CellCoords|null} Visual cell coordinates.
+     */
+    _classPrivateMethodInitSpec(this, _CellRangeToRenderableMapper_brand);
+    /**
+     * The instance of the IndexMapper class for row indexes.
+     *
+     * @param {IndexMapper}
+     */
+    _classPrivateFieldInitSpec(this, _rowIndexMapper, void 0);
+    /**
+     * The instance of the IndexMapper class for row indexes.
+     *
+     * @param {IndexMapper}
+     */
+    _classPrivateFieldInitSpec(this, _columnIndexMapper, void 0);
+    _classPrivateFieldSet(_rowIndexMapper, this, rowIndexMapper);
+    _classPrivateFieldSet(_columnIndexMapper, this, columnIndexMapper);
+  }
+
+  /**
+   * Converts the visual coordinates of the CellRange instance to the renderable coordinates.
+   *
+   * @param {CellRange} range The CellRange instance with defined visual coordinates.
+   * @returns {CellRange | null}
+   */
+  toRenderable(range) {
+    const rowDirection = range.getVerticalDirection() === 'N-S' ? 1 : -1;
+    const columnDirection = range.getHorizontalDirection() === 'W-E' ? 1 : -1;
+    const from = _assertClassBrand(_CellRangeToRenderableMapper_brand, this, _getNearestNotHiddenCoords).call(this, range.from, rowDirection, columnDirection);
+    if (from === null) {
+      return null;
+    }
+    const to = _assertClassBrand(_CellRangeToRenderableMapper_brand, this, _getNearestNotHiddenCoords).call(this, range.to, -rowDirection, -columnDirection);
+    if (to === null) {
+      return null;
+    }
+    const newRange = range.clone();
+    newRange.from = from;
+    newRange.to = to;
+    if (!newRange.includes(range.highlight)) {
+      newRange.highlight = from;
+    }
+    return newRange;
+  }
+}
+function _getNearestNotHiddenCoords(coords, rowSearchDirection) {
+  let columnSearchDirection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : rowSearchDirection;
+  const nextVisibleRow = _assertClassBrand(_CellRangeToRenderableMapper_brand, this, _getNearestNotHiddenIndex).call(this, _classPrivateFieldGet(_rowIndexMapper, this), coords.row, rowSearchDirection);
+  if (nextVisibleRow === null) {
+    return null;
+  }
+  const nextVisibleColumn = _assertClassBrand(_CellRangeToRenderableMapper_brand, this, _getNearestNotHiddenIndex).call(this, _classPrivateFieldGet(_columnIndexMapper, this), coords.col, columnSearchDirection);
+  if (nextVisibleColumn === null) {
+    return null;
+  }
+  return coords.clone().assign({
+    row: nextVisibleRow,
+    col: nextVisibleColumn
+  });
+}
+/**
+ * Gets nearest visual index. If there are no visible rows or columns the `null` value is returned.
+ *
+ * @private
+ * @param {IndexMapper} indexMapper The IndexMapper instance for specific axis.
+ * @param {number} visualIndex The index as starting point for finding the nearest visible index.
+ * @param {1|-1} searchDirection The search direction. For value 1, it means searching from top to bottom for
+ *                               rows and from left to right for columns. For -1, it is the other way around.
+ * @returns {number|null} Visual row/column index.
+ */
+function _getNearestNotHiddenIndex(indexMapper, visualIndex, searchDirection) {
+  if (visualIndex < 0) {
+    return visualIndex;
+  }
+  return indexMapper.getNearestNotHiddenIndex(visualIndex, searchDirection);
+}

package/core/focusCatcher/focusDetector.js

@@ -21,8 +21,8 @@ function installFocusDetector(hot) {
   const inputTrapBottom = createInputElement(hot);
   inputTrapTop.addEventListener('focus', () => hooks === null || hooks === void 0 ? void 0 : hooks.onFocusFromTop());
   inputTrapBottom.addEventListener('focus', () => hooks === null || hooks === void 0 ? void 0 : hooks.onFocusFromBottom());
-  rootElement.firstChild.before(inputTrapTop);
-  rootElement.lastChild.after(inputTrapBottom);
+  rootElement.before(inputTrapTop);
+  rootElement.after(inputTrapBottom);
   return {
     /**
      * Activates the detector by resetting the tabIndex of the input elements.

package/core/focusCatcher/focusDetector.mjs

@@ -17,8 +17,8 @@ export function installFocusDetector(hot) {
   const inputTrapBottom = createInputElement(hot);
   inputTrapTop.addEventListener('focus', () => hooks === null || hooks === void 0 ? void 0 : hooks.onFocusFromTop());
   inputTrapBottom.addEventListener('focus', () => hooks === null || hooks === void 0 ? void 0 : hooks.onFocusFromBottom());
-  rootElement.firstChild.before(inputTrapTop);
-  rootElement.lastChild.after(inputTrapBottom);
+  rootElement.before(inputTrapTop);
+  rootElement.after(inputTrapBottom);
   return {
     /**
      * Activates the detector by resetting the tabIndex of the input elements.