handsontable 0.0.0-next-010265d-20231005 → 0.0.0-next-9379dd1-20231020

package/core/focusCatcher/focusDetector.js

@@ -0,0 +1,63 @@
+"use strict";
+
+exports.__esModule = true;
+exports.installFocusDetector = installFocusDetector;
+var _element = require("../../helpers/dom/element");
+var _a11y = require("../../helpers/a11y");
+/**
+ * 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
+ * from the element above. When the second input is focused, a user enters to the component from
+ * 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 }}
+ */
+function installFocusDetector(hot) {
+  let hooks = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const rootElement = hot.rootElement;
+  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.firstChild.before(inputTrapTop);
+  rootElement.lastChild.after(inputTrapBottom);
+  return {
+    /**
+     * Activates the detector by resetting the tabIndex of the input elements.
+     */
+    activate() {
+      hot._registerTimeout(() => {
+        inputTrapTop.tabIndex = 0;
+        inputTrapBottom.tabIndex = 0;
+      }, 10);
+    },
+    /**
+     * Deactivates the detector by setting tabIndex to -1.
+     */
+    deactivate() {
+      hot._registerTimeout(() => {
+        inputTrapTop.tabIndex = -1;
+        inputTrapBottom.tabIndex = -1;
+      }, 10);
+    }
+  };
+}
+
+/**
+ * Creates a new HTML input element.
+ *
+ * @param {Handsontable} hot The Handsontable instance.
+ * @returns {HTMLInputElement}
+ */
+function createInputElement(hot) {
+  const rootDocument = hot.rootDocument;
+  const input = rootDocument.createElement('input');
+  input.type = 'text';
+  input.classList.add('htFocusCatcher');
+  if (hot.getSettings().ariaTags) {
+    (0, _element.setAttribute)(input, [(0, _a11y.A11Y_PRESENTATION)()]);
+  }
+  return input;
+}

package/core/focusCatcher/focusDetector.mjs

@@ -0,0 +1,59 @@
+import { setAttribute } from "../../helpers/dom/element.mjs";
+import { A11Y_PRESENTATION } from "../../helpers/a11y.mjs";
+/**
+ * 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
+ * from the element above. When the second input is focused, a user enters to the component from
+ * 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 }}
+ */
+export function installFocusDetector(hot) {
+  let hooks = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const rootElement = hot.rootElement;
+  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.firstChild.before(inputTrapTop);
+  rootElement.lastChild.after(inputTrapBottom);
+  return {
+    /**
+     * Activates the detector by resetting the tabIndex of the input elements.
+     */
+    activate() {
+      hot._registerTimeout(() => {
+        inputTrapTop.tabIndex = 0;
+        inputTrapBottom.tabIndex = 0;
+      }, 10);
+    },
+    /**
+     * Deactivates the detector by setting tabIndex to -1.
+     */
+    deactivate() {
+      hot._registerTimeout(() => {
+        inputTrapTop.tabIndex = -1;
+        inputTrapBottom.tabIndex = -1;
+      }, 10);
+    }
+  };
+}
+
+/**
+ * Creates a new HTML input element.
+ *
+ * @param {Handsontable} hot The Handsontable instance.
+ * @returns {HTMLInputElement}
+ */
+function createInputElement(hot) {
+  const rootDocument = hot.rootDocument;
+  const input = rootDocument.createElement('input');
+  input.type = 'text';
+  input.classList.add('htFocusCatcher');
+  if (hot.getSettings().ariaTags) {
+    setAttribute(input, [A11Y_PRESENTATION()]);
+  }
+  return input;
+}

package/core/focusCatcher/index.js

@@ -0,0 +1,142 @@
+"use strict";
+
+exports.__esModule = true;
+exports.installFocusCatcher = installFocusCatcher;
+var _shortcutContexts = require("../../shortcutContexts");
+var _focusDetector = require("./focusDetector");
+/**
+ * Installs a focus catcher module. The module observes when the table is focused and depending on
+ * from the which side it was focused on it selects a specified cell or releases the TAB navigation
+ * to the browser.
+ *
+ * @param {Core} hot The Handsontable instance.
+ */
+function installFocusCatcher(hot) {
+  let recentlyAddedFocusCoords;
+  const {
+    activate,
+    deactivate
+  } = (0, _focusDetector.installFocusDetector)(hot, {
+    onFocusFromTop() {
+      var _recentlyAddedFocusCo;
+      const mostTopStartCoords = (_recentlyAddedFocusCo = recentlyAddedFocusCoords) !== null && _recentlyAddedFocusCo !== void 0 ? _recentlyAddedFocusCo : getMostTopStartPosition(hot);
+      if (mostTopStartCoords) {
+        hot.runHooks('modifyFocusOnTabNavigation', 'from_above', mostTopStartCoords);
+        hot.selectCell(mostTopStartCoords.row, mostTopStartCoords.col);
+      }
+      hot.listen();
+    },
+    onFocusFromBottom() {
+      var _recentlyAddedFocusCo2;
+      const mostBottomEndCoords = (_recentlyAddedFocusCo2 = recentlyAddedFocusCoords) !== null && _recentlyAddedFocusCo2 !== void 0 ? _recentlyAddedFocusCo2 : getMostBottomEndPosition(hot);
+      if (mostBottomEndCoords) {
+        hot.runHooks('modifyFocusOnTabNavigation', 'from_below', mostBottomEndCoords);
+        hot.selectCell(mostBottomEndCoords.row, mostBottomEndCoords.col);
+      }
+      hot.listen();
+    }
+  });
+  hot.addHook('afterListen', () => deactivate());
+  hot.addHook('afterUnlisten', () => activate());
+  hot.addHook('afterSelection', () => {
+    var _hot$getSelectedRange;
+    recentlyAddedFocusCoords = (_hot$getSelectedRange = hot.getSelectedRangeLast()) === null || _hot$getSelectedRange === void 0 ? void 0 : _hot$getSelectedRange.highlight;
+  });
+  hot.getShortcutManager().getContext('grid').addShortcut({
+    keys: [['Tab'], ['Shift', 'Tab']],
+    callback: event => {
+      var _hot$getSelectedRange2;
+      const {
+        disableTabNavigation,
+        autoWrapRow
+      } = hot.getSettings();
+      if (disableTabNavigation) {
+        hot.deselectCell();
+        hot.unlisten();
+        return false;
+      }
+      const isSelected = hot.selection.isSelected();
+      const highlight = (_hot$getSelectedRange2 = hot.getSelectedRangeLast()) === null || _hot$getSelectedRange2 === void 0 ? void 0 : _hot$getSelectedRange2.highlight;
+      const mostTopStartCoords = getMostTopStartPosition(hot);
+      const mostBottomEndCoords = getMostBottomEndPosition(hot);
+
+      // For disabled `autoWrapRow` option set the row to the same position as the currently selected row.
+      if (!autoWrapRow) {
+        mostTopStartCoords.row = highlight.row;
+        mostBottomEndCoords.row = highlight.row;
+      }
+      if (event.shiftKey && (!isSelected || highlight.isEqual(mostTopStartCoords)) || !event.shiftKey && (!isSelected || highlight.isEqual(mostBottomEndCoords))) {
+        hot.deselectCell();
+        hot.unlisten();
+        return false;
+      }
+      return true;
+    },
+    runOnlyIf: () => !hot.getSettings().minSpareCols,
+    preventDefault: false,
+    stopPropagation: false,
+    position: 'before',
+    relativeToGroup: _shortcutContexts.GRID_GROUP,
+    group: 'focusCatcher'
+  });
+}
+
+/**
+ * Gets the coordinates of the most top-start cell or header (depends on the table settings and its size).
+ *
+ * @param {Core} hot The Handsontable instance.
+ * @returns {CellCoords|null}
+ */
+function getMostTopStartPosition(hot) {
+  const {
+    rowIndexMapper,
+    columnIndexMapper
+  } = hot;
+  const {
+    navigableHeaders
+  } = hot.getSettings();
+  let topRow = navigableHeaders && hot.countColHeaders() > 0 ? -hot.countColHeaders() : 0;
+  let startColumn = navigableHeaders && hot.countRowHeaders() > 0 ? -hot.countRowHeaders() : 0;
+  if (topRow === 0) {
+    topRow = rowIndexMapper.getVisualFromRenderableIndex(topRow);
+  }
+  if (startColumn === 0) {
+    startColumn = columnIndexMapper.getVisualFromRenderableIndex(startColumn);
+  }
+  if (topRow === null || startColumn === null) {
+    return null;
+  }
+  return hot._createCellCoords(topRow, startColumn);
+}
+
+/**
+ * Gets the coordinates of the most bottom-end cell or header (depends on the table settings and its size).
+ *
+ * @param {Core} hot The Handsontable instance.
+ * @returns {CellCoords|null}
+ */
+function getMostBottomEndPosition(hot) {
+  var _rowIndexMapper$getVi, _columnIndexMapper$ge;
+  const {
+    rowIndexMapper,
+    columnIndexMapper
+  } = hot;
+  const {
+    navigableHeaders
+  } = hot.getSettings();
+  let bottomRow = rowIndexMapper.getRenderableIndexesLength() - 1;
+  let endColumn = columnIndexMapper.getRenderableIndexesLength() - 1;
+  if (bottomRow < 0) {
+    if (!navigableHeaders || hot.countColHeaders() === 0) {
+      return null;
+    }
+    bottomRow = -1;
+  }
+  if (endColumn < 0) {
+    if (!navigableHeaders || hot.countColHeaders() === 0) {
+      return null;
+    }
+    endColumn = -1;
+  }
+  return hot._createCellCoords((_rowIndexMapper$getVi = rowIndexMapper.getVisualFromRenderableIndex(bottomRow)) !== null && _rowIndexMapper$getVi !== void 0 ? _rowIndexMapper$getVi : bottomRow, (_columnIndexMapper$ge = columnIndexMapper.getVisualFromRenderableIndex(endColumn)) !== null && _columnIndexMapper$ge !== void 0 ? _columnIndexMapper$ge : endColumn);
+}

package/core/focusCatcher/index.mjs

@@ -0,0 +1,138 @@
+import { GRID_GROUP } from "../../shortcutContexts/index.mjs";
+import { installFocusDetector } from "./focusDetector.mjs";
+/**
+ * Installs a focus catcher module. The module observes when the table is focused and depending on
+ * from the which side it was focused on it selects a specified cell or releases the TAB navigation
+ * to the browser.
+ *
+ * @param {Core} hot The Handsontable instance.
+ */
+export function installFocusCatcher(hot) {
+  let recentlyAddedFocusCoords;
+  const {
+    activate,
+    deactivate
+  } = installFocusDetector(hot, {
+    onFocusFromTop() {
+      var _recentlyAddedFocusCo;
+      const mostTopStartCoords = (_recentlyAddedFocusCo = recentlyAddedFocusCoords) !== null && _recentlyAddedFocusCo !== void 0 ? _recentlyAddedFocusCo : getMostTopStartPosition(hot);
+      if (mostTopStartCoords) {
+        hot.runHooks('modifyFocusOnTabNavigation', 'from_above', mostTopStartCoords);
+        hot.selectCell(mostTopStartCoords.row, mostTopStartCoords.col);
+      }
+      hot.listen();
+    },
+    onFocusFromBottom() {
+      var _recentlyAddedFocusCo2;
+      const mostBottomEndCoords = (_recentlyAddedFocusCo2 = recentlyAddedFocusCoords) !== null && _recentlyAddedFocusCo2 !== void 0 ? _recentlyAddedFocusCo2 : getMostBottomEndPosition(hot);
+      if (mostBottomEndCoords) {
+        hot.runHooks('modifyFocusOnTabNavigation', 'from_below', mostBottomEndCoords);
+        hot.selectCell(mostBottomEndCoords.row, mostBottomEndCoords.col);
+      }
+      hot.listen();
+    }
+  });
+  hot.addHook('afterListen', () => deactivate());
+  hot.addHook('afterUnlisten', () => activate());
+  hot.addHook('afterSelection', () => {
+    var _hot$getSelectedRange;
+    recentlyAddedFocusCoords = (_hot$getSelectedRange = hot.getSelectedRangeLast()) === null || _hot$getSelectedRange === void 0 ? void 0 : _hot$getSelectedRange.highlight;
+  });
+  hot.getShortcutManager().getContext('grid').addShortcut({
+    keys: [['Tab'], ['Shift', 'Tab']],
+    callback: event => {
+      var _hot$getSelectedRange2;
+      const {
+        disableTabNavigation,
+        autoWrapRow
+      } = hot.getSettings();
+      if (disableTabNavigation) {
+        hot.deselectCell();
+        hot.unlisten();
+        return false;
+      }
+      const isSelected = hot.selection.isSelected();
+      const highlight = (_hot$getSelectedRange2 = hot.getSelectedRangeLast()) === null || _hot$getSelectedRange2 === void 0 ? void 0 : _hot$getSelectedRange2.highlight;
+      const mostTopStartCoords = getMostTopStartPosition(hot);
+      const mostBottomEndCoords = getMostBottomEndPosition(hot);
+
+      // For disabled `autoWrapRow` option set the row to the same position as the currently selected row.
+      if (!autoWrapRow) {
+        mostTopStartCoords.row = highlight.row;
+        mostBottomEndCoords.row = highlight.row;
+      }
+      if (event.shiftKey && (!isSelected || highlight.isEqual(mostTopStartCoords)) || !event.shiftKey && (!isSelected || highlight.isEqual(mostBottomEndCoords))) {
+        hot.deselectCell();
+        hot.unlisten();
+        return false;
+      }
+      return true;
+    },
+    runOnlyIf: () => !hot.getSettings().minSpareCols,
+    preventDefault: false,
+    stopPropagation: false,
+    position: 'before',
+    relativeToGroup: GRID_GROUP,
+    group: 'focusCatcher'
+  });
+}
+
+/**
+ * Gets the coordinates of the most top-start cell or header (depends on the table settings and its size).
+ *
+ * @param {Core} hot The Handsontable instance.
+ * @returns {CellCoords|null}
+ */
+function getMostTopStartPosition(hot) {
+  const {
+    rowIndexMapper,
+    columnIndexMapper
+  } = hot;
+  const {
+    navigableHeaders
+  } = hot.getSettings();
+  let topRow = navigableHeaders && hot.countColHeaders() > 0 ? -hot.countColHeaders() : 0;
+  let startColumn = navigableHeaders && hot.countRowHeaders() > 0 ? -hot.countRowHeaders() : 0;
+  if (topRow === 0) {
+    topRow = rowIndexMapper.getVisualFromRenderableIndex(topRow);
+  }
+  if (startColumn === 0) {
+    startColumn = columnIndexMapper.getVisualFromRenderableIndex(startColumn);
+  }
+  if (topRow === null || startColumn === null) {
+    return null;
+  }
+  return hot._createCellCoords(topRow, startColumn);
+}
+
+/**
+ * Gets the coordinates of the most bottom-end cell or header (depends on the table settings and its size).
+ *
+ * @param {Core} hot The Handsontable instance.
+ * @returns {CellCoords|null}
+ */
+function getMostBottomEndPosition(hot) {
+  var _rowIndexMapper$getVi, _columnIndexMapper$ge;
+  const {
+    rowIndexMapper,
+    columnIndexMapper
+  } = hot;
+  const {
+    navigableHeaders
+  } = hot.getSettings();
+  let bottomRow = rowIndexMapper.getRenderableIndexesLength() - 1;
+  let endColumn = columnIndexMapper.getRenderableIndexesLength() - 1;
+  if (bottomRow < 0) {
+    if (!navigableHeaders || hot.countColHeaders() === 0) {
+      return null;
+    }
+    bottomRow = -1;
+  }
+  if (endColumn < 0) {
+    if (!navigableHeaders || hot.countColHeaders() === 0) {
+      return null;
+    }
+    endColumn = -1;
+  }
+  return hot._createCellCoords((_rowIndexMapper$getVi = rowIndexMapper.getVisualFromRenderableIndex(bottomRow)) !== null && _rowIndexMapper$getVi !== void 0 ? _rowIndexMapper$getVi : bottomRow, (_columnIndexMapper$ge = columnIndexMapper.getVisualFromRenderableIndex(endColumn)) !== null && _columnIndexMapper$ge !== void 0 ? _columnIndexMapper$ge : endColumn);
+}

package/core/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+var _focusCatcher = require("./focusCatcher");
+Object.keys(_focusCatcher).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _focusCatcher[key]) return;
+  exports[key] = _focusCatcher[key];
+});

package/core/index.mjs

@@ -0,0 +1 @@
+export * from "./focusCatcher/index.mjs";

package/core.d.ts

@@ -17,6 +17,7 @@ import { BaseValidator } from './validators/base';
 import { Plugins } from './plugins';
 import { CellType } from './cellTypes';
 import { ShortcutManager } from './shortcuts';
+import { FocusManager } from './focusManager';
 
 type AlterActions = 'insert_row_above' | 'insert_row_below' |
                     'insert_col_start' | 'insert_col_end' |
@@ -45,6 +46,8 @@ export default class Core {
   countSourceRows(): number;
   countVisibleCols(): number;
   countVisibleRows(): number;
+  countRowHeaders(): number;
+  countColHeaders(): number;
   deselectCell(): void;
   destroy(): void;
   destroyEditor(revertOriginal?: boolean, prepareEditorIfNeeded?: boolean): void;
@@ -75,6 +78,7 @@ export default class Core {
   getDataAtRowProp(row: number, prop: string): CellValue;
   getDataType(rowFrom: number, columnFrom: number, rowTo: number, columnTo: number): CellType | 'mixed';
   getDirectionFactor(): 1 | -1;
+  getFocusManager(): FocusManager;
   getInstance(): Core;
   getPlugin<T extends keyof Plugins>(pluginName: T): Plugins[T];
   getPlugin(pluginName: string): Plugins['basePlugin'];
@@ -128,13 +132,14 @@ export default class Core {
   rootWindow: Window;
   rowIndexMapper: IndexMapper;
   runHooks(key: keyof Events, p1?: any, p2?: any, p3?: any, p4?: any, p5?: any, p6?: any): any;
-  scrollViewportTo(row?: number, column?: number, snapToBottom?: boolean, snapToRight?: boolean, considerHiddenIndexes?: boolean): boolean;
-  selectAll(): void;
+  scrollViewportTo(options: { row?: number, col?: number, verticalSnap?: 'top' | 'bottom', horizontalSnap?: 'start' | 'end', considerHiddenIndexes?: boolean }): boolean;
+  scrollToFocusedCell(callback?: () => void): void;
+  selectAll(includeRowHeaders?: boolean, includeColumnHeaders?: boolean, options?: { focusPosition?: { row: number, col: number }, disableHeadersHighlight?: boolean }): void;
   selectCell(row: number, col: number, endRow?: number, endCol?: number, scrollToCell?: boolean, changeListener?: boolean): boolean;
   selectCellByProp(row: number, prop: string, endRow?: number, endProp?: string, scrollToCell?: boolean): boolean;
   selectCells(coords: Array<[number, number | string, number, number | string]> | CellRange[], scrollToCell?: boolean, changeListener?: boolean): boolean;
-  selectColumns(startColumn: number | string, endColumn?: number | string): boolean;
-  selectRows(startRow: number, endRow?: number): boolean;
+  selectColumns(startColumn: number | string, endColumn?: number | string, focusPosition?: number): boolean;
+  selectRows(startRow: number, endRow?: number, focusPosition?: number): boolean;
   setCellMeta(row: number, col: number, key: string, val: any): void;
   setCellMeta<K extends keyof CellMeta>(row: number, col: number, key: K, val: CellMeta[K]): void;
   setCellMetaObject(row: number, col: number, prop: CellMeta): void;