handsontable 18.0.0 → 18.1.0-rc7

package/plugins/index.d.ts

@@ -24,12 +24,14 @@ import { ManualColumnResize } from './manualColumnResize';
 import { ManualRowMove } from './manualRowMove';
 import { ManualRowResize } from './manualRowResize';
 import { MergeCells } from './mergeCells';
+import { MoveCells } from './moveCells';
 import { MultiColumnSorting } from './multiColumnSorting';
 import { MultipleSelectionHandles } from './multipleSelectionHandles';
 import { NestedHeaders } from './nestedHeaders';
 import { NestedRows } from './nestedRows';
 import { Pagination } from './pagination';
 import { Search } from './search';
+import { SelectionHandles } from './selectionHandles';
 import { StretchColumns } from './stretchColumns';
 import { TouchScroll } from './touchScroll';
 import { TrimRows } from './trimRows';
@@ -70,12 +72,14 @@ declare module './registry' {
         manualRowMove: typeof ManualRowMove;
         manualRowResize: typeof ManualRowResize;
         mergeCells: typeof MergeCells;
+        moveCells: typeof MoveCells;
         multiColumnSorting: typeof MultiColumnSorting;
         multipleSelectionHandles: typeof MultipleSelectionHandles;
         nestedHeaders: typeof NestedHeaders;
         nestedRows: typeof NestedRows;
         pagination: typeof Pagination;
         search: typeof Search;
+        selectionHandles: typeof SelectionHandles;
         stretchColumns: typeof StretchColumns;
         touchScroll: typeof TouchScroll;
         trimRows: typeof TrimRows;
@@ -90,5 +94,5 @@ declare module './registry' {
  * Registers all available plugins.
  */
 export declare function registerAllPlugins(): void;
-export { AutoColumnSize, Autofill, AutoRowSize, BindRowsWithHeaders, CollapsibleColumns, ColumnSorting, ColumnSummary, Comments, ContextMenu, CopyPaste, CustomBorders, DataProvider, DragToScroll, DropdownMenu, ExportFile, Filters, Formulas, HiddenColumns, HiddenRows, ManualColumnFreeze, ManualColumnMove, ManualColumnResize, ManualRowMove, ManualRowResize, MergeCells, MultiColumnSorting, MultipleSelectionHandles, NestedHeaders, NestedRows, Pagination, Search, StretchColumns, TouchScroll, TrimRows, UndoRedo, Dialog, Loading, Notification, EmptyDataState, };
+export { AutoColumnSize, Autofill, AutoRowSize, BindRowsWithHeaders, CollapsibleColumns, ColumnSorting, ColumnSummary, Comments, ContextMenu, CopyPaste, CustomBorders, DataProvider, DragToScroll, DropdownMenu, ExportFile, Filters, Formulas, HiddenColumns, HiddenRows, ManualColumnFreeze, ManualColumnMove, ManualColumnResize, ManualRowMove, ManualRowResize, MergeCells, MoveCells, MultiColumnSorting, MultipleSelectionHandles, NestedHeaders, NestedRows, Pagination, Search, SelectionHandles, StretchColumns, TouchScroll, TrimRows, UndoRedo, Dialog, Loading, Notification, EmptyDataState, };
 export { getPlugin, getPluginsNames, registerPlugin, } from './registry';

package/plugins/index.js

@@ -96,6 +96,9 @@ _export(exports, {
     get MergeCells () {
         return _mergeCells.MergeCells;
     },
+    get MoveCells () {
+        return _moveCells.MoveCells;
+    },
     get MultiColumnSorting () {
         return _multiColumnSorting.MultiColumnSorting;
     },
@@ -117,6 +120,9 @@ _export(exports, {
     get Search () {
         return _search.Search;
     },
+    get SelectionHandles () {
+        return _selectionHandles.SelectionHandles;
+    },
     get StretchColumns () {
         return _stretchColumns.StretchColumns;
     },
@@ -168,12 +174,14 @@ const _manualColumnResize = require("./manualColumnResize");
 const _manualRowMove = require("./manualRowMove");
 const _manualRowResize = require("./manualRowResize");
 const _mergeCells = require("./mergeCells");
+const _moveCells = require("./moveCells");
 const _multiColumnSorting = require("./multiColumnSorting");
 const _multipleSelectionHandles = require("./multipleSelectionHandles");
 const _nestedHeaders = require("./nestedHeaders");
 const _nestedRows = require("./nestedRows");
 const _pagination = require("./pagination");
 const _search = require("./search");
+const _selectionHandles = require("./selectionHandles");
 const _stretchColumns = require("./stretchColumns");
 const _touchScroll = require("./touchScroll");
 const _trimRows = require("./trimRows");
@@ -209,12 +217,14 @@ function registerAllPlugins() {
     (0, _registry.registerPlugin)(_manualRowMove.ManualRowMove);
     (0, _registry.registerPlugin)(_manualRowResize.ManualRowResize);
     (0, _registry.registerPlugin)(_mergeCells.MergeCells);
+    (0, _registry.registerPlugin)(_moveCells.MoveCells);
     (0, _registry.registerPlugin)(_multiColumnSorting.MultiColumnSorting);
     (0, _registry.registerPlugin)(_multipleSelectionHandles.MultipleSelectionHandles);
     (0, _registry.registerPlugin)(_nestedHeaders.NestedHeaders);
     (0, _registry.registerPlugin)(_nestedRows.NestedRows);
     (0, _registry.registerPlugin)(_pagination.Pagination);
     (0, _registry.registerPlugin)(_search.Search);
+    (0, _registry.registerPlugin)(_selectionHandles.SelectionHandles);
     (0, _registry.registerPlugin)(_stretchColumns.StretchColumns);
     (0, _registry.registerPlugin)(_touchScroll.TouchScroll);
     (0, _registry.registerPlugin)(_trimRows.TrimRows);

package/plugins/index.mjs

@@ -24,12 +24,14 @@ import { ManualColumnResize } from './manualColumnResize/index.mjs';
 import { ManualRowMove } from './manualRowMove/index.mjs';
 import { ManualRowResize } from './manualRowResize/index.mjs';
 import { MergeCells } from './mergeCells/index.mjs';
+import { MoveCells } from './moveCells/index.mjs';
 import { MultiColumnSorting } from './multiColumnSorting/index.mjs';
 import { MultipleSelectionHandles } from './multipleSelectionHandles/index.mjs';
 import { NestedHeaders } from './nestedHeaders/index.mjs';
 import { NestedRows } from './nestedRows/index.mjs';
 import { Pagination } from './pagination/index.mjs';
 import { Search } from './search/index.mjs';
+import { SelectionHandles } from './selectionHandles/index.mjs';
 import { StretchColumns } from './stretchColumns/index.mjs';
 import { TouchScroll } from './touchScroll/index.mjs';
 import { TrimRows } from './trimRows/index.mjs';
@@ -67,12 +69,14 @@ import { registerPlugin } from './registry.mjs';
     registerPlugin(ManualRowMove);
     registerPlugin(ManualRowResize);
     registerPlugin(MergeCells);
+    registerPlugin(MoveCells);
     registerPlugin(MultiColumnSorting);
     registerPlugin(MultipleSelectionHandles);
     registerPlugin(NestedHeaders);
     registerPlugin(NestedRows);
     registerPlugin(Pagination);
     registerPlugin(Search);
+    registerPlugin(SelectionHandles);
     registerPlugin(StretchColumns);
     registerPlugin(TouchScroll);
     registerPlugin(TrimRows);
@@ -82,5 +86,5 @@ import { registerPlugin } from './registry.mjs';
     registerPlugin(Notification);
     registerPlugin(EmptyDataState);
 }
-export { AutoColumnSize, Autofill, AutoRowSize, BindRowsWithHeaders, CollapsibleColumns, ColumnSorting, ColumnSummary, Comments, ContextMenu, CopyPaste, CustomBorders, DataProvider, DragToScroll, DropdownMenu, ExportFile, Filters, Formulas, HiddenColumns, HiddenRows, ManualColumnFreeze, ManualColumnMove, ManualColumnResize, ManualRowMove, ManualRowResize, MergeCells, MultiColumnSorting, MultipleSelectionHandles, NestedHeaders, NestedRows, Pagination, Search, StretchColumns, TouchScroll, TrimRows, UndoRedo, Dialog, Loading, Notification, EmptyDataState };
+export { AutoColumnSize, Autofill, AutoRowSize, BindRowsWithHeaders, CollapsibleColumns, ColumnSorting, ColumnSummary, Comments, ContextMenu, CopyPaste, CustomBorders, DataProvider, DragToScroll, DropdownMenu, ExportFile, Filters, Formulas, HiddenColumns, HiddenRows, ManualColumnFreeze, ManualColumnMove, ManualColumnResize, ManualRowMove, ManualRowResize, MergeCells, MoveCells, MultiColumnSorting, MultipleSelectionHandles, NestedHeaders, NestedRows, Pagination, Search, SelectionHandles, StretchColumns, TouchScroll, TrimRows, UndoRedo, Dialog, Loading, Notification, EmptyDataState };
 export { getPlugin, getPluginsNames, registerPlugin } from './registry.mjs';

package/plugins/loading/content.d.ts

@@ -4,9 +4,11 @@
  *
  * @param {object} options Loading content options.
  * @param {string} options.id Loading id.
- * @param {string} options.icon Loading icon.
- * @param {string} options.title Loading title.
- * @param {string} options.description Loading description.
+ * @param {string} options.icon Loading icon. Written as markup on purpose, so the default SVG
+ *   spinner (and any replacement for it) renders. Never pass a value derived from user input here.
+ * @param {string} options.title Loading title. Escaped, so it renders as the text it is: markup
+ *   passed here shows up literally instead of being interpreted.
+ * @param {string} options.description Loading description. Escaped, like the title.
  *
  * @returns {string} HTML string with the loading content.
  */

package/plugins/loading/content.js

@@ -9,13 +9,14 @@ Object.defineProperty(exports, "loadingContent", {
     }
 });
 const _loading = require("./loading");
+const _string = require("../../helpers/string");
 function loadingContent({ id, icon, title, description }) {
     return `
     <div class="${_loading.LOADING_CLASS_NAME}__content">
       <i class="${_loading.LOADING_CLASS_NAME}__icon">${icon}</i>
       <div class="${_loading.LOADING_CLASS_NAME}__text">
-        <h2 id="${id}-${_loading.PLUGIN_KEY}-title" class="${_loading.LOADING_CLASS_NAME}__title">${title}</h2>
-        ${description ? `<p id="${id}-${_loading.PLUGIN_KEY}-description" class="${_loading.LOADING_CLASS_NAME}__description">${description}</p>` : ''}
+        <h2 id="${id}-${_loading.PLUGIN_KEY}-title" class="${_loading.LOADING_CLASS_NAME}__title">${(0, _string.escapeHtml)(title)}</h2>
+        ${description ? `<p id="${id}-${_loading.PLUGIN_KEY}-description" class="${_loading.LOADING_CLASS_NAME}__description">${(0, _string.escapeHtml)(description)}</p>` : ''}
       </div>
     </div>
   `;

package/plugins/loading/content.mjs

@@ -1,13 +1,16 @@
 /* eslint-disable max-len */ import { LOADING_CLASS_NAME, PLUGIN_KEY } from './loading.mjs';
+import { escapeHtml } from '../../helpers/string.mjs';
 /**
  * @description
  * The `loadingContent` function returns a HTML string with the loading content.
  *
  * @param {object} options Loading content options.
  * @param {string} options.id Loading id.
- * @param {string} options.icon Loading icon.
- * @param {string} options.title Loading title.
- * @param {string} options.description Loading description.
+ * @param {string} options.icon Loading icon. Written as markup on purpose, so the default SVG
+ *   spinner (and any replacement for it) renders. Never pass a value derived from user input here.
+ * @param {string} options.title Loading title. Escaped, so it renders as the text it is: markup
+ *   passed here shows up literally instead of being interpreted.
+ * @param {string} options.description Loading description. Escaped, like the title.
  *
  * @returns {string} HTML string with the loading content.
  */ export function loadingContent({ id, icon, title, description }) {
@@ -15,8 +18,8 @@
     <div class="${LOADING_CLASS_NAME}__content">
       <i class="${LOADING_CLASS_NAME}__icon">${icon}</i>
       <div class="${LOADING_CLASS_NAME}__text">
-        <h2 id="${id}-${PLUGIN_KEY}-title" class="${LOADING_CLASS_NAME}__title">${title}</h2>
-        ${description ? `<p id="${id}-${PLUGIN_KEY}-description" class="${LOADING_CLASS_NAME}__description">${description}</p>` : ''}
+        <h2 id="${id}-${PLUGIN_KEY}-title" class="${LOADING_CLASS_NAME}__title">${escapeHtml(title)}</h2>
+        ${description ? `<p id="${id}-${PLUGIN_KEY}-description" class="${LOADING_CLASS_NAME}__description">${escapeHtml(description)}</p>` : ''}
       </div>
     </div>
   `;

package/plugins/loading/loading.d.ts

@@ -15,8 +15,11 @@ export { LOADING_CLASS_NAME };
  *
  * The plugin provides several configuration options to customize the loading behavior and appearance:
  * - `icon`: Loading icon to display HTML (as string) in svg format (default: `<svg ... />`).
- * - `title`: Loading title to display (default: 'Loading...').
- * - `description`: Loading description to display (default: '').
+ * - `title`: Loading title to display, rendered as text (default: 'Loading...').
+ * - `description`: Loading description to display, rendered as text (default: '').
+ *
+ * `icon` is the only option written to the DOM as markup. `title` and `description` are escaped, so
+ * markup passed in them shows up literally instead of being interpreted.
  *
  * @example
  *

package/plugins/loading/loading.mjs

@@ -74,8 +74,11 @@ var /**
  *
  * The plugin provides several configuration options to customize the loading behavior and appearance:
  * - `icon`: Loading icon to display HTML (as string) in svg format (default: `<svg ... />`).
- * - `title`: Loading title to display (default: 'Loading...').
- * - `description`: Loading description to display (default: '').
+ * - `title`: Loading title to display, rendered as text (default: 'Loading...').
+ * - `description`: Loading description to display, rendered as text (default: '').
+ *
+ * `icon` is the only option written to the DOM as markup. `title` and `description` are escaped, so
+ * markup passed in them shows up literally instead of being interpreted.
  *
  * @example
  *

package/plugins/manualColumnMove/manualColumnMove.d.ts

@@ -102,6 +102,16 @@ export declare class ManualColumnMove extends BasePlugin {
      * @returns {boolean}
      */
     dragColumns(columns: number[], dropIndex: number): boolean;
+    /**
+     * Checks whether a column drag is in progress - the header is held down and the pointer has
+     * travelled far enough to count as a drag rather than a click.
+     *
+     * `ColumnSorting` asks this on release to tell a click apart from a drag, so the two plugins
+     * cannot disagree about where that line is.
+     *
+     * @returns {boolean}
+     */
+    isDragging(): boolean;
     /**
      * Indicates if it's possible to move columns to the desired position. Some of the actions aren't
      * possible, i.e. You can’t move more than one element to the last position.

package/plugins/manualColumnMove/manualColumnMove.js

@@ -90,6 +90,9 @@ const CSS_PLUGIN = 'ht__manualColumnMove';
 const CSS_SHOW_UI = 'show-ui';
 const CSS_ON_MOVING = 'on-moving--columns';
 const CSS_AFTER_SELECTION = 'after-selection--columns';
+// Matches ColumnSorting's tolerance. Kept as a local constant rather than imported - plugins do not
+// import each other.
+const POINTER_DRAG_TOLERANCE = 3;
 var _backlight1 = /*#__PURE__*/ new WeakMap(), _guideline1 = /*#__PURE__*/ new WeakMap(), /**
    * @type {number[]}
    */ _columnsToMove = /*#__PURE__*/ new WeakMap(), /**
@@ -97,6 +100,11 @@ var _backlight1 = /*#__PURE__*/ new WeakMap(), _guideline1 = /*#__PURE__*/ new W
    */ _countCols = /*#__PURE__*/ new WeakMap(), /**
    * @type {boolean}
    */ _pressed = /*#__PURE__*/ new WeakMap(), /**
+   * Whether the pointer travelled far enough since the header was pressed to count as a drag. A
+   * press that stayed put is a click to sort, so no columns move and the move hooks stay quiet.
+   */ _dragged = /*#__PURE__*/ new WeakMap(), /**
+   * Pointer client coordinates captured on press, for measuring that travel.
+   */ _pressOrigin = /*#__PURE__*/ new WeakMap(), /**
    * @type {object}
    */ _target = /*#__PURE__*/ new WeakMap(), /**
    * @type {number}
@@ -109,6 +117,13 @@ var _backlight1 = /*#__PURE__*/ new WeakMap(), _guideline1 = /*#__PURE__*/ new W
    */ _hasRowHeaders = /*#__PURE__*/ new WeakMap(), /**
    * @type {number}
    */ _fixedColumnsStart = /*#__PURE__*/ new WeakMap(), /**
+   * The combined height of the column header levels above the grabbed header cell, captured when a
+   * drag starts. The backlight starts at the top of the grabbed cell (so grabbing a top group covers
+   * the full header height, while grabbing a leaf header covers only its own row downward). Reused
+   * when the table is scrolled mid-drag.
+   *
+   * @type {number}
+   */ _grabbedHeaderOffsetTop = /*#__PURE__*/ new WeakMap(), /**
    * Calculates the mouse offset from the start of the grid, accounting for RTL direction.
    *
    * @param {Window | HTMLElement} scrollableElement The scrollable container element.
@@ -126,6 +141,18 @@ var _backlight1 = /*#__PURE__*/ new WeakMap(), _guideline1 = /*#__PURE__*/ new W
    * @param {number} fixedColumnsStart The number of fixed columns at the start.
    * @returns {number}
    */ _calculateTargetCol = /*#__PURE__*/ new WeakSet(), /**
+   * Resolves the drop target when hovering a header cell, snapping to a child-column boundary even
+   * when the hovered header spans several columns (a nested group header). Walks the visible leaf
+   * columns the header covers to find the one under the cursor, then picks the nearer edge - so the
+   * guideline jumps per child column, and the column drops inside the group when released between two
+   * children and aside when released at the group's left or right edge. Updates `#target.col` and
+   * returns the guideline start offset (a real column boundary).
+   *
+   * @param {number} hoveredColumn The hovered header's leftmost (anchor) column index.
+   * @param {number} tdOffsetStart The start offset of the hovered header's left edge.
+   * @param {number} mouseOffsetStart The cursor offset from the start.
+   * @returns {number}
+   */ _resolveTargetWithinHeader = /*#__PURE__*/ new WeakSet(), /**
    * Change the behavior of selection / dragging.
    *
    * @param {MouseEvent} event `mousedown` event properties.
@@ -155,6 +182,13 @@ var _backlight1 = /*#__PURE__*/ new WeakMap(), _guideline1 = /*#__PURE__*/ new W
    */ _onMouseUp = /*#__PURE__*/ new WeakSet(), /**
    * `afterScrollHorizontally` hook callback. Fired the table was scrolled horizontally.
    */ _onAfterScrollVertically = /*#__PURE__*/ new WeakMap(), /**
+   * Sums the heights of the column header levels above the given level - the vertical offset from the
+   * top of the column headers down to the top of a cell at that level. Used to anchor the drag
+   * backlight at the top of the grabbed header cell.
+   *
+   * @param {number} level The grabbed header level (0 = topmost header row).
+   * @returns {number}
+   */ _columnHeadersHeightAbove = /*#__PURE__*/ new WeakSet(), /**
    * Callback for the `afterLoadData` hook.
    *
    * @private
@@ -283,6 +317,17 @@ class ManualColumnMove extends _base.BasePlugin {
         return this.moveColumns(columns, finalIndex);
     }
     /**
+   * Checks whether a column drag is in progress - the header is held down and the pointer has
+   * travelled far enough to count as a drag rather than a click.
+   *
+   * `ColumnSorting` asks this on release to tell a click apart from a drag, so the two plugins
+   * cannot disagree about where that line is.
+   *
+   * @returns {boolean}
+   */ isDragging() {
+        return this.enabled && _class_private_field_get(this, _pressed) && _class_private_field_get(this, _dragged);
+    }
+    /**
    * Indicates if it's possible to move columns to the desired position. Some of the actions aren't
    * possible, i.e. You can’t move more than one element to the last position.
    *
@@ -468,7 +513,7 @@ class ManualColumnMove extends _base.BasePlugin {
         super.destroy();
     }
     constructor(...args){
-        super(...args), _class_private_method_init(this, _calculateMouseOffsetStart), _class_private_method_init(this, _calculateTargetCol), _class_private_method_init(this, _onMouseMove), _class_private_method_init(this, _onBeforeOnCellMouseOverOutside), _class_private_method_init(this, _onMouseUp), /**
+        super(...args), _class_private_method_init(this, _calculateMouseOffsetStart), _class_private_method_init(this, _calculateTargetCol), _class_private_method_init(this, _resolveTargetWithinHeader), _class_private_method_init(this, _onMouseMove), _class_private_method_init(this, _onBeforeOnCellMouseOverOutside), _class_private_method_init(this, _onMouseUp), _class_private_method_init(this, _columnHeadersHeightAbove), /**
    * Backlight UI object.
    *
    * @type {object}
@@ -491,6 +536,12 @@ class ManualColumnMove extends _base.BasePlugin {
         }), _class_private_field_init(this, _pressed, {
             writable: true,
             value: void 0
+        }), _class_private_field_init(this, _dragged, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _pressOrigin, {
+            writable: true,
+            value: void 0
         }), _class_private_field_init(this, _target, {
             writable: true,
             value: void 0
@@ -509,6 +560,9 @@ class ManualColumnMove extends _base.BasePlugin {
         }), _class_private_field_init(this, _fixedColumnsStart, {
             writable: true,
             value: void 0
+        }), _class_private_field_init(this, _grabbedHeaderOffsetTop, {
+            writable: true,
+            value: void 0
         }), _class_private_field_init(this, _onBeforeOnCellMouseDown, {
             writable: true,
             value: void 0
@@ -521,14 +575,16 @@ class ManualColumnMove extends _base.BasePlugin {
         }), _class_private_field_init(this, _onAfterLoadData, {
             writable: true,
             value: void 0
-        }), _class_private_field_set(this, _backlight1, new _backlight.default(this.hot)), _class_private_field_set(this, _guideline1, new _guideline.default(this.hot)), _class_private_field_set(this, _columnsToMove, []), _class_private_field_set(this, _countCols, 0), _class_private_field_set(this, _pressed, false), _class_private_field_set(this, _target, {}), _class_private_field_set(this, _onBeforeOnCellMouseDown, (event, coords, TD, controller)=>{
+        }), _class_private_field_set(this, _backlight1, new _backlight.default(this.hot)), _class_private_field_set(this, _guideline1, new _guideline.default(this.hot)), _class_private_field_set(this, _columnsToMove, []), _class_private_field_set(this, _countCols, 0), _class_private_field_set(this, _pressed, false), _class_private_field_set(this, _dragged, false), _class_private_field_set(this, _pressOrigin, {
+            x: 0,
+            y: 0
+        }), _class_private_field_set(this, _target, {}), _class_private_field_set(this, _grabbedHeaderOffsetTop, 0), _class_private_field_set(this, _onBeforeOnCellMouseDown, (event, coords, TD, controller)=>{
             const wtTable = this.hot.view._wt.wtTable;
             const isHeaderSelection = this.hot.selection.isSelectedByColumnHeader();
             const selection = this.hot.getSelectedRangeActive();
-            // This block action shouldn't be handled below.
-            const isSortingElement = (0, _element.hasClass)((0, _element.eventTargetEl)(event), 'sortAction');
-            if (!selection || !isHeaderSelection || _class_private_field_get(this, _pressed) || event.button !== 0 || isSortingElement) {
+            if (!selection || !isHeaderSelection || _class_private_field_get(this, _pressed) || event.button !== 0) {
                 _class_private_field_set(this, _pressed, false);
+                _class_private_field_set(this, _dragged, false);
                 _class_private_field_get(this, _columnsToMove).length = 0;
                 (0, _element.removeClass)(this.hot.rootElement, [
                     CSS_ON_MOVING,
@@ -548,6 +604,10 @@ class ManualColumnMove extends _base.BasePlugin {
             if (coords.row < 0 && coords.col >= start && coords.col <= end) {
                 controller.column = true;
                 _class_private_field_set(this, _pressed, true);
+                _class_private_field_set(this, _pressOrigin, {
+                    x: event.clientX,
+                    y: event.clientY
+                });
                 const eventOffsetX = TD.firstChild ? (0, _event.offsetRelativeTo)(event, TD.firstChild).x : event.offsetX;
                 _class_private_field_get(this, _target).eventPageX = event.pageX;
                 _class_private_field_set(this, _hoveredColumn, coords.col);
@@ -559,7 +619,10 @@ class ManualColumnMove extends _base.BasePlugin {
                 _class_private_field_set(this, _fixedColumnsStart, this.hot.getSettings().fixedColumnsStart);
                 _class_private_field_set(this, _rootElementOffset, (0, _element.offset)(this.hot.rootElement).left);
                 const countColumnsFrom = _class_private_field_get(this, _hasRowHeaders) ? -1 : 0;
-                const topPos = wtTable.holder.scrollTop + wtTable.getColumnHeaderHeight(0) + 1;
+                // Start the backlight at the top of the grabbed header cell: the grabbed level is the row's
+                // distance from the topmost header, and the offset is the height of every level above it.
+                _class_private_field_set(this, _grabbedHeaderOffsetTop, _class_private_method_get(this, _columnHeadersHeightAbove, columnHeadersHeightAbove).call(this, coords.row + wtTable.getColumnHeadersCount()));
+                const topPos = wtTable.holder.scrollTop + _class_private_field_get(this, _grabbedHeaderOffsetTop) + 1;
                 const fixedColumnsStart = coords.col < (_class_private_field_get(this, _fixedColumnsStart) ?? 0);
                 const horizontalScrollPosition = this.hot.view._wt.wtOverlays.inlineStartOverlay.getOverlayOffset();
                 const offsetX = Math.abs(eventOffsetX - (this.hot.isRtl() ? TD.offsetWidth : 0));
@@ -568,10 +631,12 @@ class ManualColumnMove extends _base.BasePlugin {
                 _class_private_field_get(this, _backlight1).setPosition(topPos, inlinePos);
                 _class_private_field_get(this, _backlight1).setSize(this.getColumnsWidth(start, end), wtTable.hider.offsetHeight - topPos);
                 _class_private_field_get(this, _backlight1).setOffset(0, -inlineOffset);
+                _class_private_field_set(this, _dragged, false);
                 (0, _element.addClass)(this.hot.rootElement, CSS_ON_MOVING);
             } else {
                 (0, _element.removeClass)(this.hot.rootElement, CSS_AFTER_SELECTION);
                 _class_private_field_set(this, _pressed, false);
+                _class_private_field_set(this, _dragged, false);
                 _class_private_field_get(this, _columnsToMove).length = 0;
             }
         }), _class_private_field_set(this, _onBeforeOnCellMouseOver, (event, coords, TD, controller)=>{
@@ -591,9 +656,7 @@ class ManualColumnMove extends _base.BasePlugin {
             _class_private_field_get(this, _target).TD = TD;
         }), _class_private_field_set(this, _onAfterScrollVertically, ()=>{
             const wtTable = this.hot.view._wt.wtTable;
-            const headerHeight = wtTable.getColumnHeaderHeight(0) + 1;
-            const scrollTop = wtTable.holder.scrollTop;
-            const posTop = headerHeight + scrollTop;
+            const posTop = _class_private_field_get(this, _grabbedHeaderOffsetTop) + 1 + wtTable.holder.scrollTop;
             _class_private_field_get(this, _backlight1).setPosition(posTop);
             _class_private_field_get(this, _backlight1).setSize(undefined, wtTable.hider.offsetHeight - posTop);
         }), _class_private_field_set(this, _onAfterLoadData, ()=>{
@@ -618,22 +681,48 @@ function calculateTargetCol(hoveredColumn, tdOffsetStart, mouseOffsetStart, firs
         } else {
             _class_private_field_get(this, _target).col = firstVisible > 0 ? firstVisible - 1 : firstVisible;
         }
-    } else if (_class_private_field_get(this, _target).TD.offsetWidth / 2 + tdOffsetStart <= mouseOffsetStart) {
-        const newCoordsCol = hoveredColumn >= _class_private_field_get(this, _countCols) ? _class_private_field_get(this, _countCols) - 1 : hoveredColumn;
-        // if hover on right part of TD
-        _class_private_field_get(this, _target).col = newCoordsCol + 1;
-        // unfortunately first column is bigger than rest
-        tdOffsetStart += _class_private_field_get(this, _target).TD.offsetWidth;
-    } else {
-        // elsewhere on table
-        _class_private_field_get(this, _target).col = hoveredColumn;
+        return tdOffsetStart;
+    }
+    return _class_private_method_get(this, _resolveTargetWithinHeader, resolveTargetWithinHeader).call(this, hoveredColumn, tdOffsetStart, mouseOffsetStart);
+}
+function resolveTargetWithinHeader(hoveredColumn, tdOffsetStart, mouseOffsetStart) {
+    const headerEnd = tdOffsetStart + _class_private_field_get(this, _target).TD.offsetWidth;
+    let edge = tdOffsetStart;
+    let column = hoveredColumn;
+    while(column < _class_private_field_get(this, _countCols)){
+        const width = this.getColumnsWidth(column, column);
+        // Stop on the column under the cursor, or on the last column the header covers (its right edge
+        // reaches the header's end). A hidden column has zero width, so it is stepped over.
+        if (width > 0 && mouseOffsetStart < edge + width || edge + width >= headerEnd) {
+            if (width / 2 + edge <= mouseOffsetStart) {
+                // A drop at a column's right edge should land past any hidden (zero-width) columns that
+                // follow it, so releasing at the visible end of a collapsed group drops after the whole
+                // group rather than between its visible column and an adjacent hidden one.
+                let targetColumn = column + 1;
+                while(targetColumn < _class_private_field_get(this, _countCols) && this.getColumnsWidth(targetColumn, targetColumn) === 0){
+                    targetColumn += 1;
+                }
+                _class_private_field_get(this, _target).col = targetColumn;
+                return edge + width;
+            }
+            _class_private_field_get(this, _target).col = column;
+            return edge;
+        }
+        edge += width;
+        column += 1;
     }
-    return tdOffsetStart;
+    _class_private_field_get(this, _target).col = column;
+    return edge;
 }
 function onMouseMove(event) {
     if (!_class_private_field_get(this, _pressed)) {
         return;
     }
+    // Same tolerance ColumnSorting uses to tell a click from a drag, so a pointer that jitters a
+    // pixel or two does not both sort and fire the move hooks.
+    if (Math.abs(event.clientX - _class_private_field_get(this, _pressOrigin).x) > POINTER_DRAG_TOLERANCE || Math.abs(event.clientY - _class_private_field_get(this, _pressOrigin).y) > POINTER_DRAG_TOLERANCE) {
+        _class_private_field_set(this, _dragged, true);
+    }
     _class_private_field_get(this, _target).eventPageX = event.pageX;
     this.refreshPositions();
 }
@@ -648,8 +737,10 @@ function onBeforeOnCellMouseOverOutside(controller) {
 function onMouseUp() {
     const target = _class_private_field_get(this, _target).col;
     const columnsLen = _class_private_field_get(this, _columnsToMove).length;
+    const wasDragged = _class_private_field_get(this, _dragged);
     _class_private_field_set(this, _hoveredColumn, undefined);
     _class_private_field_set(this, _pressed, false);
+    _class_private_field_set(this, _dragged, false);
     (0, _element.removeClass)(this.hot.rootElement, [
         CSS_ON_MOVING,
         CSS_SHOW_UI,
@@ -658,7 +749,10 @@ function onMouseUp() {
     if (this.hot.selection.isSelectedByColumnHeader()) {
         (0, _element.addClass)(this.hot.rootElement, CSS_AFTER_SELECTION);
     }
-    if (columnsLen < 1 || target === undefined) {
+    // A press that never travelled is a click, not a move. Bailing out here also keeps
+    // `beforeColumnMove` / `afterColumnMove` from firing on every header click.
+    if (!wasDragged || columnsLen < 1 || target === undefined) {
+        _class_private_field_get(this, _columnsToMove).length = 0;
         return;
     }
     const firstMovedVisualColumn = _class_private_field_get(this, _columnsToMove)[0];
@@ -673,3 +767,11 @@ function onMouseUp() {
         this.hot.selectColumns(selectionStart, selectionEnd);
     }
 }
+function columnHeadersHeightAbove(level) {
+    const wtTable = this.hot.view._wt.wtTable;
+    let height = 0;
+    for(let aboveLevel = 0; aboveLevel < level; aboveLevel++){
+        height += wtTable.getColumnHeaderHeight(aboveLevel);
+    }
+    return height;
+}