@svgrid/grid 1.1.1 → 1.2.1

package/dist/svgrid.new-features.wrapper.test.js

@@ -1,194 +0,0 @@
-/**
- * Source-level smoke tests for the wrapper additions: `getRowId` prop,
- * `cellClass` / `rowClass` rendering, the column-layout API surface
- * (`setColumnWidth` / `getColumnWidths` / `setColumnPinning` /
- * `getColumnPinning`), the `between` operator UI, and the multi-cell
- * paste / cut keyboard plumbing.
- *
- * These are deliberately source-string assertions, not jsdom mounts -
- * Svelte 5 mount inside vitest is brittle (the existing
- * `svgrid.wrapper.test.ts` follows the same pattern). The behaviour
- * itself is covered by integration probes in the gallery (see the
- * pivot expansion + paste/cut probes that were run during build) and
- * the upstream unit tests of the headless engine + Pro pivot.
- */
-import { readFileSync } from 'node:fs';
-import { resolve } from 'node:path';
-import { describe, expect, it } from 'vitest';
-// The wrapper implementation spans SvGrid.svelte plus its extracted
-// sibling modules (types + pure helpers). Concatenate them so these
-// "the wrapper declares/exposes X" assertions hold wherever the code
-// physically lives.
-const source = [
-    './SvGrid.svelte',
-    './SvGrid.controller.svelte.ts',
-    './GridMenus.svelte',
-    './GridFooter.svelte',
-    './SvGrid.types.ts',
-    './SvGrid.helpers.ts',
-    './filter-operators.ts',
-    './facet-buckets.ts',
-    './cell-values.ts',
-    './clipboard.ts',
-    './build-api.ts',
-    './columns.ts',
-    './selection.ts',
-    './editing.ts',
-    './cell-render.ts',
-    './menus.ts',
-    './summaries.ts',
-    './keyboard-handlers.ts',
-    './scroll-sync.ts',
-    './features.ts',
-]
-    .map((p) => readFileSync(resolve(__dirname, p), 'utf-8'))
-    .join('\n');
-const typesPath = resolve(__dirname, './svgrid-wrapper.types.ts');
-const types = readFileSync(typesPath, 'utf-8');
-describe('SvGrid wrapper - getRowId prop', () => {
-    it('declares the getRowId prop on the Props type', () => {
-        expect(source).toMatch(/getRowId\?:\s*\(row:\s*TData,\s*index:\s*number\)\s*=>\s*string/);
-    });
-    it('forwards the prop into createSvGrid options', () => {
-        expect(source).toMatch(/get getRowId\(\)[\s\S]*?return props\.getRowId/);
-    });
-});
-describe('SvGrid wrapper - cellClass + rowClass', () => {
-    it('declares the rowClass prop on the Props type', () => {
-        expect(source).toMatch(/rowClass\?:\s*\(ctx:\s*\{/);
-    });
-    it('exposes a resolveClassList helper that normalises array / record / string forms', () => {
-        expect(source).toMatch(/function resolveClassList\(/);
-        expect(source).toMatch(/Array\.isArray\(value\)/);
-    });
-    it('computes the row-level class once per render row and threads it onto the <tr>', () => {
-        expect(source).toMatch(/function computeRowClass/);
-        expect(source).toMatch(/userRowClass = computeRowClass\(row, rowIndex\)/);
-        expect(source).toMatch(/class=\{`sv-grid-row \$\{userRowClass\}/);
-    });
-    it('computes the cell-level class per column and threads it onto the <td>', () => {
-        expect(source).toMatch(/function computeCellClass/);
-        expect(source).toMatch(/userCellClass = computeCellClass\(row, rendered\.column\)/);
-        expect(source).toMatch(/class=\{`sv-grid-cell \$\{userCellClass\}`\}/);
-    });
-});
-describe('SvGrid wrapper - column-layout API', () => {
-    it('declares setColumnWidth + getColumnWidths in the public type', () => {
-        expect(types).toContain('setColumnWidth(columnId: string, width: number): void');
-        expect(types).toContain('getColumnWidths(): Record<string, number>');
-    });
-    it('declares setColumnPinning + getColumnPinning in the public type', () => {
-        expect(types).toMatch(/setColumnPinning\(pinning:\s*\{/);
-        expect(types).toContain('getColumnPinning(): { left: string[]; right: string[] }');
-    });
-    it('implements all four methods in the api object', () => {
-        expect(source).toMatch(/setColumnWidth\(columnId: string, width: number\)/);
-        expect(source).toMatch(/getColumnWidths\(\)/);
-        expect(source).toMatch(/setColumnPinning\(pinning\)/);
-        expect(source).toMatch(/getColumnPinning\(\)/);
-    });
-    it('clamps setColumnWidth to MIN_COLUMN_WIDTH', () => {
-        // Confirm the clamp is in the code path so a caller can't drop a
-        // column below the minimum by passing 0 or a negative number.
-        expect(source).toMatch(/Math\.max\(MIN_COLUMN_WIDTH/);
-    });
-    it('defensive-copies setColumnPinning inputs so callers cannot mutate state', () => {
-        expect(source).toMatch(/Array\.from\(new Set\(pinning\.left/);
-        expect(source).toMatch(/Array\.from\(new Set\(pinning\.right/);
-    });
-});
-describe('SvGrid wrapper - between filter operator', () => {
-    it("includes 'between' in the FilterOperator type", () => {
-        expect(source).toMatch(/"between"/);
-    });
-    it("includes 'between' in NUMBER_OPERATORS + DATE_OPERATORS but NOT in TEXT_OPERATORS", () => {
-        // The list literals appear in order, so we slice each block out
-        // separately and check membership.
-        const numOps = source.match(/const NUMBER_OPERATORS[^]*?\];/)?.[0] ?? '';
-        expect(numOps).toContain('"between"');
-        const dateOps = source.match(/const DATE_OPERATORS[^]*?\];/)?.[0] ?? '';
-        expect(dateOps).toContain('"between"');
-        const textOps = source.match(/const TEXT_OPERATORS[^]*?\];/)?.[0] ?? '';
-        expect(textOps).not.toContain('"between"');
-    });
-    it('renders a second input ("To") when the operator is between', () => {
-        expect(source).toMatch(/menuActiveOperator === "between"/);
-        expect(source).toMatch(/placeholder="To"/);
-    });
-    it('treats the filter as inactive until BOTH endpoints are non-empty', () => {
-        // The active-filters filter() should require value AND valueTo.
-        expect(source).toMatch(/if \(f\.operator === "between"\) \{[^}]*f\.value\.trim\(\)\.length > 0[^}]*f\.valueTo[^}]*\.trim\(\)\.length > 0/);
-    });
-    it('forwards valueTo through applyExcelFilter', () => {
-        expect(source).toMatch(/valueTo:\s*(filter\.operator|op) === "between" \? (filter\.valueTo|valueTo) : undefined/);
-    });
-    it('publishes valueTo in the onFiltersChange payload only for between clauses', () => {
-        expect(source).toMatch(/f\.operator === "between" && f\.valueTo\s*\?\s*\{ valueTo: f\.valueTo \}/);
-    });
-    it('exposes valueTo on the imperative setFilter input + getFilters output', () => {
-        expect(types).toMatch(/setFilter\(\s*columnId: string,[\s\S]*?valueTo\?: string/);
-        expect(types).toMatch(/getFilters\(\)[\s\S]*?valueTo\?: string/);
-    });
-});
-describe('SvGrid wrapper - multi-cell paste + cut + delete', () => {
-    it('fills the selection range when the clipboard payload is 1x1', () => {
-        expect(source).toMatch(/clipboardIsSingleCell\s*=\s*\n?\s*lines\.length === 1 && \(lines\[0\]\?\.split\("\\t"\)\.length \?\? 0\) === 1/);
-        expect(source).toMatch(/selectionIsRange = startRow !== endRow \|\| startCol !== endCol/);
-        expect(source).toMatch(/fillRange = clipboardIsSingleCell && selectionIsRange/);
-    });
-    it('walks the entire selection rect when filling', () => {
-        expect(source).toMatch(/const rowSpan = fillRange \? endRow - startRow \+ 1 : lines\.length/);
-        expect(source).toMatch(/const colSpan = fillRange/);
-    });
-    it('implements clearSelectedCells() that touches every editable cell in the range', () => {
-        expect(source).toMatch(/function clearSelectedCells\(\): boolean/);
-        expect(source).toMatch(/parseEditorValue\(editorType, ""\)/);
-    });
-    it('wires Ctrl/Cmd+X to cutSelectionToClipboard', () => {
-        expect(source).toMatch(/lower === "x"/);
-        expect(source).toMatch(/void (?:ctx\.)?cutSelectionToClipboard\(\)/);
-        expect(source).toMatch(/async function cutSelectionToClipboard/);
-        // Confirm both calls live inside the cutSelectionToClipboard body
-        // (copy first, then clear). A comment between them is fine.
-        const body = source.match(/async function cutSelectionToClipboard\(\)[^{]*\{([\s\S]*?)^\s\s\}/m)?.[1] ?? '';
-        expect(body).toContain('copySelectionToClipboard();');
-        expect(body).toContain('clearSelectedCells();');
-        expect(body.indexOf('copySelectionToClipboard()')).toBeLessThan(body.indexOf('clearSelectedCells()'));
-    });
-    it('wires Delete + Backspace to clearSelectedCells (without clipboard interaction)', () => {
-        expect(source).toMatch(/event\.key === "Delete" \|\| event\.key === "Backspace"/);
-        expect(source).toMatch(/if \((?:ctx\.)?clearSelectedCells\(\)\)\s*\{/);
-    });
-    // Regression: the controller's ctx is an object literal of getters, and the
-    // copy/cut/paste handlers in keyboard-handlers + menus reach the functions
-    // via `ctx.<name>()`. A refactor once shipped the `ctx.cutSelectionToClipboard`
-    // / `ctx.pasteFromClipboard` CALLS but dropped their getters, so those threw
-    // "is not a function" at runtime - copy worked, cut + paste were dead. Assert
-    // every clipboard function called through ctx has a matching getter.
-    it('exposes a ctx getter for every clipboard command it calls through ctx', () => {
-        for (const fn of [
-            'copySelectionToClipboard',
-            'cutSelectionToClipboard',
-            'pasteFromClipboard',
-            'onGridPaste',
-            'clearSelectedCells',
-        ]) {
-            expect(source).toMatch(new RegExp(`get ${fn}\\(\\)\\s*\\{\\s*return ${fn};?\\s*\\}`));
-        }
-    });
-    it('copy/cut fall back to execCommand when navigator.clipboard is absent (insecure context)', () => {
-        expect(source).toMatch(/function writeClipboardText\(/);
-        expect(source).toMatch(/document\.execCommand\("copy"\)/);
-    });
-    it('paste falls back to a native paste event when the async API is unavailable', () => {
-        // keydown only preventDefaults (and uses the async API) in a secure context;
-        // otherwise it lets the browser deliver a native paste event to onGridPaste.
-        // Accept either the positive branch or the inverted early-return guard
-        // (`if (!navigator.clipboard?.readText) return`) - both gate on the async API.
-        expect(source).toMatch(/if \(!?navigator\.clipboard\?\.readText\)/);
-        expect(source).toMatch(/function onGridPaste\(event: ClipboardEvent\)/);
-        expect(source).toMatch(/clipboardData\?\.getData\("text\/plain"\)/);
-        // The grid root wires the handler.
-        expect(source).toMatch(/onpaste=\{onGridPaste\}/);
-    });
-});

package/dist/svgrid.row-pinning.test.d.ts

@@ -1,14 +0,0 @@
-/**
- * Component tests for the engine-level row pinning props
- * (`pinnedTopRows` / `pinnedBottomRows`). Mount a real <SvGrid>,
- * pass the props, then assert on the rendered DOM:
- *
- *   - pinned-top / pinned-bottom <tbody>s are rendered
- *   - each pinned row carries the expected class + data attributes
- *   - column widths + cell values match the schema
- *   - read-only invariants hold (no editor cell, no checkbox cell)
- *   - reactive prop changes re-render
- *   - stacking attributes (data-pinned-index) are present
- *   - CSS variables for sticky offsets are set on the shell
- */
-export {};

package/dist/svgrid.row-pinning.test.js

@@ -1,250 +0,0 @@
-/**
- * Component tests for the engine-level row pinning props
- * (`pinnedTopRows` / `pinnedBottomRows`). Mount a real <SvGrid>,
- * pass the props, then assert on the rendered DOM:
- *
- *   - pinned-top / pinned-bottom <tbody>s are rendered
- *   - each pinned row carries the expected class + data attributes
- *   - column widths + cell values match the schema
- *   - read-only invariants hold (no editor cell, no checkbox cell)
- *   - reactive prop changes re-render
- *   - stacking attributes (data-pinned-index) are present
- *   - CSS variables for sticky offsets are set on the shell
- */
-import { describe, expect, it } from 'vitest';
-import { mount, unmount, flushSync } from 'svelte';
-import SvGrid from './SvGrid.svelte';
-import { columnFilteringFeature, createCoreRowModel, createFilteredRowModel, createSortedRowModel, rowSortingFeature, sortFns, tableFeatures, } from './index';
-const features = tableFeatures({ columnFilteringFeature, rowSortingFeature });
-const rows = [
-    { id: 'ACC-1', account: 'Helios', arr: 120000, seats: 40 },
-    { id: 'ACC-2', account: 'Vertex', arr: 85000, seats: 22 },
-    { id: 'ACC-3', account: 'Atlas', arr: 250000, seats: 80 },
-    { id: 'ACC-4', account: 'Quantum', arr: 60000, seats: 15 },
-];
-const cols = [
-    { field: 'id', header: 'ID', width: 100, editable: false },
-    { field: 'account', header: 'Account', width: 200, editable: false },
-    { field: 'arr', header: 'ARR', width: 130, editable: false, align: 'right',
-        format: { type: 'number', options: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 } } },
-    { field: 'seats', header: 'Seats', width: 90, editable: false, align: 'right' },
-];
-function mountGrid(opts = {}) {
-    return new Promise((res, rej) => {
-        const target = document.createElement('div');
-        document.body.appendChild(target);
-        const propsState = { ...opts };
-        let api = null;
-        const app = mount(SvGrid, {
-            target,
-            props: {
-                data: rows,
-                columns: cols,
-                features,
-                _rowModels: {
-                    coreRowModel: createCoreRowModel(),
-                    filteredRowModel: createFilteredRowModel(),
-                    sortedRowModel: createSortedRowModel(sortFns),
-                },
-                containerHeight: 480,
-                virtualization: false,
-                columnVirtualization: false,
-                enableInlineEditing: false,
-                showPagination: false,
-                showColumnFilters: false,
-                showGlobalFilter: false,
-                showRowSelection: false,
-                pinnedTopRows: propsState.pinnedTopRows,
-                pinnedBottomRows: propsState.pinnedBottomRows,
-                onApiReady(received) {
-                    api = received;
-                    res({
-                        target,
-                        api,
-                        destroy: () => {
-                            unmount(app);
-                            target.remove();
-                        },
-                        setProps(next) {
-                            propsState.pinnedTopRows = next.pinnedTopRows;
-                            propsState.pinnedBottomRows = next.pinnedBottomRows;
-                            app
-                                .pinnedTopRows = next.pinnedTopRows;
-                            app
-                                .pinnedBottomRows = next.pinnedBottomRows;
-                            flushSync();
-                        },
-                    });
-                },
-            },
-        });
-        queueMicrotask(() => { if (!api)
-            rej(new Error('onApiReady never fired')); });
-    });
-}
-const tick = () => new Promise((r) => queueMicrotask(r));
-const TOTALS = {
-    id: '⌃ TOTALS', account: 'All accounts',
-    arr: rows.reduce((s, r) => s + r.arr, 0),
-    seats: rows.reduce((s, r) => s + r.seats, 0),
-};
-const BENCHMARK = {
-    id: '⌃ BENCH', account: 'Industry benchmark',
-    arr: 180000, seats: 95,
-};
-const PAGE = {
-    id: '⌄ PAGE', account: 'Visible page',
-    arr: rows.reduce((s, r) => s + r.arr, 0),
-    seats: rows.reduce((s, r) => s + r.seats, 0),
-};
-describe('SvGrid - pinnedTopRows render', () => {
-    it('renders a pinned-top tbody when prop is provided', async () => {
-        const { target, destroy } = await mountGrid({ pinnedTopRows: [TOTALS] });
-        try {
-            await tick();
-            const topBody = target.querySelector('tbody.sv-grid-pinned-top-body');
-            expect(topBody, 'pinned-top tbody should exist').not.toBeNull();
-            const trs = topBody.querySelectorAll('tr.sv-grid-pinned-row-top');
-            expect(trs.length).toBe(1);
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('does NOT render the tbody when prop is empty / undefined', async () => {
-        const { target, destroy } = await mountGrid({ pinnedTopRows: [] });
-        try {
-            await tick();
-            const topBody = target.querySelector('tbody.sv-grid-pinned-top-body');
-            expect(topBody).toBeNull();
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('renders the row values using the column schema (format applied)', async () => {
-        const { target, destroy } = await mountGrid({ pinnedTopRows: [TOTALS] });
-        try {
-            await tick();
-            const tds = target
-                .querySelectorAll('tr.sv-grid-pinned-row-top td');
-            expect(tds.length).toBe(cols.length);
-            // ARR cell should be currency-formatted ($515,000) - currency
-            // symbol exact form may vary by ICU build; assert a "$" plus the
-            // raw number with grouping is present.
-            const arrCellText = (tds[2]?.textContent ?? '').trim();
-            expect(arrCellText).toMatch(/\$/);
-            expect(arrCellText).toContain('515');
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('stacks multiple pinned-top rows with data-pinned-index', async () => {
-        const { target, destroy } = await mountGrid({
-            pinnedTopRows: [TOTALS, BENCHMARK],
-        });
-        try {
-            await tick();
-            const trs = target.querySelectorAll('tr.sv-grid-pinned-row-top');
-            expect(trs.length).toBe(2);
-            expect(trs[0].getAttribute('data-pinned-row')).toBe('top');
-            expect(trs[0].getAttribute('data-pinned-index')).toBe('0');
-            expect(trs[1].getAttribute('data-pinned-index')).toBe('1');
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('marks pinned cells with the data-pinned-row attribute', async () => {
-        const { target, destroy } = await mountGrid({ pinnedTopRows: [TOTALS] });
-        try {
-            await tick();
-            const tr = target.querySelector('tr.sv-grid-pinned-row-top');
-            expect(tr.getAttribute('data-pinned-row')).toBe('top');
-        }
-        finally {
-            destroy();
-        }
-    });
-});
-describe('SvGrid - pinnedBottomRows render', () => {
-    it('renders a pinned-bottom tbody when prop is provided', async () => {
-        const { target, destroy } = await mountGrid({ pinnedBottomRows: [PAGE] });
-        try {
-            await tick();
-            const bottomBody = target.querySelector('tbody.sv-grid-pinned-bottom-body');
-            expect(bottomBody).not.toBeNull();
-            const trs = bottomBody.querySelectorAll('tr.sv-grid-pinned-row-bottom');
-            expect(trs.length).toBe(1);
-            expect(trs[0].getAttribute('data-pinned-row')).toBe('bottom');
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('renders bottom rows AFTER the regular tbody', async () => {
-        const { target, destroy } = await mountGrid({ pinnedBottomRows: [PAGE] });
-        try {
-            await tick();
-            const bodies = target.querySelectorAll('tbody');
-            // [regular .sv-grid-body, .sv-grid-pinned-bottom-body]
-            // In the DOM order, the bottom tbody must come after the main body.
-            const classes = Array.from(bodies).map((b) => b.className);
-            const mainIdx = classes.findIndex((c) => c.includes('sv-grid-body') && !c.includes('pinned'));
-            const botIdx = classes.findIndex((c) => c.includes('sv-grid-pinned-bottom-body'));
-            expect(mainIdx).toBeGreaterThanOrEqual(0);
-            expect(botIdx).toBeGreaterThan(mainIdx);
-        }
-        finally {
-            destroy();
-        }
-    });
-});
-describe('SvGrid - pinned rows are read-only', () => {
-    it('pinned-row cells do not carry the editing class even with inline editing enabled', async () => {
-        const { target, destroy } = await mountGrid({ pinnedTopRows: [TOTALS] });
-        try {
-            await tick();
-            const editingCells = target.querySelectorAll('tr.sv-grid-pinned-row-top td.sv-grid-cell-editing');
-            expect(editingCells.length).toBe(0);
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('pinned rows do not carry the selection checkbox cell', async () => {
-        const { target, destroy } = await mountGrid({ pinnedTopRows: [TOTALS] });
-        try {
-            await tick();
-            // The selection cell class is `.sv-grid-selection-cell`. It may
-            // appear in the regular row when row-selection is on, but never
-            // with a working <button role="checkbox"> inside it on a pinned
-            // row (the snippet renders an empty <td>).
-            const checkboxes = target.querySelectorAll('tr.sv-grid-pinned-row-top button[role="checkbox"]');
-            expect(checkboxes.length).toBe(0);
-        }
-        finally {
-            destroy();
-        }
-    });
-});
-describe('SvGrid - pinned rows + CSS variables', () => {
-    it('sets --sg-thead-h and --sg-pinned-row-h CSS variables on the shell', async () => {
-        const { target, destroy } = await mountGrid({
-            pinnedTopRows: [TOTALS],
-            pinnedBottomRows: [PAGE],
-        });
-        try {
-            await tick();
-            const shell = target.querySelector('.sv-grid-shell');
-            expect(shell, 'shell should exist').not.toBeNull();
-            const style = shell.getAttribute('style') ?? '';
-            expect(style).toContain('--sg-thead-h');
-            expect(style).toContain('--sg-pinned-row-h');
-        }
-        finally {
-            destroy();
-        }
-    });
-});

package/dist/svgrid.set-filter.test.d.ts

@@ -1,17 +0,0 @@
-/**
- * Component tests for `api.setFacetFilter()` - the imperative entry
- * point that powers the three set-filter UX patterns (Excel-style
- * column-menu, async value loaders, and tree-list cascades). The grid
- * is filter-source-agnostic; this test exercises the API directly so
- * coverage is independent of any specific UI implementation.
- *
- * Covers:
- *   - Single column facet filter narrows the displayed rows
- *   - Multi-value filter (OR within column) accepts every listed value
- *   - Passing null / empty clears the filter
- *   - Two columns AND across (different columns)
- *   - Combines with operator filter from setFilter()
- *   - Survives unknown values (no crash, just no matches)
- *   - Unicode / non-ASCII values match exactly (no normalization)
- */
-export {};