@happyvertical/smrt-ui 0.53.1 → 0.53.3

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

@@ -1,212 +0,0 @@
-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

@@ -1,371 +0,0 @@
-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('starts a column at its first direction and toggles without clearing when not clearable', () => {
-        const controller = createDataTableController({ initialState: state });
-        const toggle = () => controller.dispatch({
-            type: 'toggleSorting',
-            columnId: 'age',
-            firstDirection: 'desc',
-            clearable: false,
-        });
-        toggle();
-        expect(controller.snapshot().state.sorting).toEqual([
-            { columnId: 'age', direction: 'desc' },
-        ]);
-        toggle();
-        expect(controller.snapshot().state.sorting).toEqual([
-            { columnId: 'age', direction: 'asc' },
-        ]);
-        toggle();
-        expect(controller.snapshot().state.sorting).toEqual([
-            { columnId: 'age', direction: 'desc' },
-        ]);
-        // Clearable (default) with a desc-first column: desc -> asc -> cleared.
-        const cycling = createDataTableController({ initialState: state });
-        const cycle = () => cycling.dispatch({
-            type: 'toggleSorting',
-            columnId: 'age',
-            firstDirection: 'desc',
-        });
-        cycle();
-        cycle();
-        expect(cycling.snapshot().state.sorting).toEqual([
-            { columnId: 'age', direction: 'asc' },
-        ]);
-        cycle();
-        expect(cycling.snapshot().state.sorting).toEqual([]);
-    });
-    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

@@ -1,29 +0,0 @@
-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/);
-    });
-});