@happyvertical/smrt-ui 0.42.3 → 0.42.5

package/dist/components/data/__tests__/DataTableConformance.test.js

@@ -0,0 +1,212 @@
+import { fireEvent, render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import { createDataTableConformanceRows, dataTableConformanceColumns, dataTableConformanceRows, dataTableConformanceScenarios, dataTableConformanceStructuralRows, } from '../__fixtures__/DataTableConformanceFixture.js';
+import DataTable from '../DataTable.svelte';
+import { createDataTableController, } from '../DataTableController.js';
+function isManualQueryCommand(command) {
+    return (command?.type === 'setSearch' ||
+        command?.type === 'setFilters' ||
+        command?.type === 'setSorting' ||
+        command?.type === 'toggleSorting' ||
+        command?.type === 'setPage' ||
+        command?.type === 'setPageSize');
+}
+/**
+ * A deterministic consumer-side model for the guide's manual-query contract.
+ * The table owns the query state; the consumer owns matching results and never
+ * lets a late response replace the current query's rows.
+ */
+function createManualQueryHost(initialRows) {
+    let revision = 0;
+    let current = {
+        queryFingerprint: '',
+        queryRevision: 'revision-0',
+    };
+    let rows = initialRows;
+    return {
+        begin(state) {
+            revision += 1;
+            current = {
+                queryFingerprint: JSON.stringify({
+                    search: state.search,
+                    filters: state.filters,
+                    sorting: state.sorting,
+                    page: state.page,
+                    pageSize: state.pageSize,
+                }),
+                queryRevision: `revision-${revision}`,
+            };
+            return { ...current };
+        },
+        resolve(response) {
+            if (response.queryFingerprint !== current.queryFingerprint ||
+                response.queryRevision !== current.queryRevision) {
+                return false;
+            }
+            rows = response.rows;
+            return true;
+        },
+        rows: () => rows,
+    };
+}
+function setHorizontalOverflow(container, clientWidth, scrollWidth) {
+    Object.defineProperties(container, {
+        clientWidth: { configurable: true, value: clientWidth },
+        scrollWidth: { configurable: true, value: scrollWidth },
+        scrollLeft: { configurable: true, value: 0, writable: true },
+    });
+    window.dispatchEvent(new Event('resize'));
+}
+describe('DataTable release conformance', () => {
+    it('keeps every release scenario available to both tests and the playground', () => {
+        expect(dataTableConformanceScenarios.map((scenario) => scenario.id)).toEqual([
+            'semantic-interaction',
+            'manual-query',
+            'async-lifecycle',
+            'responsive-overflow',
+            'report-layout',
+            'scale-virtualization',
+        ]);
+        expect(dataTableConformanceScenarios.every((scenario) => scenario.contracts.length > 0)).toBe(true);
+    });
+    it('renders an axe-clean report with grouped headers and structural summaries', async () => {
+        const controller = createDataTableController({
+            columnIds: dataTableConformanceColumns.map((column) => column.id),
+            initialState: {
+                columnWidths: [{ columnId: 'account', width: 240 }],
+                columnPinning: [{ columnId: 'account', position: 'start' }],
+            },
+        });
+        const { container } = render(DataTable, {
+            props: {
+                data: dataTableConformanceRows,
+                columns: dataTableConformanceColumns,
+                rowKey: 'id',
+                controller,
+                structuralRows: dataTableConformanceStructuralRows,
+                caption: 'Conformance forecast report',
+            },
+        });
+        expect(screen.getByRole('columnheader', { name: 'Dimensions' })).toHaveAttribute('scope', 'colgroup');
+        expect(screen.getByRole('rowheader', { name: /Current forecast/ })).toBeInTheDocument();
+        expect(screen.getByRole('rowheader', { name: /All accounts/ })).toBeInTheDocument();
+        await expectNoA11yViolations(container);
+    });
+    it('keeps a manual query usable through stale, failed, and retry states', async () => {
+        const onRetry = vi.fn();
+        const controller = createDataTableController({
+            columnIds: dataTableConformanceColumns.map((column) => column.id),
+            modes: { filtering: 'manual', sorting: 'manual', pagination: 'manual' },
+            initialState: { page: 2, pageSize: 25 },
+        });
+        const props = {
+            data: dataTableConformanceRows,
+            columns: dataTableConformanceColumns,
+            rowKey: 'id',
+            controller,
+            totalRows: 120,
+            loading: true,
+            stale: true,
+            partialResults: true,
+            onRetry,
+            caption: 'Manual query results',
+        };
+        const { rerender } = render(DataTable, { props });
+        expect(screen.getByRole('cell', { name: 'Subscription revenue' })).toBeInTheDocument();
+        expect(screen.getByRole('status')).toHaveTextContent('Showing stale results');
+        expect(screen.getByRole('table')).toHaveAttribute('aria-busy', 'true');
+        await rerender({ ...props, loading: false, error: 'Request failed' });
+        expect(screen.getByRole('alert')).toHaveTextContent('Request failed');
+        await userEvent.click(screen.getByRole('button', { name: 'Retry' }));
+        expect(onRetry).toHaveBeenCalledTimes(1);
+    });
+    it('commits only the current manually owned search, sort, filter, and page response', async () => {
+        const controller = createDataTableController({
+            columnIds: dataTableConformanceColumns.map((column) => column.id),
+            modes: { filtering: 'manual', sorting: 'manual', pagination: 'manual' },
+            initialState: { page: 1, pageSize: 1 },
+        });
+        const host = createManualQueryHost(dataTableConformanceRows);
+        const requests = [];
+        const unsubscribe = controller.subscribe((transition) => {
+            if (isManualQueryCommand(transition.command)) {
+                requests.push(host.begin(transition.next.state));
+            }
+        });
+        render(DataTable, {
+            props: {
+                data: dataTableConformanceRows,
+                columns: dataTableConformanceColumns,
+                rowKey: 'id',
+                controller,
+                sortable: true,
+                totalRows: 2,
+                caption: 'Manual host results',
+            },
+        });
+        await userEvent.click(screen.getByRole('button', { name: 'Sort Account ascending' }));
+        controller.dispatch({ type: 'setSearch', search: 'Growth' });
+        controller.dispatch({
+            type: 'setSorting',
+            sorting: [{ columnId: 'account', direction: 'desc' }],
+        });
+        controller.dispatch({
+            type: 'setFilters',
+            filters: [{ columnId: 'status', operator: 'equals', value: 'On track' }],
+        });
+        await userEvent.click(screen.getByRole('button', { name: 'Next page' }));
+        expect(requests).toHaveLength(5);
+        expect(JSON.parse(requests[1].queryFingerprint)).toMatchObject({
+            search: 'Growth',
+        });
+        expect(requests[0]).not.toEqual(requests[4]);
+        expect(host.resolve({
+            ...requests[0],
+            rows: [dataTableConformanceRows[1]],
+        })).toBe(false);
+        expect(host.rows()).toEqual(dataTableConformanceRows);
+        expect(host.resolve({
+            ...requests[4],
+            rows: [dataTableConformanceRows[0]],
+        })).toBe(true);
+        expect(host.rows()).toEqual([dataTableConformanceRows[0]]);
+        unsubscribe();
+    });
+    it('exposes only real horizontal overflow as a named keyboard-scroll region', async () => {
+        const { container } = render(DataTable, {
+            props: {
+                data: dataTableConformanceRows,
+                columns: dataTableConformanceColumns,
+                rowKey: 'id',
+                caption: 'Responsive conformance report',
+            },
+        });
+        const tableContainer = container.querySelector('.data-table-container');
+        setHorizontalOverflow(tableContainer, 320, 960);
+        await vi.waitFor(() => expect(tableContainer).toHaveAttribute('aria-label', 'Responsive conformance report table, scroll horizontally to view more columns'));
+        tableContainer.focus();
+        await fireEvent.keyDown(tableContainer, { key: 'End' });
+        expect(tableContainer.scrollLeft).toBe(640);
+        await expectNoA11yViolations(container);
+    });
+    it('keeps virtual rows keyed independently from their rendered window', async () => {
+        const rows = createDataTableConformanceRows(120);
+        const { container } = render(DataTable, {
+            props: {
+                data: rows,
+                columns: dataTableConformanceColumns.slice(0, 2),
+                rowKey: 'id',
+                virtualization: { rowHeight: 24, viewportHeight: 96, overscan: 1 },
+                caption: 'Virtual conformance rows',
+            },
+        });
+        const tableContainer = container.querySelector('.data-table-container');
+        expect(screen.getByRole('table')).toHaveAttribute('aria-rowcount', '122');
+        expect(screen.getByText('Subscription revenue 1')).toBeInTheDocument();
+        tableContainer.scrollTop = 240;
+        await fireEvent.scroll(tableContainer);
+        await vi.waitFor(() => expect(screen.getByText('Subscription revenue 11')).toBeInTheDocument());
+    });
+});

package/dist/components/data/__tests__/DataTableController.test.js

@@ -0,0 +1,336 @@
+import { describe, expect, it, vi } from 'vitest';
+import { assertDataTableSelectionCurrent, createDataTableController, hydrateDataTableSnapshot, transitionDataTableState, } from '../DataTableController.js';
+const state = {
+    search: '',
+    filters: [],
+    sorting: [],
+    page: 3,
+    pageSize: 10,
+    columnOrder: ['name', 'age'],
+    columnVisibility: [
+        { columnId: 'age', visible: true },
+        { columnId: 'name', visible: true },
+    ],
+    columnWidths: [],
+    columnPinning: [],
+    selection: { scope: 'explicit', rowIds: [] },
+    selectedRowIds: [],
+    expandedRowIds: [],
+};
+describe('DataTableController', () => {
+    it('uses canonical JSON-safe snapshots regardless of insertion order', () => {
+        const first = createDataTableController({
+            initialState: {
+                ...state,
+                filters: [
+                    {
+                        columnId: 'age',
+                        operator: 'gte',
+                        value: { minimum: 18, maximum: 65 },
+                    },
+                    { columnId: 'name', operator: 'contains', value: 'a' },
+                ],
+                selectedRowIds: ['2', 1, '1', 2],
+                expandedRowIds: [3, '3', 1],
+            },
+        });
+        const second = createDataTableController({
+            initialState: {
+                ...state,
+                filters: [
+                    { columnId: 'name', operator: 'contains', value: 'a' },
+                    {
+                        columnId: 'age',
+                        operator: 'gte',
+                        value: { maximum: 65, minimum: 18 },
+                    },
+                ],
+                selectedRowIds: [2, '1', 1, '2'],
+                expandedRowIds: [1, '3', 3],
+            },
+        });
+        expect(JSON.stringify(first.snapshot())).toBe(JSON.stringify(second.snapshot()));
+        expect(JSON.parse(JSON.stringify(first.snapshot()))).toEqual(first.snapshot());
+    });
+    it('omits ignored null-check filter values from canonical snapshots', () => {
+        const withoutValue = createDataTableController({
+            initialState: {
+                ...state,
+                filters: [{ columnId: 'name', operator: 'isNull' }],
+            },
+        });
+        const withIgnoredValue = createDataTableController({
+            initialState: {
+                ...state,
+                filters: [
+                    {
+                        columnId: 'name',
+                        operator: 'isNull',
+                        value: undefined,
+                    },
+                ],
+            },
+        });
+        expect(withIgnoredValue.snapshot()).toEqual(withoutValue.snapshot());
+    });
+    it('resets page only when a query-shape value changes and clamps reliable totals', () => {
+        const controller = createDataTableController({ initialState: state });
+        expect(controller.dispatch({ type: 'setSearch', search: '' }).changed).toBe(false);
+        expect(controller.snapshot().state.page).toBe(3);
+        controller.dispatch({ type: 'setSearch', search: 'ada' });
+        expect(controller.snapshot().state.page).toBe(1);
+        controller.replaceState({ ...controller.getState(), page: 4 });
+        controller.dispatch({ type: 'setColumnOrder', columnIds: ['age', 'name'] });
+        expect(controller.snapshot().state.page).toBe(4);
+        controller.clampPage(11);
+        expect(controller.snapshot().state.page).toBe(2);
+        controller.clampPage(0);
+        expect(controller.snapshot().state.page).toBe(1);
+        expect(() => controller.clampPage(1.5)).toThrow(/totalRows/);
+    });
+    it('keeps multi-sort priority while cycling a column through asc, desc, and clear', () => {
+        const controller = createDataTableController({ initialState: state });
+        controller.dispatch({ type: 'toggleSorting', columnId: 'name' });
+        controller.dispatch({
+            type: 'toggleSorting',
+            columnId: 'age',
+            multi: true,
+        });
+        expect(controller.snapshot().state.sorting).toEqual([
+            { columnId: 'name', direction: 'asc' },
+            { columnId: 'age', direction: 'asc' },
+        ]);
+        controller.dispatch({
+            type: 'toggleSorting',
+            columnId: 'name',
+            multi: true,
+        });
+        expect(controller.snapshot().state.sorting).toEqual([
+            { columnId: 'name', direction: 'desc' },
+            { columnId: 'age', direction: 'asc' },
+        ]);
+        controller.dispatch({
+            type: 'toggleSorting',
+            columnId: 'name',
+            multi: true,
+        });
+        expect(controller.snapshot().state.sorting).toEqual([
+            { columnId: 'age', direction: 'asc' },
+        ]);
+    });
+    it('proposes controlled transitions without mutating until the host reconciles state', () => {
+        const onStateChange = vi.fn();
+        const controller = createDataTableController({ state, onStateChange });
+        const transition = controller.dispatch({ type: 'setPage', page: 2 });
+        expect(transition.next.state.page).toBe(2);
+        expect(controller.snapshot().state.page).toBe(3);
+        expect(onStateChange).toHaveBeenCalledWith(expect.objectContaining({ page: 2 }), { type: 'setPage', page: 2 });
+        controller.replaceState(transition.next.state);
+        expect(controller.snapshot().state.page).toBe(2);
+    });
+    it('notifies subscribers with defensive selection and expansion snapshots', () => {
+        const controller = createDataTableController({ initialState: state });
+        const listener = vi.fn();
+        const unsubscribe = controller.subscribe(listener);
+        controller.dispatch({ type: 'toggleRowSelection', rowId: 'row-1' });
+        controller.dispatch({ type: 'toggleRowExpansion', rowId: 2 });
+        expect(listener).toHaveBeenCalledTimes(2);
+        expect(listener.mock.calls[1][0].next.state).toMatchObject({
+            selectedRowIds: ['row-1'],
+            expandedRowIds: [2],
+        });
+        listener.mock.calls[1][0].next.state.selectedRowIds.push('mutated');
+        expect(controller.snapshot().state.selectedRowIds).toEqual(['row-1']);
+        unsubscribe();
+        controller.dispatch({ type: 'setSearch', search: 'Ada' });
+        expect(listener).toHaveBeenCalledTimes(2);
+    });
+    it('defensively copies state and validates persisted snapshots', () => {
+        const controller = createDataTableController({ initialState: state });
+        const snapshot = controller.snapshot();
+        snapshot.state.selectedRowIds.push('unexpected');
+        expect(controller.snapshot().state.selectedRowIds).toEqual([]);
+        expect(hydrateDataTableSnapshot(JSON.parse(JSON.stringify(controller.snapshot())))).toEqual(controller.snapshot());
+        const { selection: _selection, ...legacyState } = state;
+        expect(hydrateDataTableSnapshot({
+            version: 1,
+            modes: controller.getModes(),
+            state: legacyState,
+        })).toMatchObject({
+            version: 3,
+            state: { selection: { scope: 'explicit', rowIds: [] } },
+        });
+        expect(() => hydrateDataTableSnapshot({ version: 4 })).toThrow(/version/);
+        expect(() => transitionDataTableState(state, { type: 'setPageSize', pageSize: 0 })).toThrow(/pageSize/);
+        for (const page of [0, -1, 1.5]) {
+            expect(() => transitionDataTableState(state, { type: 'setPage', page })).toThrow(/page/);
+        }
+    });
+    it('persists canonical column widths and pinning without resetting the table order', () => {
+        const controller = createDataTableController({
+            columnIds: ['name', 'age', 'status'],
+            initialState: {
+                ...state,
+                columnOrder: ['status', 'name', 'age'],
+                columnWidths: [
+                    { columnId: 'status', width: 96 },
+                    { columnId: 'name', width: 220 },
+                ],
+                columnPinning: [
+                    { columnId: 'status', position: 'end' },
+                    { columnId: 'name', position: 'start' },
+                ],
+            },
+        });
+        expect(controller.snapshot()).toMatchObject({
+            version: 3,
+            state: {
+                columnOrder: ['status', 'name', 'age'],
+                columnWidths: [
+                    { columnId: 'name', width: 220 },
+                    { columnId: 'status', width: 96 },
+                ],
+                columnPinning: [
+                    { columnId: 'name', position: 'start' },
+                    { columnId: 'status', position: 'end' },
+                ],
+            },
+        });
+        controller.dispatch({ type: 'setColumnWidth', columnId: 'age', width: 80 });
+        controller.dispatch({
+            type: 'setColumnPin',
+            columnId: 'age',
+            position: 'start',
+        });
+        expect(controller.getState().columnWidths).toEqual([
+            { columnId: 'age', width: 80 },
+            { columnId: 'name', width: 220 },
+            { columnId: 'status', width: 96 },
+        ]);
+        expect(controller.getState().columnPinning).toEqual([
+            { columnId: 'age', position: 'start' },
+            { columnId: 'name', position: 'start' },
+            { columnId: 'status', position: 'end' },
+        ]);
+        controller.dispatch({
+            type: 'setColumnWidth',
+            columnId: 'age',
+            width: null,
+        });
+        controller.dispatch({
+            type: 'setColumnPin',
+            columnId: 'age',
+            position: null,
+        });
+        expect(controller.getState().columnWidths).not.toContainEqual({
+            columnId: 'age',
+            width: 80,
+        });
+        expect(controller.getState().columnPinning).not.toContainEqual({
+            columnId: 'age',
+            position: 'start',
+        });
+    });
+    it('never restores or commands a static hidden column visible', () => {
+        const controller = createDataTableController({
+            columnIds: ['name', 'internal', 'age'],
+            hiddenColumnIds: ['internal'],
+            initialState: {
+                ...state,
+                columnVisibility: [
+                    { columnId: 'internal', visible: true },
+                    { columnId: 'name', visible: true },
+                ],
+            },
+        });
+        expect(controller.getState().columnVisibility).toContainEqual({
+            columnId: 'internal',
+            visible: false,
+        });
+        controller.dispatch({
+            type: 'setColumnVisibility',
+            columns: [{ columnId: 'internal', visible: true }],
+        });
+        expect(controller.getState().columnVisibility).toContainEqual({
+            columnId: 'internal',
+            visible: false,
+        });
+        controller.replaceState({
+            ...controller.getState(),
+            columnVisibility: [{ columnId: 'internal', visible: true }],
+        });
+        expect(controller.getState().columnVisibility).toContainEqual({
+            columnId: 'internal',
+            visible: false,
+        });
+    });
+    it('restores the saved visibility when a static hidden constraint is removed', () => {
+        const controller = createDataTableController({
+            columnIds: ['name', 'internal'],
+            initialState: {
+                ...state,
+                columnVisibility: [
+                    { columnId: 'name', visible: true },
+                    { columnId: 'internal', visible: true },
+                ],
+            },
+        });
+        controller.setColumnIds(['name', 'internal'], ['internal']);
+        expect(controller.getState().columnVisibility).toContainEqual({
+            columnId: 'internal',
+            visible: false,
+        });
+        controller.setColumnIds(['name', 'internal']);
+        expect(controller.getState().columnVisibility).toContainEqual({
+            columnId: 'internal',
+            visible: true,
+        });
+    });
+    it('models current-page and explicit row selections separately', () => {
+        const controller = createDataTableController({ initialState: state });
+        controller.dispatch({
+            type: 'setPageSelection',
+            rowIds: ['row-2', 'row-1'],
+        });
+        expect(controller.getState().selection).toEqual({
+            scope: 'page',
+            rowIds: ['row-1', 'row-2'],
+        });
+        controller.dispatch({ type: 'setPage', page: 4 });
+        expect(controller.getState().selection).toEqual({
+            scope: 'page',
+            rowIds: [],
+        });
+        controller.dispatch({ type: 'setSelectedRows', rowIds: ['row-2'] });
+        controller.dispatch({ type: 'setPage', page: 5 });
+        expect(controller.getState().selection).toEqual({
+            scope: 'explicit',
+            rowIds: ['row-2'],
+        });
+    });
+    it('binds all-matching selection to an exact query revision and invalidates it on query changes', () => {
+        const controller = createDataTableController({ initialState: state });
+        controller.dispatch({
+            type: 'selectAllMatching',
+            queryFingerprint: 'dq1_example',
+            queryRevision: 'revision-7',
+            expectedCount: 42,
+        });
+        expect(controller.getState().selection).toEqual({
+            scope: 'allMatching',
+            queryFingerprint: 'dq1_example',
+            queryRevision: 'revision-7',
+            expectedCount: 42,
+        });
+        expect(controller.getState().selectedRowIds).toEqual([]);
+        expect(() => assertDataTableSelectionCurrent(controller.getState().selection, {
+            queryFingerprint: 'dq1_example',
+            queryRevision: 'revision-8',
+        })).toThrow(/stale/);
+        controller.dispatch({ type: 'setSearch', search: 'Ada' });
+        expect(controller.getState().selection).toEqual({
+            scope: 'explicit',
+            rowIds: [],
+        });
+    });
+});

package/dist/components/data/__tests__/DataTableIdentity.test.js

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest';
+import { resolveDataTableRows } from '../DataTableIdentity.js';
+const rows = [
+    { id: 'ada', name: 'Ada' },
+    { id: 'linus', name: 'Linus' },
+];
+describe('resolveDataTableRows', () => {
+    it('uses stable canonical IDs and preserves source indexes', () => {
+        expect(resolveDataTableRows(rows, 'id', { requireStableIdentity: true })).toEqual([
+            { row: rows[0], sourceIndex: 0, rowId: 'ada' },
+            { row: rows[1], sourceIndex: 1, rowId: 'linus' },
+        ]);
+    });
+    it('keeps the index fallback only for presentational local tables', () => {
+        expect(resolveDataTableRows(rows, undefined)).toEqual([
+            { row: rows[0], sourceIndex: 0, rowId: 0 },
+            { row: rows[1], sourceIndex: 1, rowId: 1 },
+        ]);
+        expect(() => resolveDataTableRows(rows, undefined, { requireStableIdentity: true })).toThrow(/rowKey is required/);
+    });
+    it('rejects duplicate, empty, and non-finite stable row IDs', () => {
+        expect(() => resolveDataTableRows([
+            { id: 'same', name: 'Ada' },
+            { id: 'same', name: 'Linus' },
+        ], 'id')).toThrow(/unique/);
+        expect(() => resolveDataTableRows([{ id: '', name: 'Ada' }], 'id')).toThrow(/non-empty/);
+        expect(() => resolveDataTableRows([{ id: Number.NaN, name: 'Ada' }], (row) => row.id)).toThrow(/finite/);
+    });
+});