@svgrid/grid 3.0.5 → 3.0.6

package/dist/clipboard.js

@@ -86,9 +86,9 @@ export function createClipboard(ctx) {
         if (before !== value)
             steps.push({ rowId: row.id, columnId, field, before, after: value });
     }
-    function applyFillPattern() {
+    function applyFillPattern(toggled = false) {
         const steps = [];
-        runHistoryGroup(ctx, () => applyFillCells(steps));
+        runHistoryGroup(ctx, () => applyFillCells(steps, toggled));
         if (steps.length)
             pushHistory(ctx, steps, nextGroupId());
     }
@@ -98,11 +98,14 @@ export function createClipboard(ctx) {
      * `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) {
+    function filledValue(sources, pattern, i, sourceStart, at, 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);
+            // The real distance to the cell being filled, which is not i when a
+            // row the fill skips lies between: a formula moves by the rows it
+            // actually travelled.
+            const distance = at - (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)
@@ -149,7 +152,17 @@ export function createClipboard(ctx) {
         };
         applyFillPattern();
     }
-    function applyFillCells(steps) {
+    /** The fill's values the other way round from the pattern's default. */
+    function toggledPattern(sources, count) {
+        if (sources.length === 1 && typeof sources[0] === 'number' && Number.isFinite(sources[0])) {
+            return Array.from({ length: count }, (_, i) => sources[0] + i + 1);
+        }
+        return Array.from({ length: count }, (_, i) => sources[i % sources.length]);
+    }
+    function applyFillCells(steps, toggled = false) {
+        const pattern = (sources, count) => (toggled ? toggledPattern(sources, count) : buildFillPattern(sources, count));
+        const includeCollapsed = ctx.props.includeCollapsedRows;
+        const skipsRow = (r) => ctx.isRowCollapsed?.(r) === true && !(includeCollapsed?.(r) ?? false);
         const d = ctx.fillDrag;
         if (!d)
             return;
@@ -176,25 +189,32 @@ export function createClipboard(ctx) {
                 for (let r = d.sourceMinRow; r <= d.sourceMaxRow; r += 1) {
                     sourceColValues.push(readCellRaw(r, column.id));
                 }
+                // A collapsed row the consumer does not count (a filtered row in a
+                // spreadsheet) is neither written nor a step of the series: the
+                // pattern runs over the rows that are there, as Excel's does.
                 if (newMaxRow > d.sourceMaxRow) {
-                    const targetRows = newMaxRow - d.sourceMaxRow;
-                    const fills = buildFillPattern(sourceColValues, targetRows);
-                    for (let i = 0; i < targetRows; i += 1) {
-                        const targetRow = d.sourceMaxRow + 1 + i;
+                    const targets = [];
+                    for (let r = d.sourceMaxRow + 1; r <= newMaxRow; r += 1)
+                        if (!skipsRow(r))
+                            targets.push(r);
+                    const fills = pattern(sourceColValues, targets.length);
+                    targets.forEach((targetRow, i) => {
                         if (ctx.isCellEditableAt(targetRow, c))
-                            writeFilled(steps, targetRow, column.id, filledValue(sourceColValues, fills, i, d.sourceMinRow, d.sourceMaxRow + 1, 1, "rows", targetRow, column.id));
-                    }
+                            writeFilled(steps, targetRow, column.id, filledValue(sourceColValues, fills, i, d.sourceMinRow, targetRow, 1, "rows", targetRow, column.id));
+                    });
                 }
                 if (newMinRow < d.sourceMinRow) {
                     // Filling upward - reverse-extrapolate.
                     const reversed = sourceColValues.slice().reverse();
-                    const targetRows = d.sourceMinRow - newMinRow;
-                    const fills = buildFillPattern(reversed, targetRows);
-                    for (let i = 0; i < targetRows; i += 1) {
-                        const targetRow = d.sourceMinRow - 1 - i;
+                    const targets = [];
+                    for (let r = d.sourceMinRow - 1; r >= newMinRow; r -= 1)
+                        if (!skipsRow(r))
+                            targets.push(r);
+                    const fills = pattern(reversed, targets.length);
+                    targets.forEach((targetRow, i) => {
                         if (ctx.isCellEditableAt(targetRow, c))
-                            writeFilled(steps, targetRow, column.id, filledValue(reversed, fills, i, d.sourceMaxRow, d.sourceMinRow - 1, -1, "rows", targetRow, column.id));
-                    }
+                            writeFilled(steps, targetRow, column.id, filledValue(reversed, fills, i, d.sourceMaxRow, targetRow, -1, "rows", targetRow, column.id));
+                    });
                 }
             }
         }
@@ -211,23 +231,23 @@ export function createClipboard(ctx) {
                 }
                 if (newMaxCol > d.sourceMaxCol) {
                     const targetCols = newMaxCol - d.sourceMaxCol;
-                    const fills = buildFillPattern(sourceRowValues, targetCols);
+                    const fills = pattern(sourceRowValues, targetCols);
                     for (let i = 0; i < targetCols; i += 1) {
                         const targetCol = d.sourceMaxCol + 1 + i;
                         const col = ctx.allColumns[targetCol];
                         if (col && ctx.isCellEditableAt(r, targetCol))
-                            writeFilled(steps, r, col.id, filledValue(sourceRowValues, fills, i, d.sourceMinCol, d.sourceMaxCol + 1, 1, "cols", r, col.id));
+                            writeFilled(steps, r, col.id, filledValue(sourceRowValues, fills, i, d.sourceMinCol, targetCol, 1, "cols", r, col.id));
                     }
                 }
                 if (newMinCol < d.sourceMinCol) {
                     const reversed = sourceRowValues.slice().reverse();
                     const targetCols = d.sourceMinCol - newMinCol;
-                    const fills = buildFillPattern(reversed, targetCols);
+                    const fills = pattern(reversed, targetCols);
                     for (let i = 0; i < targetCols; i += 1) {
                         const targetCol = d.sourceMinCol - 1 - i;
                         const col = ctx.allColumns[targetCol];
                         if (col && ctx.isCellEditableAt(r, targetCol))
-                            writeFilled(steps, r, col.id, filledValue(reversed, fills, i, d.sourceMaxCol, d.sourceMinCol - 1, -1, "cols", r, col.id));
+                            writeFilled(steps, r, col.id, filledValue(reversed, fills, i, d.sourceMaxCol, targetCol, -1, "cols", r, col.id));
                     }
                 }
             }
@@ -252,8 +272,12 @@ export function createClipboard(ctx) {
             const minCol = Math.min(anchor.colIndex, focus.colIndex);
             const maxCol = Math.max(anchor.colIndex, focus.colIndex);
             for (let r = minRow; r <= maxRow; r += 1) {
+                if (ctx.isRowCollapsed?.(r))
+                    continue;
                 for (let c = minCol; c <= maxCol; c += 1) {
                     const col = ctx.allColumns[c];
+                    if (col && ctx.collapsedColumns?.[col.id])
+                        continue;
                     if (col?.columnDef.field && ctx.isCellEditableAt(r, c)) {
                         writeCellRaw(r, col.id, null);
                     }
@@ -418,10 +442,16 @@ export function createClipboard(ctx) {
             return;
         ctx.fillDrag = { ...ctx.fillDrag, targetRow: hit.row, targetCol: hit.col };
     }
-    function onFillPointerUp() {
+    /**
+     * The release. Excel's Ctrl turns the fill the other way: a series
+     * becomes a copy of the block, and one number, which copies on its own,
+     * becomes a series stepping by one. The modifier is read here, at the
+     * release, so holding Ctrl only at the end still counts, as in Excel.
+     */
+    function onFillPointerUp(event) {
         if (!ctx.fillDrag)
             return;
-        applyFillPattern();
+        applyFillPattern(!!(event && (event.ctrlKey || event.metaKey)));
     }
     // ---- Range move / copy (drag the selection border) --------------------
     /** How thick the draggable strip on a range border is, in CSS pixels.
@@ -772,6 +802,7 @@ export function createClipboard(ctx) {
         // each value through a consumer hook before it hits the clipboard.
         const withHeaders = ctx.props.copyHeadersToClipboard === true;
         const processCell = ctx.props.processCellForClipboard;
+        const copyCollapsed = ctx.props.includeCollapsedRows;
         const blocks = [];
         for (const rect of rects) {
             const lines = [];
@@ -779,6 +810,8 @@ export function createClipboard(ctx) {
                 const header = [];
                 for (let c = rect.minCol; c <= rect.maxCol; c += 1) {
                     const column = ctx.allColumns[c];
+                    if (column && ctx.collapsedColumns?.[column.id])
+                        continue;
                     header.push(column ? toolPanelHeaderLabel(column) : "");
                 }
                 lines.push(header.join("\t"));
@@ -787,6 +820,14 @@ export function createClipboard(ctx) {
                 const row = ctx.allRows[r];
                 if (!row || isGroupRow(row))
                     continue;
+                // A collapsed row is folded to nothing: the user cannot see it and
+                // the keyboard walks past it, so a copy leaves it out too. That is
+                // what a spreadsheet does with a filtered row, and it is what makes
+                // "filter, copy, paste" carry the rows that matched. A consumer that
+                // tells hidden from filtered answers per row (`includeCollapsedRows`):
+                // Excel copies a row hidden by hand.
+                if (ctx.isRowCollapsed?.(r) && !copyCollapsed?.(r))
+                    continue;
                 const cells = [];
                 for (let c = rect.minCol; c <= rect.maxCol; c += 1) {
                     const column = ctx.allColumns[c];
@@ -794,6 +835,8 @@ export function createClipboard(ctx) {
                         cells.push("");
                         continue;
                     }
+                    if (ctx.collapsedColumns?.[column.id])
+                        continue;
                     const base = getColumnBaseValue(row, column);
                     let value = ctx.getCellDisplayValue(row.id, column.id, base);
                     if (processCell) {
@@ -846,6 +889,10 @@ export function createClipboard(ctx) {
             const row = ctx.allRows[r];
             if (!row || isGroupRow(row))
                 continue;
+            // A collapsed row is not there as far as the user is concerned, and a
+            // Delete over a filtered block must not wipe what the filter hid.
+            if (ctx.isRowCollapsed?.(r))
+                continue;
             // 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);
@@ -862,6 +909,8 @@ export function createClipboard(ctx) {
                 const column = ctx.allColumns[c];
                 if (!column?.columnDef.field)
                     continue;
+                if (ctx.collapsedColumns?.[column.id])
+                    continue;
                 if (!ctx.isCellEditableAt(r, c))
                     continue;
                 // Clear means: empty string for text, undefined for everything

package/dist/columns.js

@@ -5,13 +5,18 @@ export function createColumns(ctx) {
         // context (z=20) so a selected cell in the scrollable middle never
         // bleeds over the pinned columns during horizontal scroll. Still
         // sits below dropdowns (z=900+) and the column menu.
+        // Logical insets, not `left` / `right`: the offsets are measured from the
+        // pinned side in READING order, so under `dir="rtl"` the left-pinned
+        // columns have to stick to the right edge. `inset-inline-start` is that
+        // edge in either direction; with `left` a right-to-left grid scrolls its
+        // pinned columns off the screen.
         const leftOffset = ctx.pinnedOffsets.left[columnId];
         if (leftOffset !== undefined) {
-            return `position: sticky; left: ${leftOffset}px; z-index: 30;`;
+            return `position: sticky; inset-inline-start: ${leftOffset}px; z-index: 30;`;
         }
         const rightOffset = ctx.pinnedOffsets.right[columnId];
         if (rightOffset !== undefined) {
-            return `position: sticky; right: ${rightOffset}px; z-index: 30;`;
+            return `position: sticky; inset-inline-end: ${rightOffset}px; z-index: 30;`;
         }
         return "";
     }

package/dist/conditional-formatting.d.ts

@@ -101,6 +101,8 @@ export type RuleFormat<TData = unknown> = {
     background?: string;
     color?: string;
     fontWeight?: string | number;
+    /** A short glyph drawn before the value while the rule matches. */
+    icon?: string;
 };
 export type ConditionalFormatSpec<TData = unknown> = ColorScaleFormat | DataBarFormat | IconSetFormat | RuleFormat<TData>;
 /** A format scoped to specific columns (omit `columns` to apply to all). */

package/dist/conditional-formatting.js

@@ -198,6 +198,8 @@ export function resolveCellFormat(value, row, columnId, formats, stat) {
                     out.color = fmt.color;
                 if (fmt.fontWeight != null)
                     out.fontWeight = fmt.fontWeight;
+                if (fmt.icon)
+                    out.icon = fmt.icon;
             }
             continue;
         }

package/dist/core.d.ts

@@ -274,8 +274,9 @@ export type ColumnDef<TFeatures extends TableFeatures, TData extends RowData> =
      *   - `false`                       → invalid, no message
      *   - a non-empty `string`          → invalid, string is the tooltip
      *
-     * The value keeps rendering as-is (the grid does NOT roll it back); pair
-     * with `onCellValueChange` if you also want to reject the commit.
+     * On its own `validate` flags: the value keeps rendering as-is and an
+     * edit that fails it still lands. Set `rejectInvalid` to refuse such an
+     * edit instead.
      */
     validate?: (params: {
         value: unknown;
@@ -283,6 +284,16 @@ export type ColumnDef<TFeatures extends TableFeatures, TData extends RowData> =
         rowIndex: number;
         column: Column<TData>;
     }) => string | boolean | null | undefined;
+    /**
+     * Refuse an edit that `validate` flags. When true, a committed value that
+     * makes `validate` return `false` or a message is not written: the cell
+     * keeps its old value, no history step is recorded and
+     * `onCellValueChange` does not fire. The value is checked after
+     * `valueParser` has run, so the rule sees what would be stored. Applies to
+     * the inline editor, a commit to a selection and a full-row edit; paste
+     * does not go through the editor and is not checked.
+     */
+    rejectInvalid?: boolean;
     /**
      * Gate editing per column or per cell.
      *
@@ -689,10 +700,15 @@ export declare function flattenTreeData<T extends RowData>(data: ReadonlyArray<T
  * master-detail alike - all three are the same expand/collapse mechanism.
  */
 export declare function createExpandedRowModel<TData extends RowData>(): RowModelFactory<TData>;
-/**
- * Orders rows by the active {@link SortingState}. Pass your own comparators to
- * override the built-in {@link sortFns} - useful for locale-aware or
- * domain-specific ordering.
+/** The rows `getRowModel` replaced in the rebuild this pipeline run follows, or null. */
+export declare function replacedRowsOf(table: SvGrid<any>): ReadonlyMap<Row<any>, Row<any>> | null;
+/**
+ * The sorting stage of the row pipeline: orders the rows by the grid's
+ * `sorting` state with the built-in comparators (or the `localSortFns` map
+ * handed in), stable, equal keys keeping their data order. A tick that
+ * replaces a few rows out of many is repaired incrementally rather than
+ * re-sorted (see the note inside). Registered by `rowSortingFeature`; an app
+ * only calls this to install its own comparator set.
  */
 export declare function createSortedRowModel<TData extends RowData>(localSortFns?: typeof sortFns): RowModelFactory<TData>;
 /**