@svgrid/grid 1.1.2 → 1.2.1

package/dist/spreadsheet.test.js

@@ -1,446 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import { spreadsheetLayout, spansToMerges } from './spreadsheet';
-// jsdom does not implement the global `CSS` object, which `findCell` uses via
-// `CSS.escape`. Provide a minimal polyfill so the action's selector queries
-// run. (A real browser ships CSS.escape; this is purely an env gap.)
-if (typeof globalThis.CSS === 'undefined') {
-    // @ts-expect-error - minimal shim for the test environment
-    globalThis.CSS = { escape: (s) => s.replace(/["\\]/g, '\\$&') };
-}
-else if (typeof globalThis.CSS.escape !== 'function') {
-    // @ts-expect-error - augment partial CSS object
-    globalThis.CSS.escape = (s) => s.replace(/["\\]/g, '\\$&');
-}
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-/** Flush a queued requestAnimationFrame callback. The action batches its
- *  work into one rAF, so tests must advance a frame to observe the effect. */
-function flushFrame() {
-    return new Promise((resolve) => {
-        // Two rAFs: the first lets any already-queued callback run, the second
-        // guarantees we resolve AFTER that callback has executed.
-        requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
-    });
-}
-/** Build a `<table>` with a header-less body of `rows` x `cols`. Each TD is
- *  tagged with `data-svgrid-row` (display index) + `data-col-id` exactly the
- *  way SvGrid emits them, which is what the layout helper queries on. */
-function buildGrid(rows, columnOrder) {
-    const host = document.createElement('div');
-    const table = document.createElement('table');
-    const tbody = document.createElement('tbody');
-    for (let r = 0; r < rows; r += 1) {
-        const tr = document.createElement('tr');
-        for (const colId of columnOrder) {
-            const td = document.createElement('td');
-            td.setAttribute('data-svgrid-row', String(r));
-            td.setAttribute('data-col-id', colId);
-            td.textContent = `${colId}-${r}`;
-            tr.appendChild(td);
-        }
-        tbody.appendChild(tr);
-    }
-    table.appendChild(tbody);
-    host.appendChild(table);
-    document.body.appendChild(host);
-    const cellAt = (r, colId) => {
-        const el = host.querySelector(`td[data-svgrid-row="${r}"][data-col-id="${colId}"]`);
-        if (!el)
-            throw new Error(`no cell at row=${r} col=${colId}`);
-        return el;
-    };
-    return { host, cellAt };
-}
-let hosts = [];
-function track(host) {
-    hosts.push(host);
-    return host;
-}
-beforeEach(() => {
-    hosts = [];
-});
-afterEach(() => {
-    for (const h of hosts)
-        h.remove();
-    document.body.innerHTML = '';
-});
-// ---------------------------------------------------------------------------
-// Merges
-// ---------------------------------------------------------------------------
-describe('spreadsheetLayout - merges', () => {
-    it('applies colspan + hides covered cells horizontally', async () => {
-        const cols = ['a', 'b', 'c'];
-        const { host, cellAt } = buildGrid(2, cols);
-        track(host);
-        const action = spreadsheetLayout(host, {
-            columnOrder: cols,
-            merges: [{ rowIndex: 0, columnId: 'a', colspan: 2 }],
-        });
-        await flushFrame();
-        const origin = cellAt(0, 'a');
-        expect(origin.getAttribute('colspan')).toBe('2');
-        expect(origin.hasAttribute('rowspan')).toBe(false);
-        expect(origin.getAttribute('data-svgrid-sheet')).toBe('');
-        // Covered neighbour to the right is hidden + marked.
-        expect(cellAt(0, 'b').style.display).toBe('none');
-        expect(cellAt(0, 'b').getAttribute('data-svgrid-sheet')).toBe('');
-        // Untouched cells stay visible.
-        expect(cellAt(0, 'c').style.display).toBe('');
-        expect(cellAt(1, 'a').style.display).toBe('');
-        action.destroy();
-    });
-    it('applies rowspan + hides covered cells vertically', async () => {
-        const cols = ['a', 'b'];
-        const { host, cellAt } = buildGrid(3, cols);
-        track(host);
-        const action = spreadsheetLayout(host, {
-            columnOrder: cols,
-            merges: [{ rowIndex: 0, columnId: 'a', rowspan: 2 }],
-        });
-        await flushFrame();
-        const origin = cellAt(0, 'a');
-        expect(origin.getAttribute('rowspan')).toBe('2');
-        expect(origin.hasAttribute('colspan')).toBe(false);
-        expect(cellAt(1, 'a').style.display).toBe('none');
-        expect(cellAt(2, 'a').style.display).toBe(''); // outside the span
-        action.destroy();
-    });
-    it('handles a rectangular colspan + rowspan block', async () => {
-        const cols = ['a', 'b', 'c'];
-        const { host, cellAt } = buildGrid(3, cols);
-        track(host);
-        const action = spreadsheetLayout(host, {
-            columnOrder: cols,
-            merges: [{ rowIndex: 0, columnId: 'a', colspan: 2, rowspan: 2 }],
-        });
-        await flushFrame();
-        expect(cellAt(0, 'a').getAttribute('colspan')).toBe('2');
-        expect(cellAt(0, 'a').getAttribute('rowspan')).toBe('2');
-        // All covered cells except the origin are hidden.
-        expect(cellAt(0, 'b').style.display).toBe('none');
-        expect(cellAt(1, 'a').style.display).toBe('none');
-        expect(cellAt(1, 'b').style.display).toBe('none');
-        // c column + row 2 untouched.
-        expect(cellAt(0, 'c').style.display).toBe('');
-        expect(cellAt(2, 'a').style.display).toBe('');
-        action.destroy();
-    });
-    it('clamps zero/negative span to a minimum of 1 (no colspan/rowspan attr)', async () => {
-        const cols = ['a', 'b'];
-        const { host, cellAt } = buildGrid(2, cols);
-        track(host);
-        const action = spreadsheetLayout(host, {
-            columnOrder: cols,
-            merges: [{ rowIndex: 0, columnId: 'a', colspan: 0, rowspan: -5 }],
-        });
-        await flushFrame();
-        const origin = cellAt(0, 'a');
-        // Clamped to 1, so no span attributes are written, but it is still marked.
-        expect(origin.hasAttribute('colspan')).toBe(false);
-        expect(origin.hasAttribute('rowspan')).toBe(false);
-        expect(origin.getAttribute('data-svgrid-sheet')).toBe('');
-        expect(cellAt(0, 'b').style.display).toBe(''); // nothing covered
-        action.destroy();
-    });
-    it('skips a merge whose columnId is not in columnOrder', async () => {
-        const cols = ['a', 'b'];
-        const { host, cellAt } = buildGrid(1, cols);
-        track(host);
-        const action = spreadsheetLayout(host, {
-            columnOrder: cols,
-            merges: [{ rowIndex: 0, columnId: 'ghost', colspan: 2 }],
-        });
-        await flushFrame();
-        expect(cellAt(0, 'a').hasAttribute('data-svgrid-sheet')).toBe(false);
-        expect(cellAt(0, 'b').style.display).toBe('');
-        action.destroy();
-    });
-    it('skips a merge whose origin cell is not rendered', async () => {
-        const cols = ['a', 'b'];
-        const { host, cellAt } = buildGrid(1, cols);
-        track(host);
-        const action = spreadsheetLayout(host, {
-            columnOrder: cols,
-            merges: [{ rowIndex: 99, columnId: 'a', colspan: 2 }],
-        });
-        await flushFrame();
-        // Nothing marked anywhere.
-        expect(host.querySelectorAll('[data-svgrid-sheet]').length).toBe(0);
-        expect(cellAt(0, 'a').style.display).toBe('');
-        action.destroy();
-    });
-    it('ignores covered cells that fall outside the columnOrder or render window', async () => {
-        const cols = ['a', 'b'];
-        // Only 1 row rendered, but ask for a colspan that runs off the column
-        // list AND a rowspan that runs off the rendered rows.
-        const { host, cellAt } = buildGrid(1, cols);
-        track(host);
-        const action = spreadsheetLayout(host, {
-            columnOrder: cols,
-            merges: [{ rowIndex: 0, columnId: 'b', colspan: 3, rowspan: 3 }],
-        });
-        await flushFrame();
-        const origin = cellAt(0, 'b');
-        expect(origin.getAttribute('colspan')).toBe('3');
-        expect(origin.getAttribute('rowspan')).toBe('3');
-        // No sibling to the right of b, and rows 1/2 don't exist - so the only
-        // marked cell is the origin itself.
-        expect(host.querySelectorAll('[data-svgrid-sheet]').length).toBe(1);
-        action.destroy();
-    });
-});
-// ---------------------------------------------------------------------------
-// Selection-edge inheritance
-// ---------------------------------------------------------------------------
-describe('spreadsheetLayout - selection edge inheritance', () => {
-    it('mirrors range-right / range-bottom / selected-range flags onto the origin', async () => {
-        const cols = ['a', 'b'];
-        const { host, cellAt } = buildGrid(2, cols);
-        track(host);
-        // Mark the far covered cell with range edge flags BEFORE applying.
-        cellAt(1, 'b').setAttribute('data-range-right', 'true');
-        cellAt(1, 'b').setAttribute('data-range-bottom', 'true');
-        cellAt(0, 'b').setAttribute('data-selected-range', 'true');
-        const action = spreadsheetLayout(host, {
-            columnOrder: cols,
-            merges: [{ rowIndex: 0, columnId: 'a', colspan: 2, rowspan: 2 }],
-        });
-        await flushFrame();
-        const origin = cellAt(0, 'a');
-        expect(origin.classList.contains('sv-merge-edge-right')).toBe(true);
-        expect(origin.classList.contains('sv-merge-edge-bottom')).toBe(true);
-        expect(origin.classList.contains('sv-merge-in-range')).toBe(true);
-        action.destroy();
-    });
-    it('leaves edge classes off when no range flags are present', async () => {
-        const cols = ['a', 'b'];
-        const { host, cellAt } = buildGrid(2, cols);
-        track(host);
-        const action = spreadsheetLayout(host, {
-            columnOrder: cols,
-            merges: [{ rowIndex: 0, columnId: 'a', colspan: 2, rowspan: 2 }],
-        });
-        await flushFrame();
-        const origin = cellAt(0, 'a');
-        expect(origin.classList.contains('sv-merge-edge-right')).toBe(false);
-        expect(origin.classList.contains('sv-merge-edge-bottom')).toBe(false);
-        expect(origin.classList.contains('sv-merge-in-range')).toBe(false);
-        action.destroy();
-    });
-    it('treats the origin own selected-range flag as in-range', async () => {
-        const cols = ['a'];
-        const { host, cellAt } = buildGrid(1, cols);
-        track(host);
-        cellAt(0, 'a').setAttribute('data-selected-range', 'true');
-        const action = spreadsheetLayout(host, {
-            columnOrder: cols,
-            merges: [{ rowIndex: 0, columnId: 'a' }],
-        });
-        await flushFrame();
-        expect(cellAt(0, 'a').classList.contains('sv-merge-in-range')).toBe(true);
-        action.destroy();
-    });
-});
-// ---------------------------------------------------------------------------
-// Borders
-// ---------------------------------------------------------------------------
-describe('spreadsheetLayout - borders', () => {
-    it('injects an overlay with the requested edge styles', async () => {
-        const cols = ['a'];
-        const { host, cellAt } = buildGrid(1, cols);
-        track(host);
-        const action = spreadsheetLayout(host, {
-            columnOrder: cols,
-            borders: [
-                {
-                    rowIndex: 0,
-                    columnId: 'a',
-                    top: { width: 3, style: 'dashed', color: 'red' },
-                    bottom: {}, // defaults: 2px solid currentColor
-                },
-            ],
-        });
-        await flushFrame();
-        const td = cellAt(0, 'a');
-        const overlay = td.querySelector('.sv-cell-border-overlay');
-        expect(overlay).not.toBeNull();
-        expect(overlay.style.borderTop).toBe('3px dashed red');
-        // jsdom's CSSOM drops the `currentColor` keyword from the border
-        // shorthand, but the width + style survive, confirming the default
-        // (2px solid) edge was emitted.
-        expect(overlay.style.borderBottom).toContain('2px solid');
-        // No left/right set.
-        expect(overlay.style.borderLeft).toBe('');
-        expect(td.getAttribute('data-svgrid-sheet')).toBe('');
-        // The TD becomes a positioning context.
-        expect(td.style.position).toBe('relative');
-        action.destroy();
-    });
-    it('skips a border spec with no edges set (no overlay injected)', async () => {
-        const cols = ['a'];
-        const { host, cellAt } = buildGrid(1, cols);
-        track(host);
-        const action = spreadsheetLayout(host, {
-            columnOrder: cols,
-            borders: [{ rowIndex: 0, columnId: 'a' }],
-        });
-        await flushFrame();
-        expect(cellAt(0, 'a').querySelector('.sv-cell-border-overlay')).toBeNull();
-        expect(cellAt(0, 'a').hasAttribute('data-svgrid-sheet')).toBe(false);
-        action.destroy();
-    });
-    it('skips a border spec whose target cell is absent', async () => {
-        const cols = ['a'];
-        const { host } = buildGrid(1, cols);
-        track(host);
-        const action = spreadsheetLayout(host, {
-            columnOrder: cols,
-            borders: [{ rowIndex: 5, columnId: 'a', top: { width: 1 } }],
-        });
-        await flushFrame();
-        expect(host.querySelectorAll('.sv-cell-border-overlay').length).toBe(0);
-        action.destroy();
-    });
-    it('does not override an already-positioned TD', async () => {
-        const cols = ['a'];
-        const { host, cellAt } = buildGrid(1, cols);
-        track(host);
-        cellAt(0, 'a').style.position = 'absolute';
-        const action = spreadsheetLayout(host, {
-            columnOrder: cols,
-            borders: [{ rowIndex: 0, columnId: 'a', left: { color: 'blue' } }],
-        });
-        await flushFrame();
-        expect(cellAt(0, 'a').style.position).toBe('absolute');
-        action.destroy();
-    });
-});
-// ---------------------------------------------------------------------------
-// Cleanup + update + destroy
-// ---------------------------------------------------------------------------
-describe('spreadsheetLayout - update + cleanup', () => {
-    it('clears prior decorations on the next apply (update path)', async () => {
-        const cols = ['a', 'b'];
-        const { host, cellAt } = buildGrid(2, cols);
-        track(host);
-        const action = spreadsheetLayout(host, {
-            columnOrder: cols,
-            merges: [{ rowIndex: 0, columnId: 'a', colspan: 2 }],
-            borders: [{ rowIndex: 1, columnId: 'a', top: { width: 1 } }],
-        });
-        await flushFrame();
-        expect(cellAt(0, 'a').getAttribute('colspan')).toBe('2');
-        expect(cellAt(1, 'a').querySelector('.sv-cell-border-overlay')).not.toBeNull();
-        // Update to an empty spec - everything from the previous run is removed.
-        action.update({ columnOrder: cols, merges: [], borders: [] });
-        await flushFrame();
-        expect(cellAt(0, 'a').hasAttribute('colspan')).toBe(false);
-        expect(cellAt(0, 'b').style.display).toBe('');
-        expect(cellAt(0, 'a').hasAttribute('data-svgrid-sheet')).toBe(false);
-        expect(cellAt(1, 'a').querySelector('.sv-cell-border-overlay')).toBeNull();
-        action.destroy();
-    });
-    it('re-applies decorations when the grid body mutates (MutationObserver)', async () => {
-        const cols = ['a', 'b'];
-        const { host, cellAt } = buildGrid(1, cols);
-        track(host);
-        const action = spreadsheetLayout(host, {
-            columnOrder: cols,
-            merges: [{ rowIndex: 1, columnId: 'a', colspan: 2 }],
-        });
-        await flushFrame();
-        // Row 1 does not exist yet - nothing applied.
-        expect(host.querySelectorAll('[data-svgrid-sheet]').length).toBe(0);
-        // Simulate the grid rendering a new row -> observer schedules apply.
-        const tbody = host.querySelector('tbody');
-        const tr = document.createElement('tr');
-        for (const colId of cols) {
-            const td = document.createElement('td');
-            td.setAttribute('data-svgrid-row', '1');
-            td.setAttribute('data-col-id', colId);
-            tr.appendChild(td);
-        }
-        tbody.appendChild(tr);
-        await flushFrame();
-        await flushFrame();
-        expect(cellAt(1, 'a').getAttribute('colspan')).toBe('2');
-        action.destroy();
-    });
-    it('destroy disconnects the observer and cancels a pending frame', async () => {
-        const cols = ['a', 'b'];
-        const { host, cellAt } = buildGrid(1, cols);
-        track(host);
-        // Destroy immediately - the first scheduled frame is pending.
-        const action = spreadsheetLayout(host, {
-            columnOrder: cols,
-            merges: [{ rowIndex: 0, columnId: 'a', colspan: 2 }],
-        });
-        action.destroy();
-        await flushFrame();
-        await flushFrame();
-        // Frame was cancelled before apply ran.
-        expect(cellAt(0, 'a').hasAttribute('colspan')).toBe(false);
-        // After destroy, mutations no longer trigger apply.
-        const tbody = host.querySelector('tbody');
-        tbody.appendChild(document.createElement('tr'));
-        await flushFrame();
-        await flushFrame();
-        expect(cellAt(0, 'a').hasAttribute('colspan')).toBe(false);
-    });
-    it('treats null merges / borders as empty (no throw)', async () => {
-        const cols = ['a'];
-        const { host } = buildGrid(1, cols);
-        track(host);
-        const opts = {
-            columnOrder: cols,
-            merges: null,
-            borders: null,
-        };
-        const action = spreadsheetLayout(host, opts);
-        await flushFrame();
-        expect(host.querySelectorAll('[data-svgrid-sheet]').length).toBe(0);
-        action.destroy();
-    });
-});
-describe('spansToMerges - declarative colSpan/rowSpan -> MergeSpec[]', () => {
-    const rows = [
-        { region: 'AMER', q: 'Q1', amt: 1 },
-        { region: 'AMER', q: 'Q2', amt: 2 },
-        { region: 'AMER', q: 'Q3', amt: 3 },
-        { region: 'EMEA', q: 'Q1', amt: 4 },
-        { region: 'EMEA', q: 'Q2', amt: 5 },
-    ];
-    // Merge each run of equal `region` values downward.
-    function regionRowSpan() {
-        return ({ data, rowIndex }) => {
-            if (rowIndex > 0 && rows[rowIndex - 1].region === data.region)
-                return 1; // covered
-            let n = 1;
-            while (rows[rowIndex + n]?.region === data.region)
-                n += 1;
-            return n;
-        };
-    }
-    it('emits a rowspan merge at each run origin and skips covered rows', () => {
-        const columns = [{ id: 'region', field: 'region', rowSpan: regionRowSpan() }];
-        const merges = spansToMerges(rows, columns);
-        // AMER spans rows 0..2 (rowspan 3), EMEA spans rows 3..4 (rowspan 2).
-        expect(merges).toEqual([
-            { rowIndex: 0, columnId: 'region', colspan: undefined, rowspan: 3 },
-            { rowIndex: 3, columnId: 'region', colspan: undefined, rowspan: 2 },
-        ]);
-    });
-    it('supports colSpan and marks covered columns', () => {
-        const columns = [
-            { id: 'a', field: 'region', colSpan: ({ rowIndex }) => (rowIndex === 0 ? 2 : 1) },
-            { id: 'b', field: 'q' },
-            { id: 'c', field: 'amt' },
-        ];
-        const merges = spansToMerges(rows.slice(0, 1), columns);
-        expect(merges).toEqual([{ rowIndex: 0, columnId: 'a', colspan: 2, rowspan: undefined }]);
-    });
-    it('returns no merges when no column defines spans', () => {
-        expect(spansToMerges(rows, [{ id: 'region', field: 'region' }])).toEqual([]);
-    });
-});

package/dist/subscribe.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/subscribe.test.js

@@ -1,93 +0,0 @@
-/**
- * Unit tests for the grid-store subscribe helper.
- *
- * The function attaches a selector to grid.store and shallow-compares each
- * emitted state, updating the returned `current` getter only when the
- * selection actually changed.
- */
-import { describe, expect, it } from 'vitest';
-import { subscribeGrid, subscribeSvGrid } from './subscribe';
-/**
- * Minimal hand-rolled stand-in for `grid.store` that mimics the TanStack
- * Store shape `subscribeGrid` reads: `state` getter + `subscribe(listener)`
- * + `setState(updater)` that fires the listeners.
- */
-function makeFakeStore(initial) {
-    let state = initial;
-    const listeners = new Set();
-    const store = {
-        get state() {
-            return state;
-        },
-        subscribe(listener) {
-            listeners.add(listener);
-            return () => listeners.delete(listener);
-        },
-        setState(updater) {
-            state = updater(state);
-            for (const l of listeners)
-                l();
-        },
-    };
-    return store;
-}
-describe('subscribeGrid', () => {
-    it('starts with the current selected value', () => {
-        const store = makeFakeStore({ sorting: ['name'], rowSelection: { '0': true } });
-        const grid = { store };
-        const sub = subscribeGrid(grid, (s) => s.sorting);
-        expect(sub.current).toEqual(['name']);
-    });
-    it('updates the selected value when the store fires a change', () => {
-        const store = makeFakeStore({ sorting: ['name'] });
-        const grid = { store };
-        const sub = subscribeGrid(grid, (s) => s.sorting);
-        store.setState((prev) => ({ ...prev, sorting: ['age'] }));
-        expect(sub.current).toEqual(['age']);
-    });
-    it('keeps the previous reference when shallow-compare reports equal', () => {
-        const store = makeFakeStore({ sel: { a: true } });
-        const grid = { store };
-        const sub = subscribeGrid(grid, (s) => s.sel);
-        const initial = sub.current;
-        // A new object with the same key/value content - shallow-equal to the prev.
-        store.setState(() => ({ sel: { a: true } }));
-        expect(sub.current).toBe(initial);
-    });
-    it('replaces the reference when a key value changes', () => {
-        const store = makeFakeStore({ sel: { a: true } });
-        const grid = { store };
-        const sub = subscribeGrid(grid, (s) => s.sel);
-        const initial = sub.current;
-        store.setState(() => ({ sel: { a: false } }));
-        expect(sub.current).not.toBe(initial);
-        expect(sub.current).toEqual({ a: false });
-    });
-    it('treats a different key set as a change', () => {
-        const store = makeFakeStore({ sel: { a: true } });
-        const grid = { store };
-        const sub = subscribeGrid(grid, (s) => s.sel);
-        store.setState(() => ({ sel: { a: true, b: true } }));
-        expect(sub.current).toEqual({ a: true, b: true });
-    });
-    it('treats primitive selections (numbers, strings) correctly', () => {
-        const store = makeFakeStore({ count: 1 });
-        const grid = { store };
-        const sub = subscribeGrid(grid, (s) => s.count);
-        expect(sub.current).toBe(1);
-        store.setState(() => ({ count: 1 }));
-        expect(sub.current).toBe(1);
-        store.setState(() => ({ count: 2 }));
-        expect(sub.current).toBe(2);
-    });
-    it('treats null and undefined as inequal to objects (early-return shallowCompare branch)', () => {
-        const store = makeFakeStore({ sel: { a: true } });
-        const grid = { store };
-        const sub = subscribeGrid(grid, (s) => s.sel);
-        store.setState(() => ({ sel: null }));
-        expect(sub.current).toBeNull();
-    });
-    it('exports the subscribeSvGrid alias as the same function', () => {
-        expect(subscribeSvGrid).toBe(subscribeGrid);
-    });
-});

package/dist/svgrid.api-extensions.test.d.ts

@@ -1,14 +0,0 @@
-/**
- * Behavioral tests for the SvGridApi extensions inspired by the jqxGrid API:
- *   - Row selection read/write (getSelectedRows / getSelectedRowIds /
- *     selectRows / selectAllRows / toggleRowSelected)
- *   - Pagination control (getPageInfo / setPage / next/prev/first/last /
- *     setPageSize)
- *   - Navigation (scrollToRow / getActiveCell / setActiveCell)
- *   - View state (getState / setState / refresh)
- *   - Click / double-click / scroll-bottom events
- *
- * They mount the real <SvGrid /> in jsdom and exercise the api object handed
- * back from onApiReady.
- */
-export {};