handsontable 0.0.0-next-9379dd1-20231020 → 0.0.0-next-9059914-20231025

package/plugins/copyPaste/focusableElement.mjs

@@ -0,0 +1,180 @@
+import EventManager from "../../eventManager.mjs";
+import localHooks from "../../mixins/localHooks.mjs";
+import { mixin } from "../../helpers/object.mjs";
+import { isMobileBrowser } from "../../helpers/browser.mjs";
+import { selectElementIfAllowed } from "../../helpers/dom/element.mjs";
+/**
+ * @private
+ * @class FocusableWrapper
+ */
+class FocusableWrapper {
+  constructor(container) {
+    this.rootDocument = container.defaultView ? container : container.ownerDocument;
+    /**
+     * The main/operational focusable element.
+     *
+     * @type {HTMLElement}
+     */
+    this.mainElement = null;
+    /**
+     * Instance of EventManager.
+     *
+     * @type {EventManager}
+     */
+    this.eventManager = new EventManager(this);
+    /**
+     * An object for tracking information about event listeners attached to the focusable element.
+     *
+     * @type {WeakSet}
+     */
+    this.listenersCount = new WeakSet();
+    /**
+     * Parent for an focusable element.
+     *
+     * @type {HTMLElement}
+     */
+    this.container = container;
+  }
+
+  /**
+   * Switch to the secondary focusable element. Used when no any main focusable element is provided.
+   */
+  useSecondaryElement() {
+    const el = createOrGetSecondaryElement(this.container);
+    if (!this.listenersCount.has(el)) {
+      this.listenersCount.add(el);
+      forwardEventsToLocalHooks(this.eventManager, el, this);
+    }
+    this.mainElement = el;
+  }
+
+  /**
+   * Switch to the main focusable element.
+   *
+   * @param {HTMLElement} element The DOM element.
+   */
+  setFocusableElement(element) {
+    if (!this.listenersCount.has(element)) {
+      this.listenersCount.add(element);
+      forwardEventsToLocalHooks(this.eventManager, element, this);
+    }
+    this.mainElement = element;
+  }
+
+  /**
+   * Get currently set focusable element.
+   *
+   * @returns {HTMLElement}
+   */
+  getFocusableElement() {
+    return this.mainElement;
+  }
+
+  /**
+   * Set focus to the focusable element.
+   */
+  focus() {
+    // Add an empty space to texarea. It is necessary for safari to enable "copy" command from menu bar.
+    this.mainElement.value = ' ';
+    if (!isMobileBrowser()) {
+      selectElementIfAllowed(this.mainElement);
+    }
+  }
+}
+mixin(FocusableWrapper, localHooks);
+const refCounter = new WeakMap();
+
+/**
+ * Create and return the FocusableWrapper instance.
+ *
+ * @param {HTMLElement} container The container element, holder for focusable elements.
+ * @returns {FocusableWrapper}
+ */
+function createElement(container) {
+  const focusableWrapper = new FocusableWrapper(container);
+  let counter = refCounter.get(container);
+  counter = isNaN(counter) ? 0 : counter;
+  refCounter.set(container, counter + 1);
+  return focusableWrapper;
+}
+
+/**
+ * Deactivate the FocusableWrapper instance.
+ *
+ * @param {FocusableWrapper} wrapper The instance of the FocusableWrapper class.
+ */
+function deactivateElement(wrapper) {
+  wrapper.eventManager.clear();
+}
+const runLocalHooks = (eventName, subject) => event => subject.runLocalHooks(eventName, event);
+
+/**
+ * Register copy/cut/paste events and forward their actions to the subject local hooks system.
+ *
+ * @param {EventManager} eventManager The instance of the EventManager class.
+ * @param {HTMLElement} element The element on which the listeners are mounted.
+ * @param {FocusableWrapper} subject The subject object for local hooks.
+ */
+function forwardEventsToLocalHooks(eventManager, element, subject) {
+  eventManager.addEventListener(element, 'copy', runLocalHooks('copy', subject));
+  eventManager.addEventListener(element, 'cut', runLocalHooks('cut', subject));
+  eventManager.addEventListener(element, 'paste', runLocalHooks('paste', subject));
+}
+const secondaryElements = new WeakMap();
+
+/**
+ * Create and attach newly created focusable element to the DOM.
+ *
+ * @param {HTMLElement} container The container element, holder for focusable elements.
+ * @returns {HTMLElement}
+ */
+function createOrGetSecondaryElement(container) {
+  const secondaryElement = secondaryElements.get(container);
+  if (secondaryElement) {
+    if (!secondaryElement.parentElement) {
+      container.appendChild(secondaryElement);
+    }
+    return secondaryElement;
+  }
+  const doc = container.defaultView ? container : container.ownerDocument;
+  const element = doc.createElement('textarea');
+  secondaryElements.set(container, element);
+  element.setAttribute('data-hot-input', ''); // Makes the element recognizable by Hot as its own component's element.
+  element.className = 'HandsontableCopyPaste';
+  element.tabIndex = -1;
+  element.autocomplete = 'off';
+  element.wrap = 'hard';
+  element.value = ' ';
+  container.appendChild(element);
+  return element;
+}
+
+/**
+ * Destroy the FocusableWrapper instance.
+ *
+ * @param {FocusableWrapper} wrapper The instance of the FocusableWrapper class.
+ */
+function destroyElement(wrapper) {
+  if (!(wrapper instanceof FocusableWrapper)) {
+    return;
+  }
+  let counter = refCounter.get(wrapper.container);
+  counter = isNaN(counter) ? 0 : counter;
+  if (counter > 0) {
+    counter -= 1;
+  }
+  deactivateElement(wrapper);
+  if (counter <= 0) {
+    counter = 0;
+
+    // Detach secondary element from the DOM.
+    const secondaryElement = secondaryElements.get(wrapper.container);
+    if (secondaryElement && secondaryElement.parentNode) {
+      secondaryElement.parentNode.removeChild(secondaryElement);
+      secondaryElements.delete(wrapper.container);
+    }
+    wrapper.mainElement = null;
+  }
+  refCounter.set(wrapper.container, counter);
+}
+export { createElement, deactivateElement, destroyElement };

package/plugins/customBorders/customBorders.js

@@ -167,11 +167,14 @@ class CustomBorders extends _base.BasePlugin {
     const selectionType = (0, _selection.detectSelectionType)(selectionRanges);
     const selectionSchemaNormalizer = (0, _selection.normalizeSelectionFactory)(selectionType);
     (0, _array.arrayEach)(selectionRanges, selection => {
-      selectionSchemaNormalizer(selection).forAll((row, col) => {
-        (0, _array.arrayEach)(borderKeys, borderKey => {
-          this.prepareBorderFromCustomAdded(row, col, normBorder, (0, _utils.toInlinePropName)(borderKey));
-        });
-      });
+      const [rowStart, columnStart, rowEnd, columnEnd] = selectionSchemaNormalizer(selection);
+      for (let row = rowStart; row <= rowEnd; row += 1) {
+        for (let col = columnStart; col <= columnEnd; col += 1) {
+          (0, _array.arrayEach)(borderKeys, borderKey => {
+            this.prepareBorderFromCustomAdded(row, col, normBorder, (0, _utils.toInlinePropName)(borderKey));
+          });
+        }
+      }
     });
 
     /*
@@ -211,13 +214,16 @@ class CustomBorders extends _base.BasePlugin {
     const selectionSchemaNormalizer = (0, _selection.normalizeSelectionFactory)(selectionType);
     const selectedBorders = [];
     (0, _array.arrayEach)(selectionRanges, selection => {
-      selectionSchemaNormalizer(selection).forAll((row, col) => {
-        (0, _array.arrayEach)(this.savedBorders, border => {
-          if (border.row === row && border.col === col) {
-            selectedBorders.push((0, _utils.denormalizeBorder)(border));
-          }
-        });
-      });
+      const [rowStart, columnStart, rowEnd, columnEnd] = selectionSchemaNormalizer(selection);
+      for (let row = rowStart; row <= rowEnd; row += 1) {
+        for (let col = columnStart; col <= columnEnd; col += 1) {
+          (0, _array.arrayEach)(this.savedBorders, border => {
+            if (border.row === row && border.col === col) {
+              selectedBorders.push((0, _utils.denormalizeBorder)(border));
+            }
+          });
+        }
+      }
     });
     return selectedBorders;
   }
@@ -608,8 +614,7 @@ class CustomBorders extends _base.BasePlugin {
     let check = false;
     (0, _array.arrayEach)(this.hot.selection.highlight.customSelections, customSelection => {
       if (border.id === customSelection.settings.id) {
-        const borders = this.hot.view._wt.selectionManager.getBorderInstances(customSelection);
-        (0, _array.arrayEach)(borders, borderObject => {
+        (0, _object.objectEach)(customSelection.instanceBorders, borderObject => {
           borderObject.toggleHiddenClass(place, remove); // TODO this also bad?
         });
 
@@ -643,8 +648,7 @@ class CustomBorders extends _base.BasePlugin {
           customSelection.visualCellRange = cellRange;
           customSelection.commit();
           if (place) {
-            const borders = this.hot.view._wt.selectionManager.getBorderInstances(customSelection);
-            (0, _array.arrayEach)(borders, borderObject => {
+            (0, _object.objectEach)(customSelection.instanceBorders, borderObject => {
               borderObject.changeBorderStyle(place, border);
             });
           }
@@ -712,13 +716,6 @@ class CustomBorders extends _base.BasePlugin {
         return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_BORDERS);
       },
       disabled() {
-        const range = this.getSelectedRangeLast();
-        if (!range) {
-          return true;
-        }
-        if (range.isSingleHeader()) {
-          return true;
-        }
         return this.selection.isSelectedByCorner();
       },
       submenu: {

package/plugins/customBorders/customBorders.mjs

@@ -4,7 +4,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import { BasePlugin } from "../base/index.mjs";
-import { hasOwnProperty, deepClone } from "../../helpers/object.mjs";
+import { hasOwnProperty, objectEach, deepClone } from "../../helpers/object.mjs";
 import { rangeEach } from "../../helpers/number.mjs";
 import { arrayEach, arrayReduce, arrayMap } from "../../helpers/array.mjs";
 import * as C from "../../i18n/constants.mjs";
@@ -160,11 +160,14 @@ export class CustomBorders extends BasePlugin {
     const selectionType = detectSelectionType(selectionRanges);
     const selectionSchemaNormalizer = normalizeSelectionFactory(selectionType);
     arrayEach(selectionRanges, selection => {
-      selectionSchemaNormalizer(selection).forAll((row, col) => {
-        arrayEach(borderKeys, borderKey => {
-          this.prepareBorderFromCustomAdded(row, col, normBorder, toInlinePropName(borderKey));
-        });
-      });
+      const [rowStart, columnStart, rowEnd, columnEnd] = selectionSchemaNormalizer(selection);
+      for (let row = rowStart; row <= rowEnd; row += 1) {
+        for (let col = columnStart; col <= columnEnd; col += 1) {
+          arrayEach(borderKeys, borderKey => {
+            this.prepareBorderFromCustomAdded(row, col, normBorder, toInlinePropName(borderKey));
+          });
+        }
+      }
     });
 
     /*
@@ -204,13 +207,16 @@ export class CustomBorders extends BasePlugin {
     const selectionSchemaNormalizer = normalizeSelectionFactory(selectionType);
     const selectedBorders = [];
     arrayEach(selectionRanges, selection => {
-      selectionSchemaNormalizer(selection).forAll((row, col) => {
-        arrayEach(this.savedBorders, border => {
-          if (border.row === row && border.col === col) {
-            selectedBorders.push(denormalizeBorder(border));
-          }
-        });
-      });
+      const [rowStart, columnStart, rowEnd, columnEnd] = selectionSchemaNormalizer(selection);
+      for (let row = rowStart; row <= rowEnd; row += 1) {
+        for (let col = columnStart; col <= columnEnd; col += 1) {
+          arrayEach(this.savedBorders, border => {
+            if (border.row === row && border.col === col) {
+              selectedBorders.push(denormalizeBorder(border));
+            }
+          });
+        }
+      }
     });
     return selectedBorders;
   }
@@ -601,8 +607,7 @@ export class CustomBorders extends BasePlugin {
     let check = false;
     arrayEach(this.hot.selection.highlight.customSelections, customSelection => {
       if (border.id === customSelection.settings.id) {
-        const borders = this.hot.view._wt.selectionManager.getBorderInstances(customSelection);
-        arrayEach(borders, borderObject => {
+        objectEach(customSelection.instanceBorders, borderObject => {
           borderObject.toggleHiddenClass(place, remove); // TODO this also bad?
         });
 
@@ -636,8 +641,7 @@ export class CustomBorders extends BasePlugin {
           customSelection.visualCellRange = cellRange;
           customSelection.commit();
           if (place) {
-            const borders = this.hot.view._wt.selectionManager.getBorderInstances(customSelection);
-            arrayEach(borders, borderObject => {
+            objectEach(customSelection.instanceBorders, borderObject => {
               borderObject.changeBorderStyle(place, border);
             });
           }
@@ -705,13 +709,6 @@ export class CustomBorders extends BasePlugin {
         return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_BORDERS);
       },
       disabled() {
-        const range = this.getSelectedRangeLast();
-        if (!range) {
-          return true;
-        }
-        if (range.isSingleHeader()) {
-          return true;
-        }
         return this.selection.isSelectedByCorner();
       },
       submenu: {

package/plugins/dropdownMenu/dropdownMenu.d.ts

@@ -18,7 +18,7 @@ export class DropdownMenu extends BasePlugin {
 
   constructor(hotInstance: Core);
   isEnabled(): boolean;
-  open(position: { left: number, top: number } | Event, offset?: { above?: number, below?: number, left?: number, right?: number }): void;
+  open(event: Event): void;
   close(): void;
   executeCommand(commandName: string, ...params: any): void;
 }

package/plugins/dropdownMenu/dropdownMenu.js

@@ -3,16 +3,13 @@
 exports.__esModule = true;
 var _base = require("../base");
 var _array = require("../../helpers/array");
-var _object = require("../../helpers/object");
-var _commandExecutor = require("../contextMenu/commandExecutor");
-var _utils = require("../contextMenu/utils");
+var _commandExecutor = _interopRequireDefault(require("../contextMenu/commandExecutor"));
 var _eventManager = _interopRequireDefault(require("../../eventManager"));
 var _element = require("../../helpers/dom/element");
-var _itemsFactory = require("../contextMenu/itemsFactory");
-var _menu = require("../contextMenu/menu");
+var _itemsFactory = _interopRequireDefault(require("../contextMenu/itemsFactory"));
+var _menu = _interopRequireDefault(require("../contextMenu/menu"));
 var _pluginHooks = _interopRequireDefault(require("../../pluginHooks"));
 var _predefinedItems = require("../contextMenu/predefinedItems");
-var _a11y = require("../../helpers/a11y");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 _pluginHooks.default.getSingleton().register('afterDropdownMenuDefaultOptions');
 _pluginHooks.default.getSingleton().register('beforeDropdownMenuShow');
@@ -24,7 +21,6 @@ exports.PLUGIN_KEY = PLUGIN_KEY;
 const PLUGIN_PRIORITY = 230;
 exports.PLUGIN_PRIORITY = PLUGIN_PRIORITY;
 const BUTTON_CLASS_NAME = 'changeType';
-const SHORTCUTS_GROUP = PLUGIN_KEY;
 
 /* eslint-disable jsdoc/require-description-complete-sentence */
 /**
@@ -111,7 +107,7 @@ class DropdownMenu extends _base.BasePlugin {
      * @private
      * @type {CommandExecutor}
      */
-    this.commandExecutor = new _commandExecutor.CommandExecutor(this.hot);
+    this.commandExecutor = new _commandExecutor.default(this.hot);
     /**
      * Instance of {@link ItemsFactory}.
      *
@@ -152,7 +148,7 @@ class DropdownMenu extends _base.BasePlugin {
     if (this.enabled) {
       return;
     }
-    this.itemsFactory = new _itemsFactory.ItemsFactory(this.hot, DropdownMenu.DEFAULT_ITEMS);
+    this.itemsFactory = new _itemsFactory.default(this.hot, DropdownMenu.DEFAULT_ITEMS);
     const settings = this.hot.getSettings()[PLUGIN_KEY];
     const predefinedItems = {
       items: this.itemsFactory.getItems(settings)
@@ -161,7 +157,6 @@ class DropdownMenu extends _base.BasePlugin {
     if (typeof settings.callback === 'function') {
       this.commandExecutor.setCommonCallback(settings.callback);
     }
-    this.registerShortcuts();
     super.enablePlugin();
     this.callOnPluginsReady(() => {
       this.hot.runHooks('afterDropdownMenuDefaultOptions', predefinedItems);
@@ -170,7 +165,7 @@ class DropdownMenu extends _base.BasePlugin {
       if (this.menu) {
         this.menu.destroy();
       }
-      this.menu = new _menu.Menu(this.hot, {
+      this.menu = new _menu.default(this.hot, {
         className: 'htDropdownMenu',
         keepInViewport: true,
         container: settings.uiContainer || this.hot.rootDocument.body
@@ -212,66 +207,9 @@ class DropdownMenu extends _base.BasePlugin {
     if (this.menu) {
       this.menu.destroy();
     }
-    this.unregisterShortcuts();
     super.disablePlugin();
   }
 
-  /**
-   * Register shortcuts responsible for toggling dropdown menu.
-   *
-   * @private
-   */
-  registerShortcuts() {
-    const context = this.hot.getShortcutManager().getContext('grid');
-    const callback = () => {
-      const {
-        highlight
-      } = this.hot.getSelectedRangeLast();
-      if ((highlight.isHeader() && highlight.row === -1 || highlight.isCell()) && highlight.col >= 0) {
-        this.hot.selectColumns(highlight.col, highlight.col, -1);
-        const {
-          from
-        } = this.hot.getSelectedRangeLast();
-        const offset = (0, _utils.getDocumentOffsetByElement)(this.menu.container, this.hot.rootDocument);
-        const target = this.hot.getCell(-1, from.col, true);
-        const rect = target.getBoundingClientRect();
-        this.open({
-          left: rect.left + offset.left,
-          top: rect.top + target.offsetHeight + offset.top
-        }, {
-          left: rect.width
-        });
-      }
-    };
-    context.addShortcuts([{
-      keys: [['Shift', 'Alt', 'ArrowDown'], ['Control/Meta', 'Enter']],
-      callback,
-      runOnlyIf: () => {
-        var _this$hot$getSelected;
-        return ((_this$hot$getSelected = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected === void 0 ? void 0 : _this$hot$getSelected.highlight.isHeader()) && !this.menu.isOpened();
-      },
-      captureCtrl: true,
-      group: SHORTCUTS_GROUP
-    }, {
-      keys: [['Shift', 'Alt', 'ArrowDown']],
-      callback,
-      runOnlyIf: () => {
-        var _this$hot$getSelected2;
-        return ((_this$hot$getSelected2 = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected2 === void 0 ? void 0 : _this$hot$getSelected2.highlight.isCell()) && !this.menu.isOpened();
-      },
-      group: SHORTCUTS_GROUP
-    }]);
-  }
-
-  /**
-   * Unregister shortcuts responsible for toggling dropdown menu.
-   *
-   * @private
-   */
-  unregisterShortcuts() {
-    this.hot.getShortcutManager().getContext('grid').removeShortcutsByGroup(SHORTCUTS_GROUP);
-  }
-
   /**
    * Registers the DOM listeners.
    *
@@ -284,30 +222,23 @@ class DropdownMenu extends _base.BasePlugin {
   /**
    * Opens menu and re-position it based on the passed coordinates.
    *
-   * @param {{ top: number, left: number }|Event} position An object with `top` and `left` properties
-   * which contains coordinates relative to the browsers viewport (without included scroll offsets).
-   * Or if the native event is passed the menu will be positioned based on the `pageX` and `pageY`
-   * coordinates.
-   * @param {{ above: number, below: number, left: number, right: number }} offset An object allows applying
-   * the offset to the menu position.
+   * @param {object|Event} position An object with `pageX` and `pageY` properties which contains values relative to
+   *                                the top left of the fully rendered content area in the browser or with `clientX`
+   *                                and `clientY`  properties which contains values relative to the upper left edge
+   *                                of the content area (the viewport) of the browser window. This object is structurally
+   *                                compatible with native mouse event so it can be used either.
    * @fires Hooks#beforeDropdownMenuShow
    * @fires Hooks#afterDropdownMenuShow
    */
+
   open(position) {
-    var _this$menu;
-    let offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-      above: 0,
-      below: 0,
-      left: 0,
-      right: 0
-    };
-    if ((_this$menu = this.menu) !== null && _this$menu !== void 0 && _this$menu.isOpened()) {
+    if (!this.menu) {
       return;
     }
     this.menu.open();
-    (0, _object.objectEach)(offset, (value, key) => {
-      this.menu.setOffset(key, value);
-    });
+    if (position.width) {
+      this.menu.setOffset('left', position.width);
+    }
     this.menu.setPosition(position);
   }
 
@@ -315,8 +246,10 @@ class DropdownMenu extends _base.BasePlugin {
    * Closes dropdown menu.
    */
   close() {
-    var _this$menu2;
-    (_this$menu2 = this.menu) === null || _this$menu2 === void 0 || _this$menu2.close();
+    if (!this.menu) {
+      return;
+    }
+    this.menu.close();
   }
 
   /**
@@ -381,14 +314,26 @@ class DropdownMenu extends _base.BasePlugin {
    */
   onTableClick(event) {
     event.stopPropagation();
-    if ((0, _element.hasClass)(event.target, BUTTON_CLASS_NAME)) {
-      const offset = (0, _utils.getDocumentOffsetByElement)(this.menu.container, this.hot.rootDocument);
+    if ((0, _element.hasClass)(event.target, BUTTON_CLASS_NAME) && !this.menu.isOpened()) {
+      let offsetTop = 0;
+      let offsetLeft = 0;
+      if (this.hot.rootDocument !== this.menu.container.ownerDocument) {
+        const {
+          frameElement
+        } = this.hot.rootWindow;
+        const {
+          top,
+          left
+        } = frameElement.getBoundingClientRect();
+        offsetTop = top;
+        offsetLeft = left;
+      }
       const rect = event.target.getBoundingClientRect();
       this.open({
-        left: rect.left + offset.left,
-        top: rect.top + event.target.offsetHeight + 3 + offset.top
-      }, {
-        left: rect.width
+        left: rect.left + offsetLeft,
+        top: rect.top + event.target.offsetHeight + 3 + offsetTop,
+        width: rect.width,
+        height: rect.height
       });
     }
   }
@@ -427,10 +372,6 @@ class DropdownMenu extends _base.BasePlugin {
     const button = this.hot.rootDocument.createElement('button');
     button.className = BUTTON_CLASS_NAME;
     button.type = 'button';
-    button.tabIndex = -1;
-    if (this.hot.getSettings().ariaTags) {
-      (0, _element.setAttribute)(button, [(0, _a11y.A11Y_HIDDEN)()]);
-    }
 
     // prevent page reload on button click
     button.onclick = function () {