@svgrid/grid 1.0.2 → 1.1.0

package/dist/hyperformula-adapter.js

@@ -0,0 +1,73 @@
+/**
+ * HyperFormula adapter — Excel-class formula evaluation for SvGrid.
+ *
+ * `hyperformula` is an OPTIONAL peer dependency. Consumers who want
+ * full Excel-compatible formulas install it themselves:
+ *
+ * ```bash
+ *   pnpm add hyperformula
+ * ```
+ *
+ * The adapter wraps an HF instance around the grid's flat-row data:
+ *
+ *   - Treats each `data[]` row as a spreadsheet row
+ *   - Each registered field maps to a spreadsheet column
+ *   - Values that start with `=` are evaluated by HF
+ *   - The adapter returns the computed rows ready to render
+ *   - On edit, call `update(rowIdx, field, value)` and the adapter
+ *     re-evaluates only the cells HF tells it are dirty
+ *
+ * Why not bundle HF: it's ~1MB minified and 99% of grids never need it.
+ * Keeping it peer-optional means tiny default bundle + heavy-formula
+ * users get the ~400 functions (VLOOKUP, INDIRECT, IFS, XLOOKUP, full
+ * date/time/financial libraries) on demand.
+ */
+/** Build a live spreadsheet adapter around a HyperFormula instance.
+ *  Returns computed rows + an `update()` hook to push edits back into
+ *  the engine. */
+export function createHyperFormulaSheet(config) {
+    const { hyperformula: hf, rows, fields } = config;
+    const sheetId = config.sheetId ?? 0;
+    const colByField = new Map();
+    fields.forEach((f, i) => colByField.set(f, i));
+    // 1. Seed HF with every cell. HF expects raw strings for formulas
+    //    (`'=A1+B1'`) and primitives for everything else.
+    for (let r = 0; r < rows.length; r += 1) {
+        const row = rows[r];
+        for (let c = 0; c < fields.length; c += 1) {
+            const field = fields[c];
+            hf.setCellContents({ sheet: sheetId, row: r, col: c }, row[field]);
+        }
+    }
+    /** Pull computed values out of HF into a fresh row array. Preserves
+     *  any non-formula fields (i.e. those not in `fields`) untouched. */
+    function snapshot() {
+        const out = new Array(rows.length);
+        for (let r = 0; r < rows.length; r += 1) {
+            const next = { ...rows[r] };
+            for (let c = 0; c < fields.length; c += 1) {
+                const field = fields[c];
+                const v = hf.getCellValue({ sheet: sheetId, row: r, col: c });
+                next[field] = v;
+            }
+            out[r] = next;
+        }
+        return out;
+    }
+    function rawSnapshot() {
+        return rows.map((r) => ({ ...r }));
+    }
+    return {
+        computed: snapshot(),
+        raw: rawSnapshot(),
+        update(rowIndex, field, value) {
+            const col = colByField.get(field);
+            if (col !== undefined) {
+                hf.setCellContents({ sheet: sheetId, row: rowIndex, col }, value);
+            }
+            rows[rowIndex] = { ...rows[rowIndex], [field]: value };
+            return { computed: snapshot(), raw: rawSnapshot() };
+        },
+        destroy() { hf.destroy(); },
+    };
+}

package/dist/index.d.ts

@@ -7,12 +7,15 @@ export { default as SvGrid } from './SvGrid.svelte';
 export { default as FlexRender } from './FlexRender.svelte';
 export { renderComponent, renderSnippet } from './render-component';
 export { default as SvGridChart } from './SvGridChart.svelte';
-export { buildChart, rowsToChartSpec, niceScale, DEFAULT_PALETTE, type ChartType, type ChartSpec, type ChartSeries, type ChartGeometry, type ChartBar, type ChartLine, type ChartLinePoint, type ChartPieSlice, type ChartSelection, type ChartReferenceLine, type ChartRefLineGeo, type ChartRefLineGeoV, type ChartScatterDot, type ScatterPoint, type NiceScale, } from './chart';
+export { buildChart, rowsToChartSpec, niceScale, niceLogScale, linearTrend, simpleMovingAverage, exponentialMovingAverage, computeOverlay, buildLinePath, sampleGradient, pickContrastText, DEFAULT_PALETTE, type ChartType, type ChartSpec, type ChartSeries, type ChartGeometry, type ChartBar, type ChartLine, type ChartLinePoint, type ChartPieSlice, type ChartSelection, type ChartReferenceLine, type ChartRefLineGeo, type ChartRefLineGeoV, type ChartScatterDot, type ScatterPoint, type NiceScale, type SeriesOverlay, type SeriesPattern, type ChartAnnotation, type ChartHeatmapCell, type ChartFunnelSegment, type ChartRadarSeries, type ChartRadarAxis, type ChartTreemapCell, type ChartCalendarCell, type ChartGaugeLayout, type ChartSankeyNode, type ChartSankeyLink, type TreeNode, } from './chart';
 export { chartToSvgString, downloadChartSvg, chartToPngBlob, downloadChartPng, type ChartExportOptions, } from './chart-export';
 export { buildSparkline, toSparklineValues, type SparklineConfig, type SparklineType, type SparklineGeometry, } from './sparkline';
+export { spreadsheetLayout, type SpreadsheetActionOptions, type MergeSpec, type CellBorderSpec, type BorderSpec, } from './spreadsheet';
+export { rowResize, type RowResizeOptions } from './row-resize';
+export { createHyperFormulaSheet, type HyperFormulaSheet, type HyperFormulaSheetConfig, type HyperFormulaInstance, } from './hyperformula-adapter';
 export { createCollaboration, broadcastChannelTransport, type CollabUser, type CollabCell, type CollabPresence, type CollabMessage, type CollabTransport, type Collaboration, } from './collaboration';
 export { createServerDataSource, type ServerDataSource, type ServerRequest, type ServerResult, type ServerController, type ServerState, type ServerSortModel, type ServerFilterModel, } from './server-data-source';
-export { createNamedViews, memoryViews, localStorageViews, type SavedView, type ViewStorage, type NamedViews, } from './named-views';
+export { createNamedViews, memoryViews, localStorageViews, attachAutoSavedView, type SavedView, type ViewStorage, type NamedViews, type AutoSavedViewOptions, } from './named-views';
 export { resolveCellFormat, computeColumnStat, lerpColor, contrastText, type ConditionalFormat, type ConditionalFormatSpec, type ColorScaleFormat, type DataBarFormat, type IconSetFormat, type RuleFormat, type ResolvedCellFormat, } from './conditional-formatting';
 export { getKeyboardIntent, getNextActiveCell, type GridKeyboardIntent } from './keyboard';
 export { createVirtualizer } from './virtualization/virtualizer';

package/dist/index.js

@@ -7,12 +7,15 @@ export { default as SvGrid } from './SvGrid.svelte';
 export { default as FlexRender } from './FlexRender.svelte';
 export { renderComponent, renderSnippet } from './render-component';
 export { default as SvGridChart } from './SvGridChart.svelte';
-export { buildChart, rowsToChartSpec, niceScale, DEFAULT_PALETTE, } from './chart';
+export { buildChart, rowsToChartSpec, niceScale, niceLogScale, linearTrend, simpleMovingAverage, exponentialMovingAverage, computeOverlay, buildLinePath, sampleGradient, pickContrastText, DEFAULT_PALETTE, } from './chart';
 export { chartToSvgString, downloadChartSvg, chartToPngBlob, downloadChartPng, } from './chart-export';
 export { buildSparkline, toSparklineValues, } from './sparkline';
+export { spreadsheetLayout, } from './spreadsheet';
+export { rowResize } from './row-resize';
+export { createHyperFormulaSheet, } from './hyperformula-adapter';
 export { createCollaboration, broadcastChannelTransport, } from './collaboration';
 export { createServerDataSource, } from './server-data-source';
-export { createNamedViews, memoryViews, localStorageViews, } from './named-views';
+export { createNamedViews, memoryViews, localStorageViews, attachAutoSavedView, } from './named-views';
 export { resolveCellFormat, computeColumnStat, lerpColor, contrastText, } from './conditional-formatting';
 export { getKeyboardIntent, getNextActiveCell } from './keyboard';
 export { createVirtualizer } from './virtualization/virtualizer';

package/dist/keyboard-handlers.d.ts

@@ -0,0 +1,7 @@
+import { type RowData, type TableFeatures } from "./index";
+import "./sv-grid-scrollbar";
+export declare function createKeyboard<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData>(ctx: any): {
+    onGridKeyDown: (event: KeyboardEvent) => void;
+    onWindowKeydown: (event: KeyboardEvent) => void;
+    onHeaderSortClick: (event: MouseEvent, columnId: string) => void;
+};

package/dist/keyboard-handlers.js

@@ -0,0 +1,197 @@
+import "./sv-grid-scrollbar";
+import { getKeyboardIntent, getNextActiveCell } from "./keyboard";
+export function createKeyboard(ctx) {
+    function onGridKeyDown(event) {
+        // Only the grid root drives navigation - keys on header buttons, menus,
+        // or the cell editor are handled by those controls themselves.
+        if (event.target !== event.currentTarget)
+            return;
+        if (ctx.editingCell)
+            return;
+        if ((event.ctrlKey || event.metaKey) && !event.altKey) {
+            const lower = event.key.toLowerCase();
+            if (lower === "c") {
+                event.preventDefault();
+                ctx.copySelectionToClipboard();
+                return;
+            }
+            if (lower === "v") {
+                event.preventDefault();
+                void ctx.pasteFromClipboard();
+                return;
+            }
+            if (lower === "x") {
+                event.preventDefault();
+                void ctx.cutSelectionToClipboard();
+                return;
+            }
+            // Ctrl+Z (Cmd+Z) undoes the most recent cell edit. Ctrl+Shift+Z
+            // and Ctrl+Y both redo. Mirrors VSCode / Sheets / Excel.
+            if (lower === "z" && !event.shiftKey) {
+                event.preventDefault();
+                if (ctx.historyPtr >= 0) {
+                    const step = ctx.history[ctx.historyPtr];
+                    if (step) {
+                        ctx.applyHistoryStep(step, 'undo');
+                        ctx.historyPtr -= 1;
+                        ctx.historyVersion += 1;
+                    }
+                }
+                return;
+            }
+            if ((lower === "z" && event.shiftKey) || lower === "y") {
+                event.preventDefault();
+                if (ctx.historyPtr < ctx.history.length - 1) {
+                    const step = ctx.history[ctx.historyPtr + 1];
+                    if (step) {
+                        ctx.applyHistoryStep(step, 'redo');
+                        ctx.historyPtr += 1;
+                        ctx.historyVersion += 1;
+                    }
+                }
+                return;
+            }
+            // Ctrl+F opens the find overlay.
+            if (lower === "f") {
+                event.preventDefault();
+                ctx.findOpen = true;
+                return;
+            }
+        }
+        // Esc closes find when nothing else owns the key.
+        if (event.key === "Escape" && ctx.findOpen) {
+            event.preventDefault();
+            ctx.findOpen = false;
+            return;
+        }
+        // Delete / Backspace clears every editable cell in the selection
+        // range. No clipboard interaction - this is the "blank the cells I
+        // have selected" gesture, distinct from Ctrl/Cmd+X.
+        if ((event.key === "Delete" || event.key === "Backspace") &&
+            !event.ctrlKey && !event.metaKey && !event.altKey) {
+            if (ctx.clearSelectedCells()) {
+                event.preventDefault();
+                return;
+            }
+        }
+        const current = ctx.grid.getState().activeCell ?? {
+            rowIndex: 0,
+            colIndex: 0,
+            cellId: null,
+        };
+        if (event.key === "F2") {
+            event.preventDefault();
+            ctx.onCellDoubleClick(current.rowIndex, current.colIndex);
+            return;
+        }
+        const intent = getKeyboardIntent(event);
+        if (intent === "noop") {
+            // A printable character on the active cell starts editing seeded with it.
+            if (event.key.length === 1 &&
+                !event.ctrlKey &&
+                !event.metaKey &&
+                !event.altKey) {
+                if (ctx.startEditingWithChar(current.rowIndex, current.colIndex, event.key)) {
+                    event.preventDefault();
+                }
+            }
+            return;
+        }
+        event.preventDefault();
+        if (intent === "clearCells") {
+            // Excel `Delete` - clear contents of every cell in the selection
+            // (or the active cell if no range). Formatting is left alone, only
+            // the underlying value is wiped.
+            ctx.clearSelectedCellValues();
+            return;
+        }
+        if (intent === "activate") {
+            const row = ctx.allRows[current.rowIndex];
+            const column = ctx.allColumns[current.colIndex];
+            if (event.key === " ") {
+                row?.toggleSelected?.();
+                return;
+            }
+            if (event.ctrlKey && row?.getCanExpand?.()) {
+                row.toggleExpanded?.();
+                return;
+            }
+            if (column?.columnDef.editorType === "checkbox") {
+                ctx.toggleBooleanCell(current.rowIndex, current.colIndex);
+                return;
+            }
+            ctx.onCellDoubleClick(current.rowIndex, current.colIndex);
+            return;
+        }
+        // Excel-style page step: PageUp/PageDown jump by ~one visible
+        // page minus one row of overlap. Falls back to grid pagination's
+        // pageSize when pagination is on, or 10 as a final fallback.
+        function pageStep() {
+            const pageSize = ctx.grid.getState().pagination?.pageSize;
+            if (pageSize && pageSize > 0)
+                return pageSize;
+            const clientHeight = ctx.scrollContainer?.clientHeight ?? 0;
+            const headerHeight = ctx.headerHeight ?? 0;
+            const rowHeight = typeof ctx.props.rowHeight === 'function'
+                ? (ctx.props.rowHeight(current.rowIndex) ?? 30)
+                : (ctx.props.rowHeight ?? 30);
+            const usable = Math.max(0, clientHeight - headerHeight);
+            return Math.max(1, Math.floor(usable / Math.max(rowHeight, 1)) - 1);
+        }
+        const next = getNextActiveCell(current, intent, {
+            maxRow: Math.max(ctx.allRows.length - 1, 0),
+            maxCol: Math.max(ctx.allColumns.length - 1, 0),
+            pageSize: pageStep(),
+        });
+        ctx.setActiveCell(next.rowIndex, next.colIndex);
+        ctx.scrollActiveCellIntoView(next.rowIndex, next.colIndex);
+        // Shift extends the selection ONLY for arrow keys (Excel-style).
+        // Shift+Enter / Shift+Tab just change direction; they don't grow the
+        // range, otherwise hammering Shift+Tab to backspace through a row
+        // would paint a creeping rectangle behind the cursor.
+        const shouldExtend = event.shiftKey &&
+            (intent === "moveLeft" ||
+                intent === "moveRight" ||
+                intent === "moveUp" ||
+                intent === "moveDown");
+        if (shouldExtend)
+            ctx.extendSelection(next.rowIndex, next.colIndex);
+        else
+            ctx.setSelection(next.rowIndex, next.colIndex);
+    }
+    function onWindowKeydown(event) {
+        if (event.key === "Escape" && (ctx.columnMenuFor || ctx.operatorMenuFor)) {
+            ctx.closeMenus();
+        }
+    }
+    function onHeaderSortClick(event, columnId) {
+        const column = ctx.allColumns.find((entry) => entry.id === columnId);
+        if (!column?.getCanSort?.())
+            return;
+        const clauses = ctx.grid.getState().sorting ?? [];
+        const current = clauses.find((entry) => entry.id === columnId);
+        if (!event.shiftKey) {
+            // Single-sort: cycle this column's direction and clear all other
+            // sorts. Cycle order: none → asc → desc → none.
+            const nextClause = !current
+                ? [{ id: columnId, desc: false }]
+                : current.desc
+                    ? []
+                    : [{ id: columnId, desc: true }];
+            ctx.grid.store.setState((prev) => ({ ...prev, sorting: nextClause }));
+            return;
+        }
+        // Shift-click: append/toggle as part of a multi-sort.
+        const nextClause = !current
+            ? [...clauses, { id: columnId, desc: false }]
+            : current.desc
+                ? clauses.filter((entry) => entry.id !== columnId)
+                : clauses.map((entry) => entry.id === columnId ? { ...entry, desc: true } : entry);
+        ctx.grid.store.setState((prev) => ({ ...prev, sorting: nextClause }));
+    }
+    return {
+        onGridKeyDown,
+        onWindowKeydown,
+        onHeaderSortClick,
+    };
+}

package/dist/menus.d.ts

@@ -0,0 +1,40 @@
+import { type RowData, type TableFeatures } from "./index";
+import "./sv-grid-scrollbar";
+import type { FilterOperator } from "./SvGrid.types";
+export declare function createMenus<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData>(ctx: any): {
+    updateFilterRow: (columnId: string, value: string) => void;
+    updateFilterOperator: (columnId: string, operator: FilterOperator) => void;
+    updateFilterMenuValue: (columnId: string, value: string) => void;
+    updateFilterMenuValueTo: (columnId: string, valueTo: string) => void;
+    toggleCheckboxWithKeyboard: (event: KeyboardEvent, toggle: () => void) => void;
+    isColumnFiltered: (columnId: string) => boolean;
+    closeMenus: () => void;
+    openChooseColumns: (event: MouseEvent) => void;
+    openColumnMenu: (event: MouseEvent, columnId: string) => void;
+    openFilterMenu: (event: MouseEvent, columnId: string) => void;
+    openOperatorMenu: (event: MouseEvent, columnId: string) => void;
+    sortColumnFromMenu: (columnId: string, desc: boolean) => void;
+    clearColumnSort: (columnId: string) => void;
+    groupByColumnFromMenu: (columnId: string) => void;
+    clearGroupingFromMenu: (columnId: string) => void;
+    isFacetChecked: (columnId: string, value: string) => any;
+    toggleFacetValue: (columnId: string, value: string) => void;
+    isAllFacetsChecked: (columnId: string) => boolean;
+    toggleAllFacets: (columnId: string) => void;
+    clearColumnFilter: (columnId: string) => void;
+    changePage: (delta: number) => void;
+    goToPage: (pageIndex: number) => void;
+    setPageSize: (pageSize: number) => void;
+    openContextMenu: (event: MouseEvent, rowIndex: number, colIndex: number, columnId: string) => void;
+    closeContextMenu: () => void;
+    contextMenuItems: () => {
+        key: string;
+        label: string;
+        separator?: boolean;
+        disabled?: boolean;
+        run?: () => void;
+    }[];
+    saveComment: () => void;
+    removeComment: () => void;
+    closeCommentEditor: () => void;
+};