@happyvertical/smrt-ui 0.42.3 → 0.42.5

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

@@ -0,0 +1,195 @@
+import { describe, expect, it } from 'vitest';
+import { resolveDataTableLayout } from '../DataTableLayout.js';
+const columns = [
+    {
+        id: 'account',
+        label: 'Account',
+        accessor: 'account',
+        width: '180px',
+    },
+    {
+        id: 'actual',
+        label: 'Actual',
+        accessor: 'actual',
+        headerPath: [{ id: 'measures', label: 'Measures' }],
+    },
+    {
+        id: 'budget',
+        label: 'Budget',
+        accessor: 'budget',
+        headerPath: [{ id: 'measures', label: 'Measures' }],
+    },
+    {
+        id: 'status',
+        label: 'Status',
+        accessor: 'status',
+        role: 'status',
+        responsive: { keepVisible: true, priority: 10 },
+    },
+];
+const state = {
+    search: '',
+    filters: [],
+    sorting: [],
+    page: 1,
+    pageSize: null,
+    columnOrder: ['account', 'actual', 'budget', 'status'],
+    columnVisibility: columns.map((column) => ({
+        columnId: column.id,
+        visible: true,
+    })),
+    columnWidths: [],
+    columnPinning: [],
+    selection: { scope: 'explicit', rowIds: [] },
+    selectedRowIds: [],
+    expandedRowIds: [],
+};
+describe('resolveDataTableLayout', () => {
+    it('rebuilds grouped headers after visibility, order, and pinning are resolved', () => {
+        const layout = resolveDataTableLayout(columns, {
+            ...state,
+            columnOrder: ['budget', 'account', 'actual', 'status'],
+            columnVisibility: state.columnVisibility.map((entry) => entry.columnId === 'actual' ? { ...entry, visible: false } : entry),
+            columnPinning: [
+                { columnId: 'account', position: 'start' },
+                { columnId: 'status', position: 'end' },
+            ],
+            columnWidths: [{ columnId: 'account', width: 220 }],
+        });
+        expect(layout.columns.map(({ column }) => column.id)).toEqual([
+            'account',
+            'budget',
+            'status',
+        ]);
+        expect(layout.columns[0]).toMatchObject({
+            pin: 'start',
+            width: 220,
+            stickyOffset: '0px',
+        });
+        expect(layout.columns[2]).toMatchObject({
+            pin: 'end',
+            stickyOffset: '0px',
+        });
+        expect(layout.headerRows).toHaveLength(2);
+        expect(layout.headerRows[0]).toEqual([
+            expect.objectContaining({ kind: 'leaf', rowspan: 2 }),
+            expect.objectContaining({
+                kind: 'group',
+                label: 'Measures',
+                colspan: 1,
+            }),
+            expect.objectContaining({ kind: 'leaf', rowspan: 2 }),
+        ]);
+        expect(layout.headerRows[1]).toEqual([
+            expect.objectContaining({
+                kind: 'leaf',
+                column: expect.objectContaining({
+                    column: expect.objectContaining({ id: 'budget' }),
+                }),
+            }),
+        ]);
+    });
+    it('splits a repeated group when restored order separates its leaves', () => {
+        const layout = resolveDataTableLayout(columns, {
+            ...state,
+            columnOrder: ['actual', 'status', 'budget', 'account'],
+        });
+        const groups = layout.headerRows[0].filter((cell) => cell.kind === 'group');
+        expect(groups).toHaveLength(2);
+        expect(groups).toEqual([
+            expect.objectContaining({ label: 'Measures', colspan: 1 }),
+            expect.objectContaining({ label: 'Measures', colspan: 1 }),
+        ]);
+    });
+    it('keeps an uneven header path rectangular with leaf row spans', () => {
+        const layout = resolveDataTableLayout([
+            columns[0],
+            {
+                ...columns[1],
+                headerPath: [{ id: 'performance', label: 'Performance' }],
+            },
+            {
+                ...columns[2],
+                headerPath: [
+                    { id: 'performance', label: 'Performance' },
+                    { id: 'plan', label: 'Plan' },
+                ],
+            },
+        ], {
+            ...state,
+            columnOrder: ['account', 'actual', 'budget'],
+            columnVisibility: [
+                { columnId: 'account', visible: true },
+                { columnId: 'actual', visible: true },
+                { columnId: 'budget', visible: true },
+            ],
+        });
+        expect(layout.headerRows).toHaveLength(3);
+        expect(layout.headerRows[0]).toEqual([
+            expect.objectContaining({ kind: 'leaf', rowspan: 3 }),
+            expect.objectContaining({
+                kind: 'group',
+                label: 'Performance',
+                colspan: 2,
+                rowspan: 1,
+            }),
+        ]);
+        expect(layout.headerRows[1]).toEqual([
+            expect.objectContaining({ kind: 'leaf', rowspan: 2 }),
+            expect.objectContaining({ kind: 'group', label: 'Plan' }),
+        ]);
+        expect(layout.headerRows[2]).toEqual([
+            expect.objectContaining({ kind: 'leaf', rowspan: 1 }),
+        ]);
+    });
+    it('uses measured auto widths for sibling pins and keeps an all-pinned group aligned', () => {
+        const layout = resolveDataTableLayout([columns[1], columns[2], columns[0]], {
+            ...state,
+            columnOrder: ['actual', 'budget', 'account'],
+            columnVisibility: [
+                { columnId: 'actual', visible: true },
+                { columnId: 'budget', visible: true },
+                { columnId: 'account', visible: true },
+            ],
+            columnPinning: [
+                { columnId: 'actual', position: 'start' },
+                { columnId: 'budget', position: 'start' },
+            ],
+        }, { actual: 104, budget: 116 });
+        expect(layout.columns[0]).toMatchObject({
+            column: { id: 'actual' },
+            pin: 'start',
+            stickyOffset: '0px',
+        });
+        expect(layout.columns[1]).toMatchObject({
+            column: { id: 'budget' },
+            pin: 'start',
+            stickyOffset: 'calc(0px + 104px)',
+        });
+        expect(layout.headerRows[0]).toContainEqual(expect.objectContaining({
+            kind: 'group',
+            label: 'Measures',
+            pin: 'start',
+            stickyOffset: '0px',
+        }));
+    });
+    it('uses a rendered width before a restored width for pinned offsets', () => {
+        const layout = resolveDataTableLayout([columns[1], columns[2]], {
+            ...state,
+            columnOrder: ['actual', 'budget'],
+            columnVisibility: [
+                { columnId: 'actual', visible: true },
+                { columnId: 'budget', visible: true },
+            ],
+            columnPinning: [
+                { columnId: 'actual', position: 'start' },
+                { columnId: 'budget', position: 'start' },
+            ],
+            columnWidths: [{ columnId: 'actual', width: 80 }],
+        }, { actual: 200, budget: 120 });
+        expect(layout.columns[1]).toMatchObject({
+            column: { id: 'budget' },
+            stickyOffset: 'calc(0px + 200px)',
+        });
+    });
+});

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

@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest';
+import { createDataTablePerformanceColumns, createDataTablePerformanceRows, } from '../__fixtures__/DataTablePerformanceFixture.js';
+import { DATA_TABLE_SCALE_THRESHOLDS, recommendDataTableScaleStrategy, } from '../DataTablePerformance.js';
+describe('DataTable scale thresholds', () => {
+    it('uses deterministic, stable-identity benchmark fixtures', () => {
+        const rows = createDataTablePerformanceRows(3, 2);
+        expect(rows.map((row) => row.id)).toEqual(['row-0', 'row-1', 'row-2']);
+        expect(rows[2]?.values).toEqual({ value0: 6, value1: 8 });
+        expect(createDataTablePerformanceColumns(2).map((column) => column.id)).toEqual(['name', 'group', 'value0', 'value1']);
+    });
+    it('recommends a bounded scale strategy from documented thresholds', () => {
+        expect(recommendDataTableScaleStrategy(250, 20)).toBe('local');
+        expect(recommendDataTableScaleStrategy(251, 20)).toBe('virtualization');
+        expect(recommendDataTableScaleStrategy(1_001, 2)).toBe('manual-paging');
+        expect(DATA_TABLE_SCALE_THRESHOLDS.manualPaging.recommendedPageSize).toBe(100);
+    });
+    it('rejects ambiguous scale inputs', () => {
+        expect(() => recommendDataTableScaleStrategy(-1, 2)).toThrow(/non-negative/);
+        expect(() => recommendDataTableScaleStrategy(2.5, 2)).toThrow(/integers/);
+    });
+});

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

@@ -0,0 +1,80 @@
+import { describe, expect, it } from 'vitest';
+import { maximumDataTableVirtualScrollTop, resolveDataTableVirtualWindow, scrollTopForDataTableRow, } from '../DataTableVirtualization.js';
+const options = { rowHeight: 20, viewportHeight: 100, overscan: 2 };
+describe('DataTable virtualization window', () => {
+    it('renders a fixed-height window with bounded overscan', () => {
+        expect(resolveDataTableVirtualWindow({
+            options,
+            rowCount: 100,
+            scrollTop: 200,
+        })).toMatchObject({
+            enabled: true,
+            startIndex: 8,
+            endIndex: 17,
+            topSpacerHeight: 160,
+            bottomSpacerHeight: 1_660,
+            totalBodyHeight: 2_000,
+        });
+    });
+    it('clamps a restored scroll position to the body extent', () => {
+        expect(resolveDataTableVirtualWindow({
+            options,
+            rowCount: 10,
+            scrollTop: 1_000,
+        })).toMatchObject({
+            startIndex: 3,
+            endIndex: 10,
+            topSpacerHeight: 60,
+            bottomSpacerHeight: 0,
+        });
+    });
+    it('falls back to a semantic full body for variable-height data rows', () => {
+        expect(resolveDataTableVirtualWindow({
+            options,
+            rowCount: 12,
+            scrollTop: 100,
+            hasVariableRowHeight: true,
+            headerRowCount: 2,
+            summaryRowCount: 1,
+        })).toEqual({
+            enabled: false,
+            reason: 'variable-row-height',
+            startIndex: 0,
+            endIndex: 12,
+            topSpacerHeight: 0,
+            bottomSpacerHeight: 0,
+            totalBodyHeight: 0,
+            headerRowCount: 2,
+            summaryRowCount: 1,
+        });
+    });
+    it('keeps headers and summaries outside the body calculation', () => {
+        const withStructuralRows = resolveDataTableVirtualWindow({
+            options,
+            rowCount: 100,
+            scrollTop: 0,
+            headerRowCount: 2,
+            summaryRowCount: 3,
+        });
+        expect(withStructuralRows.totalBodyHeight).toBe(2_000);
+        expect(withStructuralRows.headerRowCount).toBe(2);
+        expect(withStructuralRows.summaryRowCount).toBe(3);
+    });
+    it('extends the virtual scroll range by a measured summary footer', () => {
+        expect(maximumDataTableVirtualScrollTop(100, options, 24)).toBe(1_924);
+        expect(() => maximumDataTableVirtualScrollTop(1, options, -1)).toThrow(/footerHeight/);
+    });
+    it('derives scroll restoration from a row position, not a display key', () => {
+        expect(scrollTopForDataTableRow(0, 100, options, 400)).toBe(0);
+        expect(scrollTopForDataTableRow(25, 100, options, 0)).toBe(420);
+        expect(scrollTopForDataTableRow(99, 100, options, 0)).toBe(1_900);
+    });
+    it('rejects invalid fixed-height configuration', () => {
+        expect(() => resolveDataTableVirtualWindow({
+            options: { rowHeight: 0, viewportHeight: 100 },
+            rowCount: 1,
+            scrollTop: 0,
+        })).toThrow(/rowHeight/);
+        expect(() => scrollTopForDataTableRow(2, 2, options)).toThrow(/rowIndex/);
+    });
+});

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

@@ -0,0 +1,255 @@
+import { fireEvent, render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { createRawSnippet } from 'svelte';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import DataTable from '../DataTable.svelte';
+import { createDataTableController } from '../DataTableController.js';
+const rows = Array.from({ length: 100 }, (_, index) => ({
+    id: `row-${index}`,
+    name: `Record ${index.toString().padStart(5, '0')}`,
+}));
+const columns = [{ id: 'name', label: 'Name', accessor: 'name' }];
+const virtualization = { rowHeight: 20, viewportHeight: 100, overscan: 1 };
+function getScrollContainer(container) {
+    const node = container.querySelector('.data-table-container');
+    if (!node)
+        throw new Error('Expected DataTable scroll container');
+    return node;
+}
+describe('DataTable virtualization seam', () => {
+    it('renders only a fixed-height body window with accessible row context', async () => {
+        const { container } = render(DataTable, {
+            props: { data: rows, columns, rowKey: 'id', virtualization },
+        });
+        const scrollContainer = getScrollContainer(container);
+        expect(screen.getByRole('columnheader', { name: 'Name' })).toBeInTheDocument();
+        expect(screen.getByRole('table')).toHaveAttribute('aria-rowcount', '101');
+        expect(getScrollContainer(container)).toHaveAttribute('role', 'region');
+        expect(getScrollContainer(container)).toHaveAttribute('tabindex', '0');
+        expect(screen.getByText('Record 00000')).toBeInTheDocument();
+        expect(screen.getByText('Record 00000').closest('tr')).toHaveAttribute('aria-rowindex', '2');
+        expect(screen.queryByText('Record 00020')).not.toBeInTheDocument();
+        expect(container.querySelectorAll('.data-table__virtual-spacer')).toHaveLength(1);
+        scrollContainer.scrollTop = 200;
+        await fireEvent.scroll(scrollContainer);
+        await vi.waitFor(() => {
+            expect(screen.queryByText('Record 00000')).not.toBeInTheDocument();
+            expect(screen.getByText('Record 00010')).toBeInTheDocument();
+        });
+        expect(screen.getByText('Record 00010').closest('tr')).toHaveAttribute('aria-rowindex', '12');
+        expect(container.querySelectorAll('.data-table__virtual-spacer')).toHaveLength(2);
+    });
+    it('keeps manual pages and selected stable IDs independent of the rendered window', async () => {
+        const footer = createRawSnippet(() => ({
+            render: () => '<strong>Remote summary</strong>',
+        }));
+        const controller = createDataTableController({
+            columnIds: ['name'],
+            modes: { filtering: 'manual', sorting: 'manual', pagination: 'manual' },
+            initialState: { page: 12, pageSize: 100 },
+        });
+        const { container } = render(DataTable, {
+            props: {
+                data: rows,
+                columns,
+                rowKey: 'id',
+                selectable: true,
+                controller,
+                totalRows: 10_000,
+                footer,
+                virtualization,
+            },
+        });
+        const scrollContainer = getScrollContainer(container);
+        expect(screen.getByRole('table')).toHaveAttribute('aria-rowcount', '10002');
+        expect(screen.getByText('Remote summary').closest('tr')).toHaveAttribute('aria-rowindex', '10002');
+        await userEvent.click(screen.getAllByRole('checkbox', { name: 'Select row 1101' })[0]);
+        expect(controller.getState().selectedRowIds).toEqual(['row-0']);
+        scrollContainer.scrollTop = 400;
+        await fireEvent.scroll(scrollContainer);
+        await vi.waitFor(() => expect(screen.getByText('Record 00020')).toBeInTheDocument());
+        expect(screen.getByText('Record 00020').closest('tr')).toHaveAttribute('aria-rowindex', '1122');
+        expect(controller.getState().selectedRowIds).toEqual(['row-0']);
+        expect(screen.queryByText('Record 00099')).not.toBeInTheDocument();
+    });
+    it('restores a controlled focused row by stable identity and reports row focus', async () => {
+        const onFocusedRowIdChange = vi.fn();
+        const { container } = render(DataTable, {
+            props: {
+                data: rows,
+                columns,
+                rowKey: 'id',
+                onRowClick: () => undefined,
+                virtualization: {
+                    ...virtualization,
+                    focusedRowId: 'row-40',
+                    onFocusedRowIdChange,
+                },
+            },
+        });
+        const scrollContainer = getScrollContainer(container);
+        const focusedRow = await screen.findByText('Record 00040');
+        expect(scrollContainer.scrollTop).toBeGreaterThan(0);
+        expect(document.activeElement).toBe(focusedRow.closest('tr'));
+        expect(onFocusedRowIdChange).toHaveBeenCalledWith('row-40');
+    });
+    it('restores focus without aliasing numeric and string row identities', async () => {
+        const identityRows = [
+            { id: 1, name: 'Numeric row' },
+            { id: '1', name: 'String row' },
+        ];
+        const { container } = render(DataTable, {
+            props: {
+                data: identityRows,
+                columns,
+                rowKey: 'id',
+                virtualization: { ...virtualization, focusedRowId: '1' },
+            },
+        });
+        const stringRow = await screen.findByText('String row');
+        expect(stringRow.closest('tr')).toHaveAttribute('data-row-id', 'string:1');
+        expect(document.activeElement).toBe(stringRow.closest('tr'));
+        expect(container.querySelector('tr[data-row-id="number:1"]')).toBeTruthy();
+    });
+    it('scrolls the virtual body from the keyboard-accessible region', async () => {
+        const onScrollTopChange = vi.fn();
+        const { container } = render(DataTable, {
+            props: {
+                data: rows,
+                columns,
+                rowKey: 'id',
+                virtualization: { ...virtualization, onScrollTopChange },
+            },
+        });
+        const scrollContainer = getScrollContainer(container);
+        scrollContainer.focus();
+        await fireEvent.keyDown(scrollContainer, { key: 'PageDown' });
+        expect(scrollContainer.scrollTop).toBe(80);
+        expect(onScrollTopChange).toHaveBeenCalledWith(80);
+        await vi.waitFor(() => expect(screen.getByText('Record 00004')).toBeInTheDocument());
+    });
+    it('stripes virtual rows by their logical display index', async () => {
+        const { container } = render(DataTable, {
+            props: {
+                data: rows,
+                columns,
+                rowKey: 'id',
+                striped: true,
+                virtualization,
+            },
+        });
+        const scrollContainer = getScrollContainer(container);
+        scrollContainer.scrollTop = 40;
+        await fireEvent.scroll(scrollContainer);
+        await vi.waitFor(() => expect(screen.getByText('Record 00001')).toBeInTheDocument());
+        expect(screen.getByText('Record 00001').closest('tr')).toHaveClass('data-table__row--striped');
+        expect(screen.getByText('Record 00002').closest('tr')).not.toHaveClass('data-table__row--striped');
+    });
+    it('keeps the summary footer reachable at the end of the virtual scroll range', async () => {
+        const footer = createRawSnippet(() => ({
+            render: () => '<strong>Summary total</strong>',
+        }));
+        const offsetHeight = vi
+            .spyOn(HTMLElement.prototype, 'offsetHeight', 'get')
+            .mockImplementation(function () {
+            return this.tagName === 'TFOOT' ? 24 : 0;
+        });
+        const onScrollTopChange = vi.fn();
+        try {
+            const { container } = render(DataTable, {
+                props: {
+                    data: rows,
+                    columns,
+                    rowKey: 'id',
+                    footer,
+                    virtualization: { ...virtualization, onScrollTopChange },
+                },
+            });
+            const scrollContainer = getScrollContainer(container);
+            await fireEvent.keyDown(scrollContainer, { key: 'End' });
+            expect(scrollContainer.scrollTop).toBe(1_924);
+            expect(onScrollTopChange).toHaveBeenCalledWith(1_924);
+            expect(screen.getByText('Summary total')).toBeInTheDocument();
+        }
+        finally {
+            offsetHeight.mockRestore();
+        }
+    });
+    it('accounts for grouped headers and structural summary rows in virtual context', async () => {
+        const offsetHeight = vi
+            .spyOn(HTMLElement.prototype, 'offsetHeight', 'get')
+            .mockImplementation(function () {
+            if (this.tagName === 'TFOOT')
+                return 24;
+            if (this.tagName === 'TBODY' &&
+                this.classList.contains('data-table__body--structural')) {
+                return 20;
+            }
+            return 0;
+        });
+        const groupedColumns = [
+            {
+                ...columns[0],
+                headerPath: [{ id: 'identity', label: 'Identity' }],
+            },
+        ];
+        try {
+            const { container } = render(DataTable, {
+                props: {
+                    data: rows,
+                    columns: groupedColumns,
+                    rowKey: 'id',
+                    structuralRows: [
+                        { id: 'subtotal', kind: 'subtotal', label: 'Current page' },
+                        { id: 'footer', kind: 'footer', label: 'All rows' },
+                    ],
+                    virtualization,
+                },
+            });
+            const scrollContainer = getScrollContainer(container);
+            expect(screen.getByRole('table')).toHaveAttribute('aria-rowcount', '104');
+            expect(screen.getByText('Record 00000').closest('tr')).toHaveAttribute('aria-rowindex', '3');
+            expect(screen.getByText('Current page').closest('tr')).toHaveAttribute('aria-rowindex', '103');
+            expect(screen.getByText('All rows').closest('tr')).toHaveAttribute('aria-rowindex', '104');
+            await fireEvent.keyDown(scrollContainer, { key: 'End' });
+            expect(scrollContainer.scrollTop).toBe(1_944);
+        }
+        finally {
+            offsetHeight.mockRestore();
+        }
+    });
+    it('falls back for expansion without virtual scroll behavior', async () => {
+        const expandedContent = createRawSnippet(() => ({
+            render: () => '<p>Variable detail</p>',
+        }));
+        const footer = createRawSnippet(() => ({
+            render: () => '<strong>Summary total</strong>',
+        }));
+        const onScrollTopChange = vi.fn();
+        const { container } = render(DataTable, {
+            props: {
+                data: rows,
+                columns,
+                rowKey: 'id',
+                expandedContent,
+                footer,
+                virtualization: { ...virtualization, onScrollTopChange },
+            },
+        });
+        expect(screen.getByText('Record 00099')).toBeInTheDocument();
+        expect(screen.getByText('Summary total')).toBeInTheDocument();
+        expect(container.querySelector('.data-table__virtual-spacer')).toBeNull();
+        const scrollContainer = getScrollContainer(container);
+        expect(scrollContainer).not.toHaveAttribute('tabindex');
+        scrollContainer.scrollTop = 200;
+        await fireEvent.scroll(scrollContainer);
+        expect(onScrollTopChange).not.toHaveBeenCalled();
+    });
+    it('is axe-clean with virtual spacer rows', async () => {
+        const { container } = render(DataTable, {
+            props: { data: rows, columns, rowKey: 'id', virtualization },
+        });
+        await expectNoA11yViolations(container);
+    });
+});