handsontable 0.0.0-next-81abafa-20240814 → 0.0.0-next-4c6aa91-20240814

package/editors/selectEditor/selectEditor.js

@@ -4,6 +4,7 @@ exports.__esModule = true;
 var _baseEditor = require("../baseEditor");
 var _element = require("../../helpers/dom/element");
 var _object = require("../../helpers/object");
+var _a11y = require("../../helpers/a11y");
 const EDITOR_VISIBLE_CLASS_NAME = 'ht_editor_visible';
 const SHORTCUTS_GROUP = 'selectEditor';
 const EDITOR_TYPE = exports.EDITOR_TYPE = 'select';
@@ -21,11 +22,21 @@ class SelectEditor extends _baseEditor.BaseEditor {
    * Initializes editor instance, DOM Element and mount hooks.
    */
   init() {
+    this.selectWrapper = this.hot.rootDocument.createElement('div');
     this.select = this.hot.rootDocument.createElement('select');
     this.select.setAttribute('data-hot-input', 'true');
-    this.select.style.display = 'none';
-    (0, _element.addClass)(this.select, 'htSelectEditor');
-    this.hot.rootElement.appendChild(this.select);
+    this.selectWrapper.style.display = 'none';
+    const ARROW = this.hot.rootDocument.createElement('DIV');
+    const isAriaEnabled = this.hot.getSettings().ariaTags;
+    ARROW.className = 'htAutocompleteArrow';
+    if (isAriaEnabled) {
+      ARROW.setAttribute(...(0, _a11y.A11Y_HIDDEN)());
+    }
+    ARROW.appendChild(this.hot.rootDocument.createTextNode(String.fromCharCode(9660)));
+    (0, _element.addClass)(this.selectWrapper, 'htSelectEditor');
+    this.selectWrapper.appendChild(this.select);
+    this.selectWrapper.insertBefore(ARROW, this.selectWrapper.firstChild);
+    this.hot.rootElement.appendChild(this.selectWrapper);
     this.registerHooks();
   }
 
@@ -53,7 +64,7 @@ class SelectEditor extends _baseEditor.BaseEditor {
   open() {
     this._opened = true;
     this.refreshDimensions();
-    this.select.style.display = '';
+    this.selectWrapper.style.display = '';
     const shortcutManager = this.hot.getShortcutManager();
     shortcutManager.setActiveContextName('editor');
     this.registerShortcuts();
@@ -64,9 +75,9 @@ class SelectEditor extends _baseEditor.BaseEditor {
    */
   close() {
     this._opened = false;
-    this.select.style.display = 'none';
-    if ((0, _element.hasClass)(this.select, EDITOR_VISIBLE_CLASS_NAME)) {
-      (0, _element.removeClass)(this.select, EDITOR_VISIBLE_CLASS_NAME);
+    this.selectWrapper.style.display = 'none';
+    if ((0, _element.hasClass)(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME)) {
+      (0, _element.removeClass)(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME);
     }
     this.unregisterShortcuts();
     this.clearHooks();
@@ -172,13 +183,13 @@ class SelectEditor extends _baseEditor.BaseEditor {
       width,
       height
     } = this.getEditedCellRect();
-    const selectStyle = this.select.style;
+    const selectStyle = this.selectWrapper.style;
     selectStyle.height = `${height}px`;
     selectStyle.width = `${width}px`;
     selectStyle.top = `${top}px`;
     selectStyle[this.hot.isRtl() ? 'right' : 'left'] = `${start}px`;
     selectStyle.margin = '0px';
-    (0, _element.addClass)(this.select, EDITOR_VISIBLE_CLASS_NAME);
+    (0, _element.addClass)(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME);
   }
 
   /**

package/editors/selectEditor/selectEditor.mjs

@@ -1,6 +1,7 @@
 import { BaseEditor, EDITOR_STATE } from "../baseEditor/index.mjs";
 import { addClass, empty, fastInnerHTML, hasClass, removeClass } from "../../helpers/dom/element.mjs";
 import { objectEach } from "../../helpers/object.mjs";
+import { A11Y_HIDDEN } from "../../helpers/a11y.mjs";
 const EDITOR_VISIBLE_CLASS_NAME = 'ht_editor_visible';
 const SHORTCUTS_GROUP = 'selectEditor';
 export const EDITOR_TYPE = 'select';
@@ -18,11 +19,21 @@ export class SelectEditor extends BaseEditor {
    * Initializes editor instance, DOM Element and mount hooks.
    */
   init() {
+    this.selectWrapper = this.hot.rootDocument.createElement('div');
     this.select = this.hot.rootDocument.createElement('select');
     this.select.setAttribute('data-hot-input', 'true');
-    this.select.style.display = 'none';
-    addClass(this.select, 'htSelectEditor');
-    this.hot.rootElement.appendChild(this.select);
+    this.selectWrapper.style.display = 'none';
+    const ARROW = this.hot.rootDocument.createElement('DIV');
+    const isAriaEnabled = this.hot.getSettings().ariaTags;
+    ARROW.className = 'htAutocompleteArrow';
+    if (isAriaEnabled) {
+      ARROW.setAttribute(...A11Y_HIDDEN());
+    }
+    ARROW.appendChild(this.hot.rootDocument.createTextNode(String.fromCharCode(9660)));
+    addClass(this.selectWrapper, 'htSelectEditor');
+    this.selectWrapper.appendChild(this.select);
+    this.selectWrapper.insertBefore(ARROW, this.selectWrapper.firstChild);
+    this.hot.rootElement.appendChild(this.selectWrapper);
     this.registerHooks();
   }
 
@@ -50,7 +61,7 @@ export class SelectEditor extends BaseEditor {
   open() {
     this._opened = true;
     this.refreshDimensions();
-    this.select.style.display = '';
+    this.selectWrapper.style.display = '';
     const shortcutManager = this.hot.getShortcutManager();
     shortcutManager.setActiveContextName('editor');
     this.registerShortcuts();
@@ -61,9 +72,9 @@ export class SelectEditor extends BaseEditor {
    */
   close() {
     this._opened = false;
-    this.select.style.display = 'none';
-    if (hasClass(this.select, EDITOR_VISIBLE_CLASS_NAME)) {
-      removeClass(this.select, EDITOR_VISIBLE_CLASS_NAME);
+    this.selectWrapper.style.display = 'none';
+    if (hasClass(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME)) {
+      removeClass(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME);
     }
     this.unregisterShortcuts();
     this.clearHooks();
@@ -169,13 +180,13 @@ export class SelectEditor extends BaseEditor {
       width,
       height
     } = this.getEditedCellRect();
-    const selectStyle = this.select.style;
+    const selectStyle = this.selectWrapper.style;
     selectStyle.height = `${height}px`;
     selectStyle.width = `${width}px`;
     selectStyle.top = `${top}px`;
     selectStyle[this.hot.isRtl() ? 'right' : 'left'] = `${start}px`;
     selectStyle.margin = '0px';
-    addClass(this.select, EDITOR_VISIBLE_CLASS_NAME);
+    addClass(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME);
   }
 
   /**

package/helpers/mixed.js

@@ -134,7 +134,7 @@ const domMessages = {
 function _injectProductInfo(key, element) {
   const hasValidType = !isEmpty(key);
   const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
-  const hotVersion = "0.0.0-next-81abafa-20240814";
+  const hotVersion = "0.0.0-next-4c6aa91-20240814";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';
@@ -188,7 +188,7 @@ function _injectProductInfo(key, element) {
     });
     if (message) {
       const messageNode = document.createElement('div');
-      messageNode.className = 'hot-display-license-info';
+      messageNode.className = 'handsontable hot-display-license-info';
       messageNode.innerHTML = domMessages[domMessageState]({
         keyValidityDate,
         hotVersion

package/helpers/mixed.mjs

@@ -124,7 +124,7 @@ const domMessages = {
 export function _injectProductInfo(key, element) {
   const hasValidType = !isEmpty(key);
   const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
-  const hotVersion = "0.0.0-next-81abafa-20240814";
+  const hotVersion = "0.0.0-next-4c6aa91-20240814";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';
@@ -178,7 +178,7 @@ export function _injectProductInfo(key, element) {
     });
     if (message) {
       const messageNode = document.createElement('div');
-      messageNode.className = 'hot-display-license-info';
+      messageNode.className = 'handsontable hot-display-license-info';
       messageNode.innerHTML = domMessages[domMessageState]({
         keyValidityDate,
         hotVersion

package/package.json

@@ -10,7 +10,7 @@
     "url": "https://github.com/handsontable/handsontable/issues"
   },
   "author": "Handsoncode <hello@handsontable.com>",
-  "version": "0.0.0-next-81abafa-20240814",
+  "version": "0.0.0-next-4c6aa91-20240814",
   "main": "index",
   "module": "index.mjs",
   "jsnext:main": "index.mjs",
@@ -50,7 +50,6 @@
     "@babel/register": "^7.8.3",
     "@babel/runtime": "^7.11.2",
     "@babel/types": "^7.12.12",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.0.4",
     "babel-plugin-forbidden-imports": "^0.1.2",
@@ -94,8 +93,10 @@
     "string-replace-loader": "^3.1.0",
     "stylelint": "^16.3.1",
     "typescript": "3.8.2",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
     "webpack": "^5.88.1",
-    "webpack-cli": "^5.1.4"
+    "webpack-cli": "^5.1.4",
+    "webpack-remove-empty-scripts": "^1.0.4"
   },
   "optionalDependencies": {
     "hyperformula": "^2.6.2"
@@ -767,6 +768,20 @@
     "./dist/languages/zh-CN.min.js": "./dist/languages/zh-CN.min.js",
     "./dist/languages/zh-TW.js": "./dist/languages/zh-TW.js",
     "./dist/languages/zh-TW.min.js": "./dist/languages/zh-TW.min.js",
+    "./styles/handsontable.css": "./styles/handsontable.css",
+    "./styles/handsontable.min.css": "./styles/handsontable.min.css",
+    "./styles/ht-theme-elegant-dark-auto.css": "./styles/ht-theme-elegant-dark-auto.css",
+    "./styles/ht-theme-elegant-dark-auto.min.css": "./styles/ht-theme-elegant-dark-auto.min.css",
+    "./styles/ht-theme-elegant-dark.css": "./styles/ht-theme-elegant-dark.css",
+    "./styles/ht-theme-elegant-dark.min.css": "./styles/ht-theme-elegant-dark.min.css",
+    "./styles/ht-theme-elegant-light.css": "./styles/ht-theme-elegant-light.css",
+    "./styles/ht-theme-elegant-light.min.css": "./styles/ht-theme-elegant-light.min.css",
+    "./styles/ht-theme-main-dark-auto.css": "./styles/ht-theme-main-dark-auto.css",
+    "./styles/ht-theme-main-dark-auto.min.css": "./styles/ht-theme-main-dark-auto.min.css",
+    "./styles/ht-theme-main-dark.css": "./styles/ht-theme-main-dark.css",
+    "./styles/ht-theme-main-dark.min.css": "./styles/ht-theme-main-dark.min.css",
+    "./styles/ht-theme-main-light.css": "./styles/ht-theme-main-light.css",
+    "./styles/ht-theme-main-light.min.css": "./styles/ht-theme-main-light.min.css",
     ".": {
       "types": "./index.d.ts",
       "import": "./index.mjs",