handsontable 0.0.0-next-9059914-20231025 → 0.0.0-next-cecf979-20231026

package/editors/dateEditor/dateEditor.mjs

@@ -3,7 +3,8 @@ import moment from 'moment';
 import Pikaday from 'pikaday';
 import { TextEditor } from "../textEditor/index.mjs";
 import EventManager from "../../eventManager.mjs";
-import { addClass, outerHeight, outerWidth } from "../../helpers/dom/element.mjs";
+import { addClass, hasClass, outerHeight, outerWidth, setAttribute } from "../../helpers/dom/element.mjs";
+import { A11Y_EXPANDED } from "../../helpers/a11y.mjs";
 import { deepExtend } from "../../helpers/object.mjs";
 import { isFunctionKey } from "../../helpers/unicode.mjs";
 export const EDITOR_TYPE = 'date';
@@ -39,7 +40,7 @@ export class DateEditor extends TextEditor {
       throw new Error('You need to include Pikaday to your project.');
     }
     super.init();
-    this.instance.addHook('afterDestroy', () => {
+    this.hot.addHook('afterDestroy', () => {
       this.parentDestroyed = true;
       this.destroyElements();
     });
@@ -64,7 +65,21 @@ export class DateEditor extends TextEditor {
     /**
      * Prevent recognizing clicking on datepicker as clicking outside of table.
      */
-    eventManager.addEventListener(this.datePicker, 'mousedown', event => event.stopPropagation());
+    eventManager.addEventListener(this.datePicker, 'mousedown', event => {
+      if (hasClass(event.target, 'pika-day')) {
+        this.hideDatepicker();
+      }
+      event.stopPropagation();
+    });
+
+    /**
+     * Prevent caret movement in the TEXTAREA when navigating over the date picker.
+     */
+    eventManager.addEventListener(this.TEXTAREA, 'keydown', event => {
+      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.code)) {
+        event.preventDefault();
+      }
+    });
   }
 
   /**
@@ -105,6 +120,9 @@ export class DateEditor extends TextEditor {
     const editorContext = shortcutManager.getContext('editor');
     super.open();
     this.showDatepicker(event);
+    if (this.hot.getSettings().ariaTags) {
+      setAttribute(this.TD, [A11Y_EXPANDED('true')]);
+    }
     editorContext.addShortcut({
       keys: [['Enter']],
       callback: keyboardEvent => {
@@ -127,9 +145,12 @@ export class DateEditor extends TextEditor {
     if ((_this$$datePicker = this.$datePicker) !== null && _this$$datePicker !== void 0 && _this$$datePicker.destroy) {
       this.$datePicker.destroy();
     }
-    this.instance._registerTimeout(() => {
-      this.instance._refreshBorders();
+    this.hot._registerTimeout(() => {
+      this.hot._refreshBorders();
     });
+    if (this.TD && this.hot.getSettings().ariaTags) {
+      setAttribute(this.TD, [A11Y_EXPANDED('false')]);
+    }
     const shortcutManager = this.hot.getShortcutManager();
     const editorContext = shortcutManager.getContext('editor');
     editorContext.removeShortcutsByGroup(SHORTCUTS_GROUP_EDITOR);
@@ -147,7 +168,6 @@ export class DateEditor extends TextEditor {
     let ctrlDown = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     if (restoreOriginalValue) {
       // pressed ESC, restore original value
-      // var value = this.instance.getDataAtCell(this.row, this.col);
       const value = this.originalValue;
       if (value !== void 0) {
         this.setValue(value);
@@ -164,7 +184,7 @@ export class DateEditor extends TextEditor {
   showDatepicker(event) {
     const offset = this.TD.getBoundingClientRect();
     const dateFormat = this.cellProperties.dateFormat || this.defaultDateFormat;
-    const isMouseDown = this.instance.view.isMouseDown();
+    const isMouseDown = this.hot.view.isMouseDown();
     const isMeta = event ? isFunctionKey(event.keyCode) : false;
     let dateStr;
     this.datePicker.style.display = 'block';
@@ -243,7 +263,6 @@ export class DateEditor extends TextEditor {
         dateStr = moment(dateStr).format(this.cellProperties.dateFormat || this.defaultDateFormat);
       }
       this.setValue(dateStr);
-      this.hideDatepicker();
       if (origOnSelect) {
         origOnSelect();
       }

package/editors/handsontableEditor/handsontableEditor.js

@@ -6,6 +6,7 @@ var _element = require("../../helpers/dom/element");
 var _event = require("../../helpers/dom/event");
 var _object = require("../../helpers/object");
 var _editorManager = require("../../editorManager");
+var _a11y = require("../../helpers/a11y");
 const SHORTCUTS_GROUP = 'handsontableEditor';
 const EDITOR_TYPE = 'handsontable';
 
@@ -42,6 +43,9 @@ class HandsontableEditor extends _textEditor.TextEditor {
     }
     (0, _element.setCaretPosition)(this.TEXTAREA, 0, this.TEXTAREA.value.length);
     this.refreshDimensions();
+    if (this.hot.getSettings().ariaTags) {
+      (0, _element.setAttribute)(this.TD, [(0, _a11y.A11Y_EXPANDED)('true')]);
+    }
   }
 
   /**
@@ -53,6 +57,9 @@ class HandsontableEditor extends _textEditor.TextEditor {
     }
     this.removeHooksByKey('beforeKeyDown');
     super.close();
+    if (this.hot.getSettings().ariaTags) {
+      (0, _element.setAttribute)(this.TD, [(0, _a11y.A11Y_EXPANDED)('false')]);
+    }
   }
 
   /**
@@ -81,6 +88,7 @@ class HandsontableEditor extends _textEditor.TextEditor {
       fillHandle: false,
       autoWrapCol: false,
       autoWrapRow: false,
+      ariaTags: false,
       afterOnCellMouseDown(_, coords) {
         const sourceValue = this.getSourceData(coords.row, coords.col);
 
@@ -149,7 +157,7 @@ class HandsontableEditor extends _textEditor.TextEditor {
   }
 
   /**
-   * Assings afterDestroy callback to prevent memory leaks.
+   * Assigns afterDestroy callback to prevent memory leaks.
    *
    * @private
    */

package/editors/handsontableEditor/handsontableEditor.mjs

@@ -1,8 +1,9 @@
 import { TextEditor } from "../textEditor/index.mjs";
-import { setCaretPosition } from "../../helpers/dom/element.mjs";
+import { setAttribute, setCaretPosition } from "../../helpers/dom/element.mjs";
 import { stopImmediatePropagation } from "../../helpers/dom/event.mjs";
 import { extend } from "../../helpers/object.mjs";
 import { SHORTCUTS_GROUP_NAVIGATION } from "../../editorManager.mjs";
+import { A11Y_EXPANDED } from "../../helpers/a11y.mjs";
 const SHORTCUTS_GROUP = 'handsontableEditor';
 export const EDITOR_TYPE = 'handsontable';
 
@@ -38,6 +39,9 @@ export class HandsontableEditor extends TextEditor {
     }
     setCaretPosition(this.TEXTAREA, 0, this.TEXTAREA.value.length);
     this.refreshDimensions();
+    if (this.hot.getSettings().ariaTags) {
+      setAttribute(this.TD, [A11Y_EXPANDED('true')]);
+    }
   }
 
   /**
@@ -49,6 +53,9 @@ export class HandsontableEditor extends TextEditor {
     }
     this.removeHooksByKey('beforeKeyDown');
     super.close();
+    if (this.hot.getSettings().ariaTags) {
+      setAttribute(this.TD, [A11Y_EXPANDED('false')]);
+    }
   }
 
   /**
@@ -77,6 +84,7 @@ export class HandsontableEditor extends TextEditor {
       fillHandle: false,
       autoWrapCol: false,
       autoWrapRow: false,
+      ariaTags: false,
       afterOnCellMouseDown(_, coords) {
         const sourceValue = this.getSourceData(coords.row, coords.col);
 
@@ -145,7 +153,7 @@ export class HandsontableEditor extends TextEditor {
   }
 
   /**
-   * Assings afterDestroy callback to prevent memory leaks.
+   * Assigns afterDestroy callback to prevent memory leaks.
    *
    * @private
    */

package/editors/textEditor/textEditor.js

@@ -12,6 +12,7 @@ var _mixed = require("../../helpers/mixed");
 var _editorManager = require("../../editorManager");
 var _baseEditor2 = require("../baseEditor/baseEditor");
 var _caretPositioner = require("./caretPositioner");
+var _a11y = require("../../helpers/a11y");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const EDITOR_VISIBLE_CLASS_NAME = 'ht_editor_visible';
 const EDITOR_HIDDEN_CLASS_NAME = 'ht_editor_hidden';
@@ -122,7 +123,7 @@ class TextEditor extends _baseEditor.BaseEditor {
    */
   close() {
     this.autoResize.unObserve();
-    if (this.hot.rootDocument.activeElement === this.TEXTAREA) {
+    if ((0, _element.isThisHotChild)(this.hot.rootDocument.activeElement, this.hot.rootElement)) {
       this.hot.listen(); // don't refocus the table if user focused some cell outside of HT on purpose
     }
 
@@ -147,8 +148,7 @@ class TextEditor extends _baseEditor.BaseEditor {
     if (!cellProperties.readOnly) {
       this.refreshDimensions(true);
       const {
-        allowInvalid,
-        fragmentSelection
+        allowInvalid
       } = cellProperties;
       if (allowInvalid) {
         // Remove an empty space from textarea (added by copyPaste plugin to make copy/paste
@@ -158,13 +158,6 @@ class TextEditor extends _baseEditor.BaseEditor {
       if (previousState !== _baseEditor.EDITOR_STATE.FINISHED) {
         this.hideEditableElement();
       }
-
-      // @TODO: The fragmentSelection functionality is conflicted with IME. For this feature
-      // refocus has to be disabled (to make IME working).
-      const restoreFocus = !fragmentSelection;
-      if (restoreFocus && !(0, _browser.isMobileBrowser)()) {
-        this.focus();
-      }
     }
   }
 
@@ -201,8 +194,13 @@ class TextEditor extends _baseEditor.BaseEditor {
       rootDocument
     } = this.hot;
     this.TEXTAREA = rootDocument.createElement('TEXTAREA');
-    this.TEXTAREA.setAttribute('data-hot-input', ''); // Makes the element recognizable by Hot as its own component's element.
-    this.TEXTAREA.tabIndex = -1;
+
+    // Makes the element recognizable by Hot as its own
+    // component's element.
+    (0, _element.setAttribute)(this.TEXTAREA, [['data-hot-input', ''], (0, _a11y.A11Y_TABINDEX)(-1)]);
+    if (this.hot.getSettings().ariaTags) {
+      (0, _element.setAttribute)(this.TEXTAREA, [(0, _a11y.A11Y_HIDDEN)()]);
+    }
     (0, _element.addClass)(this.TEXTAREA, 'handsontableInput');
     this.textareaStyle = this.TEXTAREA.style;
     this.textareaStyle.width = 0;
@@ -340,8 +338,6 @@ class TextEditor extends _baseEditor.BaseEditor {
    * @private
    */
   bindEvents() {
-    this.eventManager.addEventListener(this.TEXTAREA, 'cut', event => event.stopPropagation());
-    this.eventManager.addEventListener(this.TEXTAREA, 'paste', event => event.stopPropagation());
     if ((0, _browser.isIOS)()) {
       // on iOS after click "Done" the edit isn't hidden by default, so we need to handle it manually.
       this.eventManager.addEventListener(this.TEXTAREA, 'focusout', () => this.finishEditing(false));
@@ -350,11 +346,15 @@ class TextEditor extends _baseEditor.BaseEditor {
     this.addHook('afterScrollVertically', () => this.refreshDimensions());
     this.addHook('afterColumnResize', () => {
       this.refreshDimensions();
-      this.focus();
+      if (this.state === _baseEditor.EDITOR_STATE.EDITING) {
+        this.focus();
+      }
     });
     this.addHook('afterRowResize', () => {
       this.refreshDimensions();
-      this.focus();
+      if (this.state === _baseEditor.EDITOR_STATE.EDITING) {
+        this.focus();
+      }
     });
   }
 
@@ -416,9 +416,7 @@ class TextEditor extends _baseEditor.BaseEditor {
       runOnlyIf: event => !this.hot.selection.isMultiple() &&
       // We trigger a data population for multiple selection.
       // catch CTRL but not right ALT (which in some systems triggers ALT+CTRL)
-      !event.altKey,
-      relativeToGroup: _editorManager.SHORTCUTS_GROUP_EDITOR,
-      position: 'before'
+      !event.altKey
     }, {
       keys: [['Meta', 'Enter']],
       callback: () => {
@@ -426,19 +424,13 @@ class TextEditor extends _baseEditor.BaseEditor {
         return false; // Will block closing editor.
       },
 
-      runOnlyIf: () => !this.hot.selection.isMultiple(),
-      // We trigger a data population for multiple selection.
-      relativeToGroup: _editorManager.SHORTCUTS_GROUP_EDITOR,
-      position: 'before'
+      runOnlyIf: () => !this.hot.selection.isMultiple() // We trigger a data population for multiple selection.
     }, {
       keys: [['Alt', 'Enter']],
       callback: () => {
         insertNewLine();
         return false; // Will block closing editor.
-      },
-
-      relativeToGroup: _editorManager.SHORTCUTS_GROUP_EDITOR,
-      position: 'before'
+      }
     }, {
       // TODO: Duplicated part of code (callback to shortcut)
       keys: [['PageUp']],

package/editors/textEditor/textEditor.mjs

@@ -1,14 +1,15 @@
 import { BaseEditor, EDITOR_STATE } from "../baseEditor/index.mjs";
 import EventManager from "../../eventManager.mjs";
-import { isMobileBrowser, isEdge, isIOS } from "../../helpers/browser.mjs";
-import { addClass, getComputedStyle, setCaretPosition, hasClass, removeClass } from "../../helpers/dom/element.mjs";
+import { isEdge, isIOS } from "../../helpers/browser.mjs";
+import { addClass, getComputedStyle, isThisHotChild, setCaretPosition, hasClass, removeClass, setAttribute } from "../../helpers/dom/element.mjs";
 import { rangeEach } from "../../helpers/number.mjs";
 import { KEY_CODES } from "../../helpers/unicode.mjs";
 import { autoResize } from "../../3rdparty/autoResize/index.mjs";
 import { isDefined } from "../../helpers/mixed.mjs";
-import { SHORTCUTS_GROUP_NAVIGATION, SHORTCUTS_GROUP_EDITOR as EDITOR_MANAGER_GROUP } from "../../editorManager.mjs";
+import { SHORTCUTS_GROUP_NAVIGATION } from "../../editorManager.mjs";
 import { SHORTCUTS_GROUP_EDITOR } from "../baseEditor/baseEditor.mjs";
 import { updateCaretPosition } from "./caretPositioner.mjs";
+import { A11Y_HIDDEN, A11Y_TABINDEX } from "../../helpers/a11y.mjs";
 const EDITOR_VISIBLE_CLASS_NAME = 'ht_editor_visible';
 const EDITOR_HIDDEN_CLASS_NAME = 'ht_editor_hidden';
 const SHORTCUTS_GROUP = 'textEditor';
@@ -117,7 +118,7 @@ export class TextEditor extends BaseEditor {
    */
   close() {
     this.autoResize.unObserve();
-    if (this.hot.rootDocument.activeElement === this.TEXTAREA) {
+    if (isThisHotChild(this.hot.rootDocument.activeElement, this.hot.rootElement)) {
       this.hot.listen(); // don't refocus the table if user focused some cell outside of HT on purpose
     }
 
@@ -142,8 +143,7 @@ export class TextEditor extends BaseEditor {
     if (!cellProperties.readOnly) {
       this.refreshDimensions(true);
       const {
-        allowInvalid,
-        fragmentSelection
+        allowInvalid
       } = cellProperties;
       if (allowInvalid) {
         // Remove an empty space from textarea (added by copyPaste plugin to make copy/paste
@@ -153,13 +153,6 @@ export class TextEditor extends BaseEditor {
       if (previousState !== EDITOR_STATE.FINISHED) {
         this.hideEditableElement();
       }
-
-      // @TODO: The fragmentSelection functionality is conflicted with IME. For this feature
-      // refocus has to be disabled (to make IME working).
-      const restoreFocus = !fragmentSelection;
-      if (restoreFocus && !isMobileBrowser()) {
-        this.focus();
-      }
     }
   }
 
@@ -196,8 +189,13 @@ export class TextEditor extends BaseEditor {
       rootDocument
     } = this.hot;
     this.TEXTAREA = rootDocument.createElement('TEXTAREA');
-    this.TEXTAREA.setAttribute('data-hot-input', ''); // Makes the element recognizable by Hot as its own component's element.
-    this.TEXTAREA.tabIndex = -1;
+
+    // Makes the element recognizable by Hot as its own
+    // component's element.
+    setAttribute(this.TEXTAREA, [['data-hot-input', ''], A11Y_TABINDEX(-1)]);
+    if (this.hot.getSettings().ariaTags) {
+      setAttribute(this.TEXTAREA, [A11Y_HIDDEN()]);
+    }
     addClass(this.TEXTAREA, 'handsontableInput');
     this.textareaStyle = this.TEXTAREA.style;
     this.textareaStyle.width = 0;
@@ -335,8 +333,6 @@ export class TextEditor extends BaseEditor {
    * @private
    */
   bindEvents() {
-    this.eventManager.addEventListener(this.TEXTAREA, 'cut', event => event.stopPropagation());
-    this.eventManager.addEventListener(this.TEXTAREA, 'paste', event => event.stopPropagation());
     if (isIOS()) {
       // on iOS after click "Done" the edit isn't hidden by default, so we need to handle it manually.
       this.eventManager.addEventListener(this.TEXTAREA, 'focusout', () => this.finishEditing(false));
@@ -345,11 +341,15 @@ export class TextEditor extends BaseEditor {
     this.addHook('afterScrollVertically', () => this.refreshDimensions());
     this.addHook('afterColumnResize', () => {
       this.refreshDimensions();
-      this.focus();
+      if (this.state === EDITOR_STATE.EDITING) {
+        this.focus();
+      }
     });
     this.addHook('afterRowResize', () => {
       this.refreshDimensions();
-      this.focus();
+      if (this.state === EDITOR_STATE.EDITING) {
+        this.focus();
+      }
     });
   }
 
@@ -411,9 +411,7 @@ export class TextEditor extends BaseEditor {
       runOnlyIf: event => !this.hot.selection.isMultiple() &&
       // We trigger a data population for multiple selection.
       // catch CTRL but not right ALT (which in some systems triggers ALT+CTRL)
-      !event.altKey,
-      relativeToGroup: EDITOR_MANAGER_GROUP,
-      position: 'before'
+      !event.altKey
     }, {
       keys: [['Meta', 'Enter']],
       callback: () => {
@@ -421,19 +419,13 @@ export class TextEditor extends BaseEditor {
         return false; // Will block closing editor.
       },
 
-      runOnlyIf: () => !this.hot.selection.isMultiple(),
-      // We trigger a data population for multiple selection.
-      relativeToGroup: EDITOR_MANAGER_GROUP,
-      position: 'before'
+      runOnlyIf: () => !this.hot.selection.isMultiple() // We trigger a data population for multiple selection.
     }, {
       keys: [['Alt', 'Enter']],
       callback: () => {
         insertNewLine();
         return false; // Will block closing editor.
-      },
-
-      relativeToGroup: EDITOR_MANAGER_GROUP,
-      position: 'before'
+      }
     }, {
       // TODO: Duplicated part of code (callback to shortcut)
       keys: [['PageUp']],

package/focusManager.d.ts

@@ -0,0 +1,12 @@
+type FocusMode = 'cell' | 'mixed';
+
+export interface FocusManager {
+  getFocusMode(): FocusMode;
+  setFocusMode(focusMode: FocusMode): void;
+  getRefocusDelay(): number;
+  setRefocusDelay(delay: number): void;
+  setRefocusElementGetter(getterFn: () => HTMLElement): void;
+  getRefocusElement(): HTMLElement | void;
+  focusOnHighlightedCell(): void;
+  refocusToEditorTextarea(delay: number): void;
+}