handsontable 16.0.1 → 16.1.0-next-abd8f2e-20250904

package/tableView.js

@@ -165,25 +165,33 @@ class TableView {
     if (!this.hot.isRenderSuspended()) {
       const isFullRender = this.hot.forceFullRender;
       this.hot.runHooks('beforeRender', isFullRender);
+      this._wt.draw(!isFullRender);
+      _assertClassBrand(_TableView_brand, this, _updateScrollbarClassNames).call(this);
       if (this.postponedAdjustElementsSize) {
         this.postponedAdjustElementsSize = false;
-        this.adjustElementsSize();
+        this.adjustElementsSize(true);
       }
-      this._wt.draw(!isFullRender);
-      _assertClassBrand(_TableView_brand, this, _updateScrollbarClassNames).call(this);
       this.hot.runHooks('afterRender', isFullRender);
       this.hot.forceFullRender = false;
     }
   }
 
   /**
-   * Adjust overlays elements size and master table size.
+   * Adjust overlays elements size and master table size. By default the internal `adjustElementsSize`
+   * call of the Walkontable is postponed to the next render cycle. If `flush` is set to `true`, the method
+   * will be executed immediately.
+   *
+   * TODO: This method should not exist. It is a workaround for the issue with updating the elements
+   * size after render. It should be calculated and updated automatically in Walkontable.
+   *
+   * @param {boolean} [flush=false] If `true`, the method will be executed immediately.
    */
   adjustElementsSize() {
-    if (this.hot.isRenderSuspended()) {
-      this.postponedAdjustElementsSize = true;
-    } else {
+    let flush = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    if (flush) {
       this._wt.wtOverlays.adjustElementsSize();
+    } else {
+      this.postponedAdjustElementsSize = true;
     }
   }
 
@@ -285,6 +293,7 @@ class TableView {
    */
   registerEvents() {
     const {
+      rootWrapperElement,
       rootElement,
       rootDocument,
       selection,
@@ -318,15 +327,19 @@ class TableView {
       }
     });
     this.eventManager.addEventListener(documentElement, 'mouseup', event => {
+      var _rootDocument$querySe;
       if (selection.isInProgress() && (0, _event.isLeftClick)(event)) {
         selection.finish();
       }
       _classPrivateFieldSet(_mouseDown, this, false);
       const isOutsideInputElement = (0, _element.isOutsideInput)(rootDocument.activeElement);
-      if ((0, _element.isInput)(rootDocument.activeElement) && !isOutsideInputElement) {
+      // TODO: This is a workaround to prevent the unlisten event from being triggered when the active element is inside a dialog.
+      // Should be removed when the focus manager is implemented.
+      const isInsideDialog = (_rootDocument$querySe = rootDocument.querySelector('.ht-dialog')) === null || _rootDocument$querySe === void 0 ? void 0 : _rootDocument$querySe.contains(rootDocument.activeElement);
+      if ((0, _element.isInput)(rootDocument.activeElement) && !isOutsideInputElement || isInsideDialog) {
         return;
       }
-      if (isOutsideInputElement || !selection.isSelected() && !selection.isSelectedByAnyHeader() && !rootElement.contains(event.target) && !(0, _event.isRightClick)(event)) {
+      if (isOutsideInputElement || !selection.isSelected() && !selection.isSelectedByAnyHeader() && !(rootWrapperElement !== null && rootWrapperElement !== void 0 ? rootWrapperElement : rootElement).contains(event.target) && !(0, _event.isRightClick)(event)) {
         this.hot.unlisten();
       }
     });
@@ -1081,6 +1094,7 @@ class TableView {
    * @returns {boolean}
    */
   isTextSelectionAllowed(el) {
+    var _this$hot$getSelected, _this$hot$getSelected2;
     if ((0, _element.isInput)(el)) {
       return true;
     }
@@ -1088,10 +1102,11 @@ class TableView {
     if (this.settings.fragmentSelection === true && isChildOfTableBody) {
       return true;
     }
-    if (this.settings.fragmentSelection === 'cell' && this.isSelectedOnlyCell() && isChildOfTableBody) {
+    const isSingleCell = (_this$hot$getSelected = (_this$hot$getSelected2 = this.hot.getSelectedRangeActive()) === null || _this$hot$getSelected2 === void 0 ? void 0 : _this$hot$getSelected2.isSingleCell()) !== null && _this$hot$getSelected !== void 0 ? _this$hot$getSelected : false;
+    if (this.settings.fragmentSelection === 'cell' && isSingleCell && isChildOfTableBody) {
       return true;
     }
-    if (!this.settings.fragmentSelection && this.isCellEdited() && this.isSelectedOnlyCell()) {
+    if (!this.settings.fragmentSelection && this.isCellEdited() && isSingleCell) {
       return true;
     }
     return false;
@@ -1107,17 +1122,6 @@ class TableView {
     return _classPrivateFieldGet(_mouseDown, this);
   }
 
-  /**
-   * Check if selected only one cell.
-   *
-   * @private
-   * @returns {boolean}
-   */
-  isSelectedOnlyCell() {
-    var _this$hot$getSelected, _this$hot$getSelected2;
-    return (_this$hot$getSelected = (_this$hot$getSelected2 = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected2 === void 0 ? void 0 : _this$hot$getSelected2.isSingleCell()) !== null && _this$hot$getSelected !== void 0 ? _this$hot$getSelected : false;
-  }
-
   /**
    * Checks if active cell is editing.
    *
@@ -1572,7 +1576,8 @@ class TableView {
   }
 
   /**
-   * Gets the table's width.
+   * Gets table's width. The returned width is the width of the rendered cells that fit in the
+   * current viewport. The value may change depends on the viewport position (scroll position).
    *
    * @returns {boolean}
    */
@@ -1581,7 +1586,8 @@ class TableView {
   }
 
   /**
-   * Gets the table's height.
+   * Gets table's height. The returned height is the height of the rendered cells that fit in the
+   * current viewport. The value may change depends on the viewport position (scroll position).
    *
    * @returns {boolean}
    */
@@ -1589,6 +1595,26 @@ class TableView {
     return this._wt.wtTable.getHeight();
   }
 
+  /**
+   * Gets table's total width. The returned width is the width of all rendered cells (including headers)
+   * that can be displayed in the table.
+   *
+   * @returns {boolean}
+   */
+  getTotalTableWidth() {
+    return this._wt.wtTable.getTotalWidth();
+  }
+
+  /**
+   * Gets table's total height. The returned height is the height of all rendered cells (including headers)
+   * that can be displayed in the table.
+   *
+   * @returns {boolean}
+   */
+  getTotalTableHeight() {
+    return this._wt.wtTable.getTotalHeight();
+  }
+
   /**
    * Gets the table's offset.
    *
@@ -1661,7 +1687,7 @@ function _updateAriaColcount(delta) {
  * Updates the class names on the root element based on the presence of scrollbars.
  *
  * This method checks if the table has vertical and/or horizontal scrollbars and
- * adds or removes the corresponding class names (`htHasScrollY` and `htHasScrollX`)
+ * adds or removes the corresponding class names (`htHasScrollY`, `htHasScrollX` and more)
  * to/from the root element.
  */
 function _updateScrollbarClassNames() {
@@ -1671,10 +1697,20 @@ function _updateScrollbarClassNames() {
   } else {
     (0, _element.removeClass)(rootElement, 'htHasScrollY');
   }
+  if (this.isVerticallyScrollableByWindow()) {
+    (0, _element.addClass)(rootElement, 'htVerticallyScrollableByWindow');
+  } else {
+    (0, _element.removeClass)(rootElement, 'htVerticallyScrollableByWindow');
+  }
   if (this.hasHorizontalScroll()) {
     (0, _element.addClass)(rootElement, 'htHasScrollX');
   } else {
     (0, _element.removeClass)(rootElement, 'htHasScrollX');
   }
+  if (this.isHorizontallyScrollableByWindow()) {
+    (0, _element.addClass)(rootElement, 'htHorizontallyScrollableByWindow');
+  } else {
+    (0, _element.removeClass)(rootElement, 'htHorizontallyScrollableByWindow');
+  }
 }
 var _default = exports.default = TableView;

package/tableView.mjs

@@ -161,25 +161,33 @@ class TableView {
     if (!this.hot.isRenderSuspended()) {
       const isFullRender = this.hot.forceFullRender;
       this.hot.runHooks('beforeRender', isFullRender);
+      this._wt.draw(!isFullRender);
+      _assertClassBrand(_TableView_brand, this, _updateScrollbarClassNames).call(this);
       if (this.postponedAdjustElementsSize) {
         this.postponedAdjustElementsSize = false;
-        this.adjustElementsSize();
+        this.adjustElementsSize(true);
       }
-      this._wt.draw(!isFullRender);
-      _assertClassBrand(_TableView_brand, this, _updateScrollbarClassNames).call(this);
       this.hot.runHooks('afterRender', isFullRender);
       this.hot.forceFullRender = false;
     }
   }
 
   /**
-   * Adjust overlays elements size and master table size.
+   * Adjust overlays elements size and master table size. By default the internal `adjustElementsSize`
+   * call of the Walkontable is postponed to the next render cycle. If `flush` is set to `true`, the method
+   * will be executed immediately.
+   *
+   * TODO: This method should not exist. It is a workaround for the issue with updating the elements
+   * size after render. It should be calculated and updated automatically in Walkontable.
+   *
+   * @param {boolean} [flush=false] If `true`, the method will be executed immediately.
    */
   adjustElementsSize() {
-    if (this.hot.isRenderSuspended()) {
-      this.postponedAdjustElementsSize = true;
-    } else {
+    let flush = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    if (flush) {
       this._wt.wtOverlays.adjustElementsSize();
+    } else {
+      this.postponedAdjustElementsSize = true;
     }
   }
 
@@ -281,6 +289,7 @@ class TableView {
    */
   registerEvents() {
     const {
+      rootWrapperElement,
       rootElement,
       rootDocument,
       selection,
@@ -314,15 +323,19 @@ class TableView {
       }
     });
     this.eventManager.addEventListener(documentElement, 'mouseup', event => {
+      var _rootDocument$querySe;
       if (selection.isInProgress() && isLeftClick(event)) {
         selection.finish();
       }
       _classPrivateFieldSet(_mouseDown, this, false);
       const isOutsideInputElement = isOutsideInput(rootDocument.activeElement);
-      if (isInput(rootDocument.activeElement) && !isOutsideInputElement) {
+      // TODO: This is a workaround to prevent the unlisten event from being triggered when the active element is inside a dialog.
+      // Should be removed when the focus manager is implemented.
+      const isInsideDialog = (_rootDocument$querySe = rootDocument.querySelector('.ht-dialog')) === null || _rootDocument$querySe === void 0 ? void 0 : _rootDocument$querySe.contains(rootDocument.activeElement);
+      if (isInput(rootDocument.activeElement) && !isOutsideInputElement || isInsideDialog) {
         return;
       }
-      if (isOutsideInputElement || !selection.isSelected() && !selection.isSelectedByAnyHeader() && !rootElement.contains(event.target) && !isRightClick(event)) {
+      if (isOutsideInputElement || !selection.isSelected() && !selection.isSelectedByAnyHeader() && !(rootWrapperElement !== null && rootWrapperElement !== void 0 ? rootWrapperElement : rootElement).contains(event.target) && !isRightClick(event)) {
         this.hot.unlisten();
       }
     });
@@ -1077,6 +1090,7 @@ class TableView {
    * @returns {boolean}
    */
   isTextSelectionAllowed(el) {
+    var _this$hot$getSelected, _this$hot$getSelected2;
     if (isInput(el)) {
       return true;
     }
@@ -1084,10 +1098,11 @@ class TableView {
     if (this.settings.fragmentSelection === true && isChildOfTableBody) {
       return true;
     }
-    if (this.settings.fragmentSelection === 'cell' && this.isSelectedOnlyCell() && isChildOfTableBody) {
+    const isSingleCell = (_this$hot$getSelected = (_this$hot$getSelected2 = this.hot.getSelectedRangeActive()) === null || _this$hot$getSelected2 === void 0 ? void 0 : _this$hot$getSelected2.isSingleCell()) !== null && _this$hot$getSelected !== void 0 ? _this$hot$getSelected : false;
+    if (this.settings.fragmentSelection === 'cell' && isSingleCell && isChildOfTableBody) {
       return true;
     }
-    if (!this.settings.fragmentSelection && this.isCellEdited() && this.isSelectedOnlyCell()) {
+    if (!this.settings.fragmentSelection && this.isCellEdited() && isSingleCell) {
       return true;
     }
     return false;
@@ -1103,17 +1118,6 @@ class TableView {
     return _classPrivateFieldGet(_mouseDown, this);
   }
 
-  /**
-   * Check if selected only one cell.
-   *
-   * @private
-   * @returns {boolean}
-   */
-  isSelectedOnlyCell() {
-    var _this$hot$getSelected, _this$hot$getSelected2;
-    return (_this$hot$getSelected = (_this$hot$getSelected2 = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected2 === void 0 ? void 0 : _this$hot$getSelected2.isSingleCell()) !== null && _this$hot$getSelected !== void 0 ? _this$hot$getSelected : false;
-  }
-
   /**
    * Checks if active cell is editing.
    *
@@ -1568,7 +1572,8 @@ class TableView {
   }
 
   /**
-   * Gets the table's width.
+   * Gets table's width. The returned width is the width of the rendered cells that fit in the
+   * current viewport. The value may change depends on the viewport position (scroll position).
    *
    * @returns {boolean}
    */
@@ -1577,7 +1582,8 @@ class TableView {
   }
 
   /**
-   * Gets the table's height.
+   * Gets table's height. The returned height is the height of the rendered cells that fit in the
+   * current viewport. The value may change depends on the viewport position (scroll position).
    *
    * @returns {boolean}
    */
@@ -1585,6 +1591,26 @@ class TableView {
     return this._wt.wtTable.getHeight();
   }
 
+  /**
+   * Gets table's total width. The returned width is the width of all rendered cells (including headers)
+   * that can be displayed in the table.
+   *
+   * @returns {boolean}
+   */
+  getTotalTableWidth() {
+    return this._wt.wtTable.getTotalWidth();
+  }
+
+  /**
+   * Gets table's total height. The returned height is the height of all rendered cells (including headers)
+   * that can be displayed in the table.
+   *
+   * @returns {boolean}
+   */
+  getTotalTableHeight() {
+    return this._wt.wtTable.getTotalHeight();
+  }
+
   /**
    * Gets the table's offset.
    *
@@ -1657,7 +1683,7 @@ function _updateAriaColcount(delta) {
  * Updates the class names on the root element based on the presence of scrollbars.
  *
  * This method checks if the table has vertical and/or horizontal scrollbars and
- * adds or removes the corresponding class names (`htHasScrollY` and `htHasScrollX`)
+ * adds or removes the corresponding class names (`htHasScrollY`, `htHasScrollX` and more)
  * to/from the root element.
  */
 function _updateScrollbarClassNames() {
@@ -1667,10 +1693,20 @@ function _updateScrollbarClassNames() {
   } else {
     removeClass(rootElement, 'htHasScrollY');
   }
+  if (this.isVerticallyScrollableByWindow()) {
+    addClass(rootElement, 'htVerticallyScrollableByWindow');
+  } else {
+    removeClass(rootElement, 'htVerticallyScrollableByWindow');
+  }
   if (this.hasHorizontalScroll()) {
     addClass(rootElement, 'htHasScrollX');
   } else {
     removeClass(rootElement, 'htHasScrollX');
   }
+  if (this.isHorizontallyScrollableByWindow()) {
+    addClass(rootElement, 'htHorizontallyScrollableByWindow');
+  } else {
+    removeClass(rootElement, 'htHorizontallyScrollableByWindow');
+  }
 }
 export default TableView;

package/utils/a11yAnnouncer.js

@@ -0,0 +1,70 @@
+"use strict";
+
+exports.__esModule = true;
+exports.announce = announce;
+exports.install = install;
+exports.uninstall = uninstall;
+/**
+ * The module provides functionality to announce custom messages to assistive technologies.
+ */
+let announcerElement = null;
+let installCounter = 0;
+
+/**
+ * Installs the a11y announcer element into the provided root portal element. For each new Handsontable
+ * instance only one announcer element is created, so it can be reused across multiple instances.
+ *
+ * @param {HTMLElement} rootPortalElement The root element where the announcer will be installed.
+ */
+function install(rootPortalElement) {
+  const document = rootPortalElement.ownerDocument;
+  if (!announcerElement) {
+    announcerElement = document.createElement('div');
+    announcerElement.setAttribute('role', 'status');
+    announcerElement.setAttribute('aria-live', 'assertive');
+    announcerElement.setAttribute('aria-atomic', 'true');
+    const style = announcerElement.style;
+    style.position = 'absolute';
+    style.width = '1px';
+    style.height = '1px';
+    style.margin = '-1px';
+    style.overflow = 'hidden';
+    style.clipPath = 'rect(0 0 0 0)';
+    style.whiteSpace = 'nowrap';
+    rootPortalElement.appendChild(announcerElement);
+  }
+  installCounter += 1;
+}
+
+/**
+ * Uninstalls the a11y announcer element if it was installed.
+ */
+function uninstall() {
+  if (installCounter === 0) {
+    return;
+  }
+  if (installCounter === 1) {
+    announcerElement.remove();
+    announcerElement = null;
+  }
+  installCounter -= 1;
+}
+
+/**
+ * Announces a message to assistive technologies by updating the content of the a11y announcer element.
+ *
+ * @param {string} message The message to announce.
+ */
+function announce(message) {
+  if (!announcerElement) {
+    return;
+  }
+
+  // The value needs to be cleared first to ensure that screen readers announce the new message.
+  announcerElement.textContent = '';
+  setTimeout(() => {
+    if (announcerElement) {
+      announcerElement.textContent = message;
+    }
+  }, 100);
+}

package/utils/a11yAnnouncer.mjs

@@ -0,0 +1,64 @@
+/**
+ * The module provides functionality to announce custom messages to assistive technologies.
+ */
+let announcerElement = null;
+let installCounter = 0;
+
+/**
+ * Installs the a11y announcer element into the provided root portal element. For each new Handsontable
+ * instance only one announcer element is created, so it can be reused across multiple instances.
+ *
+ * @param {HTMLElement} rootPortalElement The root element where the announcer will be installed.
+ */
+export function install(rootPortalElement) {
+  const document = rootPortalElement.ownerDocument;
+  if (!announcerElement) {
+    announcerElement = document.createElement('div');
+    announcerElement.setAttribute('role', 'status');
+    announcerElement.setAttribute('aria-live', 'assertive');
+    announcerElement.setAttribute('aria-atomic', 'true');
+    const style = announcerElement.style;
+    style.position = 'absolute';
+    style.width = '1px';
+    style.height = '1px';
+    style.margin = '-1px';
+    style.overflow = 'hidden';
+    style.clipPath = 'rect(0 0 0 0)';
+    style.whiteSpace = 'nowrap';
+    rootPortalElement.appendChild(announcerElement);
+  }
+  installCounter += 1;
+}
+
+/**
+ * Uninstalls the a11y announcer element if it was installed.
+ */
+export function uninstall() {
+  if (installCounter === 0) {
+    return;
+  }
+  if (installCounter === 1) {
+    announcerElement.remove();
+    announcerElement = null;
+  }
+  installCounter -= 1;
+}
+
+/**
+ * Announces a message to assistive technologies by updating the content of the a11y announcer element.
+ *
+ * @param {string} message The message to announce.
+ */
+export function announce(message) {
+  if (!announcerElement) {
+    return;
+  }
+
+  // The value needs to be cleared first to ensure that screen readers announce the new message.
+  announcerElement.textContent = '';
+  setTimeout(() => {
+    if (announcerElement) {
+      announcerElement.textContent = message;
+    }
+  }, 100);
+}

package/{core/focusCatcher → utils}/focusDetector.js

@@ -2,8 +2,14 @@
 
 exports.__esModule = true;
 exports.installFocusDetector = installFocusDetector;
-var _element = require("../../helpers/dom/element");
-var _a11y = require("../../helpers/a11y");
+var _element = require("../helpers/dom/element");
+var _a11y = require("../helpers/a11y");
+/**
+ * @typedef {object} FocusDetector
+ * @property {function(): void} activate Activates the focus detector.
+ * @property {function(): void} deactivate Deactivates the focus detector.
+ * @property {function('from_above' | 'from_below'): void} focus Focuses the input element in the given direction.
+ */
 /**
  * Installs a focus detector module. The module appends two input elements into the DOM side by side.
  * When the first input is focused, then it means that a user entered to the component using the TAB key
@@ -11,19 +17,31 @@ var _a11y = require("../../helpers/a11y");
  * the element below the table. Each action, once detected, triggers the specific hook.
  *
  * @param {Handsontable} hot The Handsontable instance.
- * @param {{ onFocusFromTop: Function, onFocusFromBottom: Function }} hooks An object with defined callbacks to call.
- * @returns {{ activate: Function, deactivate: Function }}
+ * @param {HTMLElement} wrapperElement The wrapper element to install the focus detector into.
+ * @param {{ onFocus: Function }} hooks An object with defined callbacks to call.
+ * @returns {FocusDetector}
  */
-function installFocusDetector(hot) {
-  let hooks = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const rootElement = hot.rootElement;
+function installFocusDetector(hot, wrapperElement) {
+  let hooks = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   const inputTrapTop = createInputElement(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.before(inputTrapTop);
-  rootElement.after(inputTrapBottom);
+  inputTrapTop.addEventListener('focus', () => hooks === null || hooks === void 0 ? void 0 : hooks.onFocus('from_above'));
+  inputTrapBottom.addEventListener('focus', () => hooks === null || hooks === void 0 ? void 0 : hooks.onFocus('from_below'));
+  wrapperElement.prepend(inputTrapTop);
+  wrapperElement.append(inputTrapBottom);
   return {
+    /**
+     * Focuses the input element in the given direction.
+     *
+     * @param {string} direction The direction to focus the input element in.
+     */
+    focus(direction) {
+      if (direction === 'from_above') {
+        inputTrapTop.focus();
+      } else {
+        inputTrapBottom.focus();
+      }
+    },
     /**
      * Activates the detector by resetting the tabIndex of the input elements.
      */
@@ -55,7 +73,7 @@ function createInputElement(hot) {
   const rootDocument = hot.rootDocument;
   const input = rootDocument.createElement('input');
   input.type = 'text';
-  input.name = '__htFocusCatcher';
+  input.name = 'htFocusCatcher';
   input.classList.add('htFocusCatcher');
   if (hot.getSettings().ariaTags) {
     (0, _element.setAttribute)(input, [(0, _a11y.A11Y_LABEL)('Focus catcher')]);

package/{core/focusCatcher → utils}/focusDetector.mjs

@@ -1,5 +1,11 @@
-import { setAttribute } from "../../helpers/dom/element.mjs";
-import { A11Y_LABEL } from "../../helpers/a11y.mjs";
+import { setAttribute } from "../helpers/dom/element.mjs";
+import { A11Y_LABEL } from "../helpers/a11y.mjs";
+/**
+ * @typedef {object} FocusDetector
+ * @property {function(): void} activate Activates the focus detector.
+ * @property {function(): void} deactivate Deactivates the focus detector.
+ * @property {function('from_above' | 'from_below'): void} focus Focuses the input element in the given direction.
+ */
 /**
  * Installs a focus detector module. The module appends two input elements into the DOM side by side.
  * When the first input is focused, then it means that a user entered to the component using the TAB key
@@ -7,19 +13,31 @@ import { A11Y_LABEL } from "../../helpers/a11y.mjs";
  * the element below the table. Each action, once detected, triggers the specific hook.
  *
  * @param {Handsontable} hot The Handsontable instance.
- * @param {{ onFocusFromTop: Function, onFocusFromBottom: Function }} hooks An object with defined callbacks to call.
- * @returns {{ activate: Function, deactivate: Function }}
+ * @param {HTMLElement} wrapperElement The wrapper element to install the focus detector into.
+ * @param {{ onFocus: Function }} hooks An object with defined callbacks to call.
+ * @returns {FocusDetector}
  */
-export function installFocusDetector(hot) {
-  let hooks = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const rootElement = hot.rootElement;
+export function installFocusDetector(hot, wrapperElement) {
+  let hooks = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   const inputTrapTop = createInputElement(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.before(inputTrapTop);
-  rootElement.after(inputTrapBottom);
+  inputTrapTop.addEventListener('focus', () => hooks === null || hooks === void 0 ? void 0 : hooks.onFocus('from_above'));
+  inputTrapBottom.addEventListener('focus', () => hooks === null || hooks === void 0 ? void 0 : hooks.onFocus('from_below'));
+  wrapperElement.prepend(inputTrapTop);
+  wrapperElement.append(inputTrapBottom);
   return {
+    /**
+     * Focuses the input element in the given direction.
+     *
+     * @param {string} direction The direction to focus the input element in.
+     */
+    focus(direction) {
+      if (direction === 'from_above') {
+        inputTrapTop.focus();
+      } else {
+        inputTrapBottom.focus();
+      }
+    },
     /**
      * Activates the detector by resetting the tabIndex of the input elements.
      */
@@ -51,7 +69,7 @@ function createInputElement(hot) {
   const rootDocument = hot.rootDocument;
   const input = rootDocument.createElement('input');
   input.type = 'text';
-  input.name = '__htFocusCatcher';
+  input.name = 'htFocusCatcher';
   input.classList.add('htFocusCatcher');
   if (hot.getSettings().ariaTags) {
     setAttribute(input, [A11Y_LABEL('Focus catcher')]);

package/utils/samplesGenerator.js

@@ -50,6 +50,13 @@ class SamplesGenerator {
      * @default {false}
      */
     _defineProperty(this, "allowDuplicates", false);
+    /**
+     * `true` if hidden samples should be included, `false` otherwise.
+     *
+     * @type {boolean}
+     * @default {false}
+     */
+    _defineProperty(this, "includeHidden", false);
     this.dataFactory = dataFactory;
   }
 
@@ -83,6 +90,15 @@ class SamplesGenerator {
     this.allowDuplicates = allowDuplicates;
   }
 
+  /**
+   * Sets the sampler to the mode where it will generate samples for hidden indexes.
+   *
+   * @param {boolean} includeHidden `true` to include hidden indexes, `false` otherwise.
+   */
+  setIncludeHidden(includeHidden) {
+    this.includeHidden = includeHidden;
+  }
+
   /**
    * Generate samples for row. You can control which area should be sampled by passing `rowRange` object and `colRange` object.
    *
@@ -145,7 +161,7 @@ class SamplesGenerator {
     const computedKey = type === 'row' ? 'col' : 'row';
     const sampledValues = [];
     (0, _number.rangeEach)(range.from, range.to, index => {
-      const data = type === 'row' ? this.dataFactory(specifierValue, index) : this.dataFactory(index, specifierValue);
+      const data = type === 'row' ? this.dataFactory(specifierValue, index, this) : this.dataFactory(index, specifierValue, this);
       if (data === false) {
         return;
       }