@svgrid/grid 2.6.22 → 2.6.23

package/dist/clipboard.js

@@ -5,12 +5,26 @@ import { parseEditorValue, } from "./index.js";
 import "./sv-grid-scrollbar.js";
 import { buildFillPattern } from "./fill-patterns.js";
 import { getCellKey, } from "./SvGrid.helpers.js";
-import { getColumnBaseValue, isGroupRow, toolPanelHeaderLabel, } from "./cell-values.js";
+import { createDataIndexLookup, getColumnBaseValue, isGroupRow, toolPanelHeaderLabel, } from "./cell-values.js";
 export function createClipboard(ctx) {
+    /**
+     * `rowIndex` here is a DISPLAY index - a position in `allRows`, the space the
+     * selection rectangle, the fill drag and `isCellEditableAt` all work in.
+     * These two functions used to index `internalData` with it directly, which is
+     * the same row only while the grid is unsorted, unfiltered and unpaginated.
+     * Sort a column and the fill handle read its pattern from one row and wrote
+     * to another; enterprise bulk edit wrote to the wrong rows the same way.
+     *
+     * `row.original` IS the object in `data`, so identity resolves the slot no
+     * matter how the view is ordered.
+     */
+    function rowDataAt(rowIndex) {
+        return ctx.allRows[rowIndex]?.original;
+    }
     /** Read the raw underlying value for the cell at (rowIndex, columnId)
      *  for pattern extraction. */
     function readCellRaw(rowIndex, columnId) {
-        const row = ctx.internalData[rowIndex];
+        const row = rowDataAt(rowIndex);
         const column = ctx.findColumnById(columnId);
         if (!row || !column?.columnDef.field)
             return undefined;
@@ -20,7 +34,7 @@ export function createClipboard(ctx) {
      *  edit lifecycle. Fires `onCellValueChange` per write so consumers
      *  can react (formula recompute, autosave, etc.). */
     function writeCellRaw(rowIndex, columnId, value) {
-        const row = ctx.internalData[rowIndex];
+        const row = rowDataAt(rowIndex);
         const column = ctx.findColumnById(columnId);
         if (!row || !column?.columnDef.field)
             return;
@@ -28,24 +42,28 @@ export function createClipboard(ctx) {
         const oldValue = row[field];
         if (oldValue === value)
             return;
-        // Resolve the row's id BEFORE swapping internalData - otherwise the
-        // recomputed `allRows` references the new row object and the
-        // `r.original === row` lookup fails, dropping our edit out of the
-        // `editedCellValues` map (which getCellDisplayValue consults first).
-        const rowId = ctx.allRows.find((r) => r.original === row)?.id;
+        // The slot in `data` backing this displayed row. Also read BEFORE swapping
+        // internalData: afterwards the recomputed `allRows` references the new row
+        // object, so an `original`-based lookup would miss and drop the edit out of
+        // `editedCellValues` (which getCellDisplayValue consults first).
+        const dataIndex = ctx.internalData.indexOf(row);
+        if (dataIndex < 0)
+            return;
+        const rowId = ctx.allRows[rowIndex]?.id;
         const next = ctx.internalData.slice();
-        next[rowIndex] = { ...row, [field]: value };
+        next[dataIndex] = { ...row, [field]: value };
         ctx.internalData = next;
         if (rowId) {
             const key = getCellKey(rowId, columnId);
             ctx.editedCellValues = { ...ctx.editedCellValues, [key]: value };
         }
         ctx.props.onCellValueChange?.({
-            rowIndex,
+            // The position in `props.data`, matching what the inline editor reports.
+            rowIndex: dataIndex,
             columnId,
             oldValue,
             newValue: value,
-            row: next[rowIndex],
+            row: next[dataIndex],
         });
     }
     /** Apply the pattern fill on pointerup. Each NEW row (or column) is
@@ -58,6 +76,7 @@ export function createClipboard(ctx) {
         // Clear fillDrag FIRST so a thrown error doesn't leave the grid
         // stuck tracking the pointer.
         ctx.fillDrag = null;
+        stopEdgeScroll();
         const newMinRow = Math.min(d.sourceMinRow, d.targetRow);
         const newMaxRow = Math.max(d.sourceMaxRow, d.targetRow);
         const newMinCol = Math.min(d.sourceMinCol, d.targetCol);
@@ -202,29 +221,379 @@ export function createClipboard(ctx) {
         // back to the handle, breaking the lookup. Window-level handlers
         // (`onWindowPointerMove` / `endDragSelection`) keep tracking.
     }
-    /** Pointermove during fill-drag. We don't get cell coords from the
-     *  event directly - find the td under the pointer via elementFromPoint
-     *  and read its data-svgrid-row / data-svgrid-col attributes. */
-    function onFillPointerMove(event) {
-        if (!ctx.fillDrag)
-            return;
-        const el = document.elementFromPoint(event.clientX, event.clientY);
+    /** The grid cell under a viewport point, or null. Drags cannot read their
+     *  target off the event: the pointer is over whatever `<td>` happens to be
+     *  there, and during a fill/move drag the event target is the cell the drag
+     *  STARTED on. */
+    function cellAtPoint(x, y) {
+        const el = document.elementFromPoint(x, y);
         const cell = el?.closest("td[data-svgrid-row][data-svgrid-col]");
         if (!cell)
+            return null;
+        const row = Number(cell.dataset.svgridRow);
+        const col = Number(cell.dataset.svgridCol);
+        if (!Number.isFinite(row) || !Number.isFinite(col))
+            return null;
+        return { row, col };
+    }
+    // ---- Edge auto-scroll -------------------------------------------------
+    // Shared by all three drags that extend a rectangle - fill, range move, and
+    // plain drag-select. Without it a drag can only reach cells that are already
+    // on screen, which on a grid the size this one is built for means most of
+    // them are unreachable.
+    /** How far from the viewport edge the scroll starts, in CSS pixels. */
+    const EDGE_BAND_PX = 40;
+    /** Fastest scroll, in pixels per frame, reached at the very edge. */
+    const EDGE_MAX_PX = 20;
+    let edgeFrame = null;
+    let edgePointer = null;
+    function stopEdgeScroll() {
+        if (edgeFrame != null)
+            cancelAnimationFrame(edgeFrame);
+        edgeFrame = null;
+        edgePointer = null;
+    }
+    /**
+     * Pixels to scroll this frame along one axis. Zero in the middle, ramping to
+     * EDGE_MAX_PX at the edge and staying there once the pointer leaves the
+     * container entirely - a linear ramp rather than a constant step, so nudging
+     * one row past the edge creeps instead of lurching.
+     */
+    function edgeVelocity(pos, min, max) {
+        if (pos < min + EDGE_BAND_PX) {
+            const depth = Math.min(EDGE_BAND_PX, min + EDGE_BAND_PX - pos);
+            return -Math.ceil((depth / EDGE_BAND_PX) * EDGE_MAX_PX);
+        }
+        if (pos > max - EDGE_BAND_PX) {
+            const depth = Math.min(EDGE_BAND_PX, pos - (max - EDGE_BAND_PX));
+            return Math.ceil((depth / EDGE_BAND_PX) * EDGE_MAX_PX);
+        }
+        return 0;
+    }
+    /** Point the in-flight drag at whatever cell is under (x, y) now. */
+    function retargetDrag(x, y) {
+        const hit = cellAtPoint(x, y);
+        if (!hit)
             return;
-        const r = Number(cell.dataset.svgridRow);
-        const c = Number(cell.dataset.svgridCol);
-        if (!Number.isFinite(r) || !Number.isFinite(c))
+        if (ctx.moveDrag) {
+            if (hit.row === ctx.moveDrag.targetRow && hit.col === ctx.moveDrag.targetCol)
+                return;
+            ctx.moveDrag = { ...ctx.moveDrag, targetRow: hit.row, targetCol: hit.col };
+        }
+        else if (ctx.fillDrag) {
+            if (hit.row === ctx.fillDrag.targetRow && hit.col === ctx.fillDrag.targetCol)
+                return;
+            ctx.fillDrag = { ...ctx.fillDrag, targetRow: hit.row, targetCol: hit.col };
+        }
+        else if (ctx.isDraggingSelection) {
+            ctx.extendSelection(hit.row, hit.col);
+            ctx.setActiveCell(hit.row, hit.col);
+        }
+    }
+    function stepEdgeScroll() {
+        edgeFrame = null;
+        const scroller = ctx.scrollContainer;
+        const p = edgePointer;
+        const dragging = ctx.moveDrag || ctx.fillDrag || ctx.isDraggingSelection;
+        if (!scroller || !p || !dragging) {
+            stopEdgeScroll();
             return;
-        if (r === ctx.fillDrag.targetRow && c === ctx.fillDrag.targetCol)
+        }
+        const rect = scroller.getBoundingClientRect();
+        const dx = edgeVelocity(p.x, rect.left, rect.right);
+        const dy = edgeVelocity(p.y, rect.top, rect.bottom);
+        if (dx || dy) {
+            const fromX = scroller.scrollLeft;
+            const fromY = scroller.scrollTop;
+            scroller.scrollLeft += dx;
+            scroller.scrollTop += dy;
+            // Only re-target when the view actually moved. At either end the scroll
+            // clamps, and re-targeting then would fight a pointer that is parked
+            // still - the selection would flicker between two cells every frame.
+            if (scroller.scrollLeft !== fromX || scroller.scrollTop !== fromY) {
+                retargetDrag(p.x, p.y);
+            }
+        }
+        edgeFrame = requestAnimationFrame(stepEdgeScroll);
+    }
+    /**
+     * Record where the pointer is and make sure the scroll loop is running. The
+     * loop keeps going after the pointer stops moving, which is the whole point:
+     * a user parks the cursor at the edge and expects the grid to keep coming.
+     */
+    function trackEdgeScroll(event) {
+        edgePointer = { x: event.clientX, y: event.clientY };
+        if (edgeFrame == null)
+            edgeFrame = requestAnimationFrame(stepEdgeScroll);
+    }
+    /** Pointermove during fill-drag. */
+    function onFillPointerMove(event) {
+        if (!ctx.fillDrag)
+            return;
+        trackEdgeScroll(event);
+        const hit = cellAtPoint(event.clientX, event.clientY);
+        if (!hit)
             return;
-        ctx.fillDrag = { ...ctx.fillDrag, targetRow: r, targetCol: c };
+        if (hit.row === ctx.fillDrag.targetRow && hit.col === ctx.fillDrag.targetCol)
+            return;
+        ctx.fillDrag = { ...ctx.fillDrag, targetRow: hit.row, targetCol: hit.col };
     }
     function onFillPointerUp() {
         if (!ctx.fillDrag)
             return;
         applyFillPattern();
     }
+    // ---- Range move / copy (drag the selection border) --------------------
+    /** How thick the draggable strip on a range border is, in CSS pixels.
+     *  Anything further inside the cell keeps its old behaviour of starting a
+     *  fresh selection, so this only claims the outer sliver. */
+    const MOVE_GRAB_PX = 4;
+    /** Is (clientX, clientY) on the grab strip of the range border that the
+     *  cell at (rowIndex, colIndex) sits on? Returns false for any cell that
+     *  is not on a range edge, so the common case costs one call to
+     *  `getCellRangeEdges` - which itself bails immediately with no selection. */
+    function isOnMoveGrabStrip(cell, rowIndex, colIndex, clientX, clientY) {
+        if (!ctx.moveCellsEffective)
+            return false;
+        const edges = ctx.getCellRangeEdges(rowIndex, colIndex);
+        if (!edges)
+            return false;
+        // One layout read per pointermove, and only once the pointer is over a
+        // cell that IS on a range edge. Reading a single rect is cheap unless
+        // the DOM is dirty, and the only write this path makes is a boolean flag
+        // that changes at most twice per border crossing.
+        const box = cell.getBoundingClientRect();
+        const x = clientX - box.left;
+        const y = clientY - box.top;
+        return ((edges.top && y >= 0 && y <= MOVE_GRAB_PX) ||
+            (edges.bottom && box.height - y >= 0 && box.height - y <= MOVE_GRAB_PX) ||
+            (edges.left && x >= 0 && x <= MOVE_GRAB_PX) ||
+            (edges.right && box.width - x >= 0 && box.width - x <= MOVE_GRAB_PX));
+    }
+    /** Border pointerdown - seed a range move. Returns false when the pointer
+     *  was not on the grab strip, which is the caller's signal to fall through
+     *  to normal selection behaviour. */
+    function startMoveDrag(event, rowIndex, colIndex) {
+        if (event.button !== 0)
+            return false;
+        // Mouse and pen only, the same policy drag-select uses (issue #23) and for
+        // a worse reason: this path DOES preventDefault, so a finger that happened
+        // to land within 4px of a selection border would start a move and kill the
+        // browser's native scroll for that gesture. There is no hover on touch
+        // either, so the border carries no affordance to find in the first place.
+        // Touch already has cut/paste for the same job.
+        if (event.pointerType === "touch")
+            return false;
+        // `event.target`, not `currentTarget`: Svelte 5 delegates pointerdown to
+        // the root, and the strip test needs the cell's own rect - the target can
+        // be a span inside the cell, so walk up to the td.
+        const cell = event.target?.closest?.("td[data-svgrid-row][data-svgrid-col]");
+        if (!cell)
+            return false;
+        if (!isOnMoveGrabStrip(cell, rowIndex, colIndex, event.clientX, event.clientY))
+            return false;
+        const rect = moveSourceRect(rowIndex, colIndex);
+        if (!rect)
+            return false;
+        event.stopPropagation();
+        // preventDefault stops the drag from rubber-banding a text selection over
+        // the rows it passes, which also means the grid never gets focus from the
+        // gesture - so take it explicitly, or the keyboard stops working after a
+        // move.
+        event.preventDefault();
+        ctx.gridRootEl?.focus({ preventScroll: true });
+        ctx.moveDrag = {
+            ...rect,
+            grabRow: rowIndex,
+            grabCol: colIndex,
+            targetRow: rowIndex,
+            targetCol: colIndex,
+            copy: event.ctrlKey || event.metaKey,
+        };
+        // No `setPointerCapture`, for the same reason the fill handle skips it:
+        // the drag finds its target cell with `elementFromPoint`, and capture
+        // would route every move back to the cell the drag started on.
+        return true;
+    }
+    /** The selection rectangle that CONTAINS (rowIndex, colIndex), which is the
+     *  one whose border the user grabbed. With several committed ranges the
+     *  grabbed one is the one that moves, not whichever happens to be active. */
+    function moveSourceRect(rowIndex, colIndex) {
+        for (const rect of ctx.getSelectionRects()) {
+            if (rowIndex >= rect.minRow &&
+                rowIndex <= rect.maxRow &&
+                colIndex >= rect.minCol &&
+                colIndex <= rect.maxCol) {
+                return {
+                    sourceMinRow: rect.minRow,
+                    sourceMaxRow: rect.maxRow,
+                    sourceMinCol: rect.minCol,
+                    sourceMaxCol: rect.maxCol,
+                };
+            }
+        }
+        return null;
+    }
+    function onMovePointerMove(event) {
+        const d = ctx.moveDrag;
+        if (!d)
+            return;
+        trackEdgeScroll(event);
+        const hit = cellAtPoint(event.clientX, event.clientY);
+        // Track the modifier even when the pointer is between cells, so releasing
+        // Ctrl over a gap still flips a copy back to a move.
+        const copy = event.ctrlKey || event.metaKey;
+        if (!hit) {
+            if (copy !== d.copy)
+                ctx.moveDrag = { ...d, copy };
+            return;
+        }
+        if (hit.row === d.targetRow && hit.col === d.targetCol && copy === d.copy)
+            return;
+        ctx.moveDrag = { ...d, targetRow: hit.row, targetCol: hit.col, copy };
+    }
+    function onMovePointerUp(event) {
+        if (!ctx.moveDrag)
+            return;
+        // Take the modifier from the RELEASE. Reading it only on pointermove made
+        // "drag, then press Ctrl, then let go" a move - which is the natural way
+        // to do it, and is a copy in every spreadsheet.
+        if (event) {
+            const copy = event.ctrlKey || event.metaKey;
+            if (copy !== ctx.moveDrag.copy)
+                ctx.moveDrag = { ...ctx.moveDrag, copy };
+        }
+        applyMoveRange();
+    }
+    /** Where a move would land, or null when the drag has not left the spot it
+     *  started on. Shared by the drop and by the preview marquee so the outline
+     *  can never promise a rectangle the drop would refuse. */
+    function moveDestRect(d) {
+        const dr = d.targetRow - d.grabRow;
+        const dc = d.targetCol - d.grabCol;
+        if (dr === 0 && dc === 0)
+            return null;
+        const minRow = d.sourceMinRow + dr;
+        const maxRow = d.sourceMaxRow + dr;
+        const minCol = d.sourceMinCol + dc;
+        const maxCol = d.sourceMaxCol + dc;
+        if (minRow < 0 || minCol < 0)
+            return null;
+        if (maxRow >= ctx.allRows.length)
+            return null;
+        if (maxCol >= ctx.allColumns.length)
+            return null;
+        return { minRow, maxRow, minCol, maxCol };
+    }
+    /**
+     * Commit a range move (or copy). Refuses the whole operation rather than
+     * applying the part that fits: a move that silently skipped a read-only or
+     * grouped destination cell would leave the range split across two places
+     * with no way to tell which half landed.
+     */
+    function applyMoveRange() {
+        const d = ctx.moveDrag;
+        if (!d)
+            return;
+        // Clear the drag FIRST so a thrown error can't leave the grid tracking
+        // the pointer forever, exactly as applyFillPattern does.
+        ctx.moveDrag = null;
+        stopEdgeScroll();
+        const dest = moveDestRect(d);
+        if (!dest)
+            return;
+        const height = d.sourceMaxRow - d.sourceMinRow + 1;
+        const width = d.sourceMaxCol - d.sourceMinCol + 1;
+        // Every column the move touches must be field-backed on BOTH sides: a
+        // computed / accessor column has nowhere to write the value back to.
+        for (let c = 0; c < width; c += 1) {
+            if (!ctx.allColumns[d.sourceMinCol + c]?.columnDef.field)
+                return;
+            if (!ctx.allColumns[dest.minCol + c]?.columnDef.field)
+                return;
+        }
+        // Destination must be writable, and so must the source when the values
+        // are leaving it. Group rows fail this through isCellEditableAt.
+        for (let r = 0; r < height; r += 1) {
+            for (let c = 0; c < width; c += 1) {
+                if (!ctx.isCellEditableAt(dest.minRow + r, dest.minCol + c))
+                    return;
+                if (!d.copy &&
+                    !ctx.isCellEditableAt(d.sourceMinRow + r, d.sourceMinCol + c))
+                    return;
+            }
+        }
+        // Snapshot the source before touching anything - source and destination
+        // overlap on any short drag, so reading lazily would move already-moved
+        // values a second time.
+        const values = [];
+        for (let r = 0; r < height; r += 1) {
+            const rowValues = [];
+            for (let c = 0; c < width; c += 1) {
+                const column = ctx.allColumns[d.sourceMinCol + c];
+                rowValues.push(readCellRaw(d.sourceMinRow + r, column.id));
+            }
+            values.push(rowValues);
+        }
+        const steps = [];
+        const write = (rowIndex, colIndex, value) => {
+            const column = ctx.allColumns[colIndex];
+            if (!column?.columnDef.field)
+                return;
+            const before = readCellRaw(rowIndex, column.id);
+            if (before === value)
+                return;
+            // Resolve the row id BEFORE the write: writeCellRaw swaps in a fresh
+            // row object, so an `original`-based lookup afterwards would miss.
+            const rowId = ctx.allRows[rowIndex]?.id;
+            writeCellRaw(rowIndex, column.id, value);
+            if (rowId) {
+                steps.push({
+                    rowId,
+                    columnId: column.id,
+                    field: column.columnDef.field,
+                    before,
+                    after: value,
+                });
+            }
+        };
+        // Clear the whole source first, then write the destination. With the
+        // values already snapshotted this is correct even when the rectangles
+        // overlap: the destination write always lands after the clear.
+        if (!d.copy) {
+            for (let r = 0; r < height; r += 1) {
+                for (let c = 0; c < width; c += 1) {
+                    write(d.sourceMinRow + r, d.sourceMinCol + c, null);
+                }
+            }
+        }
+        for (let r = 0; r < height; r += 1) {
+            for (let c = 0; c < width; c += 1) {
+                write(dest.minRow + r, dest.minCol + c, values[r][c]);
+            }
+        }
+        // One undo entry per changed cell, appended together so a single Ctrl+Z
+        // sequence walks the whole move back. Same shape and truncation rule as
+        // a whole-row commit.
+        if (steps.length) {
+            let hist = ctx.history.slice(0, ctx.historyPtr + 1);
+            for (const step of steps)
+                hist.push(step);
+            if (hist.length > ctx.UNDO_LIMIT)
+                hist = hist.slice(hist.length - ctx.UNDO_LIMIT);
+            ctx.history = hist;
+            ctx.historyPtr = ctx.history.length - 1;
+            ctx.historyVersion += 1;
+        }
+        // Follow the values: the range stays selected where it landed, so a
+        // second drag can chain off the first the way it does in a spreadsheet.
+        ctx.selectionRanges = [];
+        ctx.selectionRange = {
+            anchor: { rowIndex: dest.minRow, colIndex: dest.minCol },
+            focus: { rowIndex: dest.maxRow, colIndex: dest.maxCol },
+        };
+        ctx.setActiveCell(dest.minRow, dest.minCol);
+    }
     function toggleBooleanCell(rowIndex, colIndex) {
         const row = ctx.allRows[rowIndex];
         const column = ctx.allColumns[colIndex];
@@ -356,14 +725,15 @@ export function createClipboard(ctx) {
         const next = ctx.internalData.slice();
         let mutated = false;
         const changes = [];
+        const dataIndexOf = createDataIndexLookup(next);
         for (let r = startRow; r <= endRow; r += 1) {
             const row = ctx.allRows[r];
             if (!row || isGroupRow(row))
                 continue;
-            const dataIndex = Number(row.id);
-            if (!Number.isInteger(dataIndex) ||
-                dataIndex < 0 ||
-                dataIndex >= next.length)
+            // By identity, not `Number(row.id)` - that is the array index only under
+            // the default getRowId, so a custom one cleared the wrong row.
+            const dataIndex = dataIndexOf(row);
+            if (dataIndex < 0)
                 continue;
             const originalRow = next[dataIndex];
             if (!originalRow)
@@ -430,6 +800,14 @@ export function createClipboard(ctx) {
         startFillDrag,
         onFillPointerMove,
         onFillPointerUp,
+        isOnMoveGrabStrip,
+        startMoveDrag,
+        onMovePointerMove,
+        onMovePointerUp,
+        trackEdgeScroll,
+        stopEdgeScroll,
+        applyMoveRange,
+        moveDestRect,
         toggleBooleanCell,
         copySelectionToClipboard,
         clearSelectedCells,

package/dist/editing.js

@@ -5,7 +5,7 @@ import { parseEditorValue, } from "./index.js";
 import "./sv-grid-scrollbar.js";
 import { getNextActiveCell } from "./keyboard.js";
 import { getCellKey, toValueArray, } from "./SvGrid.helpers.js";
-import { getColumnBaseValue, isGroupRow, } from "./cell-values.js";
+import { createDataIndexLookup, getColumnBaseValue, isGroupRow, } from "./cell-values.js";
 export function createEditing(ctx) {
     /**
      * Resolve `columnDef.editable` for one row × column pair.
@@ -117,6 +117,8 @@ export function createEditing(ctx) {
         const column = ctx.allColumns.find((entry) => entry.id === ctx.editingCell?.columnId);
         const parsedValue = parseEditorValue(ctx.editingCell.editorType, ctx.editingCell.value, {
             multiple: column?.columnDef.editorMultiple === true,
+            // A dateString column holds 'YYYY-MM-DD', not a timestamp.
+            dateOnly: column?.columnDef.cellDataType === "dateString",
         });
         let oldValue = undefined;
         let finalValue = parsedValue;
@@ -378,16 +380,16 @@ export function createEditing(ctx) {
             ? endCol - startCol + 1
             : Math.max(...lines.map((l) => l.split("\t").length));
         const next = ctx.internalData.slice();
+        const dataIndexOf = createDataIndexLookup(next);
         for (let i = 0; i < rowSpan; i += 1) {
             const targetRowIndex = startRow + i;
             const row = ctx.allRows[targetRowIndex];
             if (!row || isGroupRow(row))
                 continue;
-            // Map the visible row back to its index in the data array via row.id (default = String(index)).
-            const dataIndex = Number(row.id);
-            if (!Number.isInteger(dataIndex) ||
-                dataIndex < 0 ||
-                dataIndex >= next.length)
+            // Map the visible row back to its slot in the data array by identity -
+            // `row.id` is only the index under the default getRowId.
+            const dataIndex = dataIndexOf(row);
+            if (dataIndex < 0)
                 continue;
             const originalRow = next[dataIndex];
             if (!originalRow)
@@ -407,7 +409,9 @@ export function createEditing(ctx) {
                 const editorType = (column.columnDef.editorType ??
                     "text");
                 const raw = fillRange ? lines[0] : sourceCells?.[j] ?? "";
-                updated[column.columnDef.field] = parseEditorValue(editorType, raw);
+                updated[column.columnDef.field] = parseEditorValue(editorType, raw, {
+                    dateOnly: column.columnDef.cellDataType === "dateString",
+                });
             }
             next[dataIndex] = updated;
         }
@@ -496,6 +500,7 @@ export function createEditing(ctx) {
             const editorType = (column.columnDef.editorType ?? "text");
             const parsed = parseEditorValue(editorType, fr.draft[column.id], {
                 multiple: column.columnDef.editorMultiple === true,
+                dateOnly: column.columnDef.cellDataType === "dateString",
             });
             const oldValue = row.original[field];
             const parser = column.columnDef.valueParser;

package/dist/editors/cell-editors.d.ts

@@ -12,6 +12,17 @@ export type CellEditorOption = {
 export type ParseEditorValueOptions = {
     /** When true, list/chips return an array; otherwise a scalar. */
     multiple?: boolean;
+    /**
+     * Keep a date as the plain `YYYY-MM-DD` string the user picked, instead of a
+     * full ISO timestamp. Set for `cellDataType: 'dateString'` columns, which
+     * exist precisely to hold ISO date strings.
+     *
+     * It is not only about shape. `new Date('2026-12-25').toISOString()` sends
+     * the value through UTC, so a local midnight becomes the previous or next
+     * day either side of the meridian - the stored DATE changes depending on
+     * where the user is sitting. Slicing the picked date avoids that entirely.
+     */
+    dateOnly?: boolean;
 };
 /** Normalize the loose `editorOptions` ColumnDef prop into a uniform shape.
  *  Dynamic (function) editorOptions are resolved before reaching here. */

package/dist/editors/cell-editors.js

@@ -36,7 +36,24 @@ export function parseEditorValue(rawType, value, opts) {
         return s || '#000000';
     }
     if (type === 'date') {
-        const date = new Date(String(value));
+        const raw = String(value ?? '');
+        if (opts?.dateOnly) {
+            // Take the calendar date the editor produced as-is. It already arrives
+            // as `YYYY-MM-DD` (or that prefix on a datetime), so there is nothing to
+            // convert - and converting is exactly what shifts the day across a
+            // timezone boundary.
+            const match = /^(\d{4}-\d{2}-\d{2})/.exec(raw.trim());
+            if (match)
+                return match[1];
+            const parsed = new Date(raw);
+            if (Number.isNaN(parsed.getTime()))
+                return null;
+            // A non-ISO input (a locale string) still has to become a date string.
+            // Use the LOCAL parts, so the day is the one the user saw.
+            const pad = (n) => String(n).padStart(2, '0');
+            return `${parsed.getFullYear()}-${pad(parsed.getMonth() + 1)}-${pad(parsed.getDate())}`;
+        }
+        const date = new Date(raw);
         return Number.isNaN(date.getTime()) ? null : date.toISOString();
     }
     if (type === 'datetime') {

package/dist/grid-messages.d.ts

@@ -54,9 +54,24 @@ export type GridMessages = {
     menuRemoveRow: string;
     menuRemoveColumn: string;
     menuEditComment: string;
+    selectionBarLabel: string;
+    selectionBarCount: string;
+    selectionBarClear: string;
+    selectionBarMore: string;
+    selectionBarSelectAll: string;
+    selectionBarEditFields: string;
+    bulkEditTitle: string;
+    bulkEditLead: string;
+    bulkEditMixed: string;
+    bulkEditApply: string;
+    bulkEditCancel: string;
+    bulkEditNoFields: string;
     chartRange: string;
     pivotUpsellTitle: string;
     pivotUpsellBody: string;
+    /** Shared licensing line under every Enterprise upsell note. */
+    upsellLicense: string;
+    upsellLicenseLink: string;
 };
 /** English defaults - the literal strings the grid shipped before localization. */
 export declare const defaultGridMessages: GridMessages;

package/dist/grid-messages.js

@@ -49,6 +49,19 @@ export const defaultGridMessages = {
     menuRemoveRow: 'Remove row',
     menuRemoveColumn: 'Remove column',
     menuEditComment: 'Edit comment',
+    selectionBarLabel: 'Selection actions',
+    /** Label beside the count CHIP, which carries the number itself. */
+    selectionBarCount: 'selected',
+    selectionBarClear: 'Clear selection',
+    selectionBarMore: 'More actions',
+    selectionBarSelectAll: 'Select all',
+    selectionBarEditFields: 'Edit fields',
+    bulkEditTitle: 'Edit fields',
+    bulkEditLead: 'Changes apply to all {count} selected items. Fields you leave alone keep their existing values.',
+    bulkEditMixed: 'Multiple values',
+    bulkEditApply: 'Apply to {count} items',
+    bulkEditCancel: 'Cancel',
+    bulkEditNoFields: 'No editable fields on this grid.',
     opContains: 'Contains',
     opNotContains: 'Not contains',
     opEquals: 'Equals',
@@ -68,6 +81,8 @@ export const defaultGridMessages = {
     chartRange: 'Chart selected range',
     pivotUpsellTitle: 'Pivot mode',
     pivotUpsellBody: 'Pivot mode is an Enterprise feature. Install @svgrid/enterprise and call enablePivot() to use it.',
+    upsellLicense: 'A license key is required for production use. Without one the feature still works, but the grid renders an unlicensed watermark.',
+    upsellLicenseLink: 'View licensing',
 };
 /**
  * Merge a consumer's `localeText` over the English defaults. Undefined/empty