handsontable 0.0.0-next-c81ae8e-20231123 → 0.0.0-next-b86a8be-20231123

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,13 @@ class SelectionManager {
     }
     const selections = Array.from(_classPrivateFieldGet(this, _selections));
     const classNamesMap = new Map();
+    const focusedHeaderAttributesMap = new Map();
     for (let i = 0; i < selections.length; i++) {
       const selection = selections[i];
       const {
         className,
+        cellAttributes,
+        focusedHeaderAttributes,
         createLayers,
         selectionType
       } = selection.settings;
@@ -206,18 +210,28 @@ class SelectionManager {
         continue; // eslint-disable-line no-continue
       }
 
-      if (className) {
+      if (className || cellAttributes || selectionType === 'focus' && focusedHeaderAttributes) {
         const elements = _classPrivateFieldGet(this, _scanner).setActiveSelection(selection).scan();
         elements.forEach(element => {
-          if (classNamesMap.has(element)) {
-            const classNamesLayers = classNamesMap.get(element);
-            if (classNamesLayers.has(className) && createLayers === true) {
-              classNamesLayers.set(className, classNamesLayers.get(className) + 1);
+          if (className) {
+            if (classNamesMap.has(element)) {
+              const classNamesLayers = classNamesMap.get(element);
+              if (classNamesLayers.has(className) && createLayers === true) {
+                classNamesLayers.set(className, classNamesLayers.get(className) + 1);
+              } else {
+                classNamesLayers.set(className, 1);
+              }
             } else {
-              classNamesLayers.set(className, 1);
+              classNamesMap.set(element, new Map([[className, 1]]));
+            }
+          }
+          if (selectionType === 'focus' && focusedHeaderAttributes) {
+            if (!focusedHeaderAttributesMap.has(element)) {
+              focusedHeaderAttributesMap.set(element, []);
+            }
+            if (element.nodeName === 'TH') {
+              focusedHeaderAttributesMap.get(element).push(...focusedHeaderAttributes);
             }
-          } else {
-            classNamesMap.set(element, new Map([[className, 1]]));
           }
         });
       }
@@ -226,7 +240,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 +254,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(focusedHeaderAttributesMap.keys()).forEach(element => {
+      (0, _element.setAttribute)(element, [...focusedHeaderAttributesMap.get(element)]);
+    });
   }
 }
 exports.SelectionManager = SelectionManager;
@@ -256,13 +273,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,13 @@ export class SelectionManager {
     }
     const selections = Array.from(_classPrivateFieldGet(this, _selections));
     const classNamesMap = new Map();
+    const focusedHeaderAttributesMap = new Map();
     for (let i = 0; i < selections.length; i++) {
       const selection = selections[i];
       const {
         className,
+        cellAttributes,
+        focusedHeaderAttributes,
         createLayers,
         selectionType
       } = selection.settings;
@@ -202,18 +206,28 @@ export class SelectionManager {
         continue; // eslint-disable-line no-continue
       }
 
-      if (className) {
+      if (className || cellAttributes || selectionType === 'focus' && focusedHeaderAttributes) {
         const elements = _classPrivateFieldGet(this, _scanner).setActiveSelection(selection).scan();
         elements.forEach(element => {
-          if (classNamesMap.has(element)) {
-            const classNamesLayers = classNamesMap.get(element);
-            if (classNamesLayers.has(className) && createLayers === true) {
-              classNamesLayers.set(className, classNamesLayers.get(className) + 1);
+          if (className) {
+            if (classNamesMap.has(element)) {
+              const classNamesLayers = classNamesMap.get(element);
+              if (classNamesLayers.has(className) && createLayers === true) {
+                classNamesLayers.set(className, classNamesLayers.get(className) + 1);
+              } else {
+                classNamesLayers.set(className, 1);
+              }
             } else {
-              classNamesLayers.set(className, 1);
+              classNamesMap.set(element, new Map([[className, 1]]));
+            }
+          }
+          if (selectionType === 'focus' && focusedHeaderAttributes) {
+            if (!focusedHeaderAttributesMap.has(element)) {
+              focusedHeaderAttributesMap.set(element, []);
+            }
+            if (element.nodeName === 'TH') {
+              focusedHeaderAttributesMap.get(element).push(...focusedHeaderAttributes);
             }
-          } else {
-            classNamesMap.set(element, new Map([[className, 1]]));
           }
         });
       }
@@ -222,7 +236,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 +250,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(focusedHeaderAttributesMap.keys()).forEach(element => {
+      setAttribute(element, [...focusedHeaderAttributesMap.get(element)]);
+    });
   }
 }
 function _resetCells2() {
@@ -251,13 +268,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 = "23/11/2023 08:00:00";
-Handsontable.version = "0.0.0-next-c81ae8e-20231123";
+Handsontable.buildDate = "23/11/2023 12:44:41";
+Handsontable.version = "0.0.0-next-b86a8be-20231123";
 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 = "23/11/2023 08:00:06";
-Handsontable.version = "0.0.0-next-c81ae8e-20231123";
+Handsontable.buildDate = "23/11/2023 12:44:47";
+Handsontable.version = "0.0.0-next-b86a8be-20231123";
 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/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: 0.0.0-next-c81ae8e-20231123
- * Release date: 31/08/2023 (built at 23/11/2023 08:00:12)
+ * Version: 0.0.0-next-b86a8be-20231123
+ * Release date: 31/08/2023 (built at 23/11/2023 12:44:52)
  */
 /**
  * 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;