@svgrid/grid 3.0.4 → 3.0.6

package/README.md

@@ -17,7 +17,7 @@
 <p align="center">
   <a href="https://svgrid.com">Website</a> ·
   <a href="https://svgrid.com/docs/">Docs</a> ·
-  <a href="https://svgrid.com/demos/">370+ Demos</a> ·
+  <a href="https://svgrid.com/demos/">400+ Demos</a> ·
   <a href="https://svgrid.com/pricing/">Pricing</a> ·
   <a href="https://svgrid.com/roadmap/">Roadmap</a>
 </p>
@@ -78,7 +78,7 @@ all wire up the moment you turn on the matching prop.
 |---|---|
 | **License** | MIT, free for commercial use |
 | **Requires** | `svelte@^5` (peer dependency), Node 16+ |
-| **Bundle (gzip)** | ~2 KB headless core, ~80 KB full `<SvGrid>` + ~9 KB CSS |
+| **Bundle (gzip)** | ~2.7 KB headless core, ~98 KB full `<SvGrid>` + ~10 KB CSS; charts, date pickers, menus and export load as separate chunks on first use |
 | **Types** | Bundled, no `@types/` package needed |
 | **Module format** | ESM, plus a CDN build at `@svgrid/grid/cdn` |
 | **SSR** | Works under SvelteKit SSR and static builds |
@@ -90,9 +90,12 @@ all wire up the moment you turn on the matching prop.
 - **Filtering** - Excel-style filter menu, inline filter row, set / value-list filter, locale-aware matching, between operators.
 - **Editing** - 15 built-in `editorType`s (text, number, date, datetime, time, select, rich-select with typeahead, autocomplete, textarea, color, checkbox, list, chips, rating, password), plus `date-native` / `datetime-native` / `time-native` to opt out of the rich pickers, and a `cellEditor` snippet slot for anything custom.
 - **Selection** - cell-range click+drag and Shift+arrows, copy/paste as TSV, Excel-style fill handle, row selection.
-- **Views** - row grouping with aggregation, tree data, master/detail, full-width detail rows, spreadsheet mode with formulas.
+- **Views** - row grouping with aggregation, tree data, master/detail, full-width detail rows, and a
+  spreadsheet layout mode (merged cells, per-cell borders). Formula cells here go through an adapter
+  seam you point at your own `hyperformula` install; the built-in formula engine and `<SvSheet>` are
+  in the Suite edition of `@svgrid/enterprise`.
 - **Layout** - row + column pinning, sticky header + first column, header drag-to-reorder, autosize, keyboard-accessible column sizing, zebra rows, responsive mode.
-- **Data operations** - find in grid (Ctrl+F), undo / redo, transaction API, optimistic updates, server-side row model with sort / filter / group pushdown.
+- **Data operations** - find in grid (Ctrl+F), undo / redo, transaction API, optimistic updates, server-side data with sort / filter / paging / infinite-scroll pushdown (lazy grouping, tree, pivot and transactions on the server are in `@svgrid/enterprise`).
 - **AI helpers, free** - natural-language filter, smart fill, summarize, classify, anomaly detection, and "chart this". Model-agnostic: register one provider, nothing is bundled.
 - **UI components** - a Svelte 5 component suite ships in the package (inputs, selection, date/time, overlays, layout, feedback), standalone or as grid cell editors.
 - **Accessibility** - WAI-ARIA grid roles, full keyboard navigation, RTL, high-contrast theme.
@@ -131,7 +134,7 @@ import {
 ```
 
 - **Headless** - drive `createSvGrid` and the row-model factories, render your own markup.
-  `getGrid*A11yProps` helpers keep custom markup accessible. About 2 KB gzipped.
+  `getGrid*A11yProps` helpers keep custom markup accessible. About 2.7 KB gzipped.
 - **Render-ready** - `<SvGrid />` is a complete, accessible, themeable grid you configure with props.
 
 Compatibility aliases are provided for the framework-neutral names: `createGrid`, `createGridState`,
@@ -141,7 +144,7 @@ Compatibility aliases are provided for the framework-neutral names: `createGrid`
 
 SvGrid publishes an [MCP server](https://www.npmjs.com/package/@svgrid/mcp) plus
 [llms.txt](https://svgrid.com/llms.txt) and [llms-full.txt](https://svgrid.com/llms-full.txt), so Claude,
-Cursor, and Zed answer with accurate, version-pinned APIs and all 370+ demo sources as context rather
+Cursor, and Zed answer with accurate, version-pinned APIs and all 400+ demo sources as context rather
 than hallucinated methods.
 
 ```bash
@@ -154,16 +157,34 @@ See [Use sv-grid docs as LLM context](https://svgrid.com/docs/help/llm-grounding
 ## Enterprise features
 
 The MIT core is free for any use, including commercial, with **no feature gating**. Sorting, filtering,
-editing, virtualization, the **server-side row model**, and the **AI helpers** all ship in the free
-package. The optional [`@svgrid/enterprise`](https://www.npmjs.com/package/@svgrid/enterprise) pack layers
+editing, virtualization, **server-side data** (paging, infinite block scroll, sort, filter, CRUD) and the
+**AI helpers** all ship in the free package. The optional [`@svgrid/enterprise`](https://www.npmjs.com/package/@svgrid/enterprise) pack layers
 on the export- and analytics-heavy features teams tend to need last:
 
+The pack sells in two editions, both covering unlimited production apps.
+
+**Grid edition:**
+
 - **Excel / PDF / CSV / TSV / HTML export** plus paginated print.
 - **Excel / CSV / TSV / JSON import** with auto-mapping and per-row validation.
 - **Pivot tables** with a drag-and-drop pivot Designer.
-- **Kanban board and scheduler / calendar renderers** for the `board` and `scheduler` props.
+- **Kanban board, scheduler / calendar and Gantt renderers** for the `board`, `scheduler` and `gantt` props.
+- **Server-side row model** for lazy grouping, tree, pivot and transactions.
+
+**Suite edition** adds everything above plus:
+
+- **A real spreadsheet.** `<SvSheet>` and the `<sv-sheet>` element over a built-in formula engine
+  with cross-sheet references, named ranges, dynamic arrays and spill, iterative calculation, and
+  dependency-graph recalculation. No `hyperformula` needed, and no runtime dependency.
+- **Spreadsheet file formats.** Read and write `.xlsx`, `.xls`, `.ods` and `.csv`, with formulas,
+  merges, frozen panes, named ranges and charts surviving the round trip.
+- **SvGrid Studio.** The designer, the code generator and the SQL data sources.
+
+Both editions come with a 30-day evaluation period: every feature runs without a key, and under a
+key that does not cover it, with a watermark and a console message about the Enterprise package. `licenseCovers('spreadsheet')` tells you which
+side of the line the current key is on, if you would rather hide an entry point than let it nudge.
 
-OSS projects receive an Enterprise key free. See [Pricing](https://svgrid.com/pricing/).
+OSS projects receive a Suite key free. See [Pricing](https://svgrid.com/pricing/).
 
 ## Also in the box
 
@@ -203,7 +224,7 @@ Full detail: [SvGrid vs AG Grid vs TanStack Table](https://svgrid.com/docs/help/
 ## Documentation
 
 - [Getting started](https://svgrid.com/docs/getting-started/) - end-to-end walkthrough.
-- [370+ live demos](https://svgrid.com/demos/) - copy-paste recipes for every feature.
+- [400+ live demos](https://svgrid.com/demos/) - copy-paste recipes for every feature.
 - [Why headless?](https://svgrid.com/docs/why-headless/) - when to compose vs. drop in.
 - [Theming and Tailwind](https://svgrid.com/docs/help/tailwind/) - re-skin via `--sg-*` tokens and dark mode.
 - [Accessibility](https://svgrid.com/docs/help/accessibility/) - the WAI-ARIA grid pattern as implemented.

package/dist/GridMenus.svelte

@@ -214,6 +214,19 @@
     });
   }
 
+  /**
+   * Whether a column's active filter operator is one of the set operators,
+   * read at event time from component state: the condition input's focus
+   * and blur handlers cannot depend on a template `@const`, because blur
+   * also fires while the popover is being torn down, after that const's
+   * effect is gone.
+   */
+  function isSetOperatorFor(colId: string): boolean {
+    const column = allColumns.find((c) => c.id === colId);
+    const op = filterMenuValues[colId]?.operator ?? defaultOperatorFor(column);
+    return op === "in" || op === "notIn";
+  }
+
   /** Enter anywhere in the panel means "done" - filtering is already live. */
   function onFilterPanelKeydown(event: KeyboardEvent) {
     if (event.key !== "Enter" || event.shiftKey) return;
@@ -286,8 +299,23 @@
   const saveComment = $derived(ctrl.saveComment);
   const removeComment = $derived(ctrl.removeComment);
   const closeCommentEditor = $derived(ctrl.closeCommentEditor);
+
+  function onContextMenuKeydown(event: KeyboardEvent) {
+    // Escape closes the context menu, the way every spreadsheet and desktop
+    // app does. The backdrop closes it on a click, but a keyboard user who
+    // opened it (Shift+F10, the Menu key) otherwise has no way out, and the
+    // menu sits over the sheet swallowing every other key. Handled at the
+    // window so it works whatever holds focus while the menu is open.
+    if (contextMenuFor && (event.key === "Escape" || event.key === "Esc")) {
+      event.preventDefault();
+      event.stopPropagation();
+      closeContextMenu();
+    }
+  }
 </script>
 
+<svelte:window onkeydown={onContextMenuKeydown} />
+
   {#if tooltip}
     <!-- Custom hover tooltip. Floats above the grid; positioned by
          showTooltipFor(). Notes and column tooltips both surface here. -->
@@ -396,10 +424,12 @@
               : menuActiveOperator === "regex"
                 ? "Pattern..."
                 : "Filter value..."}
-          onfocus={isSetOp
-            ? (event) => onSetOpFilterFocus(event.currentTarget as HTMLInputElement, colId)
-            : undefined}
-          onblur={isSetOp ? () => closeInSuggest() : undefined}
+          onfocus={(event) => {
+            if (isSetOperatorFor(colId)) onSetOpFilterFocus(event.currentTarget as HTMLInputElement, colId);
+          }}
+          onblur={() => {
+            if (isSetOperatorFor(colId)) closeInSuggest();
+          }}
           oninput={(event) => {
             const input = event.currentTarget as HTMLInputElement;
             updateFilterMenuValue(colId, input.value);

package/dist/SvGrid.controller.svelte.d.ts

@@ -78,6 +78,7 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     history: SharedHistoryStep[];
     historyPtr: number;
     historyGroupId: string | undefined;
+    historyTag: unknown;
     historyVersion: number;
     tooltip: {
         text: string;
@@ -116,6 +117,14 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     columnVirtualizerVersion: number;
     gridStateVersion: number;
     readonly selectionColumnWidth: number;
+    readonly detailToggleColumnWidth: number;
+    readonly detailToggleColumnLeft: number;
+    readonly showDetailToggleEffective: boolean;
+    readonly systemColumnsWidth: number;
+    readonly detailToggleOf: (row: Row<TData>, rowIndex: number) => {
+        open: boolean;
+        toggle: () => void;
+    } | null;
     readonly rowNumberColumnWidth: number;
     readonly showRowNumbersEffective: boolean;
     readonly filterOperatorOptions: import("./SvGrid.types.js").FilterOption[];
@@ -241,7 +250,7 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     colDropSide: "before" | "after" | null;
     rowDragActive: boolean;
     rowDropIndex: number | null;
-    rowDropSide: "before" | "after" | null;
+    rowDropSide: "before" | "after" | "into" | null;
     readonly onRowDragStart: (e: DragEvent, rowIndex: number) => void;
     readonly onRowDragOver: (e: DragEvent, rowIndex: number) => void;
     readonly onRowDragLeave: (rowIndex: number) => void;
@@ -297,6 +306,8 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
         rows: TData[];
         ids: string[];
     };
+    readonly selectionBarCount: number;
+    readonly selectionBarVisible: boolean;
     lastSelectionSerialized: string;
     lastCellRangeSerialized: string;
     readonly statusBarEnabled: boolean;
@@ -523,6 +534,13 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     readonly frozenRowList: Row<TData>[];
     readonly frozenBandHeight: number;
     readonly frozenRowTop: (i: number) => number;
+    readonly stickyGroupRows: {
+        row: Row<TData>;
+        rowIndex: number;
+        top: number;
+        size: number;
+    }[];
+    readonly stickyTopOfRow: (rowIndex: number) => number | undefined;
     /** Record the height the user dragged a row to. */
     readonly setRowResizeHeight: (index: number, height: number | null) => void;
     readonly isRowCollapsed: (index: number) => boolean;
@@ -532,6 +550,8 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     readonly autosizeColumnByUser: (columnId: string) => void;
     /** A row's dragged height, or undefined when it has not been resized. */
     readonly rowResizeHeightPx: (index: number) => number | undefined;
+    /** The height row i is drawn at: dragged, measured, detail, declared or default. */
+    readonly rowSizePxOf: (i: number) => number;
     readonly virtualRowTotalSize: number;
     readonly virtualRowStart: number;
     readonly virtualRowEnd: number;
@@ -598,10 +618,18 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     readonly getPinnedCellValue: typeof getPinnedCellValue;
     readonly formatPinnedValue: (column: Column<TData>, value: unknown) => string;
     readonly computePinnedCellClass: (rowData: TData, column: Column<TData>) => string;
-    readonly isRowSelected: (rowId: string) => boolean;
+    readonly isRowSelected: (rowId: string) => any;
     readonly toggleRowSelectionById: (rowId: string) => void;
-    readonly headerSelectionState: "none" | "all" | "some";
+    readonly headerSelectionState: "some" | "none" | "all";
+    readonly visibleRowRange: {
+        startIndex: number;
+        endIndex: number;
+    };
+    placeholderStateOf: (row: Row<TData>) => "loading" | "failed" | null;
+    /** Retry a failed placeholder row. No-op without `onRetryRow`. */
+    retryRow(row: Row<TData>): void;
     readonly toggleSelectAllRows: () => void;
+    readonly setSelectAllRows: (select: boolean) => void;
     userHasActivatedCell: boolean;
     tabRunOrigin: number | null;
     readonly setActiveCell: (rowIndex: number, colIndex: number) => void;
@@ -662,11 +690,11 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     columnResizable(columnId: string): boolean;
     readonly readCellRaw: (rowIndex: number, columnId: string) => unknown;
     readonly writeCellRaw: (rowIndex: number, columnId: string, value: unknown) => void;
-    readonly applyFillPattern: () => void;
+    readonly applyFillPattern: (toggled?: boolean) => void;
     readonly clearSelectedCellValues: () => void;
     readonly startFillDrag: (event: PointerEvent, rowIndex: number, colIndex: number) => void;
     readonly onFillPointerMove: (event: PointerEvent) => void;
-    readonly onFillPointerUp: () => void;
+    readonly onFillPointerUp: (event?: PointerEvent) => void;
     readonly fillDownToNeighbour: () => void;
     readonly isOnMoveGrabStrip: (cell: HTMLElement, rowIndex: number, colIndex: number, clientX: number, clientY: number) => boolean;
     readonly startMoveDrag: (event: PointerEvent, rowIndex: number, colIndex: number) => boolean;