handsontable 18.0.0 → 18.1.0-rc1

package/plugins/collapsibleColumns/collapsibleColumns.mjs

@@ -4,15 +4,12 @@ function _check_private_redeclaration(obj, privateCollection) {
     }
 }
 function _class_apply_descriptor_get(receiver, descriptor) {
-    if (descriptor.get) {
-        return descriptor.get.call(receiver);
-    }
+    if (descriptor.get) return descriptor.get.call(receiver);
     return descriptor.value;
 }
 function _class_apply_descriptor_set(receiver, descriptor, value) {
-    if (descriptor.set) {
-        descriptor.set.call(receiver, value);
-    } else {
+    if (descriptor.set) descriptor.set.call(receiver, value);
+    else {
         if (!descriptor.writable) {
             throw new TypeError("attempted to set read only private field");
         }
@@ -20,9 +17,7 @@ function _class_apply_descriptor_set(receiver, descriptor, value) {
     }
 }
 function _class_extract_field_descriptor(receiver, privateMap, action) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to " + action + " private field on non-instance");
-    }
+    if (!privateMap.has(receiver)) throw new TypeError("attempted to " + action + " private field on non-instance");
     return privateMap.get(receiver);
 }
 function _class_private_field_get(receiver, privateMap) {
@@ -39,9 +34,7 @@ function _class_private_field_set(receiver, privateMap, value) {
     return value;
 }
 function _class_private_method_get(receiver, privateSet, fn) {
-    if (!privateSet.has(receiver)) {
-        throw new TypeError("attempted to get private field on non-instance");
-    }
+    if (!privateSet.has(receiver)) throw new TypeError("attempted to get private field on non-instance");
     return fn;
 }
 function _class_private_method_init(obj, privateSet) {
@@ -116,6 +109,34 @@ var /**
    * insertion or removal. The tree (with `isCollapsed` restored) is the source of truth, so a full
    * refresh keeps the hidden set correct without tracking shifted indexes manually.
    */ _onAfterColumnStructureChange = /*#__PURE__*/ new WeakMap(), /**
+   * Expands, before a column move runs, any collapsed group the move would split - whether by taking
+   * some (but not all) of the group's columns out, or by dropping an unrelated column into the middle
+   * of its span. Both leave the group's columns non-adjacent, which drops its collapse indicator while
+   * the columns stay hidden, with no control left to expand them. Expanding while the group is still
+   * contiguous releases its columns through the normal expand path; hiding does not change visual
+   * indexes, so the pending move's coordinates stay valid. A move that keeps a group's columns
+   * together (including moving the whole group) leaves it collapsed.
+   *
+   * @param {number[]} movedColumns Visual indexes of the columns being moved.
+   * @param {number} finalIndex The visual index the moved columns will start at after the move.
+   * @param {number|undefined} dropIndex The drop visual index (unused).
+   * @param {boolean} movePossible Whether the move can be performed.
+   */ _onBeforeColumnMove = /*#__PURE__*/ new WeakMap(), /**
+   * Projects the visual column order a pending move will produce, expressed in the current visual
+   * indexes. Mirrors the move itself: remove the moved columns, then re-insert them at `finalIndex`.
+   *
+   * @param {number[]} movedColumns Visual indexes of the columns being moved.
+   * @param {number} finalIndex The visual index the moved columns will start at after the move.
+   * @returns {number[]} The current visual indexes in their post-move order.
+   */ _projectColumnOrderAfterMove = /*#__PURE__*/ new WeakSet(), /**
+   * Reports whether a group's columns stop being adjacent in the projected post-move order. The group
+   * is split when its members no longer occupy one contiguous run of positions.
+   *
+   * @param {number} columnIndex The group's leftmost visual column index.
+   * @param {number} origColspan The group's column span.
+   * @param {Map<number, number>} positionByColumn Maps a current visual index to its post-move position.
+   * @returns {boolean} `true` when the move would split the group.
+   */ _isGroupSplitByOrder = /*#__PURE__*/ new WeakSet(), /**
    * Adds the indicator to the headers.
    *
    * @param {number} column Column index.
@@ -151,6 +172,10 @@ var /**
  * To limit this functionality to a smaller group of headers, define the `collapsibleColumns` property as an array
  * of objects, as in the example below.
  *
+ * Read more:
+ * - [Guides: Column groups](@/guides/columns/column-groups/column-groups.md#collapsible-headers)
+ * - [Configuration options: `collapsibleColumns`](@/api/options.md#collapsiblecolumns)
+ *
  * @example
  * ::: only-for javascript
  * ```js
@@ -289,16 +314,15 @@ var /**
         this.addHook('afterLoadData', _class_private_field_get(this, _onAfterLoadData));
         this.addHook('afterGetColHeader', _class_private_field_get(this, _onAfterGetColHeader));
         this.addHook('beforeOnCellMouseDown', _class_private_field_get(this, _onBeforeOnCellMouseDown));
-        // NestedHeaders (priority 280) rebuilds the header tree on column insert/remove before this
+        // NestedHeaders (priority 280) rebuilds the header tree on column insert/remove/move before this
         // plugin (priority 290) runs, so refreshing here re-derives the `visibleWhen` hidden set against
-        // the freshly rebuilt tree (with `isCollapsed` already restored). There is intentionally no
-        // `afterColumnMove` refresh: a `manualColumnMove` does not rebuild the tree (its `columnIndex`
-        // values are structural), and the collapsed-columns map already strands its entries on a move the
-        // same way - so collapsed groups (legacy and `visibleWhen` alike) do not survive `manualColumnMove`.
-        // That is a pre-existing collapsible-columns limitation; refreshing only `visibleWhen` here would
-        // diverge from legacy collapse without fixing it.
+        // the freshly rebuilt tree (with `isCollapsed` re-attached by group identity). On a move a group
+        // that stayed contiguous keeps its collapse; a split group has its `isCollapsed` dropped, so the
+        // re-derived `visibleWhen` set excludes it and these columns are released.
         this.addHook('afterCreateCol', _class_private_field_get(this, _onAfterColumnStructureChange));
         this.addHook('afterRemoveCol', _class_private_field_get(this, _onAfterColumnStructureChange));
+        this.addHook('beforeColumnMove', _class_private_field_get(this, _onBeforeColumnMove));
+        this.addHook('afterColumnMove', _class_private_field_get(this, _onAfterColumnStructureChange));
         this.registerShortcuts();
         super.enablePlugin();
         // @TODO: Workaround for broken plugin initialization abstraction (#6806).
@@ -612,7 +636,7 @@ var /**
         super.destroy();
     }
     constructor(...args){
-        super(...args), _class_private_method_init(this, _checkIsActionPossible), _class_private_method_init(this, _adjustSelectionAfterHide), _class_private_method_init(this, _refreshVisibleWhenColumns), _class_private_field_init(this, _collapsedColumnsMap, {
+        super(...args), _class_private_method_init(this, _checkIsActionPossible), _class_private_method_init(this, _adjustSelectionAfterHide), _class_private_method_init(this, _refreshVisibleWhenColumns), _class_private_method_init(this, _projectColumnOrderAfterMove), _class_private_method_init(this, _isGroupSplitByOrder), _class_private_field_init(this, _collapsedColumnsMap, {
             writable: true,
             value: void 0
         }), _class_private_field_init(this, _visibleWhenMap, {
@@ -621,6 +645,9 @@ var /**
         }), _class_private_field_init(this, _onAfterColumnStructureChange, {
             writable: true,
             value: void 0
+        }), _class_private_field_init(this, _onBeforeColumnMove, {
+            writable: true,
+            value: void 0
         }), _class_private_field_init(this, _onAfterGetColHeader, {
             writable: true,
             value: void 0
@@ -645,6 +672,29 @@ var /**
    * @type {StateManager}
    */ this.headerStateManager = null, _class_private_field_set(this, _collapsedColumnsMap, null), _class_private_field_set(this, _visibleWhenMap, null), _class_private_field_set(this, _onAfterColumnStructureChange, ()=>{
             _class_private_method_get(this, _refreshVisibleWhenColumns, refreshVisibleWhenColumns).call(this);
+        }), _class_private_field_set(this, _onBeforeColumnMove, (movedColumns, finalIndex, dropIndex, movePossible)=>{
+            const stateManager = this.headerStateManager;
+            if (movePossible === false || !stateManager) {
+                return;
+            }
+            const projectedOrder = _class_private_method_get(this, _projectColumnOrderAfterMove, projectColumnOrderAfterMove).call(this, movedColumns, finalIndex);
+            const positionByColumn = new Map(projectedOrder.map((visualColumn, position)=>[
+                    visualColumn,
+                    position
+                ]));
+            stateManager.getCollapsedGroups().forEach(({ headerLevel, columnIndex, origColspan })=>{
+                if (_class_private_method_get(this, _isGroupSplitByOrder, isGroupSplitByOrder).call(this, columnIndex, origColspan, positionByColumn)) {
+                    const row = stateManager.levelToRowCoords(headerLevel);
+                    if (row !== null) {
+                        this.toggleCollapsibleSection([
+                            {
+                                row,
+                                col: columnIndex
+                            }
+                        ], 'expand');
+                    }
+                }
+            });
         }), _class_private_field_set(this, _onAfterGetColHeader, (column, TH, headerLevel)=>{
             const headerSettings = this.headerStateManager?.getHeaderSettings(headerLevel, column);
             const { collapsible, origColspan, isCollapsed } = headerSettings ?? {};
@@ -766,3 +816,31 @@ function refreshVisibleWhenColumns(visualColumnsToHide = this.headerStateManager
         });
     }, true);
 }
+function projectColumnOrderAfterMove(movedColumns, finalIndex) {
+    const movedColumnsSet = new Set(movedColumns);
+    const remaining = [];
+    for(let column = 0, columnsCount = this.hot.countCols(); column < columnsCount; column++){
+        if (!movedColumnsSet.has(column)) {
+            remaining.push(column);
+        }
+    }
+    return [
+        ...remaining.slice(0, finalIndex),
+        ...movedColumns,
+        ...remaining.slice(finalIndex)
+    ];
+}
+function isGroupSplitByOrder(columnIndex, origColspan, positionByColumn) {
+    let minPosition = Infinity;
+    let maxPosition = -Infinity;
+    let memberCount = 0;
+    for(let column = columnIndex; column < columnIndex + origColspan; column++){
+        const position = positionByColumn.get(column);
+        if (position !== undefined) {
+            minPosition = Math.min(minPosition, position);
+            maxPosition = Math.max(maxPosition, position);
+            memberCount += 1;
+        }
+    }
+    return memberCount > 0 && maxPosition - minPosition !== memberCount - 1;
+}

package/plugins/columnSorting/columnSorting.d.ts

@@ -1,5 +1,5 @@
 import { BasePlugin } from '../base';
-import { IndexesSequence, PhysicalIndexToValueMap as IndexToValueMap } from '../../translations';
+import type { IndexesSequence, PhysicalIndexToValueMap as IndexToValueMap } from '../../translations';
 import { ColumnStatesManager } from './columnStatesManager';
 export interface ColumnSortingConfig {
     column: number;
@@ -9,6 +9,20 @@ export declare const PLUGIN_KEY = "columnSorting";
 export declare const PLUGIN_PRIORITY = 50;
 export declare const APPEND_COLUMN_CONFIG_STRATEGY = "append";
 export declare const REPLACE_COLUMN_CONFIG_STRATEGY = "replace";
+/**
+ * A press on a sortable column header, waiting to be resolved on mouse up.
+ */
+export interface HeaderSortPress {
+    column: number;
+    isCtrlPressed: boolean;
+    /**
+     * Settles once the cell that was being edited at press time has finished validating, or `null`
+     * when nothing was being edited.
+     */
+    validation: Promise<void> | null;
+    /** Set when ManualColumnMove ran its move before this press was resolved. */
+    consumedByMove: boolean;
+}
 export interface SortConfig {
     column: number;
     sortOrder: string;
@@ -47,7 +61,7 @@ export interface SortConfig {
  * }
  *
  * // as an object passed to the `column` property, allows specifying a custom options for the desired column.
- * // please take a look at documentation of `column` property: https://handsontable.com/docs/Options.html#columns
+ * // see the `columns` option documentation: @/api/options.md#columns
  * columns: [{
  *   columnSorting: {
  *     indicator: false, // disable indicator for the first column,
@@ -308,6 +322,11 @@ export declare class ColumnSorting extends BasePlugin {
     /**
      * Callback for the `onAfterOnCellMouseDown` hook.
      *
+     * Queues the sort rather than running it. The header is also the surface ManualColumnMove
+     * drags a column by, so which action the user meant is only known once the button is
+     * released: a press that stays put is a click to sort, a press that travels is a drag.
+     * Selection changes stay here so the header still reacts the moment it is pressed.
+     *
      * @private
      * @param {Event} event Event which are provided by hook.
      * @param {CellCoords} coords Visual coords of the selected cell.
@@ -316,6 +335,16 @@ export declare class ColumnSorting extends BasePlugin {
         row: number;
         col: number;
     }): void;
+    /**
+     * Applies the sort queued by a header press.
+     *
+     * Kept separate from the press handler so `MultiColumnSorting` can choose a different sort
+     * configuration for the same gesture without repeating the click-versus-drag handling.
+     *
+     * @private
+     * @param {object} press The press that queued this sort.
+     */
+    applyHeaderClickSort(press: HeaderSortPress): void;
     /**
      * Destroys the plugin instance.
      */

package/plugins/columnSorting/columnSorting.js

@@ -31,7 +31,6 @@ const _object = require("../../helpers/object");
 const _function = require("../../helpers/function");
 const _array = require("../../helpers/array");
 const _base = require("../base");
-const _translations = require("../../translations");
 const _hooks = require("../../core/hooks");
 const _columnStatesManager = require("./columnStatesManager");
 const _contexts = require("../../shortcuts/contexts");
@@ -46,15 +45,12 @@ function _check_private_redeclaration(obj, privateCollection) {
     }
 }
 function _class_apply_descriptor_get(receiver, descriptor) {
-    if (descriptor.get) {
-        return descriptor.get.call(receiver);
-    }
+    if (descriptor.get) return descriptor.get.call(receiver);
     return descriptor.value;
 }
 function _class_apply_descriptor_set(receiver, descriptor, value) {
-    if (descriptor.set) {
-        descriptor.set.call(receiver, value);
-    } else {
+    if (descriptor.set) descriptor.set.call(receiver, value);
+    else {
         if (!descriptor.writable) {
             throw new TypeError("attempted to set read only private field");
         }
@@ -62,9 +58,7 @@ function _class_apply_descriptor_set(receiver, descriptor, value) {
     }
 }
 function _class_extract_field_descriptor(receiver, privateMap, action) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to " + action + " private field on non-instance");
-    }
+    if (!privateMap.has(receiver)) throw new TypeError("attempted to " + action + " private field on non-instance");
     return privateMap.get(receiver);
 }
 function _class_private_field_get(receiver, privateMap) {
@@ -80,11 +74,25 @@ function _class_private_field_set(receiver, privateMap, value) {
     _class_apply_descriptor_set(receiver, descriptor, value);
     return value;
 }
+function _class_private_method_get(receiver, privateSet, fn) {
+    if (!privateSet.has(receiver)) throw new TypeError("attempted to get private field on non-instance");
+    return fn;
+}
+function _class_private_method_init(obj, privateSet) {
+    _check_private_redeclaration(obj, privateSet);
+    privateSet.add(obj);
+}
 const PLUGIN_KEY = 'columnSorting';
 const PLUGIN_PRIORITY = 50;
 const APPEND_COLUMN_CONFIG_STRATEGY = 'append';
 const REPLACE_COLUMN_CONFIG_STRATEGY = 'replace';
 const SHORTCUTS_GROUP = PLUGIN_KEY;
+/**
+ * Marks the header container of a column that is showing a sort indicator. The indicator is
+ * positioned against that container, so the room it needs is reserved there rather than as padding
+ * on the label - padding on the label would enlarge the area that sorts on click, which is exactly
+ * what it must not do. A class rather than a `:has()` selector, which is banned in this package.
+ */ const CONTAINER_WITH_INDICATOR_CLASS = 'has-sort-indicator';
 (0, _sortService.registerRootComparator)(PLUGIN_KEY, _rootComparator.rootComparator);
 _hooks.Hooks.getSingleton().register('beforeColumnSort');
 _hooks.Hooks.getSingleton().register('afterColumnSort');
@@ -94,6 +102,8 @@ _hooks.Hooks.getSingleton().register('afterColumnSort');
  * the other should remain disabled even if it's set to `true`.
  */ const pluginConflictsState = new WeakMap();
 var /**
+   * Sort queued by a header press, applied on mouse up unless the press became a column drag.
+   */ _pendingHeaderSort = /*#__PURE__*/ new WeakMap(), /**
    * Sort by predefined plugin configuration.
    */ _loadOrSortBySettings = /*#__PURE__*/ new WeakMap(), /**
    * Callback for the `onAfterGetColHeader` hook. Adds column sorting CSS classes.
@@ -101,6 +111,15 @@ var /**
    * @param {number} column Visual column index.
    * @param {Element} TH TH HTML element.
    */ _onAfterGetColHeader = /*#__PURE__*/ new WeakMap(), /**
+   * Reserves room for the sort indicator on the header container, matching the state the label
+   * was just given.
+   *
+   * Called from the header render paths, not from `updateHeaderClasses`, so it runs after any
+   * subclass override has finished adding its classes. `TableView` rebuilds the container's class
+   * list on every render, so this has to run per render.
+   *
+   * @param {HTMLElement} headerSpanElement The header label element.
+   */ _syncIndicatorReserve = /*#__PURE__*/ new WeakSet(), /**
    * Callback for the `afterLoadData` hook.
    *
    * @param {boolean} initialLoad Flag that determines whether the data has been loaded during the initialization.
@@ -112,7 +131,17 @@ var /**
    * @param {HTMLElement} TD The cell element.
    * @param {object} controller An object with properties `row`, `column` and `cell`. Each property contains
    *                            a boolean value that allows or disallows changing the selection for that particular area.
-   */ _onBeforeOnCellMouseDown = /*#__PURE__*/ new WeakMap();
+   */ _onBeforeOnCellMouseDown = /*#__PURE__*/ new WeakMap(), /**
+   * Resolves a header press on release: sorts, unless ManualColumnMove turned the press into a
+   * drag.
+   *
+   * Safe to call more than once for the same gesture - the queued press is taken first, so
+   * whichever release signal arrives first wins and the rest are no-ops.
+   */ _resolvePendingSort = /*#__PURE__*/ new WeakMap(), /**
+   * Marks a queued press as spent once ManualColumnMove has moved the column.
+   */ _onAfterColumnMove = /*#__PURE__*/ new WeakMap(), /**
+   * Whether ManualColumnMove is mid-drag. False when that plugin is absent or disabled.
+   */ _isColumnBeingDragged = /*#__PURE__*/ new WeakSet();
 class ColumnSorting extends _base.BasePlugin {
     /**
    * Returns the plugin key used to identify this plugin in Handsontable settings.
@@ -147,17 +176,24 @@ class ColumnSorting extends _base.BasePlugin {
         }
         pluginConflictsState.set(this.hot, this.pluginKey);
         this.columnStatesManager = new _columnStatesManager.ColumnStatesManager(this.hot, `${this.pluginKey}.sortingStates`);
-        this.columnMetaCache = new _translations.PhysicalIndexToValueMap((physicalIndex)=>{
+        this.columnMetaCache = this.hot.columnIndexMapper.createAndRegisterIndexMap(`${this.pluginKey}.columnMeta`, 'physicalIndexToValue', (physicalIndex)=>{
             let visualIndex = this.hot.toVisualColumn(physicalIndex);
             if (visualIndex === null) {
                 visualIndex = physicalIndex;
             }
             return this.getMergedPluginSettings(visualIndex);
         });
-        this.hot.columnIndexMapper.registerMap(`${this.pluginKey}.columnMeta`, this.columnMetaCache);
         this.addHook('afterGetColHeader', _class_private_field_get(this, _onAfterGetColHeader));
         this.addHook('beforeOnCellMouseDown', _class_private_field_get(this, _onBeforeOnCellMouseDown));
         this.addHook('afterOnCellMouseDown', (event, target)=>this.onAfterOnCellMouseDown(event, target));
+        // Primary release signal. On touch devices Walkontable calls its `onMouseUp` directly from
+        // `touchend` instead of dispatching a DOM `mouseup`, so a document listener alone would never
+        // fire and tapping a header would stop sorting.
+        this.addHook('afterOnCellMouseUp', _class_private_field_get(this, _resolvePendingSort));
+        // Fallback for a release that lands outside any cell - that is the drag case, and the queued
+        // sort still has to be cleared rather than left pending for the next release.
+        this.eventManager.addEventListener(this.hot.rootDocument.documentElement, 'mouseup', ()=>_class_private_field_get(this, _resolvePendingSort).call(this));
+        this.addHook('afterColumnMove', _class_private_field_get(this, _onAfterColumnMove));
         this.addHook('afterInit', _class_private_field_get(this, _loadOrSortBySettings));
         this.addHook('afterLoadData', _class_private_field_get(this, _onAfterLoadData));
         this.addHook('afterDataProviderFetch', _class_private_field_get(this, _onAfterDataProviderFetch), -1);
@@ -177,6 +213,7 @@ class ColumnSorting extends _base.BasePlugin {
                 return;
             }
             this.updateHeaderClasses(headerSpanElement);
+            _class_private_method_get(this, _syncIndicatorReserve, syncIndicatorReserve).call(this, headerSpanElement);
         };
         pluginConflictsState.delete(this.hot);
         // Changing header width and removing indicator.
@@ -195,6 +232,7 @@ class ColumnSorting extends _base.BasePlugin {
         this.columnStatesManager?.destroy();
         this.columnMetaCache = null;
         this.columnStatesManager = null;
+        _class_private_field_set(this, _pendingHeaderSort, null);
         this.unregisterShortcuts();
         super.disablePlugin();
     }
@@ -263,7 +301,7 @@ class ColumnSorting extends _base.BasePlugin {
             return;
         }
         if (currentSortConfig.length === 0 && this.indexesSequenceCache === null) {
-            this.indexesSequenceCache = this.hot.rowIndexMapper.registerMap(this.pluginKey, new _translations.IndexesSequence());
+            this.indexesSequenceCache = this.hot.rowIndexMapper.createAndRegisterIndexMap(this.pluginKey, 'indexesSequence');
             this.indexesSequenceCache.setValues(this.hot.rowIndexMapper.getIndexesSequence());
         }
         if (sortPossible) {
@@ -452,7 +490,7 @@ class ColumnSorting extends _base.BasePlugin {
    */ getMergedPluginSettings(column) {
         const pluginMainSettings = this.hot.getSettings()[this.pluginKey];
         const storedColumnProperties = this.columnStatesManager?.getAllColumnsProperties() ?? {};
-        const cellMeta = this.hot.getCellMeta(0, column);
+        const cellMeta = this.hot.getCellMetaTransient(0, column);
         const columnMeta = Object.getPrototypeOf(cellMeta);
         if (Array.isArray(columnMeta.columns)) {
             return Object.assign(storedColumnProperties, pluginMainSettings, this.getPluginColumnConfig(columnMeta.columns[column]));
@@ -471,7 +509,7 @@ class ColumnSorting extends _base.BasePlugin {
    */ // TODO: Workaround. Inheriting of non-primitive cell meta values doesn't work. Instead of getting properties from column meta we call this function.
     // TODO: Remove test named: "should not break the dataset when inserted new row" (#5431).
     getFirstCellSettings(column) {
-        const cellMeta = this.hot.getCellMeta(0, column);
+        const cellMeta = this.hot.getCellMetaTransient(0, column);
         const cellMetaCopy = Object.create(cellMeta);
         cellMetaCopy[this.pluginKey] = this.columnMetaCache?.getValueAtIndex(this.hot.toPhysicalColumn(column));
         return cellMetaCopy;
@@ -597,6 +635,11 @@ class ColumnSorting extends _base.BasePlugin {
     /**
    * Callback for the `onAfterOnCellMouseDown` hook.
    *
+   * Queues the sort rather than running it. The header is also the surface ManualColumnMove
+   * drags a column by, so which action the user meant is only known once the button is
+   * released: a press that stays put is a click to sort, a press that travels is a drag.
+   * Selection changes stay here so the header still reacts the moment it is pressed.
+   *
    * @private
    * @param {Event} event Event which are provided by hook.
    * @param {CellCoords} coords Visual coords of the selected cell.
@@ -604,33 +647,56 @@ class ColumnSorting extends _base.BasePlugin {
         if ((0, _utils.wasHeaderClickedProperly)(coords.row, coords.col, event) === false) {
             return;
         }
-        if (this.wasClickableHeaderClicked(event, coords.col)) {
-            if (this.hot.getShortcutManager().isCtrlPressed()) {
-                this.hot.deselectCell();
-                this.hot.selectColumns(coords.col);
-            }
-            const activeEditor = this.hot.getActiveEditor();
-            const nextConfig = this.getColumnNextConfig(coords.col);
-            if (activeEditor?.isOpened() && this.hot.getCellValidator(activeEditor.row, activeEditor.col)) {
-                // Postpone sorting until the cell's value is validated and saved.
-                this.hot.addHookOnce('postAfterValidate', ()=>{
-                    this.sort(nextConfig);
-                });
-            } else {
-                this.sort(nextConfig);
-            }
+        if (this.wasClickableHeaderClicked(event, coords.col) === false) {
+            return;
         }
+        const isCtrlPressed = this.hot.getShortcutManager().isCtrlPressed();
+        if (isCtrlPressed) {
+            this.hot.deselectCell();
+            this.hot.selectColumns(coords.col);
+        }
+        const activeEditor = this.hot.getActiveEditor();
+        const awaitsValidation = !!(activeEditor?.isOpened() && this.hot.getCellValidator(activeEditor.row, activeEditor.col));
+        _class_private_field_set(this, _pendingHeaderSort, {
+            column: coords.col,
+            isCtrlPressed,
+            // Subscribed on press, not on release: selecting the column closes the editor and its
+            // validation runs in a microtask, so it is already over before mouse up. Reading
+            // `awaitsValidation` on release is wrong too - by then the new selection has opened an
+            // editor on the highlighted cell.
+            validation: awaitsValidation ? new Promise((resolve)=>{
+                this.hot.addHookOnce('postAfterValidate', ()=>resolve());
+            }) : null,
+            consumedByMove: false
+        });
+    }
+    /**
+   * Applies the sort queued by a header press.
+   *
+   * Kept separate from the press handler so `MultiColumnSorting` can choose a different sort
+   * configuration for the same gesture without repeating the click-versus-drag handling.
+   *
+   * @private
+   * @param {object} press The press that queued this sort.
+   */ applyHeaderClickSort(press) {
+        this.sort(this.getColumnNextConfig(press.column));
     }
     /**
    * Destroys the plugin instance.
    */ destroy() {
+        // `BasePlugin.destroy` nulls enumerable own properties, which cannot reach a `#private`
+        // field, so drop the queued press here.
+        _class_private_field_set(this, _pendingHeaderSort, null);
         // TODO: Probably not supported yet by ESLint: https://github.com/eslint/eslint/issues/11045
         // eslint-disable-next-line no-unused-expressions
         this.columnStatesManager?.destroy();
         super.destroy();
     }
     constructor(...args){
-        super(...args), _class_private_field_init(this, _loadOrSortBySettings, {
+        super(...args), _class_private_method_init(this, _syncIndicatorReserve), _class_private_method_init(this, _isColumnBeingDragged), _class_private_field_init(this, _pendingHeaderSort, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _loadOrSortBySettings, {
             writable: true,
             value: void 0
         }), _class_private_field_init(this, _onAfterGetColHeader, {
@@ -650,6 +716,12 @@ class ColumnSorting extends _base.BasePlugin {
         }), _class_private_field_init(this, _onBeforeOnCellMouseDown, {
             writable: true,
             value: void 0
+        }), _class_private_field_init(this, _resolvePendingSort, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onAfterColumnMove, {
+            writable: true,
+            value: void 0
         }), /**
    * Instance of column state manager.
    *
@@ -660,7 +732,7 @@ class ColumnSorting extends _base.BasePlugin {
    *
    * @private
    * @type {null|PhysicalIndexToValueMap}
-   */ this.columnMetaCache = null, /**
+   */ this.columnMetaCache = null, _class_private_field_set(this, _pendingHeaderSort, null), /**
    * Main settings key designed for the plugin.
    *
    * @private
@@ -683,6 +755,7 @@ class ColumnSorting extends _base.BasePlugin {
             const showSortIndicator = pluginSettingsForColumn.indicator;
             const headerActionEnabled = pluginSettingsForColumn.headerAction;
             this.updateHeaderClasses(headerSpanElement, this.columnStatesManager ?? undefined, column, showSortIndicator, headerActionEnabled);
+            _class_private_method_get(this, _syncIndicatorReserve, syncIndicatorReserve).call(this, headerSpanElement);
             if (this.hot.getSettings().ariaTags) {
                 const currentSortState = this.columnStatesManager?.getSortOrderOfColumn(column);
                 (0, _element.setAttribute)(TH, ...(0, _a11y.A11Y_SORT)(currentSortState ? `${currentSortState}ending` : 'none'));
@@ -697,12 +770,59 @@ class ColumnSorting extends _base.BasePlugin {
         }), _class_private_field_set(this, _onAfterDataProviderFetch, (result)=>{
             this.setSortConfig(result?.columnSortConfig ?? []);
         }), _class_private_field_set(this, _onBeforeOnCellMouseDown, (event, coords, TD, controller)=>{
+            // Drop any press whose release never arrived - e.g. the window lost focus while the button
+            // was held. Without this a stale press would resolve on the next unrelated release and sort
+            // a column out of nowhere.
+            _class_private_field_set(this, _pendingHeaderSort, null);
             if ((0, _utils.wasHeaderClickedProperly)(coords.row, coords.col, event) === false) {
                 return;
             }
             if (this.wasClickableHeaderClicked(event, coords.col) && this.hot.getShortcutManager().isCtrlPressed()) {
                 controller.column = true;
             }
+        }), _class_private_field_set(this, _resolvePendingSort, ()=>{
+            const pending = _class_private_field_get(this, _pendingHeaderSort);
+            if (pending === null) {
+                return;
+            }
+            _class_private_field_set(this, _pendingHeaderSort, null);
+            // Two signals, because both plugins handle the same `mouseup` and the listener order is not
+            // fixed - re-enabling `columnSorting` after `manualColumnMove` appends this plugin's listener
+            // last. Running first, the drag is still in progress; running second, the move has already
+            // fired. Either one cancels the sort.
+            if (pending.consumedByMove || _class_private_method_get(this, _isColumnBeingDragged, isColumnBeingDragged).call(this)) {
+                return;
+            }
+            // A cell that was mid-edit must finish validating before the rows move under it. Waited on
+            // here, not in `applyHeaderClickSort`, so subclasses that override that seam still get it.
+            if (pending.validation === null) {
+                this.applyHeaderClickSort(pending);
+                return;
+            }
+            void pending.validation.then(()=>this.applyHeaderClickSort(pending));
+        }), _class_private_field_set(this, _onAfterColumnMove, ()=>{
+            if (_class_private_field_get(this, _pendingHeaderSort) !== null) {
+                _class_private_field_get(this, _pendingHeaderSort).consumedByMove = true;
+            }
         });
     }
 }
+function syncIndicatorReserve(headerSpanElement) {
+    const container = headerSpanElement.parentElement;
+    if (container === null) {
+        return;
+    }
+    // `sortAction` is required: the CSS that pulls the indicator out of the flex row is keyed on
+    // it. With `headerAction: false` the label shows an indicator but keeps its full width, so
+    // reserving would just push it inwards.
+    const showsIndicator = (0, _element.hasClass)(headerSpanElement, _domHelpers.HEADER_ACTION_CLASS) && ((0, _element.hasClass)(headerSpanElement, _domHelpers.HEADER_CLASS_ASC_SORT) || (0, _element.hasClass)(headerSpanElement, _domHelpers.HEADER_CLASS_DESC_SORT));
+    if (showsIndicator) {
+        (0, _element.addClass)(container, CONTAINER_WITH_INDICATOR_CLASS);
+    } else {
+        (0, _element.removeClass)(container, CONTAINER_WITH_INDICATOR_CLASS);
+    }
+}
+function isColumnBeingDragged() {
+    const manualColumnMove = this.hot.getPlugin('manualColumnMove');
+    return manualColumnMove?.isDragging() === true;
+}