handsontable 18.0.0 → 18.1.0-rc7

package/renderers/intlDatetimeRenderer/intlDatetimeRenderer.mjs

@@ -0,0 +1,67 @@
+import { textRenderer } from '../textRenderer/index.mjs';
+import { isEmpty } from '../../helpers/mixed.mjs';
+import { isObject } from '../../helpers/object.mjs';
+import { BAD_VALUE_TEXT } from '../../helpers/constants.mjs';
+import { parseToLocalDateTime } from '../../helpers/dateTime.mjs';
+import { warn } from '../../helpers/console.mjs';
+export const RENDERER_TYPE = 'intl-datetime';
+const DEFAULT_INTL_FORMAT = {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false
+};
+const stringFormatWarnShown = new WeakSet();
+/**
+ * Formats a date-time value using Intl.DateTimeFormat.
+ *
+ * @param {unknown} value The raw ISO date-time value.
+ * @param {CellProperties} cellProperties The cell meta object.
+ * @returns {unknown} The formatted date-time string, or a placeholder for empty/invalid values.
+ */ export function valueFormatter(value, cellProperties) {
+    const { dateTimeFormat, locale, allowEmpty, instance } = cellProperties;
+    if (isEmpty(value)) {
+        return allowEmpty ? value : BAD_VALUE_TEXT;
+    }
+    if (typeof dateTimeFormat === 'string') {
+        if (instance && !stringFormatWarnShown.has(instance)) {
+            stringFormatWarnShown.add(instance);
+            warn('The dateTimeFormat option as a string is not supported. Use an Intl.DateTimeFormatOptions object instead.');
+        }
+        return value;
+    }
+    const date = parseToLocalDateTime(value);
+    if (date === null) {
+        return BAD_VALUE_TEXT;
+    }
+    const intlFormat = isObject(dateTimeFormat) ? dateTimeFormat : DEFAULT_INTL_FORMAT;
+    return new Intl.DateTimeFormat(locale, intlFormat).format(date);
+}
+/**
+ * Intl-based date-time renderer.
+ *
+ * @private
+ * @param {Core} hotInstance The Handsontable instance.
+ * @param {HTMLTableCellElement} TD The rendered cell element.
+ * @param {number} row The visual row index.
+ * @param {number} col The visual column index.
+ * @param {number|string} prop The column property (passed when datasource is an array of objects).
+ * @param {*} value The rendered value.
+ * @param {object} cellProperties The cell meta object (see {@link Core#getCellMeta}).
+ */ function _intlDatetimeRenderer(hotInstance, TD, row, col, prop, value, cellProperties) {
+    textRenderer.apply(this, [
+        hotInstance,
+        TD,
+        row,
+        col,
+        prop,
+        value,
+        cellProperties
+    ]);
+}
+_intlDatetimeRenderer.valueFormatter = valueFormatter;
+_intlDatetimeRenderer.RENDERER_TYPE = RENDERER_TYPE;
+export const intlDatetimeRenderer = _intlDatetimeRenderer;

package/renderers/multiSelectRenderer/multiSelectRenderer.js

@@ -38,8 +38,7 @@ function multiSelectRenderer(hotInstance, TD, row, col, prop, value, cellPropert
     const { rootDocument } = hotInstance;
     const isAriaEnabled = hotInstance.getSettings().ariaTags;
     const physicalRow = hotInstance.toPhysicalRow(row);
-    const physicalColumn = typeof col === 'string' ? col : hotInstance.toPhysicalColumn(col);
-    const sourceData = hotInstance.getSourceDataAtCell(physicalRow, physicalColumn);
+    const sourceData = hotInstance.getSourceDataAtCell(physicalRow, col);
     const values = (0, _utils.parseValue)(sourceData);
     (0, _element.empty)(TD);
     (0, _element.addClass)(TD, MULTISELECT_RENDERER_CLASS);
@@ -50,7 +49,7 @@ function multiSelectRenderer(hotInstance, TD, row, col, prop, value, cellPropert
     const chipsContainer = rootDocument.createElement('div');
     chipsContainer.className = CHIPS_CONTAINER_CLASS;
     values.forEach((item)=>{
-        const chip = (0, _utils.createChipElement)(rootDocument, item, isAriaEnabled ?? false, row, prop);
+        const chip = (0, _utils.createChipElement)(rootDocument, item, isAriaEnabled ?? false, row, col, prop);
         chipsContainer.appendChild(chip);
     });
     TD.appendChild(chipsContainer);

package/renderers/multiSelectRenderer/multiSelectRenderer.mjs

@@ -20,8 +20,7 @@ const CHIPS_CONTAINER_CLASS = 'ht-multi-select-chips-container';
     const { rootDocument } = hotInstance;
     const isAriaEnabled = hotInstance.getSettings().ariaTags;
     const physicalRow = hotInstance.toPhysicalRow(row);
-    const physicalColumn = typeof col === 'string' ? col : hotInstance.toPhysicalColumn(col);
-    const sourceData = hotInstance.getSourceDataAtCell(physicalRow, physicalColumn);
+    const sourceData = hotInstance.getSourceDataAtCell(physicalRow, col);
     const values = parseValue(sourceData);
     empty(TD);
     addClass(TD, MULTISELECT_RENDERER_CLASS);
@@ -32,7 +31,7 @@ const CHIPS_CONTAINER_CLASS = 'ht-multi-select-chips-container';
     const chipsContainer = rootDocument.createElement('div');
     chipsContainer.className = CHIPS_CONTAINER_CLASS;
     values.forEach((item)=>{
-        const chip = createChipElement(rootDocument, item, isAriaEnabled ?? false, row, prop);
+        const chip = createChipElement(rootDocument, item, isAriaEnabled ?? false, row, col, prop);
         chipsContainer.appendChild(chip);
     });
     TD.appendChild(chipsContainer);

package/renderers/multiSelectRenderer/utils/utils.d.ts

@@ -13,7 +13,7 @@ export declare function parseValue(value: unknown): (string | Record<string, str
 /**
  *
  */
-export declare function createChipElement(rootDocument: Document, item: string | Record<string, string>, isAriaEnabled: boolean, row: number, prop: string | number): HTMLElement;
+export declare function createChipElement(rootDocument: Document, item: string | Record<string, string>, isAriaEnabled: boolean, row: number, col: number, prop: string | number): HTMLElement;
 /**
  *
  */

package/renderers/multiSelectRenderer/utils/utils.js

@@ -88,11 +88,12 @@ function parseValue(value) {
         value
     ];
 }
-function createChipElement(rootDocument, item, isAriaEnabled, row, prop) {
+function createChipElement(rootDocument, item, isAriaEnabled, row, col, prop) {
     const chip = rootDocument.createElement('span');
     const textContent = getItemProperty(item, 'value');
     (0, _element.addClass)(chip, CHIP_CLASS);
     chip.dataset.row = String(row);
+    chip.dataset.col = String(col);
     chip.dataset.prop = String(prop);
     chip.title = textContent;
     const label = rootDocument.createElement('span');
@@ -130,16 +131,18 @@ function registerChipRemovingEvents(hotInstance, rendererType) {
         if (!chip) {
             return;
         }
-        const rowIndex = chip.dataset.row;
-        const columnProp = chip.dataset.prop;
-        const physicalRow = hotInstance.toPhysicalRow(Number(rowIndex ?? 0));
-        const physicalColumn = typeof columnProp === 'string' ? columnProp : hotInstance.toPhysicalColumn(Number(columnProp));
-        const visualColumn = hotInstance.propToCol(columnProp ?? '');
+        const visualRow = Number(chip.dataset.row ?? 0);
+        const visualColumn = Number(chip.dataset.col ?? 0);
+        const physicalRow = hotInstance.toPhysicalRow(visualRow);
+        // Read the raw source array, not `getDataAtCell` — the multiselect `valueGetter` turns the
+        // stored array into a display string, which `parseValue` cannot split back into items.
         const currentData = hotInstance.getSourceDataAtCell(physicalRow, visualColumn);
         const keyToRemove = chip.dataset.key;
         const newData = removeValueByKey(parseValue(currentData), keyToRemove);
-        hotInstance.setSourceDataAtCell(physicalRow, physicalColumn, newData, `${rendererType}-renderer`);
-        hotInstance.render();
+        // Route the removal through `setDataAtCell` so it runs the standard change and validation
+        // pipeline (`beforeChange` / `afterChange`), matching the editor's deselect path. Writing via
+        // `setSourceDataAtCell` bypassed those hooks and left the two removal paths inconsistent.
+        hotInstance.setDataAtCell(visualRow, visualColumn, newData, `${rendererType}-renderer`);
     });
     hotInstance.addHook('beforeOnCellMouseDown', (...args)=>{
         const event = args[0];

package/renderers/multiSelectRenderer/utils/utils.mjs

@@ -44,11 +44,12 @@ const chipsEventManagers = new WeakMap();
 }
 /**
  *
- */ export function createChipElement(rootDocument, item, isAriaEnabled, row, prop) {
+ */ export function createChipElement(rootDocument, item, isAriaEnabled, row, col, prop) {
     const chip = rootDocument.createElement('span');
     const textContent = getItemProperty(item, 'value');
     addClass(chip, CHIP_CLASS);
     chip.dataset.row = String(row);
+    chip.dataset.col = String(col);
     chip.dataset.prop = String(prop);
     chip.title = textContent;
     const label = rootDocument.createElement('span');
@@ -90,16 +91,18 @@ const chipsEventManagers = new WeakMap();
         if (!chip) {
             return;
         }
-        const rowIndex = chip.dataset.row;
-        const columnProp = chip.dataset.prop;
-        const physicalRow = hotInstance.toPhysicalRow(Number(rowIndex ?? 0));
-        const physicalColumn = typeof columnProp === 'string' ? columnProp : hotInstance.toPhysicalColumn(Number(columnProp));
-        const visualColumn = hotInstance.propToCol(columnProp ?? '');
+        const visualRow = Number(chip.dataset.row ?? 0);
+        const visualColumn = Number(chip.dataset.col ?? 0);
+        const physicalRow = hotInstance.toPhysicalRow(visualRow);
+        // Read the raw source array, not `getDataAtCell` — the multiselect `valueGetter` turns the
+        // stored array into a display string, which `parseValue` cannot split back into items.
         const currentData = hotInstance.getSourceDataAtCell(physicalRow, visualColumn);
         const keyToRemove = chip.dataset.key;
         const newData = removeValueByKey(parseValue(currentData), keyToRemove);
-        hotInstance.setSourceDataAtCell(physicalRow, physicalColumn, newData, `${rendererType}-renderer`);
-        hotInstance.render();
+        // Route the removal through `setDataAtCell` so it runs the standard change and validation
+        // pipeline (`beforeChange` / `afterChange`), matching the editor's deselect path. Writing via
+        // `setSourceDataAtCell` bypassed those hooks and left the two removal paths inconsistent.
+        hotInstance.setDataAtCell(visualRow, visualColumn, newData, `${rendererType}-renderer`);
     });
     hotInstance.addHook('beforeOnCellMouseDown', (...args)=>{
         const event = args[0];

package/renderers/passwordRenderer/passwordRenderer.js

@@ -21,6 +21,7 @@ _export(exports, {
 });
 const _element = require("../../helpers/dom/element");
 const _mixed = require("../../helpers/mixed");
+const _sanitizer = require("../../utils/sanitizer");
 const RENDERER_TYPE = 'password';
 function valueFormatter(value, cellProperties) {
     const hashLength = cellProperties.hashLength || (0, _mixed.stringify)(value).length;
@@ -32,7 +33,11 @@ function valueFormatter(value, cellProperties) {
     return hash;
 }
 function passwordRenderer(hotInstance, TD, row, col, prop, value) {
-    (0, _element.fastInnerHTML)(TD, value);
+    // `valueFormatter` above replaces the value with a run of `hashSymbol`, so markup reaches this
+    // sink only through a developer-supplied `valueFormatter` or a `hashSymbol` that contains HTML.
+    // Both are the developer's own content, but a configured `sanitizer` must still apply, and the
+    // `'password'` context is what makes the missing-sanitizer warning name its source.
+    (0, _element.fastInnerHTML)(TD, value, (0, _sanitizer.getSanitizer)(hotInstance), 'password', hotInstance.rootElement);
 }
 passwordRenderer.valueFormatter = valueFormatter;
 passwordRenderer.RENDERER_TYPE = RENDERER_TYPE;

package/renderers/passwordRenderer/passwordRenderer.mjs

@@ -1,5 +1,6 @@
 import { fastInnerHTML } from '../../helpers/dom/element.mjs';
 import { stringify } from '../../helpers/mixed.mjs';
+import { getSanitizer } from '../../utils/sanitizer.mjs';
 export const RENDERER_TYPE = 'password';
 /**
  * Formats the value using the password format.
@@ -25,7 +26,11 @@ export const RENDERER_TYPE = 'password';
  * @param {number|string} prop The column property (passed when datasource is an array of objects).
  * @param {*} value The rendered value.
  */ export function passwordRenderer(hotInstance, TD, row, col, prop, value) {
-    fastInnerHTML(TD, value);
+    // `valueFormatter` above replaces the value with a run of `hashSymbol`, so markup reaches this
+    // sink only through a developer-supplied `valueFormatter` or a `hashSymbol` that contains HTML.
+    // Both are the developer's own content, but a configured `sanitizer` must still apply, and the
+    // `'password'` context is what makes the missing-sanitizer warning name its source.
+    fastInnerHTML(TD, value, getSanitizer(hotInstance), 'password', hotInstance.rootElement);
 }
 passwordRenderer.valueFormatter = valueFormatter;
 passwordRenderer.RENDERER_TYPE = RENDERER_TYPE;

package/renderers/renderCell.d.mts

@@ -0,0 +1 @@
+export * from './renderCell.js';

package/renderers/renderCell.d.ts

@@ -0,0 +1,37 @@
+import type { CellProperties } from '../settings';
+import type { BaseRenderer } from './baseRenderer';
+/**
+ * A renderer function that may carry a `valueFormatter` static. The built-in numeric and date
+ * renderers do — they delegate rendering to `textRenderer` and expect the caller to format the
+ * value upstream through that static.
+ */
+export type RendererWithValueFormatter = BaseRenderer & {
+    valueFormatter?: (value: unknown, cellProperties: CellProperties) => unknown;
+};
+/**
+ * Resolves the value a cell renders, following the formatter precedence shared by the render path
+ * (`TableView.cellRenderer`) and the AutoRowSize/AutoColumnSize samplers: the cell-level
+ * `valueFormatter` option wins; otherwise the renderer's own `valueFormatter` static applies;
+ * otherwise the value passes through untouched.
+ *
+ * @param {*} value The raw cell value.
+ * @param {object} cellProperties The cell meta object.
+ * @param {Function} renderer The cell's renderer function.
+ * @returns {*} The value the renderer should receive.
+ */
+export declare function formatCellValue(value: unknown, cellProperties: CellProperties, renderer: RendererWithValueFormatter): unknown;
+/**
+ * Renders one cell TD following the renderer contract shared by `TableView.cellRenderer` and
+ * `GhostTable`: run the cell's renderer, run the base renderer when that renderer did not chain it
+ * itself, then reset the chaining flag.
+ *
+ * The built-in renderers no longer call `baseRenderer` themselves — the caller does it, guarded by
+ * the `_isBaseRendererCalled` flag the base renderer sets. The flag lives on the cell meta object,
+ * which for a materialized cell is shared with the next draw, so it must always end up reset —
+ * leaving it set would make the next draw skip the base renderer and drop its classes from the
+ * real cell.
+ *
+ * @param {Function} renderer The cell's renderer function.
+ * @param {Array} rendererArgs The argument tuple every renderer receives.
+ */
+export declare function renderCell(renderer: BaseRenderer, rendererArgs: Parameters<BaseRenderer>): void;

package/renderers/renderCell.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get formatCellValue () {
+        return formatCellValue;
+    },
+    get renderCell () {
+        return renderCell;
+    }
+});
+function formatCellValue(value, cellProperties, renderer) {
+    if (typeof cellProperties.valueFormatter === 'function') {
+        return cellProperties.valueFormatter(value, cellProperties);
+    }
+    if (typeof renderer === 'function' && typeof renderer.valueFormatter === 'function') {
+        return renderer.valueFormatter.call(cellProperties, value, cellProperties);
+    }
+    return value;
+}
+function renderCell(renderer, rendererArgs) {
+    const [hotInstance] = rendererArgs;
+    const cellProperties = rendererArgs[6];
+    try {
+        renderer(...rendererArgs);
+        if (!cellProperties._isBaseRendererCalled) {
+            hotInstance.getCellRenderer({
+                renderer: 'base'
+            })(...rendererArgs);
+        }
+    } finally{
+        // Reset even when a renderer throws — a chained-then-thrown flag would survive on the shared
+        // cell meta and make the next draw skip the base renderer.
+        cellProperties._isBaseRendererCalled = false;
+    }
+}

package/renderers/renderCell.mjs

@@ -0,0 +1,48 @@
+/**
+ * Resolves the value a cell renders, following the formatter precedence shared by the render path
+ * (`TableView.cellRenderer`) and the AutoRowSize/AutoColumnSize samplers: the cell-level
+ * `valueFormatter` option wins; otherwise the renderer's own `valueFormatter` static applies;
+ * otherwise the value passes through untouched.
+ *
+ * @param {*} value The raw cell value.
+ * @param {object} cellProperties The cell meta object.
+ * @param {Function} renderer The cell's renderer function.
+ * @returns {*} The value the renderer should receive.
+ */ export function formatCellValue(value, cellProperties, renderer) {
+    if (typeof cellProperties.valueFormatter === 'function') {
+        return cellProperties.valueFormatter(value, cellProperties);
+    }
+    if (typeof renderer === 'function' && typeof renderer.valueFormatter === 'function') {
+        return renderer.valueFormatter.call(cellProperties, value, cellProperties);
+    }
+    return value;
+}
+/**
+ * Renders one cell TD following the renderer contract shared by `TableView.cellRenderer` and
+ * `GhostTable`: run the cell's renderer, run the base renderer when that renderer did not chain it
+ * itself, then reset the chaining flag.
+ *
+ * The built-in renderers no longer call `baseRenderer` themselves — the caller does it, guarded by
+ * the `_isBaseRendererCalled` flag the base renderer sets. The flag lives on the cell meta object,
+ * which for a materialized cell is shared with the next draw, so it must always end up reset —
+ * leaving it set would make the next draw skip the base renderer and drop its classes from the
+ * real cell.
+ *
+ * @param {Function} renderer The cell's renderer function.
+ * @param {Array} rendererArgs The argument tuple every renderer receives.
+ */ export function renderCell(renderer, rendererArgs) {
+    const [hotInstance] = rendererArgs;
+    const cellProperties = rendererArgs[6];
+    try {
+        renderer(...rendererArgs);
+        if (!cellProperties._isBaseRendererCalled) {
+            hotInstance.getCellRenderer({
+                renderer: 'base'
+            })(...rendererArgs);
+        }
+    } finally{
+        // Reset even when a renderer throws — a chained-then-thrown flag would survive on the shared
+        // cell meta and make the next draw skip the base renderer.
+        cellProperties._isBaseRendererCalled = false;
+    }
+}

package/selection/highlight/types/areaLayered.d.ts

@@ -4,6 +4,8 @@ import VisualSelection from '../visualSelection';
  *
  * @param {object} highlightParams A configuration object to create a highlight.
  * @param {object} highlightParams.areaCornerVisible Function to determine if area's corner should be visible.
+ * @param {object} highlightParams.adjustHandlesVisible Function to determine if adjustment handles should be visible.
+ * @param {object} highlightParams.moveEnabled Function or boolean to determine if the move zone should be shown.
  * @returns {Selection}
  */
-export declare function createHighlight({ areaCornerVisible, ...restOptions }: Record<string, unknown>): VisualSelection;
+export declare function createHighlight({ areaCornerVisible, adjustHandlesVisible, moveEnabled, ...restOptions }: Record<string, unknown>): VisualSelection;

package/selection/highlight/types/areaLayered.js

@@ -15,14 +15,16 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function createHighlight({ areaCornerVisible, ...restOptions }) {
+function createHighlight({ areaCornerVisible, adjustHandlesVisible, moveEnabled, ...restOptions }) {
     return new _visualSelection.default({
         className: 'area',
         createLayers: true,
         border: {
             width: 1,
             color: '#4b89ff',
-            cornerVisible: areaCornerVisible
+            cornerVisible: areaCornerVisible,
+            adjustHandlesVisible,
+            moveEnabled
         },
         ...restOptions,
         selectionType: _src.HIGHLIGHT_AREA_TYPE

package/selection/highlight/types/areaLayered.mjs

@@ -5,15 +5,19 @@ import VisualSelection from '../visualSelection.mjs';
  *
  * @param {object} highlightParams A configuration object to create a highlight.
  * @param {object} highlightParams.areaCornerVisible Function to determine if area's corner should be visible.
+ * @param {object} highlightParams.adjustHandlesVisible Function to determine if adjustment handles should be visible.
+ * @param {object} highlightParams.moveEnabled Function or boolean to determine if the move zone should be shown.
  * @returns {Selection}
- */ export function createHighlight({ areaCornerVisible, ...restOptions }) {
+ */ export function createHighlight({ areaCornerVisible, adjustHandlesVisible, moveEnabled, ...restOptions }) {
     return new VisualSelection({
         className: 'area',
         createLayers: true,
         border: {
             width: 1,
             color: '#4b89ff',
-            cornerVisible: areaCornerVisible
+            cornerVisible: areaCornerVisible,
+            adjustHandlesVisible,
+            moveEnabled
         },
         ...restOptions,
         selectionType: HIGHLIGHT_AREA_TYPE

package/selection/highlight/types/focus.d.ts

@@ -5,6 +5,8 @@ import VisualSelection from '../visualSelection';
  *
  * @param {object} highlightParams A configuration object to create a highlight.
  * @param {Function} highlightParams.cellCornerVisible Function to determine if cell's corner should be visible.
+ * @param {Function} highlightParams.cellMoveEnabled Function to determine if the move zone should be shown
+ *   on the single-cell (focus) selection border.
  * @returns {Selection}
  */
-export declare function createHighlight({ cellCornerVisible, ...restOptions }: Record<string, unknown>): VisualSelection;
+export declare function createHighlight({ cellCornerVisible, cellMoveEnabled, ...restOptions }: Record<string, unknown>): VisualSelection;

package/selection/highlight/types/focus.js

@@ -16,7 +16,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function createHighlight({ cellCornerVisible, ...restOptions }) {
+function createHighlight({ cellCornerVisible, cellMoveEnabled, ...restOptions }) {
     return new _visualSelection.default({
         className: 'current',
         headerAttributes: [
@@ -25,7 +25,8 @@ function createHighlight({ cellCornerVisible, ...restOptions }) {
         border: {
             width: 2,
             color: '#4b89ff',
-            cornerVisible: cellCornerVisible
+            cornerVisible: cellCornerVisible,
+            moveEnabled: cellMoveEnabled
         },
         ...restOptions,
         selectionType: _src.HIGHLIGHT_FOCUS_TYPE

package/selection/highlight/types/focus.mjs

@@ -7,8 +7,10 @@ import { A11Y_SELECTED } from '../../../helpers/a11y.mjs';
  *
  * @param {object} highlightParams A configuration object to create a highlight.
  * @param {Function} highlightParams.cellCornerVisible Function to determine if cell's corner should be visible.
+ * @param {Function} highlightParams.cellMoveEnabled Function to determine if the move zone should be shown
+ *   on the single-cell (focus) selection border.
  * @returns {Selection}
- */ export function createHighlight({ cellCornerVisible, ...restOptions }) {
+ */ export function createHighlight({ cellCornerVisible, cellMoveEnabled, ...restOptions }) {
     return new VisualSelection({
         className: 'current',
         headerAttributes: [
@@ -17,7 +19,8 @@ import { A11Y_SELECTED } from '../../../helpers/a11y.mjs';
         border: {
             width: 2,
             color: '#4b89ff',
-            cornerVisible: cellCornerVisible
+            cornerVisible: cellCornerVisible,
+            moveEnabled: cellMoveEnabled
         },
         ...restOptions,
         selectionType: HIGHLIGHT_FOCUS_TYPE

package/selection/mouseEventHandler.js

@@ -93,39 +93,42 @@ function mouseOver({ isLeftClick, coords, selection, controller, cellCoordsFacto
 }
 function mouseUp({ isLeftClick, selection, cellRangeMapper }) {
     const sel = selection;
-    const dvs = sel.settings.disableVisualSelection;
-    // Treat empty string and empty array as equivalent to `false` (nothing is actually disabled),
-    // matching how the rest of the codebase normalizes this setting.
-    const visualSelectionDisabled = dvs === true || typeof dvs === 'string' && dvs.length > 0 || Array.isArray(dvs) && dvs.length > 0;
-    // The dedup-on-second-click behavior relies on visible selection feedback; without it,
-    // toggling invisible layers produces highlight jumps once any visible range repaints.
-    if (!isLeftClick || sel.settings.selectionMode !== 'multiple' || visualSelectionDisabled) {
+    if (!isLeftClick || sel.settings.selectionMode !== 'multiple') {
         return;
     }
     const selectionRange = sel.getSelectedRange();
     const renderableRange = selectionRange.clone().map((range)=>cellRangeMapper.toRenderable(range));
     const lastRenderableRange = renderableRange.current();
+    // DEV-1771: ctrl+click toggle behavior.
+    //
+    // When the newly added layer is a single cell, check whether that same cell already
+    // existed as a standalone single-cell layer (in visual coords). If it did, the user is
+    // toggling it off — remove all copies of that single-cell layer. Otherwise the click
+    // just moves the active focus; snap hover-extended ranges back to their bounds.
+    //
+    // The guard `isSingleCell()` (on the *visual* range, not the renderable one) prevents
+    // a false-positive toggle when a range collapses to a single renderable cell because
+    // hidden columns/rows make its `from` and `to` renderable coords identical.
     if (lastRenderableRange && renderableRange.size() > 1 && !lastRenderableRange.isHeader() && !sel.isMultiple(lastRenderableRange)) {
-        const ranges = renderableRange.findAll(lastRenderableRange);
-        // Mark the selection source as 'deselect' so `afterSetRangeEnd` in core.js skips the
-        // viewport scroll for this dedup-driven refresh. Other side effects (`closeEditor`,
-        // per-range `render` + `prepareEditor`, and the final batched render in
-        // `afterSelectionFinished`) are guarded against the 'deselect' source in the same way
-        // the existing 'refresh' source is handled - so a single batched render still happens
-        // once the refresh completes.
-        if (ranges.length === renderableRange.size()) {
-            // if the last selection range is the same as the first one (case when the single cell
-            // is selected twice or more) remove duplicate ranges
-            selection.markSource('deselect');
-            selectionRange.pop();
-            selection.refresh();
-            selection.markEndSource();
-        } else if (ranges.length > 1) {
-            selection.markSource('deselect');
-            selectionRange.removeLayers(ranges.map(({ layer })=>layer));
-            selection.refresh();
-            selection.markEndSource();
+        const duplicateLayerIndexes = renderableRange.findAll(lastRenderableRange).filter(({ layer })=>selectionRange.peekByIndex(layer)?.isSingleCell()).map(({ layer })=>layer);
+        if (duplicateLayerIndexes.length >= 2) {
+            if (duplicateLayerIndexes.length >= selectionRange.size()) {
+                // All layers are being removed. Call deselect() before removing so that
+                // the selection is still non-empty; deselect() would return early otherwise
+                // and leave inProgress=true, causing the document-level mouseup handler to
+                // call finish() with an empty selectedRange and crash.
+                selection.deselect();
+            } else {
+                selectionRange.removeLayers(duplicateLayerIndexes);
+                selection.markSource('deselect');
+                selection.refresh();
+                selection.markEndSource();
+            }
+            return;
         }
+        selection.markSource('deselect');
+        selection.refresh();
+        selection.markEndSource();
     }
 }
 const handlers = new Map([

package/selection/mouseEventHandler.mjs

@@ -99,39 +99,42 @@ import { isRightClick as isRightClickEvent, isLeftClick as isLeftClickEvent } fr
  * to renderable indexes.
  */ export function mouseUp({ isLeftClick, selection, cellRangeMapper }) {
     const sel = selection;
-    const dvs = sel.settings.disableVisualSelection;
-    // Treat empty string and empty array as equivalent to `false` (nothing is actually disabled),
-    // matching how the rest of the codebase normalizes this setting.
-    const visualSelectionDisabled = dvs === true || typeof dvs === 'string' && dvs.length > 0 || Array.isArray(dvs) && dvs.length > 0;
-    // The dedup-on-second-click behavior relies on visible selection feedback; without it,
-    // toggling invisible layers produces highlight jumps once any visible range repaints.
-    if (!isLeftClick || sel.settings.selectionMode !== 'multiple' || visualSelectionDisabled) {
+    if (!isLeftClick || sel.settings.selectionMode !== 'multiple') {
         return;
     }
     const selectionRange = sel.getSelectedRange();
     const renderableRange = selectionRange.clone().map((range)=>cellRangeMapper.toRenderable(range));
     const lastRenderableRange = renderableRange.current();
+    // DEV-1771: ctrl+click toggle behavior.
+    //
+    // When the newly added layer is a single cell, check whether that same cell already
+    // existed as a standalone single-cell layer (in visual coords). If it did, the user is
+    // toggling it off — remove all copies of that single-cell layer. Otherwise the click
+    // just moves the active focus; snap hover-extended ranges back to their bounds.
+    //
+    // The guard `isSingleCell()` (on the *visual* range, not the renderable one) prevents
+    // a false-positive toggle when a range collapses to a single renderable cell because
+    // hidden columns/rows make its `from` and `to` renderable coords identical.
     if (lastRenderableRange && renderableRange.size() > 1 && !lastRenderableRange.isHeader() && !sel.isMultiple(lastRenderableRange)) {
-        const ranges = renderableRange.findAll(lastRenderableRange);
-        // Mark the selection source as 'deselect' so `afterSetRangeEnd` in core.js skips the
-        // viewport scroll for this dedup-driven refresh. Other side effects (`closeEditor`,
-        // per-range `render` + `prepareEditor`, and the final batched render in
-        // `afterSelectionFinished`) are guarded against the 'deselect' source in the same way
-        // the existing 'refresh' source is handled - so a single batched render still happens
-        // once the refresh completes.
-        if (ranges.length === renderableRange.size()) {
-            // if the last selection range is the same as the first one (case when the single cell
-            // is selected twice or more) remove duplicate ranges
-            selection.markSource('deselect');
-            selectionRange.pop();
-            selection.refresh();
-            selection.markEndSource();
-        } else if (ranges.length > 1) {
-            selection.markSource('deselect');
-            selectionRange.removeLayers(ranges.map(({ layer })=>layer));
-            selection.refresh();
-            selection.markEndSource();
+        const duplicateLayerIndexes = renderableRange.findAll(lastRenderableRange).filter(({ layer })=>selectionRange.peekByIndex(layer)?.isSingleCell()).map(({ layer })=>layer);
+        if (duplicateLayerIndexes.length >= 2) {
+            if (duplicateLayerIndexes.length >= selectionRange.size()) {
+                // All layers are being removed. Call deselect() before removing so that
+                // the selection is still non-empty; deselect() would return early otherwise
+                // and leave inProgress=true, causing the document-level mouseup handler to
+                // call finish() with an empty selectedRange and crash.
+                selection.deselect();
+            } else {
+                selectionRange.removeLayers(duplicateLayerIndexes);
+                selection.markSource('deselect');
+                selection.refresh();
+                selection.markEndSource();
+            }
+            return;
         }
+        selection.markSource('deselect');
+        selection.refresh();
+        selection.markEndSource();
     }
 }
 const handlers = new Map([

package/selection/moveCells.d.mts

@@ -0,0 +1 @@
+export * from './moveCells.js';