handsontable 14.0.0-next-dd92f79-20231124 → 14.0.0-next-88de277-20231127

package/3rdparty/walkontable/src/overlay/_base.js

@@ -249,8 +249,8 @@ class Overlay {
       rootDocument,
       rootWindow
     } = this.domBindings;
-    const clone = rootDocument.createElement('DIV');
-    const clonedTable = rootDocument.createElement('TABLE');
+    const clone = rootDocument.createElement('div');
+    const clonedTable = rootDocument.createElement('table');
     const tableParent = wtTable.wtRootElement.parentNode;
     clone.className = `${_constants.CLONE_CLASS_NAMES.get(this.type)} handsontable`;
     clone.setAttribute('dir', this.isRtl() ? 'rtl' : 'ltr');

package/3rdparty/walkontable/src/overlay/_base.mjs

@@ -245,8 +245,8 @@ export class Overlay {
       rootDocument,
       rootWindow
     } = this.domBindings;
-    const clone = rootDocument.createElement('DIV');
-    const clonedTable = rootDocument.createElement('TABLE');
+    const clone = rootDocument.createElement('div');
+    const clonedTable = rootDocument.createElement('table');
     const tableParent = wtTable.wtRootElement.parentNode;
     clone.className = `${CLONE_CLASS_NAMES.get(this.type)} handsontable`;
     clone.setAttribute('dir', this.isRtl() ? 'rtl' : 'ltr');

package/3rdparty/walkontable/src/renderer/columnHeaders.js

@@ -71,7 +71,7 @@ class ColumnHeadersRenderer extends _base.default {
       columnHeadersCount
     } = this.table;
     if (this.table.isAriaEnabled()) {
-      (0, _element.setAttribute)(this.rootNode, [(0, _a11y.A11Y_PRESENTATION)()]);
+      (0, _element.setAttribute)(this.rootNode, [(0, _a11y.A11Y_ROWGROUP)()]);
     }
     for (let rowHeaderIndex = 0; rowHeaderIndex < columnHeadersCount; rowHeaderIndex += 1) {
       const {

package/3rdparty/walkontable/src/renderer/columnHeaders.mjs

@@ -1,6 +1,6 @@
 import { empty, setAttribute, removeAttribute } from "./../../../../helpers/dom/element.mjs";
 import BaseRenderer from "./_base.mjs";
-import { A11Y_COLINDEX, A11Y_COLUMNHEADER, A11Y_PRESENTATION, A11Y_ROW, A11Y_ROWINDEX, A11Y_SCOPE_COL, A11Y_TABINDEX } from "../../../../helpers/a11y.mjs";
+import { A11Y_COLINDEX, A11Y_COLUMNHEADER, A11Y_ROW, A11Y_ROWGROUP, A11Y_ROWINDEX, A11Y_SCOPE_COL, A11Y_TABINDEX } from "../../../../helpers/a11y.mjs";
 /**
  * Column headers renderer responsible for managing (inserting, tracking, rendering) TR and TH elements.
  *
@@ -67,7 +67,7 @@ export default class ColumnHeadersRenderer extends BaseRenderer {
       columnHeadersCount
     } = this.table;
     if (this.table.isAriaEnabled()) {
-      setAttribute(this.rootNode, [A11Y_PRESENTATION()]);
+      setAttribute(this.rootNode, [A11Y_ROWGROUP()]);
     }
     for (let rowHeaderIndex = 0; rowHeaderIndex < columnHeadersCount; rowHeaderIndex += 1) {
       const {

package/3rdparty/walkontable/src/renderer/rows.js

@@ -61,7 +61,7 @@ class RowsRenderer extends _base.default {
         the number of rendered rows by specifying the table height and/or turning off the "renderAllRows" option.`);
     }
     if (this.table.isAriaEnabled()) {
-      (0, _element.setAttribute)(this.rootNode, [(0, _a11y.A11Y_PRESENTATION)()]);
+      (0, _element.setAttribute)(this.rootNode, [(0, _a11y.A11Y_ROWGROUP)()]);
     }
     this.orderView.setSize(rowsToRender).setOffset(this.table.renderedRowToSource(0)).start();
     for (let visibleRowIndex = 0; visibleRowIndex < rowsToRender; visibleRowIndex++) {

package/3rdparty/walkontable/src/renderer/rows.mjs

@@ -7,7 +7,7 @@ import { toSingleLine } from "./../../../../helpers/templateLiteralTag.mjs";
 import { OrderView } from "./../utils/orderView/index.mjs";
 import BaseRenderer from "./_base.mjs";
 import { setAttribute } from "../../../../helpers/dom/element.mjs";
-import { A11Y_PRESENTATION, A11Y_ROW, A11Y_ROWINDEX } from "../../../../helpers/a11y.mjs";
+import { A11Y_ROW, A11Y_ROWGROUP, A11Y_ROWINDEX } from "../../../../helpers/a11y.mjs";
 let performanceWarningAppeared = false;
 
 /**
@@ -57,7 +57,7 @@ export default class RowsRenderer extends BaseRenderer {
         the number of rendered rows by specifying the table height and/or turning off the "renderAllRows" option.`);
     }
     if (this.table.isAriaEnabled()) {
-      setAttribute(this.rootNode, [A11Y_PRESENTATION()]);
+      setAttribute(this.rootNode, [A11Y_ROWGROUP()]);
     }
     this.orderView.setSize(rowsToRender).setOffset(this.table.renderedRowToSource(0)).start();
     for (let visibleRowIndex = 0; visibleRowIndex < rowsToRender; visibleRowIndex++) {

package/3rdparty/walkontable/src/selection/manager.js

@@ -1,6 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
+require("core-js/modules/es.array.push.js");
 require("core-js/modules/es.array.unscopables.flat.js");
 require("core-js/modules/es.error.cause.js");
 var _element = require("../../../../helpers/dom/element");
@@ -189,10 +190,12 @@ class SelectionManager {
     }
     const selections = Array.from(_classPrivateFieldGet(this, _selections));
     const classNamesMap = new Map();
+    const headerAttributesMap = new Map();
     for (let i = 0; i < selections.length; i++) {
       const selection = selections[i];
       const {
         className,
+        headerAttributes,
         createLayers,
         selectionType
       } = selection.settings;
@@ -219,6 +222,14 @@ class SelectionManager {
           } else {
             classNamesMap.set(element, new Map([[className, 1]]));
           }
+          if (headerAttributes) {
+            if (!headerAttributesMap.has(element)) {
+              headerAttributesMap.set(element, []);
+            }
+            if (element.nodeName === 'TH') {
+              headerAttributesMap.get(element).push(...headerAttributes);
+            }
+          }
         });
       }
       const corners = selection.getCorners();
@@ -226,7 +237,7 @@ class SelectionManager {
       borderInstance === null || borderInstance === void 0 || borderInstance.appear(corners);
     }
     classNamesMap.forEach((classNamesLayers, element) => {
-      var _classPrivateFieldGet4, _classPrivateFieldGet5;
+      var _classPrivateFieldGet4;
       const classNames = Array.from(classNamesLayers).map(_ref => {
         let [className, occurrenceCount] = _ref;
         if (occurrenceCount === 1) {
@@ -240,10 +251,13 @@ class SelectionManager {
       (0, _element.addClass)(element, classNames);
       if (element.nodeName === 'TD' && Array.isArray((_classPrivateFieldGet4 = _classPrivateFieldGet(this, _selections).options) === null || _classPrivateFieldGet4 === void 0 ? void 0 : _classPrivateFieldGet4.cellAttributes)) {
         (0, _element.setAttribute)(element, _classPrivateFieldGet(this, _selections).options.cellAttributes);
-      } else if (element.nodeName === 'TH' && Array.isArray((_classPrivateFieldGet5 = _classPrivateFieldGet(this, _selections).options) === null || _classPrivateFieldGet5 === void 0 ? void 0 : _classPrivateFieldGet5.headerAttributes)) {
-        (0, _element.setAttribute)(element, _classPrivateFieldGet(this, _selections).options.headerAttributes);
       }
     });
+
+    // Set the attributes for the headers if they're focused.
+    Array.from(headerAttributesMap.keys()).forEach(element => {
+      (0, _element.setAttribute)(element, [...headerAttributesMap.get(element)]);
+    });
   }
 }
 exports.SelectionManager = SelectionManager;
@@ -256,13 +270,13 @@ function _resetCells2() {
     }
   }
   appliedOverlaysClasses.forEach(className => {
-    var _classPrivateFieldGet6, _classPrivateFieldGet7;
+    var _classPrivateFieldGet5, _classPrivateFieldGet6;
     const nodes = _classPrivateFieldGet(this, _activeOverlaysWot).wtTable.TABLE.querySelectorAll(`.${className}`);
     let cellAttributes = [];
-    if (Array.isArray((_classPrivateFieldGet6 = _classPrivateFieldGet(this, _selections).options) === null || _classPrivateFieldGet6 === void 0 ? void 0 : _classPrivateFieldGet6.cellAttributes)) {
+    if (Array.isArray((_classPrivateFieldGet5 = _classPrivateFieldGet(this, _selections).options) === null || _classPrivateFieldGet5 === void 0 ? void 0 : _classPrivateFieldGet5.cellAttributes)) {
       cellAttributes = _classPrivateFieldGet(this, _selections).options.cellAttributes.map(el => el[0]);
     }
-    if (Array.isArray((_classPrivateFieldGet7 = _classPrivateFieldGet(this, _selections).options) === null || _classPrivateFieldGet7 === void 0 ? void 0 : _classPrivateFieldGet7.headerAttributes)) {
+    if (Array.isArray((_classPrivateFieldGet6 = _classPrivateFieldGet(this, _selections).options) === null || _classPrivateFieldGet6 === void 0 ? void 0 : _classPrivateFieldGet6.headerAttributes)) {
       cellAttributes = [...cellAttributes, ..._classPrivateFieldGet(this, _selections).options.headerAttributes.map(el => el[0])];
     }
     for (let i = 0, len = nodes.length; i < len; i++) {

package/3rdparty/walkontable/src/selection/manager.mjs

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.push.js";
 import "core-js/modules/es.array.unscopables.flat.js";
 import "core-js/modules/es.error.cause.js";
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
@@ -185,10 +186,12 @@ export class SelectionManager {
     }
     const selections = Array.from(_classPrivateFieldGet(this, _selections));
     const classNamesMap = new Map();
+    const headerAttributesMap = new Map();
     for (let i = 0; i < selections.length; i++) {
       const selection = selections[i];
       const {
         className,
+        headerAttributes,
         createLayers,
         selectionType
       } = selection.settings;
@@ -215,6 +218,14 @@ export class SelectionManager {
           } else {
             classNamesMap.set(element, new Map([[className, 1]]));
           }
+          if (headerAttributes) {
+            if (!headerAttributesMap.has(element)) {
+              headerAttributesMap.set(element, []);
+            }
+            if (element.nodeName === 'TH') {
+              headerAttributesMap.get(element).push(...headerAttributes);
+            }
+          }
         });
       }
       const corners = selection.getCorners();
@@ -222,7 +233,7 @@ export class SelectionManager {
       borderInstance === null || borderInstance === void 0 || borderInstance.appear(corners);
     }
     classNamesMap.forEach((classNamesLayers, element) => {
-      var _classPrivateFieldGet4, _classPrivateFieldGet5;
+      var _classPrivateFieldGet4;
       const classNames = Array.from(classNamesLayers).map(_ref => {
         let [className, occurrenceCount] = _ref;
         if (occurrenceCount === 1) {
@@ -236,10 +247,13 @@ export class SelectionManager {
       addClass(element, classNames);
       if (element.nodeName === 'TD' && Array.isArray((_classPrivateFieldGet4 = _classPrivateFieldGet(this, _selections).options) === null || _classPrivateFieldGet4 === void 0 ? void 0 : _classPrivateFieldGet4.cellAttributes)) {
         setAttribute(element, _classPrivateFieldGet(this, _selections).options.cellAttributes);
-      } else if (element.nodeName === 'TH' && Array.isArray((_classPrivateFieldGet5 = _classPrivateFieldGet(this, _selections).options) === null || _classPrivateFieldGet5 === void 0 ? void 0 : _classPrivateFieldGet5.headerAttributes)) {
-        setAttribute(element, _classPrivateFieldGet(this, _selections).options.headerAttributes);
       }
     });
+
+    // Set the attributes for the headers if they're focused.
+    Array.from(headerAttributesMap.keys()).forEach(element => {
+      setAttribute(element, [...headerAttributesMap.get(element)]);
+    });
   }
 }
 function _resetCells2() {
@@ -251,13 +265,13 @@ function _resetCells2() {
     }
   }
   appliedOverlaysClasses.forEach(className => {
-    var _classPrivateFieldGet6, _classPrivateFieldGet7;
+    var _classPrivateFieldGet5, _classPrivateFieldGet6;
     const nodes = _classPrivateFieldGet(this, _activeOverlaysWot).wtTable.TABLE.querySelectorAll(`.${className}`);
     let cellAttributes = [];
-    if (Array.isArray((_classPrivateFieldGet6 = _classPrivateFieldGet(this, _selections).options) === null || _classPrivateFieldGet6 === void 0 ? void 0 : _classPrivateFieldGet6.cellAttributes)) {
+    if (Array.isArray((_classPrivateFieldGet5 = _classPrivateFieldGet(this, _selections).options) === null || _classPrivateFieldGet5 === void 0 ? void 0 : _classPrivateFieldGet5.cellAttributes)) {
       cellAttributes = _classPrivateFieldGet(this, _selections).options.cellAttributes.map(el => el[0]);
     }
-    if (Array.isArray((_classPrivateFieldGet7 = _classPrivateFieldGet(this, _selections).options) === null || _classPrivateFieldGet7 === void 0 ? void 0 : _classPrivateFieldGet7.headerAttributes)) {
+    if (Array.isArray((_classPrivateFieldGet6 = _classPrivateFieldGet(this, _selections).options) === null || _classPrivateFieldGet6 === void 0 ? void 0 : _classPrivateFieldGet6.headerAttributes)) {
       cellAttributes = [...cellAttributes, ..._classPrivateFieldGet(this, _selections).options.headerAttributes.map(el => el[0])];
     }
     for (let i = 0, len = nodes.length; i < len; i++) {

package/base.js

@@ -43,8 +43,8 @@ Handsontable.hooks = _pluginHooks.default.getSingleton();
 Handsontable.CellCoords = _src.CellCoords;
 Handsontable.CellRange = _src.CellRange;
 Handsontable.packageName = 'handsontable';
-Handsontable.buildDate = "24/11/2023 11:03:39";
-Handsontable.version = "14.0.0-next-dd92f79-20231124";
+Handsontable.buildDate = "27/11/2023 10:19:22";
+Handsontable.version = "14.0.0-next-88de277-20231127";
 Handsontable.languages = {
   dictionaryKeys: _registry.dictionaryKeys,
   getLanguageDictionary: _registry.getLanguageDictionary,

package/base.mjs

@@ -35,8 +35,8 @@ Handsontable.hooks = Hooks.getSingleton();
 Handsontable.CellCoords = CellCoords;
 Handsontable.CellRange = CellRange;
 Handsontable.packageName = 'handsontable';
-Handsontable.buildDate = "24/11/2023 11:03:45";
-Handsontable.version = "14.0.0-next-dd92f79-20231124";
+Handsontable.buildDate = "27/11/2023 10:19:29";
+Handsontable.version = "14.0.0-next-88de277-20231127";
 Handsontable.languages = {
   dictionaryKeys,
   getLanguageDictionary,

package/core.js

@@ -4428,7 +4428,7 @@ function Core(rootElement, userSettings) {
    * @function getTranslatedPhrase
    * @since 0.35.0
    * @param {string} dictionaryKey Constant which is dictionary key.
-   * @param {*} [extraArguments] Arguments which will be handled by formatters.
+   * @param {*} extraArguments Arguments which will be handled by formatters.
    * @returns {string}
    */
   this.getTranslatedPhrase = function (dictionaryKey, extraArguments) {

package/core.mjs

@@ -4423,7 +4423,7 @@ export default function Core(rootElement, userSettings) {
    * @function getTranslatedPhrase
    * @since 0.35.0
    * @param {string} dictionaryKey Constant which is dictionary key.
-   * @param {*} [extraArguments] Arguments which will be handled by formatters.
+   * @param {*} extraArguments Arguments which will be handled by formatters.
    * @returns {string}
    */
   this.getTranslatedPhrase = function (dictionaryKey, extraArguments) {

package/dataMap/replaceData.js

@@ -114,6 +114,8 @@ function replaceData(data, setDataMapFunction, callbackFunction, config) {
     hotInstance.render();
   }
   if (hotInstance.getSettings().ariaTags) {
-    (0, _element.setAttribute)(hotInstance.rootElement, [(0, _a11y.A11Y_ROWCOUNT)(hotInstance.countRows()), (0, _a11y.A11Y_COLCOUNT)(hotInstance.countCols())]);
+    (0, _element.setAttribute)(hotInstance.rootElement, [(0, _a11y.A11Y_ROWCOUNT)(-1),
+    // If run after initialization, add the number of row headers.
+    (0, _a11y.A11Y_COLCOUNT)(hotInstance.countCols() + (hotInstance.view ? hotInstance.countRowHeaders() : 0))]);
   }
 }

package/dataMap/replaceData.mjs

@@ -109,7 +109,9 @@ function replaceData(data, setDataMapFunction, callbackFunction, config) {
     hotInstance.render();
   }
   if (hotInstance.getSettings().ariaTags) {
-    setAttribute(hotInstance.rootElement, [A11Y_ROWCOUNT(hotInstance.countRows()), A11Y_COLCOUNT(hotInstance.countCols())]);
+    setAttribute(hotInstance.rootElement, [A11Y_ROWCOUNT(-1),
+    // If run after initialization, add the number of row headers.
+    A11Y_COLCOUNT(hotInstance.countCols() + (hotInstance.view ? hotInstance.countRowHeaders() : 0))]);
   }
 }
 export { replaceData };

package/dist/handsontable.css

@@ -25,8 +25,8 @@
  * INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM
  * USE OR INABILITY TO USE THIS SOFTWARE.
  *
- * Version: 14.0.0-next-dd92f79-20231124
- * Release date: 22/11/2023 (built at 24/11/2023 11:03:49)
+ * Version: 14.0.0-next-88de277-20231127
+ * Release date: 29/11/2023 (built at 27/11/2023 10:19:34)
  */
 /**
  * Fix for bootstrap styles
@@ -504,10 +504,8 @@ innerBorderBottom - Property controlled by bottom overlay
 .handsontable .columnSorting.sortAction:hover {
   text-decoration: underline;
   cursor: pointer;
-}
-
-/* Arrow position */
-.handsontable span.colHeader.columnSorting .columnSortingIndicator::before {
+} /* Arrow position */
+.handsontable span.colHeader.columnSorting::before {
   /* Centering start */
   top: 50%;
   /* One extra pixel for purpose of proper positioning of sorting arrow, when `font-size` set to default */
@@ -527,7 +525,7 @@ innerBorderBottom - Property controlled by bottom overlay
   background-position-x: right;
 }
 
-[dir=rtl].handsontable span.colHeader.columnSorting .columnSortingIndicator::before {
+[dir=rtl].handsontable span.colHeader.columnSorting::before {
   /* Centering end */
   /* For purpose of continuous mouse over experience, when moving between the `span` and the `::before` elements */
   padding-right: 8px;
@@ -537,12 +535,12 @@ innerBorderBottom - Property controlled by bottom overlay
   background-position-x: left;
 }
 
-.handsontable span.colHeader.columnSorting.ascending .columnSortingIndicator::before {
+.handsontable span.colHeader.columnSorting.ascending::before {
   /* arrow up; 20 x 40 px, scaled to 5 x 10 px; base64 size: 0.3kB */
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAMAAADJ7yrpAAAAKlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKE86IAAAADXRSTlMABBEmRGprlJW72e77tTkTKwAAAFNJREFUeAHtzjkSgCAUBNHPgsoy97+ulGXRqJE5L+xkxoYt2UdsLb5bqFINz+aLuuLn5rIu2RkO3fZpWENimNgiw6iBYRTPMLJjGFxQZ1hxxb/xBI1qC8k39CdKAAAAAElFTkSuQmCC);
 }
 
-.handsontable span.colHeader.columnSorting.descending .columnSortingIndicator::before {
+.handsontable span.colHeader.columnSorting.descending::before {
   /* arrow down; 20 x 40 px, scaled to 5 x 10 px; base64 size: 0.3kB */
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAMAAADJ7yrpAAAAKlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKE86IAAAADXRSTlMABBEmRGprlJW72e77tTkTKwAAAFJJREFUeAHtzjkSgCAQRNFmQYUZ7n9dKUvru0TmvPAn3br0QfgdZ5xx6x+rQn23GqTYnq1FDcnuzZIO2WmedVqIRVxgGKEyjNgYRjKGkZ1hFIZ3I70LyM0VtU8AAAAASUVORK5CYII=);
 }
@@ -696,7 +694,7 @@ TextRenderer readOnly cell
   position: relative;
 }
 
-.handsontable .htSubmenu .submenuIndicator::after {
+.handsontable .htSubmenu :after {
   content: "▶";
   color: #777;
   position: absolute;
@@ -704,11 +702,11 @@ TextRenderer readOnly cell
   font-size: 9px;
 }
 
-[dir=rtl].handsontable .htSubmenu .submenuIndicator::after {
+[dir=rtl].handsontable .htSubmenu :after {
   content: "";
 }
 
-[dir=rtl].handsontable .htSubmenu .submenuIndicator::before {
+[dir=rtl].handsontable .htSubmenu :before {
   content: "◀";
   color: #777;
   position: absolute;
@@ -1476,6 +1474,10 @@ textarea.HandsontableCopyPaste {
   border: 1px solid #d2d1d1;
 }
 
+.handsontable .htUIInputIcon {
+  position: absolute;
+}
+
 /* Button */
 .handsontable .htUIInput.htUIButton {
   cursor: pointer;
@@ -1616,13 +1618,12 @@ textarea.HandsontableCopyPaste {
 /*
  * Handsontable HiddenColumns
  */
-.handsontable th.beforeHiddenColumn,
-.handsontable th.afterHiddenColumn {
+.handsontable th.beforeHiddenColumn {
   position: relative;
 }
 
-.handsontable th.beforeHiddenColumn .beforeHiddenColumnIndicator::after,
-.handsontable th.afterHiddenColumn .afterHiddenColumnIndicator::before {
+.handsontable th.beforeHiddenColumn::after,
+.handsontable th.afterHiddenColumn::before {
   color: #bbb;
   position: absolute;
   top: 50%;
@@ -1630,33 +1631,37 @@ textarea.HandsontableCopyPaste {
   transform: translateY(-50%);
 }
 
-.handsontable th.beforeHiddenColumn .beforeHiddenColumnIndicator::after {
+.handsontable th.afterHiddenColumn {
+  position: relative;
+}
+
+.handsontable th.beforeHiddenColumn::after {
   right: 1px;
-  content: "◀";
+  content: "◀"; /* left arrow */
 }
 
-[dir=rtl].handsontable th.beforeHiddenColumn .beforeHiddenColumnIndicator::after {
+[dir=rtl].handsontable th.beforeHiddenColumn::after {
   right: initial;
   left: 1px;
-  content: "▶";
+  content: "▶"; /* right arrow */
 }
 
-.handsontable th.afterHiddenColumn .afterHiddenColumnIndicator::before {
+.handsontable th.afterHiddenColumn::before {
   left: 1px;
-  content: "▶";
+  content: "▶"; /* right arrow */
 }
 
-[dir=rtl].handsontable th.afterHiddenColumn .afterHiddenColumnIndicator::before {
+[dir=rtl].handsontable th.afterHiddenColumn::before {
   right: 1px;
   left: initial;
-  content: "◀";
+  content: "◀"; /* left arrow */
 }
 @charset "UTF-8";
 /*!
  * Handsontable HiddenRows
  */
-.handsontable th.beforeHiddenRow .beforeHiddenRowIndicator::before,
-.handsontable th.afterHiddenRow .afterHiddenRowIndicator::after {
+.handsontable th.beforeHiddenRow::before,
+.handsontable th.afterHiddenRow::after {
   color: #bbb;
   font-size: 6pt;
   line-height: 6pt;
@@ -1669,18 +1674,18 @@ textarea.HandsontableCopyPaste {
   position: relative;
 }
 
-.handsontable th.beforeHiddenRow .beforeHiddenRowIndicator::before {
-  content: "▲"; /* up-pointing triangle */
+.handsontable th.beforeHiddenRow::before {
+  content: "▲";
   bottom: 2px;
 }
 
-.handsontable th.afterHiddenRow .afterHiddenRowIndicator::after {
-  content: "▼"; /* down-pointing triangle */
+.handsontable th.afterHiddenRow::after {
+  content: "▼";
   top: 2px;
 }
 
-.handsontable.ht__selection--rows tbody th.beforeHiddenRow.ht__highlight .beforeHiddenRowIndicator::before,
-.handsontable.ht__selection--rows tbody th.afterHiddenRow.ht__highlight .afterHiddenRowIndicator::after {
+.handsontable.ht__selection--rows tbody th.beforeHiddenRow.ht__highlight:before,
+.handsontable.ht__selection--rows tbody th.afterHiddenRow.ht__highlight:after {
   color: #eee;
 }
 
@@ -1833,7 +1838,7 @@ textarea.HandsontableCopyPaste {
   opacity: 0.58;
 }
 /* Column's number position */
-.handsontable span.colHeader.columnSorting .columnSortingIndicator::after {
+.handsontable span.colHeader.columnSorting::after {
   /* Centering start */
   top: 50%;
   /* Two extra pixels (-2 instead of -4) for purpose of proper positioning of numeric indicators, when `font-size` set to default */
@@ -1852,7 +1857,7 @@ textarea.HandsontableCopyPaste {
   text-decoration: underline;
 }
 
-[dir=rtl].handsontable span.colHeader.columnSorting .columnSortingIndicator::after {
+[dir=rtl].handsontable span.colHeader.columnSorting::after {
   left: -15px;
   right: unset;
   /* For purpose of continuous mouse over experience, when moving between the `::before` and the `::after` elements */
@@ -1861,41 +1866,41 @@ textarea.HandsontableCopyPaste {
 }
 
 /* Workaround for IE9 - IE11, https://stackoverflow.com/a/21902566, https://stackoverflow.com/a/32120247 */
-.handsontable span.colHeader.columnSorting .columnSortingIndicator::after {
+.handsontable span.colHeader.columnSorting::after {
   text-decoration: none;
 }
 
 /* We support up to 7 numeric indicators, describing order of column in sorted columns queue */
-.handsontable span.colHeader.columnSorting[class^=sort-] .columnSortingIndicator::after,
-.handsontable span.colHeader.columnSorting[class*=" sort-"] .columnSortingIndicator::after {
+.handsontable span.colHeader.columnSorting[class^=sort-]::after,
+.handsontable span.colHeader.columnSorting[class*=" sort-"]::after {
   content: "+";
 }
 
-.handsontable span.colHeader.columnSorting.sort-1 .columnSortingIndicator::after {
+.handsontable span.colHeader.columnSorting.sort-1::after {
   content: "1";
 }
 
-.handsontable span.colHeader.columnSorting.sort-2 .columnSortingIndicator::after {
+.handsontable span.colHeader.columnSorting.sort-2::after {
   content: "2";
 }
 
-.handsontable span.colHeader.columnSorting.sort-3 .columnSortingIndicator::after {
+.handsontable span.colHeader.columnSorting.sort-3::after {
   content: "3";
 }
 
-.handsontable span.colHeader.columnSorting.sort-4 .columnSortingIndicator::after {
+.handsontable span.colHeader.columnSorting.sort-4::after {
   content: "4";
 }
 
-.handsontable span.colHeader.columnSorting.sort-5 .columnSortingIndicator::after {
+.handsontable span.colHeader.columnSorting.sort-5::after {
   content: "5";
 }
 
-.handsontable span.colHeader.columnSorting.sort-6 .columnSortingIndicator::after {
+.handsontable span.colHeader.columnSorting.sort-6::after {
   content: "6";
 }
 
-.handsontable span.colHeader.columnSorting.sort-7 .columnSortingIndicator::after {
+.handsontable span.colHeader.columnSorting.sort-7::after {
   content: "7";
 }
 
@@ -1906,6 +1911,7 @@ textarea.HandsontableCopyPaste {
 .handsontable thead th.hiddenHeader:not(:first-of-type) {
   display: none;
 }
+@charset "UTF-8";
 .handsontable th.ht_nestingLevels {
   text-align: left;
   padding-left: 7px;
@@ -1939,6 +1945,10 @@ textarea.HandsontableCopyPaste {
   right: unset;
 }
 
+.handsontable th span.ht_nestingLevel {
+  display: inline-block;
+}
+
 .handsontable th span.ht_nestingLevel_empty {
   display: inline-block;
   width: 10px;
@@ -1950,6 +1960,14 @@ textarea.HandsontableCopyPaste {
   float: right;
 }
 
+.handsontable th span.ht_nestingLevel::after {
+  content: "┐";
+  font-size: 9px;
+  display: inline-block;
+  position: relative;
+  bottom: 3px;
+}
+
 .handsontable th div.ht_nestingButton {
   display: inline-block;
   position: absolute;