handsontable 13.1.0 → 14.0.0-next-e8f87aa-20231030

package/focusManager.mjs

@@ -0,0 +1,261 @@
+import "core-js/modules/es.error.cause.js";
+function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
+function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
+function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
+function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
+function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
+function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
+import { warn } from "./helpers/console.mjs";
+import { isOutsideInput } from "./helpers/dom/element.mjs";
+/**
+ * Possible focus modes.
+ * - CELL - The browser's focus stays on the lastly selected cell element.
+ * - MIXED - The browser's focus switches from the lastly selected cell element to the currently active editor's
+ * `TEXTAREA` element after a delay defined in the manager.
+ *
+ * @type {{CELL: string, MIXED: string}}
+ */
+const FOCUS_MODES = Object.freeze({
+  CELL: 'cell',
+  MIXED: 'mixed'
+});
+
+/**
+ * Manages the browser's focus in the table.
+ */
+var _hot = /*#__PURE__*/new WeakMap();
+var _focusMode = /*#__PURE__*/new WeakMap();
+var _refocusDelay = /*#__PURE__*/new WeakMap();
+var _refocusElementGetter = /*#__PURE__*/new WeakMap();
+var _getCurrentHighlightCoords = /*#__PURE__*/new WeakSet();
+var _getSelectedCell = /*#__PURE__*/new WeakSet();
+var _manageFocus = /*#__PURE__*/new WeakSet();
+var _onUpdateSettings = /*#__PURE__*/new WeakSet();
+export class FocusManager {
+  constructor(hotInstance) {
+    var _this = this;
+    /**
+     * Update the manager configuration after calling `updateSettings`.
+     *
+     * @private
+     * @param {object} newSettings The new settings passed to the `updateSettings` method.
+     */
+    _classPrivateMethodInitSpec(this, _onUpdateSettings);
+    /**
+     * Manage the browser's focus after cell selection.
+     *
+     * @private
+     */
+    _classPrivateMethodInitSpec(this, _manageFocus);
+    /**
+     * Get and return the currently selected and highlighted cell/header element.
+     *
+     * @private
+     * @returns {HTMLTableCellElement}
+     */
+    _classPrivateMethodInitSpec(this, _getSelectedCell);
+    /**
+     * Get the coordinates of the highlight of the currently selected cell/header.
+     *
+     * @returns {CellCoords}
+     */
+    _classPrivateMethodInitSpec(this, _getCurrentHighlightCoords);
+    /**
+     * The Handsontable instance.
+     */
+    _classPrivateFieldInitSpec(this, _hot, {
+      writable: true,
+      value: void 0
+    });
+    /**
+     * The currently enabled focus mode.
+     * Can be either:
+     *
+     * - 'cell' - The browser's focus stays on the lastly selected cell element.
+     * - 'mixed' - The browser's focus switches from the lastly selected cell element to the currently active editor's
+     * `TEXTAREA` element after a delay defined in the manager.
+     *
+     * @type {string}
+     */
+    _classPrivateFieldInitSpec(this, _focusMode, {
+      writable: true,
+      value: void 0
+    });
+    /**
+     * The delay after which the focus switches from the lastly selected cell to the active editor's `TEXTAREA`
+     * element if the focus mode is set to 'mixed'.
+     *
+     * @type {number}
+     */
+    _classPrivateFieldInitSpec(this, _refocusDelay, {
+      writable: true,
+      value: 50
+    });
+    /**
+     * Getter function for the element to be used when refocusing the browser after a delay. If `null`, the active
+     * editor's `TEXTAREA` element will be used.
+     *
+     * @type {null|Function}
+     */
+    _classPrivateFieldInitSpec(this, _refocusElementGetter, {
+      writable: true,
+      value: null
+    });
+    const hotSettings = hotInstance.getSettings();
+    _classPrivateFieldSet(this, _hot, hotInstance);
+    _classPrivateFieldSet(this, _focusMode, hotSettings.imeFastEdit ? FOCUS_MODES.MIXED : FOCUS_MODES.CELL);
+    _classPrivateFieldGet(this, _hot).addHook('afterUpdateSettings', function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return _classPrivateMethodGet(_this, _onUpdateSettings, _onUpdateSettings2).call(_this, ...args);
+    });
+    _classPrivateFieldGet(this, _hot).addHook('afterSelection', function () {
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+      return _classPrivateMethodGet(_this, _manageFocus, _manageFocus2).call(_this, ...args);
+    });
+  }
+
+  /**
+   * Get the current focus mode.
+   *
+   * @returns {'cell' | 'mixed'}
+   */
+  getFocusMode() {
+    return _classPrivateFieldGet(this, _focusMode);
+  }
+
+  /**
+   * Set the focus mode.
+   *
+   * @param {'cell' | 'mixed'} focusMode The new focus mode.
+   */
+  setFocusMode(focusMode) {
+    if (Object.values(FOCUS_MODES).includes(focusMode)) {
+      _classPrivateFieldSet(this, _focusMode, focusMode);
+    } else {
+      warn(`"${focusMode}" is not a valid focus mode.`);
+    }
+  }
+
+  /**
+   * Get the delay after which the focus will change from the cell elements to the active editor's `TEXTAREA`
+   * element if the focus mode is set to 'mixed'.
+   *
+   * @returns {number} Delay in milliseconds.
+   */
+  getRefocusDelay() {
+    return _classPrivateFieldGet(this, _refocusDelay);
+  }
+
+  /**
+   * Set the delay after which the focus will change from the cell elements to the active editor's `TEXTAREA`
+   * element if the focus mode is set to 'mixed'.
+   *
+   * @param {number} delay Delay in milliseconds.
+   */
+  setRefocusDelay(delay) {
+    _classPrivateFieldSet(this, _refocusDelay, delay);
+  }
+
+  /**
+   * Set the function to be used as the "refocus element" getter. It should return a focusable HTML element.
+   *
+   * @param {Function} getRefocusElementFunction The refocus element getter.
+   */
+  setRefocusElementGetter(getRefocusElementFunction) {
+    _classPrivateFieldSet(this, _refocusElementGetter, getRefocusElementFunction);
+  }
+
+  /**
+   * Get the element to be used when refocusing the browser after a delay in case of the focus mode being 'mixed'.
+   *
+   * @returns {HTMLTextAreaElement|HTMLElement|undefined}
+   */
+  getRefocusElement() {
+    if (typeof _classPrivateFieldGet(this, _refocusElementGetter) === 'function') {
+      return _classPrivateFieldGet(this, _refocusElementGetter).call(this);
+    } else {
+      var _classPrivateFieldGet2;
+      return (_classPrivateFieldGet2 = _classPrivateFieldGet(this, _hot).getActiveEditor()) === null || _classPrivateFieldGet2 === void 0 ? void 0 : _classPrivateFieldGet2.TEXTAREA;
+    }
+  }
+
+  /**
+   * Set the browser's focus to the highlighted cell of the last selection.
+   *
+   * @param {HTMLTableCellElement} [selectedCell] The highlighted cell/header element.
+   */
+  focusOnHighlightedCell(selectedCell) {
+    var _classPrivateFieldGet3;
+    const currentHighlightCoords = _classPrivateMethodGet(this, _getCurrentHighlightCoords, _getCurrentHighlightCoords2).call(this);
+    const currentlySelectedHighlight = selectedCell || _classPrivateMethodGet(this, _getSelectedCell, _getSelectedCell2).call(this);
+    let elementToBeFocused = _classPrivateFieldGet(this, _hot).runHooks('modifyFocusedElement', currentHighlightCoords.row, currentHighlightCoords.col, currentlySelectedHighlight);
+    if (!(elementToBeFocused instanceof HTMLElement)) {
+      elementToBeFocused = currentlySelectedHighlight;
+    }
+    if (elementToBeFocused && !((_classPrivateFieldGet3 = _classPrivateFieldGet(this, _hot).getActiveEditor()) !== null && _classPrivateFieldGet3 !== void 0 && _classPrivateFieldGet3.isOpened())) {
+      elementToBeFocused.focus({
+        preventScroll: true
+      });
+    }
+  }
+
+  /**
+   * Set the focus to the active editor's `TEXTAREA` element after the provided delay. If no delay is provided, it
+   * will be taken from the manager's configuration.
+   *
+   * @param {number} delay Delay in milliseconds.
+   */
+  refocusToEditorTextarea() {
+    let delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _classPrivateFieldGet(this, _refocusDelay);
+    const refocusElement = this.getRefocusElement();
+
+    // Re-focus on the editor's `TEXTAREA` element (or a predefined element) if the `imeFastEdit` option is enabled.
+    if (_classPrivateFieldGet(this, _hot).getSettings().imeFastEdit && !!refocusElement) {
+      _classPrivateFieldGet(this, _hot)._registerTimeout(() => {
+        refocusElement.select();
+      }, delay);
+    }
+  }
+}
+function _getCurrentHighlightCoords2() {
+  const lastSelectedRange = _classPrivateFieldGet(this, _hot).getSelectedRangeLast();
+  return lastSelectedRange.highlight;
+}
+function _getSelectedCell2() {
+  const selectedCellCoords = _classPrivateMethodGet(this, _getCurrentHighlightCoords, _getCurrentHighlightCoords2).call(this);
+  return _classPrivateFieldGet(this, _hot).getCell(selectedCellCoords.row, selectedCellCoords.col, true);
+}
+function _manageFocus2() {
+  const selectedCell = _classPrivateMethodGet(this, _getSelectedCell, _getSelectedCell2).call(this);
+  const {
+    activeElement
+  } = _classPrivateFieldGet(this, _hot).rootDocument;
+
+  // Blurring the `activeElement` removes the unwanted border around the focusable element (#6877)
+  // and resets the `document.activeElement` property. The blurring should happen only when the
+  // previously selected input element has not belonged to the Handsontable editor. If blurring is
+  // triggered for all elements, there is a problem with the disappearing IME editor (#9672).
+  if (activeElement && isOutsideInput(activeElement)) {
+    activeElement.blur();
+  }
+  this.focusOnHighlightedCell(selectedCell);
+  if (this.getFocusMode() === FOCUS_MODES.MIXED && selectedCell.nodeName === 'TD') {
+    _classPrivateFieldGet(this, _hot).addHookOnce('afterSelectionEnd', () => {
+      this.refocusToEditorTextarea();
+    });
+  }
+}
+function _onUpdateSettings2(newSettings) {
+  if (newSettings.imeFastEdit && this.getFocusMode() !== FOCUS_MODES.MIXED) {
+    this.setFocusMode(FOCUS_MODES.MIXED);
+  } else if (!newSettings.imeFastEdit && this.getFocusMode() !== FOCUS_MODES.CELL) {
+    this.setFocusMode(FOCUS_MODES.CELL);
+  }
+}

package/helpers/a11y.js

@@ -0,0 +1,81 @@
+"use strict";
+
+exports.__esModule = true;
+const A11Y_TABINDEX = val => ['tabindex', val];
+exports.A11Y_TABINDEX = A11Y_TABINDEX;
+const A11Y_TREEGRID = () => ['role', 'treegrid'];
+exports.A11Y_TREEGRID = A11Y_TREEGRID;
+const A11Y_PRESENTATION = () => ['role', 'presentation'];
+exports.A11Y_PRESENTATION = A11Y_PRESENTATION;
+const A11Y_GRIDCELL = () => ['role', 'gridcell'];
+exports.A11Y_GRIDCELL = A11Y_GRIDCELL;
+const A11Y_ROWHEADER = () => ['role', 'rowheader'];
+exports.A11Y_ROWHEADER = A11Y_ROWHEADER;
+const A11Y_COLUMNHEADER = () => ['role', 'columnheader'];
+exports.A11Y_COLUMNHEADER = A11Y_COLUMNHEADER;
+const A11Y_ROW = () => ['role', 'row'];
+exports.A11Y_ROW = A11Y_ROW;
+const A11Y_MENU = () => ['role', 'menu'];
+exports.A11Y_MENU = A11Y_MENU;
+const A11Y_MENU_ITEM = () => ['role', 'menuitem'];
+exports.A11Y_MENU_ITEM = A11Y_MENU_ITEM;
+const A11Y_COMBOBOX = () => ['role', 'combobox'];
+exports.A11Y_COMBOBOX = A11Y_COMBOBOX;
+const A11Y_LISTBOX = () => ['role', 'listbox'];
+exports.A11Y_LISTBOX = A11Y_LISTBOX;
+const A11Y_OPTION = () => ['role', 'option'];
+exports.A11Y_OPTION = A11Y_OPTION;
+const A11Y_CHECKBOX = () => ['role', 'checkbox'];
+exports.A11Y_CHECKBOX = A11Y_CHECKBOX;
+const A11Y_SCOPE_COL = () => ['scope', 'col'];
+exports.A11Y_SCOPE_COL = A11Y_SCOPE_COL;
+const A11Y_SCOPE_ROW = () => ['scope', 'row'];
+exports.A11Y_SCOPE_ROW = A11Y_SCOPE_ROW;
+const A11Y_TEXT = () => ['type', 'text'];
+exports.A11Y_TEXT = A11Y_TEXT;
+const A11Y_LABEL = val => ['aria-label', val];
+exports.A11Y_LABEL = A11Y_LABEL;
+const A11Y_DESCRIPTION = val => ['aria-description', val];
+exports.A11Y_DESCRIPTION = A11Y_DESCRIPTION;
+const A11Y_HIDDEN = () => ['aria-hidden', 'true'];
+exports.A11Y_HIDDEN = A11Y_HIDDEN;
+const A11Y_DISABLED = () => ['aria-disabled', 'true'];
+exports.A11Y_DISABLED = A11Y_DISABLED;
+const A11Y_MULTISELECTABLE = () => ['aria-multiselectable', 'true'];
+exports.A11Y_MULTISELECTABLE = A11Y_MULTISELECTABLE;
+const A11Y_HASPOPUP = val => ['aria-haspopup', val];
+exports.A11Y_HASPOPUP = A11Y_HASPOPUP;
+const A11Y_ROWCOUNT = val => ['aria-rowcount', val];
+exports.A11Y_ROWCOUNT = A11Y_ROWCOUNT;
+const A11Y_COLCOUNT = val => ['aria-colcount', val];
+exports.A11Y_COLCOUNT = A11Y_COLCOUNT;
+const A11Y_ROWINDEX = val => ['aria-rowindex', val];
+exports.A11Y_ROWINDEX = A11Y_ROWINDEX;
+const A11Y_COLINDEX = val => ['aria-colindex', val];
+exports.A11Y_COLINDEX = A11Y_COLINDEX;
+const A11Y_EXPANDED = val => ['aria-expanded', val];
+exports.A11Y_EXPANDED = A11Y_EXPANDED;
+const A11Y_SORT = val => ['aria-sort', val];
+exports.A11Y_SORT = A11Y_SORT;
+const A11Y_READONLY = () => ['aria-readonly', 'true'];
+exports.A11Y_READONLY = A11Y_READONLY;
+const A11Y_INVALID = () => ['aria-invalid', 'true'];
+exports.A11Y_INVALID = A11Y_INVALID;
+const A11Y_CHECKED = val => ['aria-checked', val];
+exports.A11Y_CHECKED = A11Y_CHECKED;
+const A11Y_SELECTED = () => ['aria-selected', 'true'];
+exports.A11Y_SELECTED = A11Y_SELECTED;
+const A11Y_AUTOCOMPLETE = () => ['aria-autocomplete', 'list'];
+exports.A11Y_AUTOCOMPLETE = A11Y_AUTOCOMPLETE;
+const A11Y_CONTROLS = val => ['aria-controls', val];
+exports.A11Y_CONTROLS = A11Y_CONTROLS;
+const A11Y_ACTIVEDESCENDANT = val => ['aria-activedescendant', val];
+exports.A11Y_ACTIVEDESCENDANT = A11Y_ACTIVEDESCENDANT;
+const A11Y_LIVE = val => ['aria-live', val];
+exports.A11Y_LIVE = A11Y_LIVE;
+const A11Y_RELEVANT = val => ['aria-relevant', val];
+exports.A11Y_RELEVANT = A11Y_RELEVANT;
+const A11Y_SETSIZE = val => ['aria-setsize', val];
+exports.A11Y_SETSIZE = A11Y_SETSIZE;
+const A11Y_POSINSET = val => ['aria-posinset', val];
+exports.A11Y_POSINSET = A11Y_POSINSET;

package/helpers/a11y.mjs

@@ -0,0 +1,39 @@
+export const A11Y_TABINDEX = val => ['tabindex', val];
+export const A11Y_TREEGRID = () => ['role', 'treegrid'];
+export const A11Y_PRESENTATION = () => ['role', 'presentation'];
+export const A11Y_GRIDCELL = () => ['role', 'gridcell'];
+export const A11Y_ROWHEADER = () => ['role', 'rowheader'];
+export const A11Y_COLUMNHEADER = () => ['role', 'columnheader'];
+export const A11Y_ROW = () => ['role', 'row'];
+export const A11Y_MENU = () => ['role', 'menu'];
+export const A11Y_MENU_ITEM = () => ['role', 'menuitem'];
+export const A11Y_COMBOBOX = () => ['role', 'combobox'];
+export const A11Y_LISTBOX = () => ['role', 'listbox'];
+export const A11Y_OPTION = () => ['role', 'option'];
+export const A11Y_CHECKBOX = () => ['role', 'checkbox'];
+export const A11Y_SCOPE_COL = () => ['scope', 'col'];
+export const A11Y_SCOPE_ROW = () => ['scope', 'row'];
+export const A11Y_TEXT = () => ['type', 'text'];
+export const A11Y_LABEL = val => ['aria-label', val];
+export const A11Y_DESCRIPTION = val => ['aria-description', val];
+export const A11Y_HIDDEN = () => ['aria-hidden', 'true'];
+export const A11Y_DISABLED = () => ['aria-disabled', 'true'];
+export const A11Y_MULTISELECTABLE = () => ['aria-multiselectable', 'true'];
+export const A11Y_HASPOPUP = val => ['aria-haspopup', val];
+export const A11Y_ROWCOUNT = val => ['aria-rowcount', val];
+export const A11Y_COLCOUNT = val => ['aria-colcount', val];
+export const A11Y_ROWINDEX = val => ['aria-rowindex', val];
+export const A11Y_COLINDEX = val => ['aria-colindex', val];
+export const A11Y_EXPANDED = val => ['aria-expanded', val];
+export const A11Y_SORT = val => ['aria-sort', val];
+export const A11Y_READONLY = () => ['aria-readonly', 'true'];
+export const A11Y_INVALID = () => ['aria-invalid', 'true'];
+export const A11Y_CHECKED = val => ['aria-checked', val];
+export const A11Y_SELECTED = () => ['aria-selected', 'true'];
+export const A11Y_AUTOCOMPLETE = () => ['aria-autocomplete', 'list'];
+export const A11Y_CONTROLS = val => ['aria-controls', val];
+export const A11Y_ACTIVEDESCENDANT = val => ['aria-activedescendant', val];
+export const A11Y_LIVE = val => ['aria-live', val];
+export const A11Y_RELEVANT = val => ['aria-relevant', val];
+export const A11Y_SETSIZE = val => ['aria-setsize', val];
+export const A11Y_POSINSET = val => ['aria-posinset', val];