@opencorestack/opengridx 2.1.0 → 3.0.1

package/lib/components/DataGrid/DataGrid.v2.test.tsx

@@ -1,127 +0,0 @@
-import React from 'react';
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { DataGrid } from './DataGrid';
-import type { GridColDef } from '../../types';
-
-const COLUMNS: GridColDef[] = [
-    { field: 'id', headerName: 'ID', width: 80 },
-    { field: 'name', headerName: 'Name', width: 150 },
-    { field: 'dept', headerName: 'Dept', width: 120 },
-];
-
-const ROWS = [
-    { id: 1, name: 'Alice', dept: 'Eng' },
-    { id: 2, name: 'Bob', dept: 'HR' },
-];
-
-// ── density ──────────────────────────────────────────────────────────────────
-
-describe('DataGrid — density prop', () => {
-    it('renders without throwing for compact density', () => {
-        expect(() =>
-            render(<DataGrid rows={ROWS} columns={COLUMNS} density="compact" />)
-        ).not.toThrow();
-    });
-
-    it('renders without throwing for comfortable density', () => {
-        expect(() =>
-            render(<DataGrid rows={ROWS} columns={COLUMNS} density="comfortable" />)
-        ).not.toThrow();
-    });
-
-    it('applies compact row height via CSS variable', () => {
-        const { container } = render(
-            <DataGrid rows={ROWS} columns={COLUMNS} density="compact" />
-        );
-        const root = container.firstElementChild as HTMLElement;
-        expect(root.style.getPropertyValue('--ogx-row-height')).toBe('32px');
-    });
-
-    it('applies comfortable row height via CSS variable', () => {
-        const { container } = render(
-            <DataGrid rows={ROWS} columns={COLUMNS} density="comfortable" />
-        );
-        const root = container.firstElementChild as HTMLElement;
-        expect(root.style.getPropertyValue('--ogx-row-height')).toBe('72px');
-    });
-
-    it('uses rowHeight as default when density is standard', () => {
-        const { container } = render(
-            <DataGrid rows={ROWS} columns={COLUMNS} density="standard" rowHeight={52} />
-        );
-        const root = container.firstElementChild as HTMLElement;
-        expect(root.style.getPropertyValue('--ogx-row-height')).toBe('52px');
-    });
-});
-
-// ── disableRowSelectionOnClick ────────────────────────────────────────────────
-
-describe('DataGrid — disableRowSelectionOnClick', () => {
-    it('clicking a row changes selection when prop is false (default)', () => {
-        const onChange = vi.fn();
-        render(
-            <DataGrid
-                rows={ROWS}
-                columns={COLUMNS}
-                onRowSelectionModelChange={onChange}
-            />
-        );
-        const rows = screen.getAllByRole('row');
-        // rows[0] is header, rows[1] is Alice
-        fireEvent.click(rows[1]);
-        expect(onChange).toHaveBeenCalled();
-    });
-
-    it('clicking a row does NOT change selection when disableRowSelectionOnClick=true', () => {
-        const onChange = vi.fn();
-        render(
-            <DataGrid
-                rows={ROWS}
-                columns={COLUMNS}
-                disableRowSelectionOnClick
-                onRowSelectionModelChange={onChange}
-            />
-        );
-        const rows = screen.getAllByRole('row');
-        fireEvent.click(rows[1]);
-        expect(onChange).not.toHaveBeenCalled();
-    });
-});
-
-// ── disableMultipleRowSelection ───────────────────────────────────────────────
-
-describe('DataGrid — disableMultipleRowSelection', () => {
-    it('selecting a second row replaces the first when disableMultipleRowSelection=true', () => {
-        const selections: unknown[][] = [];
-        render(
-            <DataGrid
-                rows={ROWS}
-                columns={COLUMNS}
-                disableMultipleRowSelection
-                onRowSelectionModelChange={(model) => selections.push(model)}
-            />
-        );
-        const rows = screen.getAllByRole('row');
-        fireEvent.click(rows[1]); // select Alice (id=1)
-        fireEvent.click(rows[2]); // select Bob (id=2) — should replace
-        expect(selections.at(-1)).toEqual([2]);
-        expect(selections.at(-1)?.length).toBe(1);
-    });
-
-    it('clicking already-selected row deselects it when disableMultipleRowSelection=true', () => {
-        const selections: unknown[][] = [];
-        render(
-            <DataGrid
-                rows={ROWS}
-                columns={COLUMNS}
-                disableMultipleRowSelection
-                onRowSelectionModelChange={(model) => selections.push(model)}
-            />
-        );
-        const rows = screen.getAllByRole('row');
-        fireEvent.click(rows[1]); // select
-        fireEvent.click(rows[1]); // deselect
-        expect(selections.at(-1)).toEqual([]);
-    });
-});

package/lib/components/DataGrid/DataGrid.virtualization.browser.test.tsx

@@ -1,183 +0,0 @@
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import { render, cleanup } from '@testing-library/react';
-import { useEffect } from 'react';
-import type { ReactNode } from 'react';
-import { DataGrid, useGridApiRef } from '../../index';
-import type { GridColDef } from '../../types';
-
-// Runs in real Chromium (vitest browser project). jsdom has no layout engine, so the
-// container-height behaviour these tests pin down cannot be reproduced there.
-
-type Row = { id: number; region: string; amount: number };
-
-const makeRows = (total: number, northCount: number): Row[] =>
-    Array.from({ length: total }, (_, i) => ({ id: i + 1, region: i < northCount ? 'North' : 'South', amount: i }));
-
-const columns: GridColDef<Row>[] = [
-    { field: 'region', width: 200 },
-    { field: 'amount', width: 150 },
-];
-
-// Bounded: a flex child with min-height: 0 cannot grow past the 600px parent.
-const Bounded = ({ children }: { children: ReactNode }) => (
-    <div style={{ height: 600, display: 'flex', flexDirection: 'column' }}>
-        <div style={{ flex: 1, minHeight: 0 }}>{children}</div>
-    </div>
-);
-
-// Unbounded: the classic trap — a flex child without min-height: 0 grows to fit its content.
-const Unbounded = ({ children }: { children: ReactNode }) => (
-    <div style={{ height: 600, display: 'flex', flexDirection: 'column' }}>
-        <div style={{ flex: 1 }}>{children}</div>
-    </div>
-);
-
-const domRowCount = (container: HTMLElement) => container.querySelectorAll('.ogx__rows [role="row"]').length;
-const firstRow = (container: HTMLElement) => container.querySelector<HTMLElement>('.ogx__rows [role="row"]')!;
-
-afterEach(() => {
-    cleanup();
-    vi.restoreAllMocks();
-});
-
-describe('DataGrid virtualization in a real browser', () => {
-    it('virtualizes a large flat dataset in a bounded container', async () => {
-        const { container } = render(<Bounded><DataGrid rows={makeRows(30000, 30000)} columns={columns} height="100%" /></Bounded>);
-        await expect.poll(() => domRowCount(container)).toBeGreaterThan(0);
-        expect(domRowCount(container)).toBeLessThan(60);
-    });
-
-    it('keeps DOM rows bounded after expanding a 25,000-row group', async () => {
-        const { container } = render(
-            <Bounded><DataGrid rows={makeRows(30000, 25000)} columns={columns} height="100%" rowGroupingModel={['region']} /></Bounded>
-        );
-        await expect.poll(() => domRowCount(container)).toBe(2);
-
-        firstRow(container).click();
-
-        await expect.poll(() => domRowCount(container)).toBeGreaterThan(2);
-        expect(domRowCount(container)).toBeLessThan(60);
-
-        const viewport = container.querySelector<HTMLElement>('.ogx__viewport')!;
-        viewport.scrollTop = viewport.scrollHeight / 2;
-        viewport.dispatchEvent(new Event('scroll'));
-        await expect.poll(() => container.querySelector('.ogx__rows [role="row"]')?.getAttribute('data-rowindex')).not.toBe('0');
-        expect(domRowCount(container)).toBeLessThan(80);
-    });
-
-    it('warns in development when an unbounded container defeats virtualization', async () => {
-        const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-        const { container } = render(
-            <Unbounded><DataGrid rows={makeRows(3000, 2500)} columns={columns} height="100%" rowGroupingModel={['region']} /></Unbounded>
-        );
-        await expect.poll(() => domRowCount(container)).toBe(2);
-        firstRow(container).click();
-
-        await expect.poll(() => warn.mock.calls.some(([msg]) => String(msg).includes('virtualization is effectively off'))).toBe(true);
-    });
-
-    it('warns in development that pagination is ignored under row grouping', async () => {
-        const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-        render(<Bounded><DataGrid rows={makeRows(100, 50)} columns={columns} height="100%" pagination rowGroupingModel={['region']} /></Bounded>);
-        await expect.poll(() => warn.mock.calls.some(([msg]) => String(msg).includes('`pagination` is ignored'))).toBe(true);
-    });
-
-    it('positions every scrolled row correctly when rows are pinned to the top', async () => {
-        const rowHeight = 52;
-        const rows = Array.from({ length: 2000 }, (_, i) => ({ id: i + 1, region: 'r', amount: i }));
-        const { container } = render(
-            <Bounded>
-                <DataGrid rows={rows} columns={[{ field: 'id', width: 100 }, ...columns]} height="100%"
-                    rowHeight={rowHeight} pinnedRows={{ top: [1, 2] }} />
-            </Bounded>
-        );
-        await expect.poll(() => domRowCount(container)).toBeGreaterThan(0);
-
-        const viewport = container.querySelector<HTMLElement>('.ogx__viewport')!;
-        viewport.scrollTop = rowHeight * 500;
-        viewport.dispatchEvent(new Event('scroll'));
-        await expect.poll(() => Number(firstRow(container).getAttribute('data-rowindex'))).toBeGreaterThan(100);
-
-        const virtualContainer = container.querySelector<HTMLElement>('.ogx__virtual-container')!;
-        const containerTop = virtualContainer.getBoundingClientRect().top;
-        const centerRows = [...virtualContainer.querySelectorAll<HTMLElement>('[role="row"]')];
-        expect(centerRows.length).toBeGreaterThan(5);
-        for (const rowEl of centerRows) {
-            const id = Number(rowEl.querySelector('[data-field="id"]')!.textContent);
-            // ids 1 and 2 are pinned, so id N is unpinned index N - 3.
-            const expectedTop = (id - 3) * rowHeight;
-            expect(Math.round(rowEl.getBoundingClientRect().top - containerTop)).toBe(expectedTop);
-        }
-
-        // The viewport must be filled: the last rendered row reaches past the visible bottom.
-        const lastRendered = centerRows[centerRows.length - 1].getBoundingClientRect().bottom;
-        expect(lastRendered).toBeGreaterThanOrEqual(viewport.getBoundingClientRect().bottom - 1);
-    });
-
-    describe('keyboard navigation keeps the focused row fully visible', () => {
-        const rowHeight = 52;
-        const rows = Array.from({ length: 300 }, (_, i) => ({ id: i + 1, region: 'r', amount: i }));
-
-        const pressArrowDown = async (times: number) => {
-            const grid = document.querySelector<HTMLElement>('.ogx__viewport')!;
-            for (let i = 0; i < times; i++) {
-                grid.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
-                await new Promise(r => requestAnimationFrame(() => r(null)));
-            }
-        };
-
-        const assertFocusedRowVisible = (container: HTMLElement) => {
-            const viewport = container.querySelector<HTMLElement>('.ogx__viewport')!;
-            const focused = container.querySelector<HTMLElement>('.ogx__cell--focused')!;
-            expect(focused).not.toBeNull();
-            const cell = focused.getBoundingClientRect();
-            const vp = viewport.getBoundingClientRect();
-            const stickyTop = [...container.querySelectorAll<HTMLElement>('.ogx__header-wrap, .ogx__pinned-rows--top')]
-                .reduce((max, el) => Math.max(max, el.getBoundingClientRect().bottom), vp.top);
-            const stickyBottom = [...container.querySelectorAll<HTMLElement>('.ogx__pinned-rows--bottom')]
-                .reduce((min, el) => Math.min(min, el.getBoundingClientRect().top), vp.top + viewport.clientHeight);
-            expect(cell.top).toBeGreaterThanOrEqual(stickyTop - 1);
-            expect(cell.bottom).toBeLessThanOrEqual(stickyBottom + 1);
-        };
-
-        for (const pinned of [false, true]) {
-            it(`after ArrowDown past the bottom edge${pinned ? ' with pinned top rows' : ''}`, async () => {
-                const { container } = render(
-                    <Bounded>
-                        <DataGrid rows={rows} columns={[{ field: 'id', width: 100 }, ...columns]} height="100%"
-                            rowHeight={rowHeight} pinnedRows={pinned ? { top: [1, 2] } : undefined} />
-                    </Bounded>
-                );
-                await expect.poll(() => domRowCount(container)).toBeGreaterThan(0);
-                const target = container.querySelector<HTMLElement>(`.ogx__virtual-container [data-field="id"]`)!;
-                target.click();
-                await pressArrowDown(20);
-                assertFocusedRowVisible(container);
-            });
-        }
-    });
-
-    it('apiRef.scrollToIndexes brings a row below the fold fully into view', async () => {
-        const rows = Array.from({ length: 300 }, (_, i) => ({ id: i + 1, region: 'r', amount: i }));
-        const onReady = vi.fn<(apiRef: ReturnType<typeof useGridApiRef>) => void>();
-        const Harness = ({ onApi }: { onApi: typeof onReady }) => {
-            const apiRef = useGridApiRef();
-            useEffect(() => { onApi(apiRef); }, [apiRef, onApi]);
-            return <DataGrid apiRef={apiRef} rows={rows} columns={[{ field: 'id', width: 100 }, ...columns]} height="100%" />;
-        };
-        const { container } = render(<Bounded><Harness onApi={onReady} /></Bounded>);
-        await expect.poll(() => domRowCount(container)).toBeGreaterThan(0);
-
-        onReady.mock.calls[0][0].current.scrollToIndexes({ rowIndex: 40 });
-        const viewport = container.querySelector<HTMLElement>('.ogx__viewport')!;
-        viewport.dispatchEvent(new Event('scroll'));
-        const rowEl = () => [...container.querySelectorAll<HTMLElement>('.ogx__virtual-container [role="row"]')]
-            .find(r => r.querySelector('[data-field="id"]')?.textContent === '41');
-        await expect.poll(() => Boolean(rowEl())).toBe(true);
-        const vp = viewport.getBoundingClientRect();
-        const header = container.querySelector<HTMLElement>('.ogx__header-wrap')!.getBoundingClientRect();
-        const r = rowEl()!.getBoundingClientRect();
-        expect(r.top).toBeGreaterThanOrEqual(header.bottom - 1);
-        expect(r.bottom).toBeLessThanOrEqual(vp.top + viewport.clientHeight + 1);
-    });
-});

package/lib/components/Header/Header.test.tsx

@@ -1,135 +0,0 @@
-import React from 'react';
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { Header } from './Header';
-import type { GridColDef } from '../../types';
-
-const COLUMNS: GridColDef[] = [
-    { field: 'name', headerName: 'Name', width: 150 },
-    { field: 'age', headerName: 'Age', width: 100 },
-    { field: 'dept', headerName: 'Dept', width: 120 },
-];
-
-describe('Header — multi-sort shift-click', () => {
-    it('plain click calls onSort with single field (replaces model)', () => {
-        const onSort = vi.fn();
-        const onSortAdd = vi.fn();
-        render(
-            <Header
-                columns={COLUMNS}
-                sortModel={[]}
-                onSort={onSort}
-                onSortAdd={onSortAdd}
-            />
-        );
-        fireEvent.click(screen.getByText('Name'));
-        expect(onSort).toHaveBeenCalledWith('name', 'asc');
-        expect(onSortAdd).not.toHaveBeenCalled();
-    });
-
-    it('shift-click calls onSortAdd (accumulates)', () => {
-        const onSort = vi.fn();
-        const onSortAdd = vi.fn();
-        render(
-            <Header
-                columns={COLUMNS}
-                sortModel={[{ field: 'name', sort: 'asc' }]}
-                onSort={onSort}
-                onSortAdd={onSortAdd}
-            />
-        );
-        fireEvent.click(screen.getByText('Age'), { shiftKey: true });
-        expect(onSortAdd).toHaveBeenCalledWith('age', 'asc');
-        expect(onSort).not.toHaveBeenCalled();
-    });
-
-    it('shift-click on already-sorted field cycles direction without replacing others', () => {
-        const onSort = vi.fn();
-        const onSortAdd = vi.fn();
-        render(
-            <Header
-                columns={COLUMNS}
-                sortModel={[
-                    { field: 'name', sort: 'asc' },
-                    { field: 'age', sort: 'asc' },
-                ]}
-                onSort={onSort}
-                onSortAdd={onSortAdd}
-            />
-        );
-        fireEvent.click(screen.getByText('Age'), { shiftKey: true });
-        expect(onSortAdd).toHaveBeenCalledWith('age', 'desc');
-        expect(onSort).not.toHaveBeenCalled();
-    });
-
-    it('shift-click on desc-sorted field removes it from model', () => {
-        const onSort = vi.fn();
-        const onSortAdd = vi.fn();
-        render(
-            <Header
-                columns={COLUMNS}
-                sortModel={[
-                    { field: 'name', sort: 'asc' },
-                    { field: 'age', sort: 'desc' },
-                ]}
-                onSort={onSort}
-                onSortAdd={onSortAdd}
-            />
-        );
-        fireEvent.click(screen.getByText('Age'), { shiftKey: true });
-        expect(onSortAdd).toHaveBeenCalledWith('age', null);
-        expect(onSort).not.toHaveBeenCalled();
-    });
-
-    it('plain click on one column while another is sorted resets to single-key', () => {
-        const onSort = vi.fn();
-        const onSortAdd = vi.fn();
-        render(
-            <Header
-                columns={COLUMNS}
-                sortModel={[{ field: 'name', sort: 'asc' }]}
-                onSort={onSort}
-                onSortAdd={onSortAdd}
-            />
-        );
-        fireEvent.click(screen.getByText('Age'));
-        expect(onSort).toHaveBeenCalledWith('age', 'asc');
-        expect(onSortAdd).not.toHaveBeenCalled();
-    });
-
-    it('does not call onSort/onSortAdd for sortable:false columns', () => {
-        const onSort = vi.fn();
-        const onSortAdd = vi.fn();
-        const cols: GridColDef[] = [
-            { field: 'id', headerName: 'ID', sortable: false },
-        ];
-        render(<Header columns={cols} sortModel={[]} onSort={onSort} onSortAdd={onSortAdd} />);
-        fireEvent.click(screen.getByText('ID'));
-        expect(onSort).not.toHaveBeenCalled();
-        expect(onSortAdd).not.toHaveBeenCalled();
-    });
-});
-
-describe('Header — description tooltip', () => {
-    it('renders title attribute from column description', () => {
-        const cols: GridColDef[] = [
-            { field: 'salary', headerName: 'Salary', description: 'Annual salary in USD' },
-        ];
-        const { container } = render(
-            <Header columns={cols} sortModel={[]} />
-        );
-        const headerCell = container.querySelector('[data-field="salary"]');
-        expect(headerCell?.getAttribute('title')).toBe('Annual salary in USD');
-    });
-
-    it('has no title attribute when description is absent', () => {
-        const cols: GridColDef[] = [
-            { field: 'name', headerName: 'Name' },
-        ];
-        const { container } = render(
-            <Header columns={cols} sortModel={[]} />
-        );
-        const headerCell = container.querySelector('[data-field="name"]');
-        expect(headerCell?.getAttribute('title')).toBeNull();
-    });
-});

package/lib/components/Pagination/Pagination.test.tsx

@@ -1,64 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { Pagination } from './Pagination';
-
-const NOOP = () => {};
-
-describe('Pagination', () => {
-    it('renders "0 of 0" when rowCount is 0', () => {
-        render(
-            <Pagination
-                page={0}
-                pageSize={10}
-                rowCount={0}
-                onPageChange={NOOP}
-                onPageSizeChange={NOOP}
-            />
-        );
-        expect(screen.getByText('0 of 0')).toBeTruthy();
-    });
-
-    it('calls localeText.paginationOf with (0, 0, 0) when rowCount is 0', () => {
-        const paginationOf = vi.fn().mockReturnValue('custom empty');
-        render(
-            <Pagination
-                page={0}
-                pageSize={10}
-                rowCount={0}
-                onPageChange={NOOP}
-                onPageSizeChange={NOOP}
-                localeText={{ paginationOf }}
-            />
-        );
-        expect(paginationOf).toHaveBeenCalledWith(0, 0, 0);
-        expect(screen.getByText('custom empty')).toBeTruthy();
-    });
-
-    it('renders correct row range label for non-empty data', () => {
-        render(
-            <Pagination
-                page={0}
-                pageSize={10}
-                rowCount={25}
-                onPageChange={NOOP}
-                onPageSizeChange={NOOP}
-            />
-        );
-        expect(screen.getByText('1–10 of 25')).toBeTruthy();
-    });
-
-    it('calls localeText.paginationOf with correct args for non-empty data', () => {
-        const paginationOf = vi.fn().mockReturnValue('custom range');
-        render(
-            <Pagination
-                page={1}
-                pageSize={10}
-                rowCount={25}
-                onPageChange={NOOP}
-                onPageSizeChange={NOOP}
-                localeText={{ paginationOf }}
-            />
-        );
-        expect(paginationOf).toHaveBeenCalledWith(11, 20, 25);
-    });
-});

package/lib/hooks/core/useDataGrid.regression.test.ts

@@ -1,66 +0,0 @@
-/**
- * Regression tests for bugs fixed in the useDataGrid reducer.
- *
- * Each describe block names the bug and the commit that fixed it, so a
- * future failure tells you exactly what regressed and where to look.
- */
-
-import { describe, it, expect } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { useDataGrid } from './useDataGrid';
-import type { GridColDef } from '../../types';
-
-const COLS: GridColDef[] = [
-    { field: 'id',   headerName: 'ID',   width: 80 },
-    { field: 'name', headerName: 'Name', width: 150 },
-    { field: 'age',  headerName: 'Age',  width: 100 },
-];
-
-const ROWS = [
-    { id: 1, name: 'Alice', age: 30 },
-    { id: 2, name: 'Bob',   age: 25 },
-];
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Bug: SET_COLUMNS reducer was hardcoding columnVisibilityModel: {} on every
-// column update, silently wiping any hidden columns.
-// ─────────────────────────────────────────────────────────────────────────────
-describe('SET_COLUMNS preserves columnVisibilityModel', () => {
-    it('keeps hidden columns hidden after setColumns is called', () => {
-        const { result } = renderHook(() =>
-            useDataGrid({
-                rows: ROWS,
-                columns: COLS,
-                columnVisibilityModel: { age: false },
-            })
-        );
-
-        // Confirm the initial visibility model was applied.
-        expect(result.current.state.columns.columnVisibilityModel).toEqual({ age: false });
-
-        // Simulate a column update (e.g. a width change coming from a resize handler).
-        const updatedCols: GridColDef[] = COLS.map(c =>
-            c.field === 'name' ? { ...c, width: 200 } : c
-        );
-
-        act(() => {
-            result.current.setColumns(updatedCols);
-        });
-
-        // The visibility model must survive the column update — not reset to {}.
-        expect(result.current.state.columns.columnVisibilityModel).toEqual({ age: false });
-    });
-
-    it('does not gain a visibility entry for columns that were already visible', () => {
-        const { result } = renderHook(() =>
-            useDataGrid({ rows: ROWS, columns: COLS })
-        );
-
-        act(() => {
-            result.current.setColumns(COLS);
-        });
-
-        // No spurious entries: an empty model means all columns are visible.
-        expect(result.current.state.columns.columnVisibilityModel).toEqual({});
-    });
-});

package/lib/hooks/core/useGridControlledState.test.ts

@@ -1,86 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { useGridControlledState } from './useGridControlledState';
-
-const BASE_PARAMS = {
-    sortModel: undefined,
-    paginationModel: undefined,
-    rowSelectionModel: undefined,
-};
-
-describe('useGridControlledState — sort', () => {
-    it('uncontrolled: setInternalSortModel updates sortModel', () => {
-        const { result } = renderHook(() => useGridControlledState(BASE_PARAMS));
-        expect(result.current.sortModel).toEqual([]);
-        act(() => {
-            result.current.setInternalSortModel([{ field: 'name', sort: 'asc' }]);
-        });
-        expect(result.current.sortModel).toEqual([{ field: 'name', sort: 'asc' }]);
-    });
-
-    it('controlled: external sortModel prop always wins', () => {
-        const externalSort = [{ field: 'age', sort: 'desc' as const }];
-        const { result } = renderHook(() =>
-            useGridControlledState({ ...BASE_PARAMS, sortModel: externalSort })
-        );
-        expect(result.current.isSortControlled).toBe(true);
-        expect(result.current.sortModel).toEqual(externalSort);
-        act(() => {
-            result.current.setInternalSortModel([{ field: 'name', sort: 'asc' }]);
-        });
-        // External prop still wins
-        expect(result.current.sortModel).toEqual(externalSort);
-    });
-
-    it('initialState.sorting seeds the internal sort model', () => {
-        const { result } = renderHook(() =>
-            useGridControlledState({
-                ...BASE_PARAMS,
-                initialState: { sorting: { sortModel: [{ field: 'name', sort: 'asc' }] } },
-            })
-        );
-        expect(result.current.sortModel).toEqual([{ field: 'name', sort: 'asc' }]);
-    });
-});
-
-describe('useGridControlledState — pagination', () => {
-    it('uncontrolled: handlePaginationModelChange updates effectivePaginationModel', () => {
-        const { result } = renderHook(() => useGridControlledState(BASE_PARAMS));
-        act(() => {
-            result.current.handlePaginationModelChange({ page: 2, pageSize: 25 });
-        });
-        expect(result.current.effectivePaginationModel).toEqual({ page: 2, pageSize: 25 });
-    });
-
-    it('controlled: external paginationModel always wins', () => {
-        const externalPagination = { page: 3, pageSize: 50 };
-        const { result } = renderHook(() =>
-            useGridControlledState({ ...BASE_PARAMS, paginationModel: externalPagination })
-        );
-        expect(result.current.effectivePaginationModel).toEqual(externalPagination);
-        act(() => {
-            result.current.handlePaginationModelChange({ page: 0, pageSize: 10 });
-        });
-        expect(result.current.effectivePaginationModel).toEqual(externalPagination);
-    });
-
-    it('initialState.pagination seeds page and pageSize', () => {
-        const { result } = renderHook(() =>
-            useGridControlledState({
-                ...BASE_PARAMS,
-                initialState: { pagination: { paginationModel: { page: 1, pageSize: 25 } } },
-            })
-        );
-        expect(result.current.effectivePaginationModel).toEqual({ page: 1, pageSize: 25 });
-    });
-});
-
-describe('useGridControlledState — selection', () => {
-    it('uncontrolled: setInternalRowSelectionModel updates selectedRowIds', () => {
-        const { result } = renderHook(() => useGridControlledState(BASE_PARAMS));
-        act(() => {
-            result.current.setInternalRowSelectionModel([1, 2, 3]);
-        });
-        expect(result.current.selectedRowIds).toEqual(new Set([1, 2, 3]));
-    });
-});