handsontable 18.0.0 → 18.1.0-rc7

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");
@@ -80,11 +79,27 @@ 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 +109,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 +118,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 +138,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 +183,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 +220,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 +239,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 +308,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 +497,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 +516,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 +642,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 +654,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 +723,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 +739,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 +762,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 +777,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;
+}

package/plugins/columnSorting/columnSorting.mjs

@@ -38,18 +38,27 @@ 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);
+}
 import { addClass, eventTargetEl, hasClass, isBottomMostColumnHeader, removeClass, setAttribute } from '../../helpers/dom/element.mjs';
 import { isUndefined, isDefined } from '../../helpers/mixed.mjs';
 import { isObject, isPlainObject } from '../../helpers/object.mjs';
 import { isFunction } from '../../helpers/function.mjs';
 import { arrayMap } from '../../helpers/array.mjs';
 import { BasePlugin } from '../base/index.mjs';
-import { IndexesSequence, PhysicalIndexToValueMap as IndexToValueMap } from '../../translations/index.mjs';
 import { Hooks } from '../../core/hooks/index.mjs';
 import { ColumnStatesManager } from './columnStatesManager.mjs';
 import { EDITOR_EDIT_GROUP as SHORTCUTS_GROUP_EDITOR } from '../../shortcuts/contexts/index.mjs';
 import { HEADER_SPAN_CLASS, getNextSortOrder, areValidSortStates, getHeaderSpanElement, isFirstLevelColumnHeader, wasHeaderClickedProperly, warnAboutPluginsConflict } from './utils.mjs';
-import { getClassesToRemove, getClassesToAdd } from './domHelpers.mjs';
+import { HEADER_ACTION_CLASS, HEADER_CLASS_ASC_SORT, HEADER_CLASS_DESC_SORT, getClassesToRemove, getClassesToAdd } from './domHelpers.mjs';
 import { rootComparator } from './rootComparator.mjs';
 import { registerRootComparator, sort } from './sortService/index.mjs';
 import { A11Y_SORT } from '../../helpers/a11y.mjs';
@@ -58,6 +67,12 @@ export const PLUGIN_PRIORITY = 50;
 export const APPEND_COLUMN_CONFIG_STRATEGY = 'append';
 export 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';
 registerRootComparator(PLUGIN_KEY, rootComparator);
 Hooks.getSingleton().register('beforeColumnSort');
 Hooks.getSingleton().register('afterColumnSort');
@@ -67,6 +82,8 @@ 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.
@@ -74,6 +91,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.
@@ -85,7 +111,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();
 // DIFF - MultiColumnSorting & ColumnSorting: changed configuration documentation.
 /**
  * @plugin ColumnSorting
@@ -121,7 +157,7 @@ var /**
  * }
  *
  * // 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,
@@ -169,17 +205,24 @@ var /**
         }
         pluginConflictsState.set(this.hot, this.pluginKey);
         this.columnStatesManager = new ColumnStatesManager(this.hot, `${this.pluginKey}.sortingStates`);
-        this.columnMetaCache = new IndexToValueMap((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);
@@ -199,6 +242,7 @@ var /**
                 return;
             }
             this.updateHeaderClasses(headerSpanElement);
+            _class_private_method_get(this, _syncIndicatorReserve, syncIndicatorReserve).call(this, headerSpanElement);
         };
         pluginConflictsState.delete(this.hot);
         // Changing header width and removing indicator.
@@ -217,6 +261,7 @@ var /**
         this.columnStatesManager?.destroy();
         this.columnMetaCache = null;
         this.columnStatesManager = null;
+        _class_private_field_set(this, _pendingHeaderSort, null);
         this.unregisterShortcuts();
         super.disablePlugin();
     }
@@ -285,7 +330,7 @@ var /**
             return;
         }
         if (currentSortConfig.length === 0 && this.indexesSequenceCache === null) {
-            this.indexesSequenceCache = this.hot.rowIndexMapper.registerMap(this.pluginKey, new IndexesSequence());
+            this.indexesSequenceCache = this.hot.rowIndexMapper.createAndRegisterIndexMap(this.pluginKey, 'indexesSequence');
             this.indexesSequenceCache.setValues(this.hot.rowIndexMapper.getIndexesSequence());
         }
         if (sortPossible) {
@@ -474,7 +519,7 @@ var /**
    */ 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]));
@@ -493,7 +538,7 @@ var /**
    */ // 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;
@@ -619,6 +664,11 @@ var /**
     /**
    * 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.
@@ -626,33 +676,56 @@ var /**
         if (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, {
@@ -672,6 +745,12 @@ var /**
         }), _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.
    *
@@ -682,7 +761,7 @@ var /**
    *
    * @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
@@ -705,6 +784,7 @@ var /**
             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);
                 setAttribute(TH, ...A11Y_SORT(currentSortState ? `${currentSortState}ending` : 'none'));
@@ -719,12 +799,59 @@ var /**
         }), _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 (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 = hasClass(headerSpanElement, HEADER_ACTION_CLASS) && (hasClass(headerSpanElement, HEADER_CLASS_ASC_SORT) || hasClass(headerSpanElement, HEADER_CLASS_DESC_SORT));
+    if (showsIndicator) {
+        addClass(container, CONTAINER_WITH_INDICATOR_CLASS);
+    } else {
+        removeClass(container, CONTAINER_WITH_INDICATOR_CLASS);
+    }
+}
+function isColumnBeingDragged() {
+    const manualColumnMove = this.hot.getPlugin('manualColumnMove');
+    return manualColumnMove?.isDragging() === true;
+}

package/plugins/columnSorting/columnStatesManager.d.ts

@@ -1,5 +1,5 @@
 import type { HotInstance } from '../../core/types';
-import { LinkedPhysicalIndexToValueMap as IndexToValueMap } from '../../translations';
+import type { LinkedPhysicalIndexToValueMap as IndexToValueMap } from '../../translations';
 /**
  * Store and manages states of sorted columns.
  *