@rickcedwhat/playwright-smart-table 6.16.0 → 6.17.1

package/dist/presets/mui.js

@@ -1,7 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.muiDataGrid = exports.muiTable = void 0;
+exports.createMuiTable = createMuiTable;
+exports.createMuiDataGrid = createMuiDataGrid;
 const debugUtils_1 = require("../utils/debugUtils");
+const DEFAULT_LABELS = {
+    nextPage: 'Go to next page',
+    previousPage: 'Go to previous page',
+    firstPage: 'Go to first page',
+};
 /**
  * Safely wait for MUI pagination to stabilize.
  * Polls for displayed row text changes and waits for loading overlays to disappear.
@@ -45,120 +52,136 @@ async function getPaginationRoot(context) {
     return context.root.locator('xpath=following::div[contains(@class, "MuiTablePagination-root")][1]').first();
 }
 /**
- * Preset configuration for the standard Material UI `<Table />` component.
+ * Creates a preset configuration for the standard Material UI `<Table />` component.
  *
- * Handles:
- * - Selectors for `.MuiTableRow-root`, `.MuiTableCell-head`, etc.
- * - Pagination via the standard `.MuiTablePagination-actions` footer.
- * - Sorting via the `.MuiTableSortLabel-root` header classes.
- * - Virtualized DOM deduplication (falls back to cell text if unvirtualized).
+ * @param opts.buttonLabels - Override aria-labels for pagination buttons (use for non-English locales).
+ *
+ * @example
+ * // French locale
+ * const table = useTable(loc, createMuiTable({ buttonLabels: { nextPage: 'Page suivante', previousPage: 'Page précédente' } }));
  */
-exports.muiTable = {
-    rowSelector: 'tbody tr, tbody .MuiTableRow-root',
-    cellSelector: 'td, th, .MuiTableCell-body',
-    headerSelector: 'thead th, .MuiTableCell-head',
-    headerTransformer: ({ text }) => text.replace(/\bsorted\s+(?:ascending|descending)\b/i, '').trim(),
-    strategies: {
-        pagination: {
-            goNext: async (context) => {
-                const root = await getPaginationRoot(context);
-                const nextBtn = root.locator('button[aria-label="Go to next page"]');
-                if (await nextBtn.count() === 0 || await nextBtn.isDisabled())
-                    return false;
-                const displayedRows = root.locator('.MuiTablePagination-displayedRows');
-                const oldText = await displayedRows.innerText().catch(() => '');
-                // Force click ignores cookie banners obscuring the footer
-                await nextBtn.click({ force: true });
-                await waitForMuiPaginationStabilization(context, displayedRows, oldText);
-                return true;
-            },
-            goPrevious: async (context) => {
-                const root = await getPaginationRoot(context);
-                const prevBtn = root.locator('button[aria-label="Go to previous page"]');
-                if (await prevBtn.count() === 0 || await prevBtn.isDisabled())
-                    return false;
-                const displayedRows = root.locator('.MuiTablePagination-displayedRows');
-                const oldText = await displayedRows.innerText().catch(() => '');
-                await prevBtn.click({ force: true });
-                await waitForMuiPaginationStabilization(context, displayedRows, oldText);
-                return true;
-            },
-            goToFirst: async (context) => {
-                const root = await getPaginationRoot(context);
-                const prevBtn = root.locator('button[aria-label="Go to previous page"]');
-                const displayedRows = root.locator('.MuiTablePagination-displayedRows');
-                let clicked = false;
-                let noProgressCount = 0;
-                const NO_PROGRESS_LIMIT = 3;
-                while (await prevBtn.count() > 0 && !(await prevBtn.isDisabled())) {
+function createMuiTable(opts) {
+    const labels = Object.assign(Object.assign({}, DEFAULT_LABELS), opts === null || opts === void 0 ? void 0 : opts.buttonLabels);
+    return {
+        rowSelector: 'tbody tr, tbody .MuiTableRow-root',
+        cellSelector: 'td, th, .MuiTableCell-body',
+        headerSelector: 'thead th, .MuiTableCell-head',
+        headerTransformer: ({ text }) => text.replace(/\bsorted\s+(?:ascending|descending)\b/i, '').trim(),
+        strategies: {
+            pagination: {
+                goNext: async (context) => {
+                    const root = await getPaginationRoot(context);
+                    const nextBtn = root.getByRole('button', { name: labels.nextPage, exact: true });
+                    if (await nextBtn.count() === 0 || await nextBtn.isDisabled())
+                        return false;
+                    const displayedRows = root.locator('.MuiTablePagination-displayedRows');
                     const oldText = await displayedRows.innerText().catch(() => '');
-                    await prevBtn.click();
+                    // Force click ignores cookie banners obscuring the footer
+                    await nextBtn.click({ force: true });
                     await waitForMuiPaginationStabilization(context, displayedRows, oldText);
-                    clicked = true;
-                    const newText = await displayedRows.innerText().catch(() => '');
-                    if (newText === oldText) {
-                        noProgressCount++;
-                        if (noProgressCount >= NO_PROGRESS_LIMIT) {
-                            (0, debugUtils_1.logDebug)(context.config, 'error', `goToFirst: no pagination progress after ${NO_PROGRESS_LIMIT} consecutive clicks — aborting to avoid infinite loop`);
-                            return false;
-                        }
+                    return true;
+                },
+                goPrevious: async (context) => {
+                    const root = await getPaginationRoot(context);
+                    const prevBtn = root.getByRole('button', { name: labels.previousPage, exact: true });
+                    if (await prevBtn.count() === 0 || await prevBtn.isDisabled())
+                        return false;
+                    const displayedRows = root.locator('.MuiTablePagination-displayedRows');
+                    const oldText = await displayedRows.innerText().catch(() => '');
+                    await prevBtn.click({ force: true });
+                    await waitForMuiPaginationStabilization(context, displayedRows, oldText);
+                    return true;
+                },
+                goToFirst: async (context) => {
+                    const root = await getPaginationRoot(context);
+                    const displayedRows = root.locator('.MuiTablePagination-displayedRows');
+                    // MUI TablePagination optionally renders a "first page" button (showFirstButton prop)
+                    const firstBtn = root.getByRole('button', { name: labels.firstPage, exact: true });
+                    if (await firstBtn.count() > 0 && !(await firstBtn.isDisabled())) {
+                        const oldText = await displayedRows.innerText().catch(() => '');
+                        await firstBtn.click({ force: true });
+                        await waitForMuiPaginationStabilization(context, displayedRows, oldText);
+                        return true;
                     }
-                    else {
-                        noProgressCount = 0;
+                    // Fall back to stepping backward one page at a time
+                    const prevBtn = root.getByRole('button', { name: labels.previousPage, exact: true });
+                    let clicked = false;
+                    let noProgressCount = 0;
+                    const NO_PROGRESS_LIMIT = 3;
+                    while (await prevBtn.count() > 0 && !(await prevBtn.isDisabled())) {
+                        const oldText = await displayedRows.innerText().catch(() => '');
+                        await prevBtn.click({ force: true });
+                        await waitForMuiPaginationStabilization(context, displayedRows, oldText);
+                        clicked = true;
+                        const newText = await displayedRows.innerText().catch(() => '');
+                        if (newText === oldText) {
+                            noProgressCount++;
+                            if (noProgressCount >= NO_PROGRESS_LIMIT) {
+                                (0, debugUtils_1.logDebug)(context.config, 'error', `goToFirst: no pagination progress after ${NO_PROGRESS_LIMIT} consecutive clicks — aborting to avoid infinite loop`);
+                                return false;
+                            }
+                        }
+                        else {
+                            noProgressCount = 0;
+                        }
                     }
+                    return clicked;
                 }
-                return clicked;
-            }
-        },
-        sorting: {
-            getSortState: async ({ columnName, context }) => {
-                if (!context.getHeaderCell)
-                    return 'none';
-                const header = await context.getHeaderCell(columnName);
-                const sortLabel = header.locator('.MuiTableSortLabel-root').first();
-                if (!(await sortLabel.isVisible().catch(() => false)))
-                    return 'none';
-                const className = await sortLabel.getAttribute('class') || '';
-                if (className.includes('directionAsc'))
-                    return 'asc';
-                if (className.includes('directionDesc'))
-                    return 'desc';
-                // Often, if the label is active but lacks explicit direction classes, MUI defaults to ascending
-                if (className.includes('active'))
-                    return 'asc';
-                return 'none';
             },
-            doSort: async ({ columnName, direction, context }) => {
-                var _a, _b;
-                if (!context.getHeaderCell)
-                    return;
-                const header = await context.getHeaderCell(columnName);
-                const sortLabel = header.locator('.MuiTableSortLabel-root').first();
-                const target = await sortLabel.isVisible().catch(() => false) ? sortLabel : header;
-                let current = await ((_a = context.config.strategies.sorting) === null || _a === void 0 ? void 0 : _a.getSortState({ columnName, context })) || 'none';
-                let attempts = 0;
-                // Click until the state matches the target direction, max 3 times (none -> asc -> desc)
-                while (current !== direction && attempts < 3) {
-                    await target.click();
-                    await context.page.waitForTimeout(100);
-                    current = await ((_b = context.config.strategies.sorting) === null || _b === void 0 ? void 0 : _b.getSortState({ columnName, context })) || 'none';
-                    attempts++;
+            sorting: {
+                getSortState: async ({ columnName, context }) => {
+                    if (!context.getHeaderCell)
+                        return 'none';
+                    const header = await context.getHeaderCell(columnName);
+                    const sortLabel = header.locator('.MuiTableSortLabel-root').first();
+                    if (!(await sortLabel.isVisible().catch(() => false)))
+                        return 'none';
+                    const className = await sortLabel.getAttribute('class') || '';
+                    if (className.includes('directionAsc'))
+                        return 'asc';
+                    if (className.includes('directionDesc'))
+                        return 'desc';
+                    // Often, if the label is active but lacks explicit direction classes, MUI defaults to ascending
+                    if (className.includes('active'))
+                        return 'asc';
+                    return 'none';
+                },
+                doSort: async ({ columnName, direction, context }) => {
+                    var _a, _b;
+                    if (!context.getHeaderCell)
+                        return;
+                    const header = await context.getHeaderCell(columnName);
+                    const sortLabel = header.locator('.MuiTableSortLabel-root').first();
+                    const target = await sortLabel.isVisible().catch(() => false) ? sortLabel : header;
+                    let current = await ((_a = context.config.strategies.sorting) === null || _a === void 0 ? void 0 : _a.getSortState({ columnName, context })) || 'none';
+                    let attempts = 0;
+                    // Click until the state matches the target direction, max 3 times (none -> asc -> desc)
+                    while (current !== direction && attempts < 3) {
+                        await target.click();
+                        await context.page.waitForTimeout(100);
+                        current = await ((_b = context.config.strategies.sorting) === null || _b === void 0 ? void 0 : _b.getSortState({ columnName, context })) || 'none';
+                        attempts++;
+                    }
                 }
+            },
+            dedupe: async (row) => {
+                // MUI virtualized tables attach data-index to rows 
+                const dataIndex = await row.getAttribute('data-index');
+                if (dataIndex !== null)
+                    return dataIndex;
+                // Unvirtualized tables don't recycle nodes, but if they do duplicate, fallback to first cell's text
+                const text = await row.locator('td, th').first().innerText().catch(() => '');
+                return text || String(Math.random());
             }
-        },
-        dedupe: async (row) => {
-            // MUI virtualized tables attach data-index to rows 
-            const dataIndex = await row.getAttribute('data-index');
-            if (dataIndex !== null)
-                return dataIndex;
-            // Unvirtualized tables don't recycle nodes, but if they do duplicate, fallback to first cell's text
-            const text = await row.locator('td, th').first().innerText().catch(() => '');
-            return text || String(Math.random());
         }
-    }
-};
+    };
+}
+/** Default preset for MUI `<Table />`. For non-English locales use `createMuiTable({ buttonLabels })`. */
+exports.muiTable = createMuiTable();
 /**
- * Preset configuration for the MUI DataGrid component (@mui/x-data-grid).
+ * Creates a preset configuration for the MUI DataGrid component (@mui/x-data-grid).
+ *
+ * @param opts.buttonLabels - Override aria-labels for pagination buttons (use for non-English locales).
  *
  * Handles:
  * - Selectors for `.MuiDataGrid-row`, `.MuiDataGrid-cell`, and `.MuiDataGrid-columnHeader`.
@@ -167,184 +190,331 @@ exports.muiTable = {
  * - Vertical Virtualization deduplication using `data-rowindex`.
  * - Horizontal Virtualization support via `aria-colindex`.
  */
-exports.muiDataGrid = {
-    rowSelector: '.MuiDataGrid-row',
-    cellSelector: '.MuiDataGrid-cell',
-    headerSelector: '.MuiDataGrid-columnHeader',
-    strategies: {
-        pagination: {
-            goNext: async (context) => {
-                const footer = context.root.locator('.MuiDataGrid-footerContainer');
-                const nextBtn = footer.locator('button[aria-label="Go to next page"]');
-                try {
-                    await nextBtn.waitFor({ state: 'visible', timeout: 2000 });
-                }
-                catch (e) {
-                    return false;
-                }
-                if (await nextBtn.isDisabled())
-                    return false;
-                const displayedRows = footer.locator('.MuiTablePagination-displayedRows');
-                const oldText = await displayedRows.innerText().catch(() => '');
-                await nextBtn.scrollIntoViewIfNeeded().catch(() => { });
-                await nextBtn.click({ force: true });
-                await waitForMuiPaginationStabilization(context, displayedRows, oldText);
-                return true;
-            },
-            goPrevious: async (context) => {
-                const footer = context.root.locator('.MuiDataGrid-footerContainer');
-                const prevBtn = footer.locator('button[aria-label="Go to previous page"]');
-                try {
-                    await prevBtn.waitFor({ state: 'visible', timeout: 2000 });
-                }
-                catch (e) {
-                    return false;
-                }
-                if (await prevBtn.isDisabled())
-                    return false;
-                const displayedRows = footer.locator('.MuiTablePagination-displayedRows');
-                const oldText = await displayedRows.innerText().catch(() => '');
-                await prevBtn.scrollIntoViewIfNeeded().catch(() => { });
-                await prevBtn.click({ force: true });
-                await waitForMuiPaginationStabilization(context, displayedRows, oldText);
-                return true;
-            }
-        },
-        sorting: {
-            getSortState: async ({ columnName, context }) => {
-                if (!context.getHeaderCell)
-                    return 'none';
-                const header = await context.getHeaderCell(columnName);
-                const sortAttr = await header.getAttribute('aria-sort');
-                if (sortAttr === 'ascending')
-                    return 'asc';
-                if (sortAttr === 'descending')
-                    return 'desc';
-                return 'none';
+function createMuiDataGrid(opts) {
+    const labels = Object.assign(Object.assign({}, DEFAULT_LABELS), opts === null || opts === void 0 ? void 0 : opts.buttonLabels);
+    return {
+        rowSelector: '.MuiDataGrid-row',
+        cellSelector: '.MuiDataGrid-cell',
+        headerSelector: '.MuiDataGrid-columnHeader',
+        concurrency: 'synchronized',
+        strategies: {
+            resolveRowIndex: async (row) => {
+                const v = await row.getAttribute('data-rowindex').catch(() => null);
+                return v !== null && !isNaN(Number(v)) ? Number(v) : undefined;
             },
-            doSort: async ({ columnName, direction, context }) => {
-                var _a, _b;
-                if (!context.getHeaderCell)
-                    return;
-                const header = await context.getHeaderCell(columnName);
-                let current = await ((_a = context.config.strategies.sorting) === null || _a === void 0 ? void 0 : _a.getSortState({ columnName, context })) || 'none';
-                let attempts = 0;
-                while (current !== direction && attempts < 3) {
-                    const clickTarget = header.locator('.MuiDataGrid-columnHeaderTitleContainer').first();
-                    if (await clickTarget.isVisible()) {
-                        await clickTarget.click({ force: true });
+            pagination: {
+                goNext: async (context) => {
+                    const footer = context.root.locator('.MuiDataGrid-footerContainer');
+                    const nextBtn = footer.getByRole('button', { name: labels.nextPage, exact: true });
+                    try {
+                        await nextBtn.waitFor({ state: 'visible', timeout: 2000 });
+                    }
+                    catch (e) {
+                        return false;
                     }
-                    else {
-                        await header.click({ force: true });
+                    if (await nextBtn.isDisabled())
+                        return false;
+                    const displayedRows = footer.locator('.MuiTablePagination-displayedRows');
+                    const oldText = await displayedRows.innerText().catch(() => '');
+                    await nextBtn.scrollIntoViewIfNeeded().catch(() => { });
+                    await nextBtn.click({ force: true });
+                    await waitForMuiPaginationStabilization(context, displayedRows, oldText);
+                    return true;
+                },
+                goPrevious: async (context) => {
+                    const footer = context.root.locator('.MuiDataGrid-footerContainer');
+                    const prevBtn = footer.getByRole('button', { name: labels.previousPage, exact: true });
+                    try {
+                        await prevBtn.waitFor({ state: 'visible', timeout: 2000 });
                     }
-                    // Wait for stabilization (using DataGrid specific overlay check inside helper)
-                    const displayedRows = context.root.locator('.MuiTablePagination-displayedRows');
-                    const text = await displayedRows.innerText().catch(() => '');
-                    await waitForMuiPaginationStabilization(context, displayedRows, text);
-                    current = await ((_b = context.config.strategies.sorting) === null || _b === void 0 ? void 0 : _b.getSortState({ columnName, context })) || 'none';
-                    attempts++;
+                    catch (e) {
+                        return false;
+                    }
+                    if (await prevBtn.isDisabled())
+                        return false;
+                    const displayedRows = footer.locator('.MuiTablePagination-displayedRows');
+                    const oldText = await displayedRows.innerText().catch(() => '');
+                    await prevBtn.scrollIntoViewIfNeeded().catch(() => { });
+                    await prevBtn.click({ force: true });
+                    await waitForMuiPaginationStabilization(context, displayedRows, oldText);
+                    return true;
+                },
+                goToFirst: async (context) => {
+                    const footer = context.root.locator('.MuiDataGrid-footerContainer');
+                    const displayedRows = footer.locator('.MuiTablePagination-displayedRows');
+                    const firstBtn = footer.getByRole('button', { name: labels.firstPage, exact: true });
+                    try {
+                        await firstBtn.waitFor({ state: 'visible', timeout: 1000 });
+                        if (!(await firstBtn.isDisabled())) {
+                            const oldText = await displayedRows.innerText().catch(() => '');
+                            await firstBtn.scrollIntoViewIfNeeded().catch(() => { });
+                            await firstBtn.click({ force: true });
+                            await waitForMuiPaginationStabilization(context, displayedRows, oldText);
+                            return true;
+                        }
+                    }
+                    catch (_a) {
+                        // first-page button not present; fall back to stepping backward
+                    }
+                    const prevBtn = footer.getByRole('button', { name: labels.previousPage, exact: true });
+                    let clicked = false;
+                    let noProgressCount = 0;
+                    const NO_PROGRESS_LIMIT = 3;
+                    while (true) {
+                        try {
+                            await prevBtn.waitFor({ state: 'visible', timeout: 2000 });
+                        }
+                        catch (_b) {
+                            break;
+                        }
+                        if (await prevBtn.isDisabled())
+                            break;
+                        const oldText = await displayedRows.innerText().catch(() => '');
+                        await prevBtn.scrollIntoViewIfNeeded().catch(() => { });
+                        await prevBtn.click({ force: true });
+                        await waitForMuiPaginationStabilization(context, displayedRows, oldText);
+                        clicked = true;
+                        const newText = await displayedRows.innerText().catch(() => '');
+                        if (newText === oldText) {
+                            noProgressCount++;
+                            if (noProgressCount >= NO_PROGRESS_LIMIT) {
+                                (0, debugUtils_1.logDebug)(context.config, 'error', `goToFirst: no pagination progress after ${NO_PROGRESS_LIMIT} consecutive clicks — aborting to avoid infinite loop`);
+                                return false;
+                            }
+                        }
+                        else {
+                            noProgressCount = 0;
+                        }
+                    }
+                    return clicked;
                 }
-            }
-        },
-        dedupe: async (row) => {
-            var _a;
-            // DataGrid uses data-rowindex for its own virtualization management
-            return (_a = (await row.getAttribute('data-rowindex').catch(() => null))) !== null && _a !== void 0 ? _a : '';
-        },
-        getCellLocator: ({ row, columnIndex }) => {
-            // Horizontal virtualization uses aria-colindex (1-indexed)
-            return row.locator(`[aria-colindex="${columnIndex + 1}"]`);
-        },
-        // MUI DataGrid virtualizes rows vertically (always) and columns horizontally (when
-        // columnBuffer is configured). The virtualScroller is a descendant of root, so
-        // scroll methods use querySelector rather than closest().
-        viewport: {
-            getVisibleRowRange: async ({ root, config }) => {
-                const rowSel = config.rowSelector;
-                return root.evaluate((el, rowSel) => {
-                    const indices = Array.from(el.querySelectorAll(rowSel))
-                        .map(r => Number(r.getAttribute('data-rowindex')))
-                        .filter(n => !isNaN(n));
-                    if (!indices.length)
-                        return { first: 0, last: 0 };
-                    return { first: Math.min(...indices), last: Math.max(...indices) };
-                }, rowSel);
             },
-            getVisibleColumnRange: async ({ root, config }) => {
-                const rowSel = config.rowSelector;
-                const cellSel = typeof config.cellSelector === 'string' ? config.cellSelector : '[aria-colindex]';
-                return root.evaluate((el, { rowSel, cellSel }) => {
-                    const firstRow = el.querySelector(rowSel);
-                    if (!firstRow)
-                        return { first: 0, last: 0 };
-                    const indices = Array.from(firstRow.querySelectorAll(cellSel))
-                        .map(c => Number(c.getAttribute('aria-colindex')) - 1)
-                        .filter(n => !isNaN(n));
-                    if (!indices.length)
-                        return { first: 0, last: 0 };
-                    return { first: Math.min(...indices), last: Math.max(...indices) };
-                }, { rowSel, cellSel });
-            },
-            scrollToRow: async ({ root, config }, rowIndex) => {
-                const rowSel = config.rowSelector;
-                await root.evaluate((el, { rowSel, idx }) => {
-                    const scroller = el.querySelector('.MuiDataGrid-virtualScroller');
-                    if (!scroller)
-                        return;
-                    const row = el.querySelector(`${rowSel}[data-rowindex="${idx}"]`);
-                    if (row) {
-                        row.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            sorting: {
+                getSortState: async ({ columnName, context }) => {
+                    if (!context.getHeaderCell)
+                        return 'none';
+                    const header = await context.getHeaderCell(columnName);
+                    const sortAttr = await header.getAttribute('aria-sort');
+                    if (sortAttr === 'ascending')
+                        return 'asc';
+                    if (sortAttr === 'descending')
+                        return 'desc';
+                    return 'none';
+                },
+                doSort: async ({ columnName, direction, context }) => {
+                    var _a, _b;
+                    if (!context.getHeaderCell)
                         return;
+                    const header = await context.getHeaderCell(columnName);
+                    let current = await ((_a = context.config.strategies.sorting) === null || _a === void 0 ? void 0 : _a.getSortState({ columnName, context })) || 'none';
+                    let attempts = 0;
+                    while (current !== direction && attempts < 3) {
+                        const clickTarget = header.locator('.MuiDataGrid-columnHeaderTitleContainer').first();
+                        if (await clickTarget.isVisible()) {
+                            await clickTarget.click({ force: true });
+                        }
+                        else {
+                            await header.click({ force: true });
+                        }
+                        // Wait for stabilization (using DataGrid specific overlay check inside helper)
+                        const displayedRows = context.root.locator('.MuiTablePagination-displayedRows');
+                        const text = await displayedRows.innerText().catch(() => '');
+                        await waitForMuiPaginationStabilization(context, displayedRows, text);
+                        current = await ((_b = context.config.strategies.sorting) === null || _b === void 0 ? void 0 : _b.getSortState({ columnName, context })) || 'none';
+                        attempts++;
                     }
-                    const visibleRows = Array.from(el.querySelectorAll(rowSel));
-                    const heights = visibleRows
-                        .map(visibleRow => visibleRow.getBoundingClientRect().height)
-                        .filter(height => height > 0);
-                    const estimatedHeight = heights.length
-                        ? heights.reduce((sum, height) => sum + height, 0) / heights.length
-                        : 52;
-                    scroller.scrollTop = Math.max(0, idx * estimatedHeight - 20);
-                }, { rowSel, idx: rowIndex });
-                await root.locator(`${rowSel}[data-rowindex="${rowIndex}"]`)
-                    .waitFor({ state: 'attached', timeout: 3000 });
+                }
             },
-            scrollToColumn: async ({ root, config }, colIndex) => {
-                const headerSel = typeof config.headerSelector === 'string' ? config.headerSelector : null;
-                await root.evaluate((el, { headerSel, idx }) => {
-                    // virtualScroller is a descendant — querySelector, not closest
-                    const scroller = el.querySelector('.MuiDataGrid-virtualScroller');
-                    if (!scroller || !headerSel)
-                        return;
-                    const headers = Array.from(el.querySelectorAll(headerSel));
-                    const target = headers[idx];
-                    if (!target) {
-                        const widths = headers
-                            .map(header => header.getBoundingClientRect().width)
-                            .filter(width => width > 0);
-                        const estimatedWidth = widths.length
-                            ? widths.reduce((sum, width) => sum + width, 0) / widths.length
-                            : 100;
-                        scroller.scrollLeft = Math.max(0, idx * estimatedWidth - 20);
-                        return;
-                    }
-                    const cRect = scroller.getBoundingClientRect();
-                    const tRect = target.getBoundingClientRect();
-                    if (tRect.left < cRect.left) {
-                        scroller.scrollLeft -= (cRect.left - tRect.left) + 20;
-                    }
-                    else if (tRect.right > cRect.right) {
-                        scroller.scrollLeft += (tRect.right - cRect.right) + 20;
+            dedupe: async (row) => {
+                var _a;
+                // DataGrid uses data-rowindex for its own virtualization management
+                return (_a = (await row.getAttribute('data-rowindex').catch(() => null))) !== null && _a !== void 0 ? _a : '';
+            },
+            getCellLocator: ({ row, root, columnIndex, rowIndex }) => {
+                // Use data-rowindex for a stable row reference: nth-based locators break after
+                // vertical eviction because the DOM order shifts when rows are removed/added.
+                const stableRow = typeof rowIndex === 'number'
+                    ? root.locator(`[data-rowindex="${rowIndex}"]`)
+                    : row;
+                return stableRow.locator(`[aria-colindex="${columnIndex + 1}"]`);
+            },
+            // MUI DataGrid virtualizes rows vertically (always) and columns horizontally (when
+            // columnBuffer is configured). The virtualScroller is a descendant of root, so
+            // scroll methods use querySelector rather than closest().
+            viewport: {
+                getVisibleRowRange: async ({ root, config }) => {
+                    const rowSel = config.rowSelector;
+                    return root.evaluate((el, rowSel) => {
+                        const indices = Array.from(el.querySelectorAll(rowSel))
+                            .map(r => Number(r.getAttribute('data-rowindex')))
+                            .filter(n => !isNaN(n));
+                        if (!indices.length)
+                            return { first: 0, last: 0 };
+                        return { first: Math.min(...indices), last: Math.max(...indices) };
+                    }, rowSel);
+                },
+                getVisibleColumnRange: async ({ root, config }) => {
+                    const rowSel = config.rowSelector;
+                    const cellSel = typeof config.cellSelector === 'string' ? config.cellSelector : '[aria-colindex]';
+                    return root.evaluate((el, { rowSel, cellSel }) => {
+                        const scroller = el.querySelector('.MuiDataGrid-virtualScroller');
+                        const allRows = Array.from(el.querySelectorAll(rowSel));
+                        if (!allRows.length)
+                            return { first: 0, last: 0 };
+                        // Use a row that's fully within the scroller's viewport bounds.
+                        // The first DOM row is often an overscan row with extra columns rendered
+                        // outside the clip boundary, causing the range to appear wider than it is.
+                        let targetRow = allRows[0];
+                        if (scroller) {
+                            const scrollerRect = scroller.getBoundingClientRect();
+                            const inView = allRows.find(r => {
+                                const rect = r.getBoundingClientRect();
+                                return rect.height > 0 &&
+                                    rect.top >= scrollerRect.top &&
+                                    rect.bottom <= scrollerRect.bottom;
+                            });
+                            if (inView)
+                                targetRow = inView;
+                        }
+                        const scrollerRect = scroller === null || scroller === void 0 ? void 0 : scroller.getBoundingClientRect();
+                        const indices = Array.from(targetRow.querySelectorAll(cellSel))
+                            .map(c => {
+                            if (scrollerRect) {
+                                const rect = c.getBoundingClientRect();
+                                const visible = rect.width > 0 &&
+                                    rect.right > scrollerRect.left &&
+                                    rect.left < scrollerRect.right;
+                                if (!visible)
+                                    return NaN;
+                            }
+                            return Number(c.getAttribute('aria-colindex')) - 1;
+                        })
+                            .filter(n => !isNaN(n) && n >= 0);
+                        if (!indices.length)
+                            return { first: 0, last: 0 };
+                        return { first: Math.min(...indices), last: Math.max(...indices) };
+                    }, { rowSel, cellSel });
+                },
+                scrollToRow: async ({ root, config }, rowIndex) => {
+                    const rowSel = config.rowSelector;
+                    await root.evaluate((el, { rowSel, idx }) => {
+                        const scroller = el.querySelector('.MuiDataGrid-virtualScroller');
+                        if (!scroller)
+                            return;
+                        const existingRow = el.querySelector(`${rowSel}[data-rowindex="${idx}"]`);
+                        if (existingRow) {
+                            // Row is in DOM — adjust scrollTop only, never scrollLeft.
+                            const scrollerRect = scroller.getBoundingClientRect();
+                            const rowRect = existingRow.getBoundingClientRect();
+                            if (rowRect.top < scrollerRect.top) {
+                                scroller.scrollTop -= (scrollerRect.top - rowRect.top) + 4;
+                            }
+                            else if (rowRect.bottom > scrollerRect.bottom) {
+                                scroller.scrollTop += (rowRect.bottom - scrollerRect.bottom) + 4;
+                            }
+                            return;
+                        }
+                        // Row not in DOM — interpolate from visible rows' style.top positions.
+                        // This is far more accurate than estimating from row heights because MUI
+                        // DataGrid uses absolute positioning (style.top) for each virtual row.
+                        const visibleRows = Array.from(el.querySelectorAll(rowSel));
+                        const rowsWithPos = visibleRows
+                            .map(r => {
+                            const ridx = Number(r.getAttribute('data-rowindex'));
+                            const top = parseFloat(r.style.top);
+                            return { ridx, top };
+                        })
+                            .filter(r => !isNaN(r.ridx) && !isNaN(r.top) && r.top >= 0)
+                            .sort((a, b) => a.ridx - b.ridx);
+                        if (rowsWithPos.length >= 2) {
+                            const first = rowsWithPos[0];
+                            const last = rowsWithPos[rowsWithPos.length - 1];
+                            const rowHeight = (last.top - first.top) / (last.ridx - first.ridx);
+                            const targetTop = first.top + (idx - first.ridx) * rowHeight;
+                            scroller.scrollTop = Math.max(0, targetTop - 20);
+                            return;
+                        }
+                        // Fallback: use bounding-rect heights.
+                        const heights = visibleRows
+                            .map(r => r.getBoundingClientRect().height)
+                            .filter(h => h > 0);
+                        const estimatedHeight = heights.length
+                            ? heights.reduce((s, h) => s + h, 0) / heights.length
+                            : 52;
+                        scroller.scrollTop = Math.max(0, idx * estimatedHeight - 20);
+                    }, { rowSel, idx: rowIndex });
+                    // Swallow timeout: the row may still be readable if it re-enters the
+                    // virtual viewport. targetReached() in the caller is the authoritative check.
+                    await root.locator(`${rowSel}[data-rowindex="${rowIndex}"]`)
+                        .waitFor({ state: 'attached', timeout: 3000 })
+                        .catch(() => { });
+                },
+                scrollToColumn: async ({ root, config, page }, colIndex) => {
+                    const headerSel = typeof config.headerSelector === 'string' ? config.headerSelector : null;
+                    await root.evaluate((el, { headerSel, idx }) => {
+                        const scroller = el.querySelector('.MuiDataGrid-virtualScroller');
+                        if (!scroller || !headerSel)
+                            return;
+                        const headers = Array.from(el.querySelectorAll(headerSel));
+                        const targetAriaIdx = idx + 1; // aria-colindex is 1-based
+                        // Find header by aria-colindex, NOT by DOM position. With column
+                        // virtualization, DOM order does not match colIndex — only headers in
+                        // the current virtual window are rendered, so headers[idx] would be wrong.
+                        const target = headers.find(h => Number(h.getAttribute('aria-colindex')) === targetAriaIdx);
+                        if (!target) {
+                            // Header not in DOM (column virtualized away). Interpolate scrollLeft
+                            // from the positions of currently visible headers.
+                            const visibleHeaders = headers
+                                .map(h => ({ colIdx: Number(h.getAttribute('aria-colindex')), rect: h.getBoundingClientRect() }))
+                                .filter(h => !isNaN(h.colIdx) && h.rect.width > 0)
+                                .sort((a, b) => a.colIdx - b.colIdx);
+                            if (visibleHeaders.length >= 2) {
+                                const first = visibleHeaders[0];
+                                const last = visibleHeaders[visibleHeaders.length - 1];
+                                const pxPerCol = (last.rect.left - first.rect.left) / (last.colIdx - first.colIdx);
+                                const sRect = scroller.getBoundingClientRect();
+                                const firstAbsLeft = first.rect.left - sRect.left + scroller.scrollLeft;
+                                scroller.scrollLeft = Math.max(0, firstAbsLeft + (targetAriaIdx - first.colIdx) * pxPerCol - 20);
+                            }
+                            else if (visibleHeaders.length === 1) {
+                                const h = visibleHeaders[0];
+                                scroller.scrollLeft = Math.max(0, scroller.scrollLeft + (targetAriaIdx - h.colIdx) * h.rect.width - 20);
+                            }
+                            return;
+                        }
+                        const cRect = scroller.getBoundingClientRect();
+                        const tRect = target.getBoundingClientRect();
+                        if (tRect.left < cRect.left) {
+                            scroller.scrollLeft -= (cRect.left - tRect.left) + 20;
+                        }
+                        else if (tRect.right > cRect.right) {
+                            scroller.scrollLeft += (tRect.right - cRect.right) + 20;
+                        }
+                    }, { headerSel, idx: colIndex });
+                    // Wait for any cell with this colIndex to appear. With column virtualization
+                    // (32 cols), MUI DataGrid updates the DOM on requestAnimationFrame after a
+                    // scrollLeft change — so we may need to wait a tick. If it doesn't appear,
+                    // fall back to a brief pause; targetReached() is the authoritative gate.
+                    // Scope to body cells (.MuiDataGrid-cell) — [aria-colindex] also matches
+                    // column headers which appear before body cells after a scroll.
+                    const cellSel = typeof config.cellSelector === 'string' ? config.cellSelector : '.MuiDataGrid-cell';
+                    const appeared = await root.locator(`${cellSel}[aria-colindex="${colIndex + 1}"]`)
+                        .first()
+                        .waitFor({ state: 'attached', timeout: 2000 })
+                        .then(() => true)
+                        .catch(() => false);
+                    if (!appeared) {
+                        await page.waitForTimeout(300);
                     }
-                }, { headerSel, idx: colIndex });
-                await root.locator(`${config.rowSelector} [aria-colindex="${colIndex + 1}"]`)
-                    .first()
-                    .waitFor({ state: 'attached', timeout: 3000 });
+                },
             },
-        },
-        loading: {
-            isTableLoading: async (context) => {
-                return await context.root.locator('.MuiDataGrid-overlay').isVisible().catch(() => false);
+            loading: {
+                isTableLoading: async (context) => {
+                    return await context.root.locator('.MuiDataGrid-overlay').isVisible().catch(() => false);
+                }
             }
         }
-    }
-};
+    };
+}
+/** Default preset for MUI DataGrid. For non-English locales use `createMuiDataGrid({ buttonLabels })`. */
+exports.muiDataGrid = createMuiDataGrid();