@svgrid/grid 3.0.2 → 3.0.4

package/dist/clipboard.d.ts

@@ -8,6 +8,7 @@ export declare function createClipboard<TFeatures extends TableFeatures = TableF
     startFillDrag: (event: PointerEvent, rowIndex: number, colIndex: number) => void;
     onFillPointerMove: (event: PointerEvent) => void;
     onFillPointerUp: () => void;
+    fillDownToNeighbour: () => void;
     isOnMoveGrabStrip: (cell: HTMLElement, rowIndex: number, colIndex: number, clientX: number, clientY: number) => boolean;
     startMoveDrag: (event: PointerEvent, rowIndex: number, colIndex: number) => boolean;
     onMovePointerMove: (event: PointerEvent) => void;

package/dist/clipboard.js

@@ -6,6 +6,7 @@ import "./sv-grid-scrollbar.js";
 import { buildFillPattern } from "./fill-patterns.js";
 import { getCellKey, } from "./SvGrid.helpers.js";
 import { createDataIndexLookup, getColumnBaseValue, isGroupRow, toolPanelHeaderLabel, } from "./cell-values.js";
+import { pushHistory, nextGroupId, runHistoryGroup } from "./history.js";
 export function createClipboard(ctx) {
     /**
      * `rowIndex` here is a DISPLAY index - a position in `allRows`, the space the
@@ -69,7 +70,86 @@ export function createClipboard(ctx) {
     /** Apply the pattern fill on pointerup. Each NEW row (or column) is
      *  filled from a pattern derived from the matching column (or row) of
      *  the source. Handles all four drag directions. */
+    /**
+     * Write one filled cell and remember it, so the drag undoes as a unit.
+     * `writeCellRaw` keeps no history of its own; the fill used to call it in
+     * a loop and push nothing, which left Ctrl+Z blind to a whole drag.
+     */
+    function writeFilled(steps, rowIndex, columnId, value) {
+        const row = ctx.allRows[rowIndex];
+        const column = ctx.findColumnById(columnId);
+        const field = column?.columnDef.field;
+        if (!row || field == null)
+            return;
+        const before = readCellRaw(rowIndex, columnId);
+        writeCellRaw(rowIndex, columnId, value);
+        if (before !== value)
+            steps.push({ rowId: row.id, columnId, field, before, after: value });
+    }
     function applyFillPattern() {
+        const steps = [];
+        runHistoryGroup(ctx, () => applyFillCells(steps));
+        if (steps.length)
+            pushHistory(ctx, steps, nextGroupId());
+    }
+    /**
+     * The value for the i-th filled cell: the consumer's, when its hook has
+     * one for the source cell the target cycles back to, else the pattern's.
+     * `sourceStart` is the row (or column) of the first source value and
+     * `targetStart` that of the first target; `step` is -1 filling upward.
+     */
+    function filledValue(sources, pattern, i, sourceStart, targetStart, step, axis, rowIndex, columnId) {
+        const hook = ctx.props.processCellForFill;
+        if (hook && sources.length) {
+            const k = i % sources.length;
+            const distance = (targetStart + step * i) - (sourceStart + step * k);
+            const delta = axis === "rows" ? { rows: distance, cols: 0 } : { rows: 0, cols: distance };
+            const decided = hook({ value: sources[k], delta, rowIndex, columnId });
+            if (decided !== undefined)
+                return decided;
+        }
+        return pattern[i];
+    }
+    /**
+     * Double-click on the fill handle: fill down as far as the column beside
+     * the selection has data, the way Excel's does. The column to the left
+     * decides; when it is blank below the selection (or there is none) the
+     * one to the right does. Nothing to follow, nothing filled.
+     */
+    function fillDownToNeighbour() {
+        const anchor = ctx.selectionRange.anchor ?? ctx.grid.getState().activeCell;
+        if (!anchor)
+            return;
+        const focus = ctx.selectionRange.focus ?? anchor;
+        const minRow = Math.min(anchor.rowIndex, focus.rowIndex);
+        const maxRow = Math.max(anchor.rowIndex, focus.rowIndex);
+        const minCol = Math.min(anchor.colIndex, focus.colIndex);
+        const maxCol = Math.max(anchor.colIndex, focus.colIndex);
+        const filled = (r, c) => {
+            const col = ctx.allColumns[c];
+            if (!col)
+                return false;
+            const v = readCellRaw(r, col.id);
+            return v != null && v !== "";
+        };
+        const extent = (c) => {
+            let r = maxRow;
+            while (r + 1 < ctx.allRows.length && filled(r + 1, c))
+                r += 1;
+            return r;
+        };
+        let target = minCol > 0 ? extent(minCol - 1) : maxRow;
+        if (target === maxRow)
+            target = extent(maxCol + 1);
+        if (target <= maxRow)
+            return;
+        ctx.fillDrag = {
+            sourceMinRow: minRow, sourceMaxRow: maxRow, sourceMinCol: minCol, sourceMaxCol: maxCol,
+            targetRow: target, targetCol: maxCol,
+        };
+        applyFillPattern();
+    }
+    function applyFillCells(steps) {
         const d = ctx.fillDrag;
         if (!d)
             return;
@@ -102,7 +182,7 @@ export function createClipboard(ctx) {
                     for (let i = 0; i < targetRows; i += 1) {
                         const targetRow = d.sourceMaxRow + 1 + i;
                         if (ctx.isCellEditableAt(targetRow, c))
-                            writeCellRaw(targetRow, column.id, fills[i]);
+                            writeFilled(steps, targetRow, column.id, filledValue(sourceColValues, fills, i, d.sourceMinRow, d.sourceMaxRow + 1, 1, "rows", targetRow, column.id));
                     }
                 }
                 if (newMinRow < d.sourceMinRow) {
@@ -113,7 +193,7 @@ export function createClipboard(ctx) {
                     for (let i = 0; i < targetRows; i += 1) {
                         const targetRow = d.sourceMinRow - 1 - i;
                         if (ctx.isCellEditableAt(targetRow, c))
-                            writeCellRaw(targetRow, column.id, fills[i]);
+                            writeFilled(steps, targetRow, column.id, filledValue(reversed, fills, i, d.sourceMaxRow, d.sourceMinRow - 1, -1, "rows", targetRow, column.id));
                     }
                 }
             }
@@ -136,7 +216,7 @@ export function createClipboard(ctx) {
                         const targetCol = d.sourceMaxCol + 1 + i;
                         const col = ctx.allColumns[targetCol];
                         if (col && ctx.isCellEditableAt(r, targetCol))
-                            writeCellRaw(r, col.id, fills[i]);
+                            writeFilled(steps, r, col.id, filledValue(sourceRowValues, fills, i, d.sourceMinCol, d.sourceMaxCol + 1, 1, "cols", r, col.id));
                     }
                 }
                 if (newMinCol < d.sourceMinCol) {
@@ -147,7 +227,7 @@ export function createClipboard(ctx) {
                         const targetCol = d.sourceMinCol - 1 - i;
                         const col = ctx.allColumns[targetCol];
                         if (col && ctx.isCellEditableAt(r, targetCol))
-                            writeCellRaw(r, col.id, fills[i]);
+                            writeFilled(steps, r, col.id, filledValue(reversed, fills, i, d.sourceMaxCol, d.sourceMinCol - 1, -1, "cols", r, col.id));
                     }
                 }
             }
@@ -572,19 +652,10 @@ export function createClipboard(ctx) {
                 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;
-        }
+        // The whole move is ONE undo entry. It used to be one step per changed
+        // cell, so walking a 15x20 move back took 300 presses of Ctrl+Z and blew
+        // past UNDO_LIMIT, evicting every step behind it.
+        pushHistory(ctx, steps, nextGroupId());
         // 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 = [];
@@ -629,6 +700,41 @@ export function createClipboard(ctx) {
         }
         legacyCopyText(text);
     }
+    /**
+     * Text and HTML together. The `copy` event is the first path: a listener
+     * armed for this one call puts both types on the event's clipboardData
+     * while the legacy textarea copy runs, which works in a secure and an
+     * insecure context alike and keeps every attribute of the HTML. Only when
+     * the browser refuses that does the async `ClipboardItem` write run, and
+     * text alone after that.
+     */
+    function writeClipboard(text, html) {
+        if (typeof document !== "undefined") {
+            let armed = true;
+            const onCopy = (event) => {
+                if (!armed || !event.clipboardData)
+                    return;
+                armed = false;
+                event.clipboardData.setData("text/plain", text);
+                event.clipboardData.setData("text/html", html);
+                event.preventDefault();
+            };
+            document.addEventListener("copy", onCopy, { once: true, capture: true });
+            const ok = legacyCopyText(text);
+            document.removeEventListener("copy", onCopy, { capture: true });
+            if (ok && !armed)
+                return;
+        }
+        if (navigator.clipboard?.write && typeof ClipboardItem !== "undefined") {
+            const item = new ClipboardItem({
+                "text/plain": new Blob([text], { type: "text/plain" }),
+                "text/html": new Blob([html], { type: "text/html" }),
+            });
+            void navigator.clipboard.write([item]).catch(() => writeClipboardText(text));
+            return;
+        }
+        writeClipboardText(text);
+    }
     function legacyCopyText(text) {
         if (typeof document === "undefined")
             return false;
@@ -705,7 +811,13 @@ export function createClipboard(ctx) {
             }
             blocks.push(lines.join("\n"));
         }
-        writeClipboardText(blocks.join("\n\n"));
+        const text = blocks.join("\n\n");
+        const toHtml = ctx.props.clipboardHtml;
+        const html = toHtml?.({ rects, text });
+        if (html)
+            writeClipboard(text, html);
+        else
+            writeClipboardText(text);
     }
     /**
      * Clear every editable cell in the current selection range. Used by
@@ -725,6 +837,10 @@ export function createClipboard(ctx) {
         const next = ctx.internalData.slice();
         let mutated = false;
         const changes = [];
+        // One history step per cleared cell, grouped, so Delete over a block is
+        // one Ctrl+Z. Clearing used to record nothing at all: the values were
+        // gone and undo skipped straight past them to whatever came before.
+        const steps = [];
         const dataIndexOf = createDataIndexLookup(next);
         for (let r = startRow; r <= endRow; r += 1) {
             const row = ctx.allRows[r];
@@ -757,6 +873,7 @@ export function createClipboard(ctx) {
                 const cleared = parseEditorValue(editorType, "");
                 updated[field] = cleared;
                 rowChanged = true;
+                steps.push({ rowId: row.id, columnId: column.id, field, before: oldValue, after: cleared });
                 changes.push({
                     rowIndex: dataIndex,
                     columnId: column.id,
@@ -773,6 +890,7 @@ export function createClipboard(ctx) {
         if (mutated) {
             ctx.internalData = next;
             ctx.grid.store.setState((prev) => ({ ...prev }));
+            pushHistory(ctx, steps, nextGroupId());
             // Fire onCellValueChange per cleared cell - same as paste's writeCellRaw -
             // so consumers (formula engines, autosave) recompute. Clear IS a value
             // change; without this, a HyperFormula-backed grid wouldn't re-evaluate.
@@ -800,6 +918,7 @@ export function createClipboard(ctx) {
         startFillDrag,
         onFillPointerMove,
         onFillPointerUp,
+        fillDownToNeighbour,
         isOnMoveGrabStrip,
         startMoveDrag,
         onMovePointerMove,

package/dist/column-resize.d.ts

@@ -24,6 +24,9 @@ export type ColumnResizeOptions = {
     getWidth: (columnId: string) => number;
     /** Called on every animation frame of the drag, and once at the end. */
     onResize: (columnId: string, width: number) => void;
+    /** Called once when a drag ends or an arrow key has resized, with the
+     *  width the gesture started from: what an undo puts back. */
+    onResizeEnd?: (columnId: string, width: number, startWidth: number) => void;
     /** Accessible name for the handle. Defaults to the column id. */
     label?: (columnId: string) => string;
     /**

package/dist/column-resize.js

@@ -58,6 +58,7 @@ export function columnResize(node, opts) {
         // Commit the final width even if the last frame was cancelled mid-flight.
         pendingWidth = Math.max(minWidth(), drag.startWidth + (e.clientX - drag.startX));
         commit();
+        current.onResizeEnd?.(drag.columnId, pendingWidth, drag.startWidth);
         drag.handle.classList.remove('is-resizing');
         syncAria(drag.handle, drag.columnId);
         try {
@@ -121,8 +122,10 @@ export function columnResize(node, opts) {
             return;
         e.preventDefault();
         e.stopPropagation();
-        const next = Math.max(minWidth(), Math.round(current.getWidth(columnId) + delta));
+        const start = current.getWidth(columnId);
+        const next = Math.max(minWidth(), Math.round(start + delta));
         current.onResize(columnId, next);
+        current.onResizeEnd?.(columnId, next, start);
         syncAria(t, columnId);
     }
     /** A focusable separator is a widget, so ARIA wants a current value. */

package/dist/columns.js

@@ -151,6 +151,9 @@ export function createColumns(ctx) {
         return ctx.props.columnWidth ?? 140;
     }
     function getColumnWidth(columnId) {
+        // Collapsed: no room at all, whatever width it keeps for later.
+        if (ctx.collapsedColumns?.[columnId])
+            return 0;
         const fitted = ctx.fittedColumnWidths?.[columnId];
         if (fitted !== undefined && ctx.columnWidths[columnId] === undefined)
             return fitted;

package/dist/command-context.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Builds the `GridCommandContext` handed to registered keyboard commands.
+ *
+ * Deliberately a getter object over the controller `ctx` rather than a
+ * snapshot: it is constructed on every keystroke that reaches a registered
+ * handler, so copying row and column arrays into it would put an allocation
+ * proportional to the grid in the hot path. Getters make construction O(1) and
+ * charge only for what a handler actually reads.
+ *
+ * Everything here is display-indexed, matching `SelectionPoint` and the rest of
+ * the selection model, so indices follow sort, filter and pagination. That is
+ * why `getCellValue` / `setCellValue` exist here rather than being left to
+ * `api.getCellValue`: the api pair indexes the DATA array, so handing a handler
+ * a selection index and an api that reads a different index space would give
+ * the wrong cell the moment the grid is sorted or filtered. `api.refresh()` has
+ * no index in it, so that one is left to the api.
+ */
+import type { GridCommandContext } from "./shortcut-registry.js";
+export declare function buildCommandContext(ctx: any, editing: boolean): GridCommandContext;

package/dist/command-context.js

@@ -0,0 +1,116 @@
+import { pushHistory, runHistoryGroup } from "./history.js";
+export function buildCommandContext(ctx, editing) {
+    function columnIdAt(colIndex) {
+        return ctx.allColumns[colIndex]?.id ?? null;
+    }
+    return {
+        get api() {
+            return ctx.buildApi();
+        },
+        editing,
+        get editor() {
+            const root = ctx.gridRootEl ?? null;
+            const el = root?.querySelector(".sv-grid-cell-editor") ?? null;
+            return el;
+        },
+        get activeCell() {
+            const active = ctx.grid.getState().activeCell;
+            if (!active)
+                return null;
+            return {
+                rowIndex: active.rowIndex,
+                colIndex: active.colIndex,
+                columnId: columnIdAt(active.colIndex),
+            };
+        },
+        get selectionFocus() {
+            const focus = ctx.selectionRange?.focus;
+            return focus ? { rowIndex: focus.rowIndex, colIndex: focus.colIndex } : null;
+        },
+        get rowCount() {
+            return ctx.allRows.length;
+        },
+        get colCount() {
+            return ctx.allColumns.length;
+        },
+        get ranges() {
+            // getSelectionRects() already normalises anchor/focus into rectangles
+            // and puts the active range last, which is the order a handler wants
+            // when it has to pick one.
+            return ctx.getSelectionRects().map((r) => [r.minRow, r.minCol, r.maxRow, r.maxCol]);
+        },
+        columnIdAt,
+        getCellValue(rowIndex, colIndex) {
+            const columnId = columnIdAt(colIndex);
+            return columnId == null ? undefined : ctx.readCellRaw(rowIndex, columnId);
+        },
+        setCellValue(rowIndex, colIndex, value) {
+            const columnId = columnIdAt(colIndex);
+            if (columnId == null)
+                return;
+            // Record the write so Ctrl+Z walks it back. `writeCellRaw` is the raw
+            // writer and deliberately keeps no history of its own - the fill handle
+            // and paste call it in loops and push their own entries (or, today, none
+            // at all). A command has to push here or every multi-cell command it
+            // runs would be silently un-undoable.
+            //
+            // Both reads happen BEFORE the write: writeCellRaw swaps a fresh row
+            // object into `internalData`, so afterwards the id lookup would miss.
+            const field = ctx.allColumns[colIndex]?.columnDef?.field;
+            const rowId = ctx.allRows[rowIndex]?.id;
+            const before = ctx.readCellRaw(rowIndex, columnId);
+            ctx.writeCellRaw(rowIndex, columnId, value);
+            // Only when something actually changed: writeCellRaw no-ops on an equal
+            // value, and a step whose before and after match would make Ctrl+Z look
+            // like it had swallowed a press.
+            if (field != null && rowId != null && before !== value) {
+                pushHistory(ctx, [{ rowId, columnId, field, before, after: value }]);
+            }
+        },
+        setActiveCell(rowIndex, colIndex) {
+            ctx.setActiveCell(rowIndex, colIndex);
+        },
+        setSelection(rowIndex, colIndex) {
+            ctx.setSelection(rowIndex, colIndex);
+        },
+        extendSelection(rowIndex, colIndex) {
+            ctx.extendSelection(rowIndex, colIndex);
+        },
+        scrollIntoView(rowIndex, colIndex) {
+            ctx.scrollActiveCellIntoView(rowIndex, colIndex);
+        },
+        startEditing(rowIndex, colIndex, seed) {
+            if (seed !== undefined) {
+                return ctx.startEditingWithChar(rowIndex, colIndex, seed) === true;
+            }
+            ctx.onCellDoubleClick(rowIndex, colIndex);
+            return true;
+        },
+        batch(fn) {
+            return runHistoryGroup(ctx, fn);
+        },
+        recordUndo(undo, redo) {
+            pushHistory(ctx, [
+                { rowId: "", columnId: "", field: "", before: undefined, after: undefined, custom: { undo, redo } },
+            ]);
+        },
+        focus() {
+            // preventScroll: the grid keeps its own scroll position, and a focus
+            // that yanked the viewport to the root's top edge would undo whatever
+            // scrollIntoView the command just asked for.
+            ctx.gridRootEl?.focus({ preventScroll: true });
+        },
+        async paste() {
+            await ctx.pasteFromClipboard?.();
+        },
+        copy() {
+            ctx.copySelectionToClipboard?.();
+        },
+        async cut() {
+            await ctx.cutSelectionToClipboard?.();
+        },
+        canEdit(rowIndex, colIndex) {
+            return ctx.isCellEditableAt?.(rowIndex, colIndex) ?? true;
+        },
+    };
+}

package/dist/core.d.ts

@@ -348,6 +348,13 @@ export type ColumnDef<TFeatures extends TableFeatures, TData extends RowData> =
     editorOptions?: EditorOptionSource | Promise<EditorOptionSource> | ((row: TData) => EditorOptionSource | Promise<EditorOptionSource>);
     /** When true, list/chips allow multiple selections. Cell value becomes an array. */
     editorMultiple?: boolean;
+    /**
+     * The text editor accepts line breaks: Alt+Enter inserts one and the
+     * editor grows a line per break, while Enter still commits. What a
+     * spreadsheet cell with wrapped text wants; `editorType: 'textarea'` is
+     * the other shape, where Enter itself is the line break.
+     */
+    editorMultiline?: boolean;
     /** Separator used when joining array values for the readonly cell display. Defaults to ', '. */
     editorSeparator?: string;
     format?: CellFormatConfig;

package/dist/createPopoverSelect.svelte.d.ts

@@ -68,7 +68,7 @@ export declare function createPopoverSelect(config: PopoverSelectConfig): {
      *  exposes (mirrors `focusOwnerProps(role)`); defaults to 'listbox' for
      *  the classic select panels. */
     triggerProps: (haspopup?: "listbox" | "tree" | "grid") => {
-        'aria-haspopup': "grid" | "listbox" | "tree";
+        'aria-haspopup': "grid" | "tree" | "listbox";
         'aria-expanded': boolean;
         'aria-controls': string | undefined;
         'aria-readonly': true | undefined;
@@ -77,7 +77,7 @@ export declare function createPopoverSelect(config: PopoverSelectConfig): {
     /** Attributes for the element that OWNS focus + activedescendant (the panel,
      *  or a search input). Pass the ARIA role the panel should expose. */
     focusOwnerProps: (role?: "listbox" | "tree" | "grid") => {
-        role: "grid" | "listbox" | "tree";
+        role: "grid" | "tree" | "listbox";
         'aria-activedescendant': string | undefined;
         onkeydown: (e: KeyboardEvent) => void;
     };

package/dist/editing.d.ts

@@ -1,12 +1,6 @@
 import { type Column, type Row, type RowData, type TableFeatures } from "./index.js";
 import "./sv-grid-scrollbar.js";
-type HistoryStep = {
-    rowId: string;
-    columnId: string;
-    field: string;
-    before: unknown;
-    after: unknown;
-};
+import { type HistoryStep } from "./history.js";
 export declare function createEditing<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData>(ctx: any): {
     isCellEditable: (column: Column<TData>, row?: Row<TData>) => boolean;
     isCellEditableAt: (rowIndex: number, colIndex: number) => boolean;
@@ -28,5 +22,5 @@ export declare function createEditing<TFeatures extends TableFeatures = TableFea
     onCellDoubleClick: (rowIndex: number, colIndex: number) => void;
     pasteFromClipboard: () => Promise<void>;
     onGridPaste: (event: ClipboardEvent) => void;
+    armPasteFallback: () => void;
 };
-export {};