handsontable 18.0.0 → 18.1.0-rc1

package/plugins/columnSorting/columnSorting.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) {
@@ -38,18 +33,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);
+}
 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 +60,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 +75,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 +84,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 +104,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 +150,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 +198,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 +235,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 +254,7 @@ var /**
         this.columnStatesManager?.destroy();
         this.columnMetaCache = null;
         this.columnStatesManager = null;
+        _class_private_field_set(this, _pendingHeaderSort, null);
         this.unregisterShortcuts();
         super.disablePlugin();
     }
@@ -285,7 +323,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 +512,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 +531,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 +657,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 +669,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 +738,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 +754,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 +777,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 +792,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.
  *

package/plugins/columnSorting/columnStatesManager.js

@@ -9,7 +9,6 @@ Object.defineProperty(exports, "ColumnStatesManager", {
     }
 });
 const _object = require("../../helpers/object");
-const _translations = require("../../translations");
 const inheritedColumnProperties = [
     'sortEmptyCells',
     'indicator',
@@ -145,11 +144,6 @@ class ColumnStatesManager {
    * Initializes the column states manager with the Handsontable instance and registers the sorting states index map under the given map name.
    */ constructor(hot, mapName){
         /**
-   * Index map storing sorting states for every column. ColumnStatesManager write and read to/from this element.
-   *
-   * @type {LinkedPhysicalIndexToValueMap}
-   */ this.sortingStates = new _translations.LinkedPhysicalIndexToValueMap();
-        /**
    * Determines whether we should sort empty cells.
    *
    * @type {boolean}
@@ -166,6 +160,6 @@ class ColumnStatesManager {
    */ this.headerAction = HEADER_ACTION_DEFAULT;
         this.hot = hot;
         this.mapName = mapName;
-        this.hot.columnIndexMapper.registerMap(mapName, this.sortingStates);
+        this.sortingStates = this.hot.columnIndexMapper.createAndRegisterIndexMap(mapName, 'linkedPhysicalIndexToValue');
     }
 }

package/plugins/columnSorting/columnStatesManager.mjs

@@ -1,5 +1,4 @@
 import { isObject, objectEach } from '../../helpers/object.mjs';
-import { LinkedPhysicalIndexToValueMap as IndexToValueMap } from '../../translations/index.mjs';
 const inheritedColumnProperties = [
     'sortEmptyCells',
     'indicator',
@@ -140,11 +139,6 @@ const HEADER_ACTION_DEFAULT = true;
    * Initializes the column states manager with the Handsontable instance and registers the sorting states index map under the given map name.
    */ constructor(hot, mapName){
         /**
-   * Index map storing sorting states for every column. ColumnStatesManager write and read to/from this element.
-   *
-   * @type {LinkedPhysicalIndexToValueMap}
-   */ this.sortingStates = new IndexToValueMap();
-        /**
    * Determines whether we should sort empty cells.
    *
    * @type {boolean}
@@ -161,6 +155,6 @@ const HEADER_ACTION_DEFAULT = true;
    */ this.headerAction = HEADER_ACTION_DEFAULT;
         this.hot = hot;
         this.mapName = mapName;
-        this.hot.columnIndexMapper.registerMap(mapName, this.sortingStates);
+        this.sortingStates = this.hot.columnIndexMapper.createAndRegisterIndexMap(mapName, 'linkedPhysicalIndexToValue');
     }
 }

package/plugins/columnSorting/domHelpers.d.ts

@@ -1,4 +1,7 @@
 import type { ColumnStatesManager } from './columnStatesManager';
+export declare const HEADER_CLASS_ASC_SORT = "ascending";
+export declare const HEADER_CLASS_DESC_SORT = "descending";
+export declare const HEADER_ACTION_CLASS = "sortAction";
 /**
  * Get CSS classes which should be added to particular column header.
  *

package/plugins/columnSorting/domHelpers.js

@@ -9,6 +9,15 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    get HEADER_ACTION_CLASS () {
+        return HEADER_ACTION_CLASS;
+    },
+    get HEADER_CLASS_ASC_SORT () {
+        return HEADER_CLASS_ASC_SORT;
+    },
+    get HEADER_CLASS_DESC_SORT () {
+        return HEADER_CLASS_DESC_SORT;
+    },
     get getClassesToAdd () {
         return getClassesToAdd;
     },

package/plugins/columnSorting/domHelpers.mjs

@@ -1,9 +1,9 @@
 import { ASC_SORT_STATE, DESC_SORT_STATE } from './utils.mjs';
-const HEADER_CLASS_ASC_SORT = 'ascending';
-const HEADER_CLASS_DESC_SORT = 'descending';
+export const HEADER_CLASS_ASC_SORT = 'ascending';
+export const HEADER_CLASS_DESC_SORT = 'descending';
 const HEADER_CLASS_INDICATOR_DISABLED = 'indicatorDisabled';
 const HEADER_SORT_CLASS = 'columnSorting';
-const HEADER_ACTION_CLASS = 'sortAction';
+export const HEADER_ACTION_CLASS = 'sortAction';
 const orderToCssClass = new Map([
     [
         ASC_SORT_STATE,

package/plugins/columnSorting/rootComparator.js

@@ -9,23 +9,28 @@ Object.defineProperty(exports, "rootComparator", {
     }
 });
 const _sortService = require("./sortService");
+/**
+ * Creates the compare function for a single sorted column. Resolved once per sort run — the
+ * factory result is reused for every comparison, so any per-run caching inside the returned
+ * compare function (e.g. normalized-value memoization) stays effective.
+ *
+ * @param {unknown} sortingOrder Sort order (`asc` for ascending, `desc` for descending).
+ * @param {unknown} columnMeta Column meta object.
+ * @returns {Function} The compare function.
+ */ function createColumnCompareFunction(sortingOrder, columnMeta) {
+    const typedMeta = columnMeta;
+    const pluginSettings = typedMeta.columnSorting;
+    const compareFunctionFactory = pluginSettings?.compareFunctionFactory ? pluginSettings.compareFunctionFactory : (0, _sortService.getCompareFunctionFactory)(typedMeta.type ?? '');
+    return compareFunctionFactory(sortingOrder, columnMeta, pluginSettings);
+}
 function rootComparator(sortingOrders, columnMetas) {
+    // The compare function is created once per sort run, not once per comparison. Re-invoking the
+    // factory inside the comparator would allocate a fresh closure ~n*log(n) times and defeat the
+    // per-run value caches the built-in compare functions rely on.
+    const compareFunction = createColumnCompareFunction(sortingOrders[0], columnMetas[0]);
     return function(rowIndexWithValues, nextRowIndexWithValues) {
-        // We sort array of arrays. Single array is in form [rowIndex, ...values].
-        // We compare just values, stored at second index of array.
-        const [, ...values] = rowIndexWithValues;
-        const [, ...nextValues] = nextRowIndexWithValues;
-        return function getCompareResult(column) {
-            const sortingOrder = sortingOrders[column];
-            const columnMeta = columnMetas[column];
-            const value = values[column];
-            const nextValue = nextValues[column];
-            const typedMeta = columnMeta;
-            const pluginSettings = typedMeta.columnSorting;
-            const compareFunctionFactory = pluginSettings?.compareFunctionFactory ? pluginSettings.compareFunctionFactory : (0, _sortService.getCompareFunctionFactory)(typedMeta.type ?? '');
-            const compareResult = compareFunctionFactory(sortingOrder, columnMeta, pluginSettings)(value, nextValue);
-            // DIFF - MultiColumnSorting & ColumnSorting: removed iteration through next sorted columns.
-            return compareResult;
-        }(0);
+        // We sort array of arrays. Single array is in form [rowIndex, ...values],
+        // so the value of the only sorted column is stored at index 1.
+        return compareFunction(rowIndexWithValues[1], nextRowIndexWithValues[1]);
     };
 }

package/plugins/columnSorting/rootComparator.mjs

@@ -1,4 +1,18 @@
 import { getCompareFunctionFactory } from './sortService/index.mjs';
+/**
+ * Creates the compare function for a single sorted column. Resolved once per sort run — the
+ * factory result is reused for every comparison, so any per-run caching inside the returned
+ * compare function (e.g. normalized-value memoization) stays effective.
+ *
+ * @param {unknown} sortingOrder Sort order (`asc` for ascending, `desc` for descending).
+ * @param {unknown} columnMeta Column meta object.
+ * @returns {Function} The compare function.
+ */ function createColumnCompareFunction(sortingOrder, columnMeta) {
+    const typedMeta = columnMeta;
+    const pluginSettings = typedMeta.columnSorting;
+    const compareFunctionFactory = pluginSettings?.compareFunctionFactory ? pluginSettings.compareFunctionFactory : getCompareFunctionFactory(typedMeta.type ?? '');
+    return compareFunctionFactory(sortingOrder, columnMeta, pluginSettings);
+}
 /**
  * Sort comparator handled by conventional sort algorithm.
  *
@@ -6,22 +20,13 @@ import { getCompareFunctionFactory } from './sortService/index.mjs';
  * @param {Array} columnMetas Column meta objects.
  * @returns {Function}
  */ export function rootComparator(sortingOrders, columnMetas) {
+    // The compare function is created once per sort run, not once per comparison. Re-invoking the
+    // factory inside the comparator would allocate a fresh closure ~n*log(n) times and defeat the
+    // per-run value caches the built-in compare functions rely on.
+    const compareFunction = createColumnCompareFunction(sortingOrders[0], columnMetas[0]);
     return function(rowIndexWithValues, nextRowIndexWithValues) {
-        // We sort array of arrays. Single array is in form [rowIndex, ...values].
-        // We compare just values, stored at second index of array.
-        const [, ...values] = rowIndexWithValues;
-        const [, ...nextValues] = nextRowIndexWithValues;
-        return function getCompareResult(column) {
-            const sortingOrder = sortingOrders[column];
-            const columnMeta = columnMetas[column];
-            const value = values[column];
-            const nextValue = nextValues[column];
-            const typedMeta = columnMeta;
-            const pluginSettings = typedMeta.columnSorting;
-            const compareFunctionFactory = pluginSettings?.compareFunctionFactory ? pluginSettings.compareFunctionFactory : getCompareFunctionFactory(typedMeta.type ?? '');
-            const compareResult = compareFunctionFactory(sortingOrder, columnMeta, pluginSettings)(value, nextValue);
-            // DIFF - MultiColumnSorting & ColumnSorting: removed iteration through next sorted columns.
-            return compareResult;
-        }(0);
+        // We sort array of arrays. Single array is in form [rowIndex, ...values],
+        // so the value of the only sorted column is stored at index 1.
+        return compareFunction(rowIndexWithValues[1], nextRowIndexWithValues[1]);
     };
 }

package/plugins/columnSorting/sortFunction/checkbox.js

@@ -43,12 +43,11 @@ const _mixed = require("../../../helpers/mixed");
  * @param {boolean} isValueFromTemplate Whether the first value is from the template.
  * @param {boolean} isNextValueFromTemplate Whether the second value is from the template.
  * @param {string} sortOrder Sort order (`asc` for ascending, `desc` for descending).
- * @param {object} columnMeta Column meta object.
- * @param {object} columnPluginSettings Plugin settings for the column.
+ * @param {Function} compareDefaultValues Compare function used for two non-template values.
  * @param {unknown} value The first value.
  * @param {unknown} nextValue The second value.
  * @returns {number | null} The comparison result or null if both values are from template.
- */ function compareBadValues(isValueFromTemplate, isNextValueFromTemplate, sortOrder, columnMeta, columnPluginSettings, value, nextValue) {
+ */ function compareBadValues(isValueFromTemplate, isNextValueFromTemplate, sortOrder, compareDefaultValues, value, nextValue) {
     // 1st value === #BAD_VALUE#
     if (isValueFromTemplate === false && isNextValueFromTemplate) {
         return sortOrder === 'asc' ? _sortService.FIRST_BEFORE_SECOND : _sortService.FIRST_AFTER_SECOND;
@@ -60,7 +59,7 @@ const _mixed = require("../../../helpers/mixed");
     // 1st value === #BAD_VALUE# && 2nd value === #BAD_VALUE#
     if (isValueFromTemplate === false && isNextValueFromTemplate === false) {
         // Sorting by values (not just by visual representation).
-        return (0, _default.compareFunctionFactory)(sortOrder, columnMeta, columnPluginSettings)(value, nextValue);
+        return compareDefaultValues(value, nextValue);
     }
     return null;
 }
@@ -68,6 +67,9 @@ function compareFunctionFactory(sortOrder, columnMeta, columnPluginSettings) {
     const checkedTemplate = columnMeta.checkedTemplate;
     const uncheckedTemplate = columnMeta.uncheckedTemplate;
     const { sortEmptyCells } = columnPluginSettings;
+    // Created once per sort run so the default comparator's per-run caches stay effective when
+    // non-template ("bad") values fall back to value-based sorting.
+    const compareDefaultValues = (0, _default.compareFunctionFactory)(sortOrder, columnMeta, columnPluginSettings);
     return function(value, nextValue) {
         const isEmptyValue = (0, _mixed.isEmpty)(value);
         const isEmptyNextValue = (0, _mixed.isEmpty)(nextValue);
@@ -84,7 +86,7 @@ function compareFunctionFactory(sortOrder, columnMeta, columnPluginSettings) {
                 return _sortService.FIRST_BEFORE_SECOND;
             }
         }
-        const badValueResult = compareBadValues(isValueFromTemplate, isNextValueFromTemplate, sortOrder, columnMeta, columnPluginSettings, value, nextValue);
+        const badValueResult = compareBadValues(isValueFromTemplate, isNextValueFromTemplate, sortOrder, compareDefaultValues, value, nextValue);
         if (badValueResult !== null) {
             return badValueResult;
         }

package/plugins/columnSorting/sortFunction/checkbox.mjs

@@ -25,12 +25,11 @@ import { isEmpty } from '../../../helpers/mixed.mjs';
  * @param {boolean} isValueFromTemplate Whether the first value is from the template.
  * @param {boolean} isNextValueFromTemplate Whether the second value is from the template.
  * @param {string} sortOrder Sort order (`asc` for ascending, `desc` for descending).
- * @param {object} columnMeta Column meta object.
- * @param {object} columnPluginSettings Plugin settings for the column.
+ * @param {Function} compareDefaultValues Compare function used for two non-template values.
  * @param {unknown} value The first value.
  * @param {unknown} nextValue The second value.
  * @returns {number | null} The comparison result or null if both values are from template.
- */ function compareBadValues(isValueFromTemplate, isNextValueFromTemplate, sortOrder, columnMeta, columnPluginSettings, value, nextValue) {
+ */ function compareBadValues(isValueFromTemplate, isNextValueFromTemplate, sortOrder, compareDefaultValues, value, nextValue) {
     // 1st value === #BAD_VALUE#
     if (isValueFromTemplate === false && isNextValueFromTemplate) {
         return sortOrder === 'asc' ? FIRST_BEFORE_SECOND : FIRST_AFTER_SECOND;
@@ -42,7 +41,7 @@ import { isEmpty } from '../../../helpers/mixed.mjs';
     // 1st value === #BAD_VALUE# && 2nd value === #BAD_VALUE#
     if (isValueFromTemplate === false && isNextValueFromTemplate === false) {
         // Sorting by values (not just by visual representation).
-        return defaultCompareFunctionFactory(sortOrder, columnMeta, columnPluginSettings)(value, nextValue);
+        return compareDefaultValues(value, nextValue);
     }
     return null;
 }
@@ -57,6 +56,9 @@ import { isEmpty } from '../../../helpers/mixed.mjs';
     const checkedTemplate = columnMeta.checkedTemplate;
     const uncheckedTemplate = columnMeta.uncheckedTemplate;
     const { sortEmptyCells } = columnPluginSettings;
+    // Created once per sort run so the default comparator's per-run caches stay effective when
+    // non-template ("bad") values fall back to value-based sorting.
+    const compareDefaultValues = defaultCompareFunctionFactory(sortOrder, columnMeta, columnPluginSettings);
     return function(value, nextValue) {
         const isEmptyValue = isEmpty(value);
         const isEmptyNextValue = isEmpty(nextValue);
@@ -73,7 +75,7 @@ import { isEmpty } from '../../../helpers/mixed.mjs';
                 return FIRST_BEFORE_SECOND;
             }
         }
-        const badValueResult = compareBadValues(isValueFromTemplate, isNextValueFromTemplate, sortOrder, columnMeta, columnPluginSettings, value, nextValue);
+        const badValueResult = compareBadValues(isValueFromTemplate, isNextValueFromTemplate, sortOrder, compareDefaultValues, value, nextValue);
         if (badValueResult !== null) {
             return badValueResult;
         }