@happyvertical/smrt-ui 0.42.4 → 0.42.6

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

@@ -11,6 +11,8 @@ const state = {
         { columnId: 'age', visible: true },
         { columnId: 'name', visible: true },
     ],
+    columnWidths: [],
+    columnPinning: [],
     selection: { scope: 'explicit', rowIds: [] },
     selectedRowIds: [],
     expandedRowIds: [],
@@ -155,15 +157,135 @@ describe('DataTableController', () => {
             modes: controller.getModes(),
             state: legacyState,
         })).toMatchObject({
-            version: 2,
+            version: 3,
             state: { selection: { scope: 'explicit', rowIds: [] } },
         });
-        expect(() => hydrateDataTableSnapshot({ version: 3 })).toThrow(/version/);
+        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({

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/);
+    });
+});