Merge commit '65ca2086efbeb526b734db560a8e19f833562aa5' into vitest-x…

…-browser-working

.circleci/config.yml

@@ -255,7 +255,7 @@ jobs:
   test_browser:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.44.1-focal
+      - image: mcr.microsoft.com/playwright:v1.49.0-noble
     steps:
       - checkout
       - install_js:
@@ -271,7 +271,7 @@ jobs:
   test_browser_vitest:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.44.1-focal
+      - image: mcr.microsoft.com/playwright:v1.49.0-noble
     resource_class: medium+
     steps:
       - checkout
@@ -307,7 +307,7 @@ jobs:
   test_e2e:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.44.1-focal
+      - image: mcr.microsoft.com/playwright:v1.49.0-noble
     steps:
       - checkout
       - install_js:
@@ -318,7 +318,7 @@ jobs:
   test_e2e_website:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.44.1-focal
+      - image: mcr.microsoft.com/playwright:v1.49.0-noble
     steps:
       - checkout
       - install_js:
@@ -331,14 +331,14 @@ jobs:
   test_regressions:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.44.1-focal
+      - image: mcr.microsoft.com/playwright:v1.49.0-noble
     steps:
       - checkout
       - install_js:
           browsers: true
       - run:
           name: Install ffmpeg
-          command: apt update && apt install ffmpeg -y
+          command: apt update && apt upgrade -y && apt install ffmpeg -y
       - run:
           name: Run visual regression tests
           command: xvfb-run pnpm test:regressions

package.json

@@ -101,7 +101,7 @@
     "@next/eslint-plugin-next": "15.0.3",
     "@octokit/plugin-retry": "^7.1.2",
     "@octokit/rest": "^21.0.2",
-    "@playwright/test": "^1.44.1",
+    "@playwright/test": "^1.49.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.1",
     "@types/babel__core": "^7.20.5",
@@ -207,10 +207,10 @@
   "resolutions": {
     "react-is": "^18.3.1",
     "@types/node": "^20.17.9",
-    "@playwright/test": "1.44.1",
-    "playwright": "1.44.1",
-    "@vitest/browser>playwright": "1.44.1",
-    "@mui/internal-test-utils>playwright": "1.44.1"
+    "@playwright/test": "1.49.0",
+    "playwright": "1.49.0",
+    "@vitest/browser>playwright": "1.49.0",
+    "@mui/internal-test-utils>playwright": "1.49.0"
   },
   "packageManager": "pnpm@9.14.4",
   "engines": {

packages/x-codemod/src/v8.0.0/pickers/preset-safe/actual.spec.tsx

@@ -0,0 +1,12 @@
+// @ts-nocheck
+import { FieldValueType } from '@mui/x-date-pickers/models';
+
+interface DumbComponentProps {
+  valueType: FieldValueType;
+  foo: string;
+  bar: number;
+}
+
+const myFunction = (param: FieldValueType) => {
+  console.log('Hello World!');
+};

packages/x-codemod/src/v8.0.0/pickers/preset-safe/expected.spec.tsx

@@ -0,0 +1,12 @@
+// @ts-nocheck
+import { PickerValueType } from '@mui/x-date-pickers/models';
+
+interface DumbComponentProps {
+  valueType: PickerValueType;
+  foo: string;
+  bar: number;
+}
+
+const myFunction = (param: PickerValueType) => {
+  console.log('Hello World!');
+};

packages/x-codemod/src/v8.0.0/pickers/preset-safe/preset-safe.test.ts

@@ -0,0 +1,41 @@
+import path from 'path';
+import { expect } from 'chai';
+import jscodeshift from 'jscodeshift';
+import transform from './index';
+import readFile from '../../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('v8.0.0/pickers', () => {
+  describe('preset-safe', () => {
+    it('transforms code as needed', () => {
+      const actual = transform(
+        {
+          source: read('./actual.spec.tsx'),
+          path: require.resolve('./actual.spec.tsx'),
+        },
+        { jscodeshift: jscodeshift.withParser('tsx') },
+        {},
+      );
+
+      const expected = read('./expected.spec.tsx');
+      expect(actual).to.equal(expected, 'The transformed version should be correct');
+    });
+
+    it('should be idempotent for expression', () => {
+      const actual = transform(
+        {
+          source: read('./expected.spec.tsx'),
+          path: require.resolve('./expected.spec.tsx'),
+        },
+        { jscodeshift: jscodeshift.withParser('tsx') },
+        {},
+      );
+
+      const expected = read('./expected.spec.tsx');
+      expect(actual).to.equal(expected, 'The transformed version should be correct');
+    });
+  });
+});

packages/x-codemod/src/v8.0.0/preset-safe/index.ts

@@ -1,9 +1,11 @@
 import transformTreeView from '../tree-view/preset-safe';
+import transformPickers from '../pickers/preset-safe';
 import transformCharts from '../charts/preset-safe';
 import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../types';
 
 export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) {
   file.source = transformTreeView(file, api, options);
+  file.source = transformPickers(file, api, options);
   file.source = transformCharts(file, api, options);
 
   return file.source;

packages/x-codemod/src/v8.0.0/preset-safe/preset-safe.test.ts

@@ -1,27 +1,58 @@
 import path from 'path';
 import { expect } from 'chai';
 import jscodeshift from 'jscodeshift';
+import fs from 'fs';
 import transform from '.';
 import readFile from '../../util/readFile';
 
 function read(fileName) {
-  return readFile(path.join(__dirname, fileName));
+  return readFile(fileName);
+}
+
+function getAllDirs() {
+  return fs
+    .readdirSync(path.resolve(__dirname, '..'))
+    .filter(
+      (file) =>
+        fs.statSync(path.resolve(__dirname, '..', file)).isDirectory() && file !== 'preset-safe',
+    );
 }
 
 describe('v8.0.0', () => {
-  describe('preset-safe', () => {
-    it('transforms code as needed', () => {
-      const actual = transform({ source: read('./actual.spec.js') }, { jscodeshift }, {});
+  const MOD_DIRS = getAllDirs();
 
-      const expected = read('./expected.spec.js');
-      expect(actual).to.equal(expected, 'The transformed version should be correct');
-    });
+  describe('preset-safe', () => {
+    MOD_DIRS.forEach((testDir) => {
+      const actualPath = path.resolve(__dirname, '..', testDir, 'preset-safe', 'actual.spec.tsx');
+      const expectedPath = path.resolve(
+        __dirname,
+        '..',
+        testDir,
+        'preset-safe',
+        'expected.spec.tsx',
+      );
 
-    it('should be idempotent', () => {
-      const actual = transform({ source: read('./expected.spec.js') }, { jscodeshift }, {});
+      describe(`${testDir.replace(/-/g, ' ')}`, () => {
+        it('transforms code as needed', () => {
+          const actual = transform(
+            { source: read(actualPath) },
+            { jscodeshift: jscodeshift.withParser('tsx') },
+            {},
+          );
+          const expected = read(expectedPath);
+          expect(actual).to.equal(expected, 'The transformed version should be correct');
+        });
 
-      const expected = read('./expected.spec.js');
-      expect(actual).to.equal(expected, 'The transformed version should be correct');
+        it('should be idempotent', () => {
+          const actual = transform(
+            { source: read(expectedPath) },
+            { jscodeshift: jscodeshift.withParser('tsx') },
+            {},
+          );
+          const expected = read(expectedPath);
+          expect(actual).to.equal(expected, 'The transformed version should be correct');
+        });
+      });
     });
   });
 });

packages/x-data-grid-pro/src/hooks/features/rowPinning/useGridRowPinningPreProcessors.ts

@@ -13,7 +13,7 @@ import {
   GridRowModel,
 } from '@mui/x-data-grid';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
-import { GridPinnedRowsProp } from './gridRowPinningInterface';
+import type { GridPinnedRowsProp, GridRowPinningInternalCache } from './gridRowPinningInterface';
 import { insertNodeInTree } from '../../../utils/tree/utils';
 
 type GridPinnedRowPosition = keyof GridPinnedRowsProp;
@@ -92,9 +92,13 @@ export function addPinnedRow({
 export const useGridRowPinningPreProcessors = (
   apiRef: React.MutableRefObject<GridPrivateApiPro>,
 ) => {
+  const prevPinnedRowsCacheRef = React.useRef<GridRowPinningInternalCache | null>(null);
+
   const addPinnedRows = React.useCallback<GridPipeProcessor<'hydrateRows'>>(
     (groupingParams) => {
       const pinnedRowsCache = apiRef.current.caches.pinnedRows || {};
+      const prevPinnedRowsCache = prevPinnedRowsCacheRef.current;
+      prevPinnedRowsCacheRef.current = pinnedRowsCache;
 
       let newGroupingParams: GridHydrateRowsValue = {
         ...groupingParams,
@@ -105,6 +109,22 @@ export const useGridRowPinningPreProcessors = (
         },
       };
 
+      if (prevPinnedRowsCache) {
+        const pinnedRowCleanup = (rowId: GridRowId) => {
+          const node = newGroupingParams.tree[rowId];
+          if (node?.type === 'pinnedRow') {
+            delete newGroupingParams.tree[rowId];
+            delete newGroupingParams.dataRowIdToModelLookup[rowId];
+            delete newGroupingParams.dataRowIdToIdLookup[rowId];
+            delete apiRef.current.caches.rows.dataRowIdToIdLookup[rowId];
+            delete apiRef.current.caches.rows.dataRowIdToModelLookup[rowId];
+          }
+        };
+
+        prevPinnedRowsCache.topIds?.forEach(pinnedRowCleanup);
+        prevPinnedRowsCache.bottomIds?.forEach(pinnedRowCleanup);
+      }
+
       pinnedRowsCache.topIds?.forEach((rowId) => {
         newGroupingParams = addPinnedRow({
           groupingParams: newGroupingParams,