handsontable 13.1.0 → 14.0.0-next-d97b156-20231027

package/dataMap/dataMap.js

@@ -926,5 +926,4 @@ class DataMap {
     this.propToColCache = void 0;
   }
 }
-var _default = DataMap;
-exports.default = _default;
+var _default = exports.default = DataMap;

package/dataMap/dataSource.js

@@ -284,5 +284,4 @@ class DataSource {
     this.hot = null;
   }
 }
-var _default = DataSource;
-exports.default = _default;
+var _default = exports.default = DataSource;

package/dataMap/metaManager/metaSchema.js

@@ -318,6 +318,18 @@ var _default = () => {
      * ```
      */
     allowRemoveRow: true,
+    /**
+     * If set to `true`, the accessibility-related ARIA tags will be added to the table. If set to `false`, they
+     * will be omitted.
+     * Defaults to `true`.
+     *
+     * @memberof Options#
+     * @type {boolean}
+     * @default true
+     * @category Core
+     * @since 14.0.0
+     */
+    ariaTags: true,
     /**
      * The `autoColumnSize` option configures the [`AutoColumnSize`](@/api/autoColumnSize.md) plugin.
      *
@@ -2430,6 +2442,18 @@ var _default = () => {
      * ```
      */
     invalidCellClassName: 'htInvalid',
+    /**
+     * The `imeFastEdit` option allows using the "fast edit" feature for the IME users. It's disabled by default
+     * because of its incompatibility with some of the accessibility features.
+     *
+     * Enabling this option can make a negative impact on how some screen readers handle reading the table cells.
+     *
+     * @since 14.0.0
+     * @memberof Options#
+     * @type {boolean}
+     * @category Core
+     */
+    imeFastEdit: false,
     /**
      * The `isEmptyCol` option lets you define your own custom method
      * for checking if a column at a given visual index is empty.
@@ -3103,6 +3127,47 @@ var _default = () => {
      * ```
      */
     multiColumnSorting: void 0,
+    /**
+     * When set to `true`, the `navigableHeaders` option lets you navigate [row headers](@/guides/rows/row-header.md) and [column headers](@/guides/columns/column-header.md), using the arrow keys or the <kbd>**Tab**</kbd> key (if the [`disableTabNavigation`](#disabletabnavigation) option is set to `false`).
+     *
+     * @since 14.0.0
+     * @memberof Options#
+     * @type {boolean}
+     * @default false
+     * @category Core
+     *
+     * @example
+     * ```js
+     * // you can navigate row and column headers with the keyboard
+     * navigableHeaders: true,
+     *
+     * // default behavior: you can't navigate row and column headers with the keyboard
+     * navigableHeaders: false,
+     * ```
+     */
+    navigableHeaders: false,
+    /**
+     * When set to `true`, the `disableTabNavigation` option changes the behavior of the
+     * <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> keyboard shortcuts. The Handsontable
+     * no more captures that shortcuts to make the grid navigation available (`disableTabNavigation: false`)
+     * but returns control to the browser so the native page navigation is possible.
+     *
+     * @since 14.0.0
+     * @memberof Options#
+     * @type {boolean}
+     * @default false
+     * @category Core
+     *
+     * @example
+     * ```js
+     * // you can't navigate row and column headers using <kbd>Tab</kbd> or <kbd>Shift</kbd>+<kbd>Tab</kbd> keyboard shortcuts
+     * disableTabNavigation: true,
+     *
+     * // default behavior: you can navigate row and column headers using <kbd>Tab</kbd> or <kbd>Shift</kbd>+<kbd>Tab</kbd> keyboard shortcuts
+     * disableTabNavigation: false,
+     * ```
+     */
+    disableTabNavigation: false,
     /**
      * @description
      * The `nestedHeaders` option configures the [`NestedHeaders`](@/api/nestedHeaders.md) plugin.

package/dataMap/metaManager/metaSchema.mjs

@@ -315,6 +315,18 @@ export default (() => {
      * ```
      */
     allowRemoveRow: true,
+    /**
+     * If set to `true`, the accessibility-related ARIA tags will be added to the table. If set to `false`, they
+     * will be omitted.
+     * Defaults to `true`.
+     *
+     * @memberof Options#
+     * @type {boolean}
+     * @default true
+     * @category Core
+     * @since 14.0.0
+     */
+    ariaTags: true,
     /**
      * The `autoColumnSize` option configures the [`AutoColumnSize`](@/api/autoColumnSize.md) plugin.
      *
@@ -2427,6 +2439,18 @@ export default (() => {
      * ```
      */
     invalidCellClassName: 'htInvalid',
+    /**
+     * The `imeFastEdit` option allows using the "fast edit" feature for the IME users. It's disabled by default
+     * because of its incompatibility with some of the accessibility features.
+     *
+     * Enabling this option can make a negative impact on how some screen readers handle reading the table cells.
+     *
+     * @since 14.0.0
+     * @memberof Options#
+     * @type {boolean}
+     * @category Core
+     */
+    imeFastEdit: false,
     /**
      * The `isEmptyCol` option lets you define your own custom method
      * for checking if a column at a given visual index is empty.
@@ -3100,6 +3124,47 @@ export default (() => {
      * ```
      */
     multiColumnSorting: void 0,
+    /**
+     * When set to `true`, the `navigableHeaders` option lets you navigate [row headers](@/guides/rows/row-header.md) and [column headers](@/guides/columns/column-header.md), using the arrow keys or the <kbd>**Tab**</kbd> key (if the [`disableTabNavigation`](#disabletabnavigation) option is set to `false`).
+     *
+     * @since 14.0.0
+     * @memberof Options#
+     * @type {boolean}
+     * @default false
+     * @category Core
+     *
+     * @example
+     * ```js
+     * // you can navigate row and column headers with the keyboard
+     * navigableHeaders: true,
+     *
+     * // default behavior: you can't navigate row and column headers with the keyboard
+     * navigableHeaders: false,
+     * ```
+     */
+    navigableHeaders: false,
+    /**
+     * When set to `true`, the `disableTabNavigation` option changes the behavior of the
+     * <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> keyboard shortcuts. The Handsontable
+     * no more captures that shortcuts to make the grid navigation available (`disableTabNavigation: false`)
+     * but returns control to the browser so the native page navigation is possible.
+     *
+     * @since 14.0.0
+     * @memberof Options#
+     * @type {boolean}
+     * @default false
+     * @category Core
+     *
+     * @example
+     * ```js
+     * // you can't navigate row and column headers using <kbd>Tab</kbd> or <kbd>Shift</kbd>+<kbd>Tab</kbd> keyboard shortcuts
+     * disableTabNavigation: true,
+     *
+     * // default behavior: you can navigate row and column headers using <kbd>Tab</kbd> or <kbd>Shift</kbd>+<kbd>Tab</kbd> keyboard shortcuts
+     * disableTabNavigation: false,
+     * ```
+     */
+    disableTabNavigation: false,
     /**
      * @description
      * The `nestedHeaders` option configures the [`NestedHeaders`](@/api/nestedHeaders.md) plugin.

package/dataMap/metaManager/mods/extendMetaProperties.js

@@ -18,7 +18,13 @@ class ExtendMetaPropertiesMod {
     /**
      * @type {Map}
      */
-    this.propDescriptors = new Map([['fixedColumnsLeft', {
+    this.propDescriptors = new Map([['ariaTags', {
+      onChange(propName, value, isInitialChange) {
+        if (!isInitialChange) {
+          throw new Error(`The \`${propName}\` option can not be updated after the Handsontable instance was initialized.`);
+        }
+      }
+    }], ['fixedColumnsLeft', {
       target: 'fixedColumnsStart',
       onChange(propName) {
         const isRtl = this.metaManager.hot.isRtl();

package/dataMap/metaManager/mods/extendMetaProperties.mjs

@@ -15,7 +15,13 @@ export class ExtendMetaPropertiesMod {
     /**
      * @type {Map}
      */
-    this.propDescriptors = new Map([['fixedColumnsLeft', {
+    this.propDescriptors = new Map([['ariaTags', {
+      onChange(propName, value, isInitialChange) {
+        if (!isInitialChange) {
+          throw new Error(`The \`${propName}\` option can not be updated after the Handsontable instance was initialized.`);
+        }
+      }
+    }], ['fixedColumnsLeft', {
       target: 'fixedColumnsStart',
       onChange(propName) {
         const isRtl = this.metaManager.hot.isRtl();

package/dataMap/replaceData.js

@@ -8,6 +8,8 @@ var _string = require("../helpers/string");
 var _function = require("../helpers/function");
 var _dataMap = _interopRequireDefault(require("./dataMap"));
 var _object = require("../helpers/object");
+var _element = require("../helpers/dom/element");
+var _a11y = require("../helpers/a11y");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Loads new data to Handsontable.
@@ -111,4 +113,7 @@ function replaceData(data, setDataMapFunction, callbackFunction, config) {
     hotInstance.runHooks('afterChange', null, internalSource);
     hotInstance.render();
   }
+  if (hotInstance.getSettings().ariaTags) {
+    (0, _element.setAttribute)(hotInstance.rootElement, [(0, _a11y.A11Y_ROWCOUNT)(hotInstance.countRows()), (0, _a11y.A11Y_COLCOUNT)(hotInstance.countCols())]);
+  }
 }

package/dataMap/replaceData.mjs

@@ -4,6 +4,8 @@ import { toUpperCaseFirst } from "../helpers/string.mjs";
 import { isFunction } from "../helpers/function.mjs";
 import DataMap from "./dataMap.mjs";
 import { deepClone } from "../helpers/object.mjs";
+import { setAttribute } from "../helpers/dom/element.mjs";
+import { A11Y_COLCOUNT, A11Y_ROWCOUNT } from "../helpers/a11y.mjs";
 /**
  * Loads new data to Handsontable.
  *
@@ -106,5 +108,8 @@ function replaceData(data, setDataMapFunction, callbackFunction, config) {
     hotInstance.runHooks('afterChange', null, internalSource);
     hotInstance.render();
   }
+  if (hotInstance.getSettings().ariaTags) {
+    setAttribute(hotInstance.rootElement, [A11Y_ROWCOUNT(hotInstance.countRows()), A11Y_COLCOUNT(hotInstance.countCols())]);
+  }
 }
 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: 13.1.0
- * Release date: 31/08/2023 (built at 31/08/2023 08:23:39)
+ * Version: 14.0.0-next-d97b156-20231027
+ * Release date: 08/11/2023 (built at 27/10/2023 12:46:45)
  */
 /**
  * Fix for bootstrap styles
@@ -179,6 +179,7 @@
   background-color: #fff;
   vertical-align: top;
   overflow: hidden;
+  outline: none;
   outline-width: 0;
   white-space: pre-wrap;
 }
@@ -389,13 +390,23 @@ innerBorderBottom - Property controlled by bottom overlay
 
 .handsontable td.htInvalid {
   /*gives priority over td.area selection background*/
-  background-color: #ff4c42 !important;
+  background-color: #ffbeba !important;
 }
 
 .handsontable td.htNoWrap {
   white-space: nowrap;
 }
 
+.handsontable td.invisibleSelection,
+.handsontable th.invisibleSelection {
+  outline: none;
+}
+
+.handsontable td.invisibleSelection::selection,
+.handsontable th.invisibleSelection::selection {
+  background: rgba(255, 255, 255, 0);
+}
+
 .hot-display-license-info {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
   font-size: 10px;
@@ -410,6 +421,17 @@ innerBorderBottom - Property controlled by bottom overlay
   font-size: 10px;
 }
 
+.handsontable .htFocusCatcher {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  width: 0;
+  height: 0;
+}
+
 /* plugins */
 /* row + column resizer*/
 .handsontable .manualColumnResizer {
@@ -482,8 +504,10 @@ innerBorderBottom - Property controlled by bottom overlay
 .handsontable .columnSorting.sortAction:hover {
   text-decoration: underline;
   cursor: pointer;
-} /* Arrow position */
-.handsontable span.colHeader.columnSorting::before {
+}
+
+/* Arrow position */
+.handsontable span.colHeader.columnSorting .columnSortingIndicator::before {
   /* Centering start */
   top: 50%;
   /* One extra pixel for purpose of proper positioning of sorting arrow, when `font-size` set to default */
@@ -503,7 +527,7 @@ innerBorderBottom - Property controlled by bottom overlay
   background-position-x: right;
 }
 
-[dir=rtl].handsontable span.colHeader.columnSorting::before {
+[dir=rtl].handsontable span.colHeader.columnSorting .columnSortingIndicator::before {
   /* Centering end */
   /* For purpose of continuous mouse over experience, when moving between the `span` and the `::before` elements */
   padding-right: 8px;
@@ -513,17 +537,17 @@ innerBorderBottom - Property controlled by bottom overlay
   background-position-x: left;
 }
 
-.handsontable span.colHeader.columnSorting.ascending::before {
+.handsontable span.colHeader.columnSorting.ascending .columnSortingIndicator::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::before {
+.handsontable span.colHeader.columnSorting.descending .columnSortingIndicator::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=);
 }
 
-.htGhostTable .htCore span.colHeader.columnSorting:not(.indicatorDisabled)::after {
+.htGhostTable .htCore span.colHeader.columnSorting:not(.indicatorDisabled)::before {
   content: "*";
   display: inline-block;
   position: relative;
@@ -607,6 +631,11 @@ innerBorderBottom - Property controlled by bottom overlay
   opacity: 0.58;
 }
 
+.handsontable tbody th.current,
+.handsontable thead th.current {
+  box-shadow: inset 0 0 0 2px #4b89ff;
+}
+
 .handsontable tbody th.ht__highlight,
 .handsontable thead th.ht__highlight {
   background-color: #dcdcdc;
@@ -667,7 +696,7 @@ TextRenderer readOnly cell
   position: relative;
 }
 
-.handsontable .htSubmenu :after {
+.handsontable .htSubmenu .submenuIndicator::after {
   content: "▶";
   color: #777;
   position: absolute;
@@ -675,11 +704,11 @@ TextRenderer readOnly cell
   font-size: 9px;
 }
 
-[dir=rtl].handsontable .htSubmenu :after {
+[dir=rtl].handsontable .htSubmenu .submenuIndicator::after {
   content: "";
 }
 
-[dir=rtl].handsontable .htSubmenu :before {
+[dir=rtl].handsontable .htSubmenu .submenuIndicator::before {
   content: "◀";
   color: #777;
   position: absolute;
@@ -799,7 +828,7 @@ TextRenderer placeholder value
   cursor: pointer;
   -webkit-box-shadow: 0 0 0 6px rgb(238, 238, 238);
   -moz-box-shadow: 0 0 0 6px rgb(238, 238, 238);
-  box-shadow: 0 0 0 6px rgb(238, 238, 238);
+  box-shadow: 0 0 0 3px rgb(238, 238, 238);
   background: #eee;
   text-align: center;
 }
@@ -867,7 +896,7 @@ AutocompleteRenderer down arrow
 .handsontable .htAutocompleteArrow {
   float: right;
   font-size: 10px;
-  color: #EEE;
+  color: #bbbbbb;
   cursor: default;
   width: 16px;
   text-align: center;
@@ -877,6 +906,14 @@ AutocompleteRenderer down arrow
   float: left;
 }
 
+.handsontable td.htInvalid .htAutocompleteArrow {
+  color: #555555;
+}
+
+.handsontable td.htInvalid .htAutocompleteArrow:hover {
+  color: #1a1a1a;
+}
+
 .handsontable td .htAutocompleteArrow:hover {
   color: #777;
 }
@@ -997,6 +1034,10 @@ CheckboxRenderer
   border-left-width: 2px;
 }
 
+.htContextMenu.handsontable:focus {
+  outline: none;
+}
+
 .htContextMenu .wtBorder {
   visibility: hidden;
 }
@@ -1028,8 +1069,7 @@ CheckboxRenderer
   color: #323232;
 }
 
-.htContextMenu table tbody tr td.current,
-.htContextMenu table tbody tr td.zeroclipboard-is-hover {
+.htContextMenu table tbody tr td.current {
   background: #f3f3f3;
 }
 
@@ -1147,6 +1187,10 @@ textarea.HandsontableCopyPaste {
   border-left-width: 2px;
 }
 
+.htDropdownMenu.handsontable:focus {
+  outline: none;
+}
+
 .htDropdownMenu .wtBorder {
   visibility: hidden;
 }
@@ -1178,8 +1222,7 @@ textarea.HandsontableCopyPaste {
   color: #323232;
 }
 
-.htDropdownMenu table tbody tr td.current,
-.htDropdownMenu table tbody tr td.zeroclipboard-is-hover {
+.htDropdownMenu table tbody tr td.current {
   background: #e9e9e9;
 }
 
@@ -1285,8 +1328,7 @@ textarea.HandsontableCopyPaste {
   color: #323232;
 }
 
-.htFiltersConditionsMenu table tbody tr td.current,
-.htFiltersConditionsMenu table tbody tr td.zeroclipboard-is-hover {
+.htFiltersConditionsMenu table tbody tr td.current {
   background: #e9e9e9;
 }
 
@@ -1434,14 +1476,6 @@ textarea.HandsontableCopyPaste {
   border: 1px solid #d2d1d1;
 }
 
-.handsontable .htUIInput input:focus {
-  outline: 0;
-}
-
-.handsontable .htUIInputIcon {
-  position: absolute;
-}
-
 /* Button */
 .handsontable .htUIInput.htUIButton {
   cursor: pointer;
@@ -1576,12 +1610,13 @@ textarea.HandsontableCopyPaste {
 /*
  * Handsontable HiddenColumns
  */
-.handsontable th.beforeHiddenColumn {
+.handsontable th.beforeHiddenColumn,
+.handsontable th.afterHiddenColumn {
   position: relative;
 }
 
-.handsontable th.beforeHiddenColumn::after,
-.handsontable th.afterHiddenColumn::before {
+.handsontable th.beforeHiddenColumn .beforeHiddenColumnIndicator::after,
+.handsontable th.afterHiddenColumn .afterHiddenColumnIndicator::before {
   color: #bbb;
   position: absolute;
   top: 50%;
@@ -1589,37 +1624,33 @@ textarea.HandsontableCopyPaste {
   transform: translateY(-50%);
 }
 
-.handsontable th.afterHiddenColumn {
-  position: relative;
-}
-
-.handsontable th.beforeHiddenColumn::after {
+.handsontable th.beforeHiddenColumn .beforeHiddenColumnIndicator::after {
   right: 1px;
-  content: "◀"; /* left arrow */
+  content: "◀";
 }
 
-[dir=rtl].handsontable th.beforeHiddenColumn::after {
+[dir=rtl].handsontable th.beforeHiddenColumn .beforeHiddenColumnIndicator::after {
   right: initial;
   left: 1px;
-  content: "▶"; /* right arrow */
+  content: "▶";
 }
 
-.handsontable th.afterHiddenColumn::before {
+.handsontable th.afterHiddenColumn .afterHiddenColumnIndicator::before {
   left: 1px;
-  content: "▶"; /* right arrow */
+  content: "▶";
 }
 
-[dir=rtl].handsontable th.afterHiddenColumn::before {
+[dir=rtl].handsontable th.afterHiddenColumn .afterHiddenColumnIndicator::before {
   right: 1px;
   left: initial;
-  content: "◀"; /* left arrow */
+  content: "◀";
 }
 @charset "UTF-8";
 /*!
  * Handsontable HiddenRows
  */
-.handsontable th.beforeHiddenRow::before,
-.handsontable th.afterHiddenRow::after {
+.handsontable th.beforeHiddenRow .beforeHiddenRowIndicator::before,
+.handsontable th.afterHiddenRow .afterHiddenRowIndicator::after {
   color: #bbb;
   font-size: 6pt;
   line-height: 6pt;
@@ -1632,18 +1663,18 @@ textarea.HandsontableCopyPaste {
   position: relative;
 }
 
-.handsontable th.beforeHiddenRow::before {
-  content: "▲";
+.handsontable th.beforeHiddenRow .beforeHiddenRowIndicator::before {
+  content: "▲"; /* up-pointing triangle */
   bottom: 2px;
 }
 
-.handsontable th.afterHiddenRow::after {
-  content: "▼";
+.handsontable th.afterHiddenRow .afterHiddenRowIndicator::after {
+  content: "▼"; /* down-pointing triangle */
   top: 2px;
 }
 
-.handsontable.ht__selection--rows tbody th.beforeHiddenRow.ht__highlight:before,
-.handsontable.ht__selection--rows tbody th.afterHiddenRow.ht__highlight:after {
+.handsontable.ht__selection--rows tbody th.beforeHiddenRow.ht__highlight .beforeHiddenRowIndicator::before,
+.handsontable.ht__selection--rows tbody th.afterHiddenRow.ht__highlight .afterHiddenRowIndicator::after {
   color: #eee;
 }
 
@@ -1796,7 +1827,7 @@ textarea.HandsontableCopyPaste {
   opacity: 0.58;
 }
 /* Column's number position */
-.handsontable span.colHeader.columnSorting::after {
+.handsontable span.colHeader.columnSorting .columnSortingIndicator::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 */
@@ -1815,7 +1846,7 @@ textarea.HandsontableCopyPaste {
   text-decoration: underline;
 }
 
-[dir=rtl].handsontable span.colHeader.columnSorting::after {
+[dir=rtl].handsontable span.colHeader.columnSorting .columnSortingIndicator::after {
   left: -15px;
   right: unset;
   /* For purpose of continuous mouse over experience, when moving between the `::before` and the `::after` elements */
@@ -1824,41 +1855,41 @@ textarea.HandsontableCopyPaste {
 }
 
 /* Workaround for IE9 - IE11, https://stackoverflow.com/a/21902566, https://stackoverflow.com/a/32120247 */
-.handsontable span.colHeader.columnSorting::after {
+.handsontable span.colHeader.columnSorting .columnSortingIndicator::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-]::after,
-.handsontable span.colHeader.columnSorting[class*=" sort-"]::after {
+.handsontable span.colHeader.columnSorting[class^=sort-] .columnSortingIndicator::after,
+.handsontable span.colHeader.columnSorting[class*=" sort-"] .columnSortingIndicator::after {
   content: "+";
 }
 
-.handsontable span.colHeader.columnSorting.sort-1::after {
+.handsontable span.colHeader.columnSorting.sort-1 .columnSortingIndicator::after {
   content: "1";
 }
 
-.handsontable span.colHeader.columnSorting.sort-2::after {
+.handsontable span.colHeader.columnSorting.sort-2 .columnSortingIndicator::after {
   content: "2";
 }
 
-.handsontable span.colHeader.columnSorting.sort-3::after {
+.handsontable span.colHeader.columnSorting.sort-3 .columnSortingIndicator::after {
   content: "3";
 }
 
-.handsontable span.colHeader.columnSorting.sort-4::after {
+.handsontable span.colHeader.columnSorting.sort-4 .columnSortingIndicator::after {
   content: "4";
 }
 
-.handsontable span.colHeader.columnSorting.sort-5::after {
+.handsontable span.colHeader.columnSorting.sort-5 .columnSortingIndicator::after {
   content: "5";
 }
 
-.handsontable span.colHeader.columnSorting.sort-6::after {
+.handsontable span.colHeader.columnSorting.sort-6 .columnSortingIndicator::after {
   content: "6";
 }
 
-.handsontable span.colHeader.columnSorting.sort-7::after {
+.handsontable span.colHeader.columnSorting.sort-7 .columnSortingIndicator::after {
   content: "7";
 }
 
@@ -1869,7 +1900,6 @@ 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;
@@ -1903,10 +1933,6 @@ textarea.HandsontableCopyPaste {
   right: unset;
 }
 
-.handsontable th span.ht_nestingLevel {
-  display: inline-block;
-}
-
 .handsontable th span.ht_nestingLevel_empty {
   display: inline-block;
   width: 10px;
@@ -1918,14 +1944,6 @@ 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;