handsontable 0.0.0-next-b0a4ea2-20231024 → 0.0.0-next-9059914-20231025

package/editors/dateEditor/dateEditor.mjs

@@ -3,8 +3,7 @@ import moment from 'moment';
 import Pikaday from 'pikaday';
 import { TextEditor } from "../textEditor/index.mjs";
 import EventManager from "../../eventManager.mjs";
-import { addClass, hasClass, outerHeight, outerWidth, setAttribute } from "../../helpers/dom/element.mjs";
-import { A11Y_EXPANDED } from "../../helpers/a11y.mjs";
+import { addClass, outerHeight, outerWidth } from "../../helpers/dom/element.mjs";
 import { deepExtend } from "../../helpers/object.mjs";
 import { isFunctionKey } from "../../helpers/unicode.mjs";
 export const EDITOR_TYPE = 'date';
@@ -40,7 +39,7 @@ export class DateEditor extends TextEditor {
       throw new Error('You need to include Pikaday to your project.');
     }
     super.init();
-    this.hot.addHook('afterDestroy', () => {
+    this.instance.addHook('afterDestroy', () => {
       this.parentDestroyed = true;
       this.destroyElements();
     });
@@ -65,21 +64,7 @@ export class DateEditor extends TextEditor {
     /**
      * Prevent recognizing clicking on datepicker as clicking outside of table.
      */
-    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();
-      }
-    });
+    eventManager.addEventListener(this.datePicker, 'mousedown', event => event.stopPropagation());
   }
 
   /**
@@ -120,9 +105,6 @@ 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 => {
@@ -145,12 +127,9 @@ export class DateEditor extends TextEditor {
     if ((_this$$datePicker = this.$datePicker) !== null && _this$$datePicker !== void 0 && _this$$datePicker.destroy) {
       this.$datePicker.destroy();
     }
-    this.hot._registerTimeout(() => {
-      this.hot._refreshBorders();
+    this.instance._registerTimeout(() => {
+      this.instance._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);
@@ -168,6 +147,7 @@ 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);
@@ -184,7 +164,7 @@ export class DateEditor extends TextEditor {
   showDatepicker(event) {
     const offset = this.TD.getBoundingClientRect();
     const dateFormat = this.cellProperties.dateFormat || this.defaultDateFormat;
-    const isMouseDown = this.hot.view.isMouseDown();
+    const isMouseDown = this.instance.view.isMouseDown();
     const isMeta = event ? isFunctionKey(event.keyCode) : false;
     let dateStr;
     this.datePicker.style.display = 'block';
@@ -263,6 +243,7 @@ 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,7 +6,6 @@ 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';
 
@@ -43,9 +42,6 @@ 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')]);
-    }
   }
 
   /**
@@ -57,9 +53,6 @@ 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')]);
-    }
   }
 
   /**
@@ -88,7 +81,6 @@ class HandsontableEditor extends _textEditor.TextEditor {
       fillHandle: false,
       autoWrapCol: false,
       autoWrapRow: false,
-      ariaTags: false,
       afterOnCellMouseDown(_, coords) {
         const sourceValue = this.getSourceData(coords.row, coords.col);
 
@@ -157,7 +149,7 @@ class HandsontableEditor extends _textEditor.TextEditor {
   }
 
   /**
-   * Assigns afterDestroy callback to prevent memory leaks.
+   * Assings afterDestroy callback to prevent memory leaks.
    *
    * @private
    */

package/editors/handsontableEditor/handsontableEditor.mjs

@@ -1,9 +1,8 @@
 import { TextEditor } from "../textEditor/index.mjs";
-import { setAttribute, setCaretPosition } from "../../helpers/dom/element.mjs";
+import { 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';
 
@@ -39,9 +38,6 @@ 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')]);
-    }
   }
 
   /**
@@ -53,9 +49,6 @@ export class HandsontableEditor extends TextEditor {
     }
     this.removeHooksByKey('beforeKeyDown');
     super.close();
-    if (this.hot.getSettings().ariaTags) {
-      setAttribute(this.TD, [A11Y_EXPANDED('false')]);
-    }
   }
 
   /**
@@ -84,7 +77,6 @@ export class HandsontableEditor extends TextEditor {
       fillHandle: false,
       autoWrapCol: false,
       autoWrapRow: false,
-      ariaTags: false,
       afterOnCellMouseDown(_, coords) {
         const sourceValue = this.getSourceData(coords.row, coords.col);
 
@@ -153,7 +145,7 @@ export class HandsontableEditor extends TextEditor {
   }
 
   /**
-   * Assigns afterDestroy callback to prevent memory leaks.
+   * Assings afterDestroy callback to prevent memory leaks.
    *
    * @private
    */

package/editors/textEditor/textEditor.js

@@ -12,7 +12,6 @@ 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';
@@ -123,7 +122,7 @@ class TextEditor extends _baseEditor.BaseEditor {
    */
   close() {
     this.autoResize.unObserve();
-    if ((0, _element.isThisHotChild)(this.hot.rootDocument.activeElement, this.hot.rootElement)) {
+    if (this.hot.rootDocument.activeElement === this.TEXTAREA) {
       this.hot.listen(); // don't refocus the table if user focused some cell outside of HT on purpose
     }
 
@@ -148,7 +147,8 @@ class TextEditor extends _baseEditor.BaseEditor {
     if (!cellProperties.readOnly) {
       this.refreshDimensions(true);
       const {
-        allowInvalid
+        allowInvalid,
+        fragmentSelection
       } = cellProperties;
       if (allowInvalid) {
         // Remove an empty space from textarea (added by copyPaste plugin to make copy/paste
@@ -158,6 +158,13 @@ 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();
+      }
     }
   }
 
@@ -194,13 +201,8 @@ class TextEditor extends _baseEditor.BaseEditor {
       rootDocument
     } = this.hot;
     this.TEXTAREA = rootDocument.createElement('TEXTAREA');
-
-    // 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)()]);
-    }
+    this.TEXTAREA.setAttribute('data-hot-input', ''); // Makes the element recognizable by Hot as its own component's element.
+    this.TEXTAREA.tabIndex = -1;
     (0, _element.addClass)(this.TEXTAREA, 'handsontableInput');
     this.textareaStyle = this.TEXTAREA.style;
     this.textareaStyle.width = 0;
@@ -338,6 +340,8 @@ 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));
@@ -346,15 +350,11 @@ class TextEditor extends _baseEditor.BaseEditor {
     this.addHook('afterScrollVertically', () => this.refreshDimensions());
     this.addHook('afterColumnResize', () => {
       this.refreshDimensions();
-      if (this.state === _baseEditor.EDITOR_STATE.EDITING) {
-        this.focus();
-      }
+      this.focus();
     });
     this.addHook('afterRowResize', () => {
       this.refreshDimensions();
-      if (this.state === _baseEditor.EDITOR_STATE.EDITING) {
-        this.focus();
-      }
+      this.focus();
     });
   }
 
@@ -416,7 +416,9 @@ 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
+      !event.altKey,
+      relativeToGroup: _editorManager.SHORTCUTS_GROUP_EDITOR,
+      position: 'before'
     }, {
       keys: [['Meta', 'Enter']],
       callback: () => {
@@ -424,13 +426,19 @@ class TextEditor extends _baseEditor.BaseEditor {
         return false; // Will block closing editor.
       },
 
-      runOnlyIf: () => !this.hot.selection.isMultiple() // We trigger a data population for multiple selection.
+      runOnlyIf: () => !this.hot.selection.isMultiple(),
+      // We trigger a data population for multiple selection.
+      relativeToGroup: _editorManager.SHORTCUTS_GROUP_EDITOR,
+      position: 'before'
     }, {
       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,15 +1,14 @@
 import { BaseEditor, EDITOR_STATE } from "../baseEditor/index.mjs";
 import EventManager from "../../eventManager.mjs";
-import { isEdge, isIOS } from "../../helpers/browser.mjs";
-import { addClass, getComputedStyle, isThisHotChild, setCaretPosition, hasClass, removeClass, setAttribute } from "../../helpers/dom/element.mjs";
+import { isMobileBrowser, isEdge, isIOS } from "../../helpers/browser.mjs";
+import { addClass, getComputedStyle, setCaretPosition, hasClass, removeClass } 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 } from "../../editorManager.mjs";
+import { SHORTCUTS_GROUP_NAVIGATION, SHORTCUTS_GROUP_EDITOR as EDITOR_MANAGER_GROUP } 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';
@@ -118,7 +117,7 @@ export class TextEditor extends BaseEditor {
    */
   close() {
     this.autoResize.unObserve();
-    if (isThisHotChild(this.hot.rootDocument.activeElement, this.hot.rootElement)) {
+    if (this.hot.rootDocument.activeElement === this.TEXTAREA) {
       this.hot.listen(); // don't refocus the table if user focused some cell outside of HT on purpose
     }
 
@@ -143,7 +142,8 @@ export class TextEditor extends BaseEditor {
     if (!cellProperties.readOnly) {
       this.refreshDimensions(true);
       const {
-        allowInvalid
+        allowInvalid,
+        fragmentSelection
       } = cellProperties;
       if (allowInvalid) {
         // Remove an empty space from textarea (added by copyPaste plugin to make copy/paste
@@ -153,6 +153,13 @@ 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();
+      }
     }
   }
 
@@ -189,13 +196,8 @@ export class TextEditor extends BaseEditor {
       rootDocument
     } = this.hot;
     this.TEXTAREA = rootDocument.createElement('TEXTAREA');
-
-    // 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()]);
-    }
+    this.TEXTAREA.setAttribute('data-hot-input', ''); // Makes the element recognizable by Hot as its own component's element.
+    this.TEXTAREA.tabIndex = -1;
     addClass(this.TEXTAREA, 'handsontableInput');
     this.textareaStyle = this.TEXTAREA.style;
     this.textareaStyle.width = 0;
@@ -333,6 +335,8 @@ 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));
@@ -341,15 +345,11 @@ export class TextEditor extends BaseEditor {
     this.addHook('afterScrollVertically', () => this.refreshDimensions());
     this.addHook('afterColumnResize', () => {
       this.refreshDimensions();
-      if (this.state === EDITOR_STATE.EDITING) {
-        this.focus();
-      }
+      this.focus();
     });
     this.addHook('afterRowResize', () => {
       this.refreshDimensions();
-      if (this.state === EDITOR_STATE.EDITING) {
-        this.focus();
-      }
+      this.focus();
     });
   }
 
@@ -411,7 +411,9 @@ 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
+      !event.altKey,
+      relativeToGroup: EDITOR_MANAGER_GROUP,
+      position: 'before'
     }, {
       keys: [['Meta', 'Enter']],
       callback: () => {
@@ -419,13 +421,19 @@ export class TextEditor extends BaseEditor {
         return false; // Will block closing editor.
       },
 
-      runOnlyIf: () => !this.hot.selection.isMultiple() // We trigger a data population for multiple selection.
+      runOnlyIf: () => !this.hot.selection.isMultiple(),
+      // We trigger a data population for multiple selection.
+      relativeToGroup: EDITOR_MANAGER_GROUP,
+      position: 'before'
     }, {
       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']],