handsontable 0.0.0-next-0306a1a-20240826 → 0.0.0-next-eaf150e-20240903

package/3rdparty/walkontable/src/viewport.mjs

@@ -1,6 +1,6 @@
 import { getScrollbarWidth, getStyle, offset, outerHeight, outerWidth } from "../../../helpers/dom/element.mjs";
 import { objectEach } from "../../../helpers/object.mjs";
-import { RENDER_TYPE, FULLY_VISIBLE_TYPE, PARTIALLY_VISIBLE_TYPE, RenderAllColumnsCalculator, RenderAllRowsCalculator, ViewportColumnsCalculator, ViewportRowsCalculator } from "./calculator/index.mjs";
+import { FullyVisibleColumnsCalculationType, FullyVisibleRowsCalculationType, PartiallyVisibleColumnsCalculationType, PartiallyVisibleRowsCalculationType, RenderedAllColumnsCalculationType, RenderedAllRowsCalculationType, RenderedColumnsCalculationType, RenderedRowsCalculationType, ViewportColumnsCalculator, ViewportRowsCalculator } from "./calculator/index.mjs";
 /**
  * @class Viewport
  */
@@ -28,6 +28,8 @@ class Viewport {
     this.rowHeaderWidth = NaN;
     this.rowsVisibleCalculator = null;
     this.columnsVisibleCalculator = null;
+    this.rowsCalculatorTypes = new Map([['rendered', () => this.wtSettings.getSetting('renderAllRows') ? new RenderedAllRowsCalculationType() : new RenderedRowsCalculationType()], ['fullyVisible', () => new FullyVisibleRowsCalculationType()], ['partiallyVisible', () => new PartiallyVisibleRowsCalculationType()]]);
+    this.columnsCalculatorTypes = new Map([['rendered', () => this.wtSettings.getSetting('renderAllColumns') ? new RenderedAllColumnsCalculationType() : new RenderedColumnsCalculationType()], ['fullyVisible', () => new FullyVisibleColumnsCalculationType()], ['partiallyVisible', () => new PartiallyVisibleColumnsCalculationType()]]);
     this.eventManager = eventManager;
     this.eventManager.addEventListener(this.domBindings.rootWindow, 'resize', () => {
       this.clientHeight = this.getWorkspaceHeight();
@@ -238,25 +240,20 @@ class Viewport {
   }
 
   /**
-   * Creates:
-   * - rowsRenderCalculator (before draw, to qualify rows for rendering)
-   * - rowsVisibleCalculator (after draw, to measure which rows are actually visible).
+   * Creates rows calculators. The type of the calculations can be chosen from the list:
+   *  - 'rendered' Calculates rows that should be rendered within the current table's viewport;
+   *  - 'fullyVisible' Calculates rows that are fully visible (used mostly for scrolling purposes);
+   *  - 'partiallyVisible' Calculates rows that are partially visible (used mostly for scrolling purposes).
    *
-   * @param {number} calculationType The render type ID, which determines for what type of
-   *                                 calculation calculator is created.
+   * @param {'rendered' | 'fullyVisible' | 'partiallyVisible'} calculatorTypes The list of the calculation types.
    * @returns {ViewportRowsCalculator}
    */
   createRowsCalculator() {
-    let calculationType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : RENDER_TYPE;
+    let calculatorTypes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['rendered', 'fullyVisible', 'partiallyVisible'];
     const {
       wtSettings,
       wtTable
     } = this;
-    if (wtSettings.getSetting('renderAllRows') && calculationType === RENDER_TYPE) {
-      return new RenderAllRowsCalculator({
-        totalRows: wtSettings.getSetting('totalRows')
-      });
-    }
     let height = this.getViewportHeight();
     let scrollbarHeight;
     let fixedRowsHeight;
@@ -280,36 +277,31 @@ class Viewport {
       scrollbarHeight = getScrollbarWidth(this.domBindings.rootDocument);
     }
     return new ViewportRowsCalculator({
+      calculationTypes: calculatorTypes.map(type => [type, this.rowsCalculatorTypes.get(type)()]),
       viewportHeight: height,
       scrollOffset: pos,
       totalRows: wtSettings.getSetting('totalRows'),
       rowHeightFn: sourceRow => wtTable.getRowHeight(sourceRow),
       overrideFn: wtSettings.getSettingPure('viewportRowCalculatorOverride'),
-      calculationType,
       horizontalScrollbarHeight: scrollbarHeight
     });
   }
 
   /**
-   * Creates:
-   * - columnsRenderCalculator (before draw, to qualify columns for rendering)
-   * - columnsVisibleCalculator (after draw, to measure which columns are actually visible).
+   * Creates columns calculators. The type of the calculations can be chosen from the list:
+   *  - 'rendered' Calculates columns that should be rendered within the current table's viewport;
+   *  - 'fullyVisible' Calculates columns that are fully visible (used mostly for scrolling purposes);
+   *  - 'partiallyVisible' Calculates columns that are partially visible (used mostly for scrolling purposes).
    *
-   * @param {number} calculationType The render type ID, which determines for what type of
-   *                                 calculation calculator is created.
+   * @param {'rendered' | 'fullyVisible' | 'partiallyVisible'} calculatorTypes The list of the calculation types.
    * @returns {ViewportColumnsCalculator}
    */
   createColumnsCalculator() {
-    let calculationType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : RENDER_TYPE;
+    let calculatorTypes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['rendered', 'fullyVisible', 'partiallyVisible'];
     const {
       wtSettings,
       wtTable
     } = this;
-    if (wtSettings.getSetting('renderAllColumns') && calculationType === RENDER_TYPE) {
-      return new RenderAllColumnsCalculator({
-        totalColumns: wtSettings.getSetting('totalColumns')
-      });
-    }
     let width = this.getViewportWidth();
     let pos = Math.abs(this.dataAccessObject.inlineStartScrollPosition) - this.dataAccessObject.inlineStartParentOffset;
     this.columnHeaderHeight = NaN;
@@ -323,12 +315,12 @@ class Viewport {
       width -= getScrollbarWidth(this.domBindings.rootDocument);
     }
     return new ViewportColumnsCalculator({
+      calculationTypes: calculatorTypes.map(type => [type, this.columnsCalculatorTypes.get(type)()]),
       viewportWidth: width,
       scrollOffset: pos,
       totalColumns: wtSettings.getSetting('totalColumns'),
       columnWidthFn: sourceCol => wtTable.getColumnWidth(sourceCol),
       overrideFn: wtSettings.getSettingPure('viewportColumnCalculatorOverride'),
-      calculationType,
       inlineStartOffset: this.dataAccessObject.inlineStartParentOffset
     });
   }
@@ -341,46 +333,43 @@ class Viewport {
    *                           If `false` or `undefined`, will perform a full redraw.
    * @returns {boolean} The fastDraw value, possibly modified.
    */
-  createRenderCalculators() {
+  createCalculators() {
     let fastDraw = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     const {
       wtSettings
     } = this;
+    const rowsCalculator = this.createRowsCalculator();
+    const columnsCalculator = this.createColumnsCalculator();
     if (fastDraw && !wtSettings.getSetting('renderAllRows')) {
-      const proposedRowsVisibleCalculator = this.createRowsCalculator(FULLY_VISIBLE_TYPE);
+      const proposedRowsVisibleCalculator = rowsCalculator.getResultsFor('fullyVisible');
       fastDraw = this.areAllProposedVisibleRowsAlreadyRendered(proposedRowsVisibleCalculator);
     }
     if (fastDraw && !wtSettings.getSetting('renderAllColumns')) {
-      const proposedColumnsVisibleCalculator = this.createColumnsCalculator(FULLY_VISIBLE_TYPE);
+      const proposedColumnsVisibleCalculator = columnsCalculator.getResultsFor('fullyVisible');
       fastDraw = this.areAllProposedVisibleColumnsAlreadyRendered(proposedColumnsVisibleCalculator);
     }
     if (!fastDraw) {
-      this.rowsRenderCalculator = this.createRowsCalculator(RENDER_TYPE);
-      this.columnsRenderCalculator = this.createColumnsCalculator(RENDER_TYPE);
+      this.rowsRenderCalculator = rowsCalculator.getResultsFor('rendered');
+      this.columnsRenderCalculator = columnsCalculator.getResultsFor('rendered');
     }
-
-    // delete temporarily to make sure that renderers always use rowsRenderCalculator, not rowsVisibleCalculator
-    this.rowsVisibleCalculator = null;
-    this.columnsVisibleCalculator = null;
+    this.rowsVisibleCalculator = rowsCalculator.getResultsFor('fullyVisible');
+    this.columnsVisibleCalculator = columnsCalculator.getResultsFor('fullyVisible');
+    this.rowsPartiallyVisibleCalculator = rowsCalculator.getResultsFor('partiallyVisible');
+    this.columnsPartiallyVisibleCalculator = columnsCalculator.getResultsFor('partiallyVisible');
     return fastDraw;
   }
 
   /**
-   * Creates rowsVisibleCalculator and columnsVisibleCalculator (after draw, to determine what are
-   * the actually fully visible rows and columns).
+   * Creates rows and columns calculators (after draw, to determine what are
+   * the actually fully visible and partially visible rows and columns).
    */
   createVisibleCalculators() {
-    this.rowsVisibleCalculator = this.createRowsCalculator(FULLY_VISIBLE_TYPE);
-    this.columnsVisibleCalculator = this.createColumnsCalculator(FULLY_VISIBLE_TYPE);
-  }
-
-  /**
-   * Creates rowsPartiallyVisibleCalculator and columnsPartiallyVisibleCalculator (after draw, to determine what are
-   * the actually partially visible rows and columns).
-   */
-  createPartiallyVisibleCalculators() {
-    this.rowsPartiallyVisibleCalculator = this.createRowsCalculator(PARTIALLY_VISIBLE_TYPE);
-    this.columnsPartiallyVisibleCalculator = this.createColumnsCalculator(PARTIALLY_VISIBLE_TYPE);
+    const rowsCalculator = this.createRowsCalculator(['fullyVisible', 'partiallyVisible']);
+    const columnsCalculator = this.createColumnsCalculator(['fullyVisible', 'partiallyVisible']);
+    this.rowsVisibleCalculator = rowsCalculator.getResultsFor('fullyVisible');
+    this.columnsVisibleCalculator = columnsCalculator.getResultsFor('fullyVisible');
+    this.rowsPartiallyVisibleCalculator = rowsCalculator.getResultsFor('partiallyVisible');
+    this.columnsPartiallyVisibleCalculator = columnsCalculator.getResultsFor('partiallyVisible');
   }
 
   /**

package/CHANGELOG.md

@@ -9,6 +9,33 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 <!-- UNVERSIONED -->
 
+## [14.5.0] - 2024-07-24
+
+### Added
+- Added support for other keyboard layouts besides QWERTY (e.g. AZERTY). [#11027](https://github.com/handsontable/handsontable/pull/11027)
+- Added missing "this" typing for the ColumnSummary plugin. [#11036](https://github.com/handsontable/handsontable/pull/11036)
+- Added Undo/Redo logic for the ColumnSorting/ManualColumnSorting plugins. [#11037](https://github.com/handsontable/handsontable/pull/11037)
+- Added new option `headerClassName`, which allows adding custom CSS classes to the column headers. [#11076](https://github.com/handsontable/handsontable/pull/11076)
+
+### Changed
+- Improved the precision of calculating the height and width of columns and rows. [#11049](https://github.com/handsontable/handsontable/pull/11049)
+- Improved the rendering performance. [#11069](https://github.com/handsontable/handsontable/pull/11069)
+
+### Fixed
+- Fixed Context.getShortcuts type.  [#10910](https://github.com/handsontable/handsontable/pull/10910)
+- Improved performance of cell merging. [#10995](https://github.com/handsontable/handsontable/pull/10995)
+- Fixed a problem where clicking and dragging on cells in window-controlled scrolled instances would result in unpredictable behavior. [#10996](https://github.com/handsontable/handsontable/pull/10996)
+- Fixed a bug that prevented column sorting of the checkbox cell types. [#11004](https://github.com/handsontable/handsontable/pull/11004)
+- Fixed merged cells misalignment in overlays. [#11007](https://github.com/handsontable/handsontable/pull/11007)
+- Fixed selection expansion for merged cells. [#11010](https://github.com/handsontable/handsontable/pull/11010)
+- Fixed a problem where the table could go into an endless resize loop when one of the instance's parents was using `dvh` values for sizing, and the table was not given any size itself. [#11021](https://github.com/handsontable/handsontable/pull/11021)
+- Fixed a bug where the `afterSetCellMeta` was unnecessarily triggered after clicking on the comments textarea element. [#11033](https://github.com/handsontable/handsontable/pull/11033)
+- Fixed invalid cell states after data population that was canceled in the `beforeChange` hook. [#11035](https://github.com/handsontable/handsontable/pull/11035)
+- Fixed a problem with the Formulas plugin using wrong indexes when performing autofill.  [#11038](https://github.com/handsontable/handsontable/pull/11038)
+- Fixed a problem where disabling `navigableHeaders` broke keyboard navigation in the first row if the option was previously enabled and used. [#11043](https://github.com/handsontable/handsontable/pull/11043)
+- Fixed a problem where the dropdown menu would not close after tapping on the table cells on mobile browsers. [#11044](https://github.com/handsontable/handsontable/pull/11044)
+- Fixed the header selection with `nestedHeaders` enabled not working on mobile devices. [#11051](https://github.com/handsontable/handsontable/pull/11051)
+
 ## [14.4.0] - 2024-06-11
 
 ### Added

package/base.js

@@ -45,8 +45,8 @@ Handsontable.hooks = _pluginHooks.default.getSingleton();
 Handsontable.CellCoords = _src.CellCoords;
 Handsontable.CellRange = _src.CellRange;
 Handsontable.packageName = 'handsontable';
-Handsontable.buildDate = "26/08/2024 13:21:06";
-Handsontable.version = "0.0.0-next-0306a1a-20240826";
+Handsontable.buildDate = "03/09/2024 06:46:24";
+Handsontable.version = "0.0.0-next-eaf150e-20240903";
 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 = "26/08/2024 13:21:12";
-Handsontable.version = "0.0.0-next-0306a1a-20240826";
+Handsontable.buildDate = "03/09/2024 06:46:29";
+Handsontable.version = "0.0.0-next-eaf150e-20240903";
 Handsontable.languages = {
   dictionaryKeys,
   getLanguageDictionary,

package/core.d.ts

@@ -139,8 +139,7 @@ export default class Core {
   scrollViewportTo(row?: number, column?: number, snapToBottom?: boolean, snapToRight?: boolean, considerHiddenIndexes?: boolean): boolean;
   scrollToFocusedCell(callback?: () => void): void;
   selectAll(includeRowHeaders?: boolean, includeColumnHeaders?: boolean, options?: { focusPosition?: SimpleCellCoords | CellCoords, disableHeadersHighlight?: boolean }): void;
-  selectCell(row: number, column: number, endRow?: number, endColumn?: number, scrollToCell?: boolean, changeListener?: boolean): boolean;
-  selectCellByProp(row: number, prop: string, endRow?: number, endProp?: string, scrollToCell?: boolean): boolean;
+  selectCell(row: number, column: number | string, endRow?: number, endColumn?: number | string, scrollToCell?: boolean, changeListener?: boolean): boolean;
   selectCells(coords: Array<[number, number | string, number, number | string]> | CellRange[], scrollToCell?: boolean, changeListener?: boolean): boolean;
   selectColumns(startColumn: number | string, endColumn?: number | string, focusPosition?: number | SimpleCellCoords | CellCoords): boolean;
   selectRows(startRow: number, endRow?: number, focusPosition?: number | SimpleCellCoords | CellCoords): boolean;

package/core.js

@@ -3501,7 +3501,7 @@ function Core(rootElement, userSettings) {
     let width = instance._getColWidthFromSettings(column);
     width = instance.runHooks('modifyColWidth', width, column);
     if (width === undefined) {
-      width = _src.ViewportColumnsCalculator.DEFAULT_WIDTH;
+      width = _src.DEFAULT_COLUMN_WIDTH;
     }
     return width;
   };

package/core.mjs

@@ -29,7 +29,7 @@ import DataSource from "./dataMap/dataSource.mjs";
 import { spreadsheetColumnLabel } from "./helpers/data.mjs";
 import { IndexMapper } from "./translations/index.mjs";
 import { registerAsRootInstance, hasValidParameter, isRootInstance } from "./utils/rootInstance.mjs";
-import { ViewportColumnsCalculator } from "./3rdparty/walkontable/src/index.mjs";
+import { DEFAULT_COLUMN_WIDTH } from "./3rdparty/walkontable/src/index.mjs";
 import Hooks from "./pluginHooks.mjs";
 import { hasLanguageDictionary, getValidLanguageCode, getTranslatedPhrase } from "./i18n/registry.mjs";
 import { warnUserAboutLanguageRegistration, normalizeLanguageCode } from "./i18n/utils.mjs";
@@ -3496,7 +3496,7 @@ export default function Core(rootElement, userSettings) {
     let width = instance._getColWidthFromSettings(column);
     width = instance.runHooks('modifyColWidth', width, column);
     if (width === undefined) {
-      width = ViewportColumnsCalculator.DEFAULT_WIDTH;
+      width = DEFAULT_COLUMN_WIDTH;
     }
     return width;
   };

package/dataMap/metaManager/metaSchema.js

@@ -391,8 +391,7 @@ var _default = () => {
      * | `true`    | Enable the [`AutoRowSize`](@/api/autoRowSize.md) plugin with the default configuration |
      * | An object | Enable the [`AutoRowSize`](@/api/autoRowSize.md) plugin and modify the plugin options  |
      *
-     * To give Handsontable's [scrollbar](https://handsontable.com/docs/8.0.0/demo-scrolling.html)
-     * a proper size, set the `autoRowSize` option to `true`.
+     * To give Handsontable's scrollbar a proper size, set the `autoRowSize` option to `true`.
      *
      * If you set the `autoRowSize` option to an object, you can set the following [`AutoRowSize`](@/api/autoRowSize.md) plugin options:
      *
@@ -2907,10 +2906,10 @@ var _default = () => {
      * manualRowMove: true,
      *
      * // enable the `ManualRowMove` plugin
-     * // at initialization, move row 0 to 1
-     * // at initialization, move row 1 to 4
-     * // at initialization, move row 2 to 6
-     * manualColumnMove: [1, 4, 6],
+     * // at initialization, move row 1 to 0
+     * // at initialization, move row 4 to 1
+     * // at initialization, move row 6 to 2
+     * manualRowMove: [1, 4, 6],
      * ```
      */
     manualRowMove: undefined,

package/dataMap/metaManager/metaSchema.mjs

@@ -388,8 +388,7 @@ export default (() => {
      * | `true`    | Enable the [`AutoRowSize`](@/api/autoRowSize.md) plugin with the default configuration |
      * | An object | Enable the [`AutoRowSize`](@/api/autoRowSize.md) plugin and modify the plugin options  |
      *
-     * To give Handsontable's [scrollbar](https://handsontable.com/docs/8.0.0/demo-scrolling.html)
-     * a proper size, set the `autoRowSize` option to `true`.
+     * To give Handsontable's scrollbar a proper size, set the `autoRowSize` option to `true`.
      *
      * If you set the `autoRowSize` option to an object, you can set the following [`AutoRowSize`](@/api/autoRowSize.md) plugin options:
      *
@@ -2904,10 +2903,10 @@ export default (() => {
      * manualRowMove: true,
      *
      * // enable the `ManualRowMove` plugin
-     * // at initialization, move row 0 to 1
-     * // at initialization, move row 1 to 4
-     * // at initialization, move row 2 to 6
-     * manualColumnMove: [1, 4, 6],
+     * // at initialization, move row 1 to 0
+     * // at initialization, move row 4 to 1
+     * // at initialization, move row 6 to 2
+     * manualRowMove: [1, 4, 6],
      * ```
      */
     manualRowMove: undefined,

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-0306a1a-20240826
- * Release date: 11/06/2024 (built at 26/08/2024 13:21:16)
+ * Version: 0.0.0-next-eaf150e-20240903
+ * Release date: 30/07/2024 (built at 03/09/2024 06:46:34)
  */
 /**
  * Fix for bootstrap styles
@@ -523,24 +523,9 @@ innerBorderBottom - Property controlled by bottom overlay
   left: 0;
   right: 0;
   bottom: 0;
-  /* Fix for IE9 to spread the ":before" pseudo element to 100% height of the parent element */
-  bottom: -100% \9 ;
   background: #005eff;
 }
 
-/* Fix for IE10 and IE11 to spread the ":before" pseudo element to 100% height of the parent element */
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .handsontable td.area:before,
-  .handsontable td.area-1:before,
-  .handsontable td.area-2:before,
-  .handsontable td.area-3:before,
-  .handsontable td.area-4:before,
-  .handsontable td.area-5:before,
-  .handsontable td.area-6:before,
-  .handsontable td.area-7:before {
-    bottom: -100%;
-  }
-}
 .handsontable td.area:before {
   opacity: 0.1;
 }
@@ -621,6 +606,7 @@ innerBorderBottom - Property controlled by bottom overlay
   -webkit-appearance: menulist-button !important;
   position: absolute;
   width: auto;
+  border: 2px solid #4b89ff;
 }
 
 .htSelectEditor:focus {
@@ -897,12 +883,26 @@ CheckboxRenderer
 
 .handsontable[dir=ltr] div.htRight span[class*=ascending],
 .handsontable[dir=ltr] div.htRight span[class*=descending] {
-  margin-right: 20px;
+  margin-right: 10px;
+  margin-left: -10px;
 }
 
 .handsontable[dir=rtl] div.htLeft span[class*=ascending],
 .handsontable[dir=rtl] div.htLeft span[class*=descending] {
-  margin-left: 20px;
+  margin-left: 10px;
+  margin-right: -10px;
+}
+
+.handsontable[dir=ltr] div.htRight span[class*=ascending]:only-child,
+.handsontable[dir=ltr] div.htRight span[class*=descending]:only-child {
+  margin-right: 15px;
+  margin-left: -15px;
+}
+
+.handsontable[dir=rtl] div.htLeft span[class*=ascending]:only-child,
+.handsontable[dir=rtl] div.htLeft span[class*=descending]:only-child {
+  margin-left: 15px;
+  margin-right: -15px;
 }
 
 .handsontable .columnSorting.sortAction:hover {
@@ -1875,11 +1875,23 @@ textarea.HandsontableCopyPaste {
   opacity: 0.58;
 }
 .handsontable[dir=ltr] div.htRight span[class*=sort-] {
-  margin-right: 20px;
+  margin-right: 15px;
+  margin-left: -15px;
 }
 
 .handsontable[dir=rtl] div.htLeft span[class*=sort-] {
+  margin-left: 15px;
+  margin-right: -15px;
+}
+
+.handsontable[dir=ltr] div.htRight span[class*=sort-]:only-child {
+  margin-right: 20px;
+  margin-left: -20px;
+}
+
+.handsontable[dir=rtl] div.htLeft span[class*=sort-]:only-child {
   margin-left: 20px;
+  margin-right: -20px;
 }
 
 /* Column's number position */

package/dist/handsontable.full.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-0306a1a-20240826
- * Release date: 11/06/2024 (built at 26/08/2024 13:21:16)
+ * Version: 0.0.0-next-eaf150e-20240903
+ * Release date: 30/07/2024 (built at 03/09/2024 06:46:34)
  */
 /**
  * Fix for bootstrap styles
@@ -523,24 +523,9 @@ innerBorderBottom - Property controlled by bottom overlay
   left: 0;
   right: 0;
   bottom: 0;
-  /* Fix for IE9 to spread the ":before" pseudo element to 100% height of the parent element */
-  bottom: -100% \9 ;
   background: #005eff;
 }
 
-/* Fix for IE10 and IE11 to spread the ":before" pseudo element to 100% height of the parent element */
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .handsontable td.area:before,
-  .handsontable td.area-1:before,
-  .handsontable td.area-2:before,
-  .handsontable td.area-3:before,
-  .handsontable td.area-4:before,
-  .handsontable td.area-5:before,
-  .handsontable td.area-6:before,
-  .handsontable td.area-7:before {
-    bottom: -100%;
-  }
-}
 .handsontable td.area:before {
   opacity: 0.1;
 }
@@ -621,6 +606,7 @@ innerBorderBottom - Property controlled by bottom overlay
   -webkit-appearance: menulist-button !important;
   position: absolute;
   width: auto;
+  border: 2px solid #4b89ff;
 }
 
 .htSelectEditor:focus {
@@ -1130,12 +1116,26 @@ CheckboxRenderer
 
 .handsontable[dir=ltr] div.htRight span[class*=ascending],
 .handsontable[dir=ltr] div.htRight span[class*=descending] {
-  margin-right: 20px;
+  margin-right: 10px;
+  margin-left: -10px;
 }
 
 .handsontable[dir=rtl] div.htLeft span[class*=ascending],
 .handsontable[dir=rtl] div.htLeft span[class*=descending] {
-  margin-left: 20px;
+  margin-left: 10px;
+  margin-right: -10px;
+}
+
+.handsontable[dir=ltr] div.htRight span[class*=ascending]:only-child,
+.handsontable[dir=ltr] div.htRight span[class*=descending]:only-child {
+  margin-right: 15px;
+  margin-left: -15px;
+}
+
+.handsontable[dir=rtl] div.htLeft span[class*=ascending]:only-child,
+.handsontable[dir=rtl] div.htLeft span[class*=descending]:only-child {
+  margin-left: 15px;
+  margin-right: -15px;
 }
 
 .handsontable .columnSorting.sortAction:hover {
@@ -2108,11 +2108,23 @@ textarea.HandsontableCopyPaste {
   opacity: 0.58;
 }
 .handsontable[dir=ltr] div.htRight span[class*=sort-] {
-  margin-right: 20px;
+  margin-right: 15px;
+  margin-left: -15px;
 }
 
 .handsontable[dir=rtl] div.htLeft span[class*=sort-] {
+  margin-left: 15px;
+  margin-right: -15px;
+}
+
+.handsontable[dir=ltr] div.htRight span[class*=sort-]:only-child {
+  margin-right: 20px;
+  margin-left: -20px;
+}
+
+.handsontable[dir=rtl] div.htLeft span[class*=sort-]:only-child {
   margin-left: 20px;
+  margin-right: -20px;
 }
 
 /* Column's number position */