Merge branch 'master' into typing-cancelable-events

.circleci/config.yml

@@ -77,6 +77,13 @@ commands:
                 name: Restore playwright cache
                 keys:
                   - v6-playwright-{{ arch }}-{{ checksum "/tmp/playwright_info.json" }}
+      - when:
+          condition:
+            not: << parameters.browsers >>
+          steps:
+            # See https://stackoverflow.com/a/73411601
+            - run: corepack enable --install-directory ~/bin
+
       - run:
           name: View install environment
           command: |
@@ -193,7 +200,7 @@ jobs:
   test_browser:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.43.1-focal
+      - image: mcr.microsoft.com/playwright:v1.44.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -226,7 +233,7 @@ jobs:
   test_e2e:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.43.1-focal
+      - image: mcr.microsoft.com/playwright:v1.44.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -239,7 +246,7 @@ jobs:
   test_e2e_website:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.43.1-focal
+      - image: mcr.microsoft.com/playwright:v1.44.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -254,7 +261,7 @@ jobs:
   test_regressions:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.43.1-focal
+      - image: mcr.microsoft.com/playwright:v1.44.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -270,7 +277,7 @@ jobs:
   run_danger:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.43.1-focal
+      - image: mcr.microsoft.com/playwright:v1.44.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:

.codesandbox/ci.json

@@ -11,6 +11,7 @@
     "packages/x-date-pickers",
     "packages/x-date-pickers-pro",
     "packages/x-charts",
+    "packages/x-charts-pro",
     "packages/x-tree-view"
   ],
   "publishDirectory": {
@@ -22,6 +23,7 @@
     "@mui/x-date-pickers": "packages/x-date-pickers/build",
     "@mui/x-date-pickers-pro": "packages/x-date-pickers-pro/build",
     "@mui/x-charts": "packages/x-charts/build",
+    "@mui/x-charts-pro": "packages/x-charts-pro/build",
     "@mui/x-tree-view": "packages/x-tree-view/build",
     "@mui/x-tree-view-pro": "packages/x-tree-view-pro/build"
   },

.eslintrc.js

@@ -1,6 +1,36 @@
 const baseline = require('@mui/monorepo/.eslintrc');
 const path = require('path');
 
+// Enable React Compiler Plugin rules globally
+const ENABLE_REACT_COMPILER_PLUGIN = process.env.ENABLE_REACT_COMPILER_PLUGIN ?? false;
+
+// Enable React Compiler Plugin rules per package
+const ENABLE_REACT_COMPILER_PLUGIN_CHARTS =
+  process.env.ENABLE_REACT_COMPILER_PLUGIN_CHARTS ?? false;
+const ENABLE_REACT_COMPILER_PLUGIN_DATA_GRID =
+  process.env.ENABLE_REACT_COMPILER_PLUGIN_DATA_GRID ?? false;
+const ENABLE_REACT_COMPILER_PLUGIN_DATE_PICKERS =
+  process.env.ENABLE_REACT_COMPILER_PLUGIN_DATE_PICKERS ?? false;
+const ENABLE_REACT_COMPILER_PLUGIN_TREE_VIEW =
+  process.env.ENABLE_REACT_COMPILER_PLUGIN_TREE_VIEW ?? false;
+
+const isAnyReactCompilerPluginEnabled =
+  ENABLE_REACT_COMPILER_PLUGIN ||
+  ENABLE_REACT_COMPILER_PLUGIN_CHARTS ||
+  ENABLE_REACT_COMPILER_PLUGIN_DATA_GRID ||
+  ENABLE_REACT_COMPILER_PLUGIN_DATE_PICKERS ||
+  ENABLE_REACT_COMPILER_PLUGIN_TREE_VIEW;
+
+const addReactCompilerRule = (packagesNames, isEnabled) =>
+  !isEnabled
+    ? []
+    : packagesNames.map((packageName) => ({
+        files: [`packages/${packageName}/src/**/*{.ts,.tsx,.js}`],
+        rules: {
+          'react-compiler/react-compiler': 'error',
+        },
+      }));
+
 // TODO move this helper to @mui/monorepo/.eslintrc
 // It needs to know about the parent "no-restricted-imports" to not override them.
 const buildPackageRestrictedImports = (packageName, root, allowRootImports = true) => [
@@ -55,6 +85,10 @@ const buildPackageRestrictedImports = (packageName, root, allowRootImports = tru
                     name: '@mui/x-charts',
                     message: 'Use deeper import instead',
                   },
+                  {
+                    name: '@mui/x-charts-pro',
+                    message: 'Use deeper import instead',
+                  },
                   {
                     name: '@mui/x-codemod',
                     message: 'Use deeper import instead',
@@ -85,7 +119,11 @@ const buildPackageRestrictedImports = (packageName, root, allowRootImports = tru
 
 module.exports = {
   ...baseline,
-  plugins: [...baseline.plugins, 'eslint-plugin-jsdoc'],
+  plugins: [
+    ...baseline.plugins,
+    'eslint-plugin-jsdoc',
+    ...(isAnyReactCompilerPluginEnabled ? ['eslint-plugin-react-compiler'] : []),
+  ],
   settings: {
     'import/resolver': {
       webpack: {
@@ -99,6 +137,7 @@ module.exports = {
    */
   rules: {
     ...baseline.rules,
+    ...(ENABLE_REACT_COMPILER_PLUGIN ? { 'react-compiler/react-compiler': 'error' } : {}),
     // TODO move to @mui/monorepo/.eslintrc, codebase is moving away from default exports
     'import/prefer-default-export': 'off',
     // TODO move rule into the main repo once it has upgraded
@@ -207,6 +246,7 @@ module.exports = {
       },
     },
     ...buildPackageRestrictedImports('@mui/x-charts', 'x-charts', false),
+    ...buildPackageRestrictedImports('@mui/x-charts-pro', 'x-charts-pro', false),
     ...buildPackageRestrictedImports('@mui/x-codemod', 'x-codemod', false),
     ...buildPackageRestrictedImports('@mui/x-data-grid', 'x-data-grid'),
     ...buildPackageRestrictedImports('@mui/x-data-grid-pro', 'x-data-grid-pro'),
@@ -217,5 +257,19 @@ module.exports = {
     ...buildPackageRestrictedImports('@mui/x-tree-view', 'x-tree-view', false),
     ...buildPackageRestrictedImports('@mui/x-tree-view-pro', 'x-tree-view-pro', false),
     ...buildPackageRestrictedImports('@mui/x-license', 'x-license'),
+
+    ...addReactCompilerRule(['x-charts', 'x-charts-pro'], ENABLE_REACT_COMPILER_PLUGIN_CHARTS),
+    ...addReactCompilerRule(
+      ['x-data-grid', 'x-data-grid-pro', 'x-data-grid-premium', 'x-data-grid-generator'],
+      ENABLE_REACT_COMPILER_PLUGIN_DATA_GRID,
+    ),
+    ...addReactCompilerRule(
+      ['x-date-pickers', 'x-date-pickers-pro'],
+      ENABLE_REACT_COMPILER_PLUGIN_DATE_PICKERS,
+    ),
+    ...addReactCompilerRule(
+      ['x-tree-view', 'x-tree-view-pro'],
+      ENABLE_REACT_COMPILER_PLUGIN_TREE_VIEW,
+    ),
   ],
 };

.github/workflows/add-release-reviewers.yml

@@ -1,9 +1,10 @@
 name: Add reviewers to release PRs
 
 on:
-  pull_request_target:
-    branches: ['master', 'next']
-    types: ['labeled']
+  # pull_request_target:
+  #   branches: ['master', 'next']
+  #   types: ['labeled']
+  workflow_dispatch:
 
 permissions: {}
 

.github/workflows/cherry-pick-master-to-v6.yml

@@ -18,7 +18,7 @@ jobs:
     if: ${{ contains(github.event.pull_request.labels.*.name, 'needs cherry-pick') && github.event.pull_request.merged == true }}
     steps:
       - name: Checkout
-        uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
         with:
           fetch-depth: 0
       - name: Cherry pick and create the new PR

.github/workflows/cherry-pick-next-to-master.yml

@@ -18,7 +18,7 @@ jobs:
     if: ${{ contains(github.event.pull_request.labels.*.name, 'needs cherry-pick') && github.event.pull_request.merged == true }}
     steps:
       - name: Checkout
-        uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
         with:
           fetch-depth: 0
       - name: Cherry pick and create the new PR

.github/workflows/codeql.yml

@@ -16,10 +16,10 @@ jobs:
       security-events: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@d39d31e687223d841ef683f52467bd88e9b21c14 # v3.25.3
+        uses: github/codeql-action/init@2e230e8fe0ad3a14a340ad0815ddb96d599d2aff # v3.25.8
         with:
           languages: typescript
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -29,4 +29,4 @@ jobs:
           # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
           # queries: security-extended,security-and-quality
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@d39d31e687223d841ef683f52467bd88e9b21c14 # v3.25.3
+        uses: github/codeql-action/analyze@2e230e8fe0ad3a14a340ad0815ddb96d599d2aff # v3.25.8

.github/workflows/l10n.yml

@@ -17,10 +17,9 @@ jobs:
       issues: write
     steps:
       - run: echo "${{ github.actor }}"
-      - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
-      - uses: pnpm/action-setup@a3252b78c470c02df07e9d59298aecedc3ccdd6d #v3.0.0
+      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
         with:
-          version: 8
           run_install: false
       - name: Use Node.js 20.x
         uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2

.github/workflows/maintenance.yml

@@ -25,7 +25,7 @@ jobs:
       pull-requests: write
     steps:
       - name: check if prs are dirty
-        uses: eps1lon/actions-label-merge-conflict@e62d7a53ff8be8b97684bffb6cfbbf3fc1115e2e # v3.0.0
+        uses: eps1lon/actions-label-merge-conflict@1b1b1fcde06a9b3d089f3464c96417961dde1168 # v3.0.2
         with:
           dirtyLabel: 'PR: out-of-date'
           repoToken: '${{ secrets.GITHUB_TOKEN }}'

.github/workflows/scorecards.yml

@@ -23,12 +23,12 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
         with:
           persist-credentials: false
 
       - name: Run analysis
-        uses: ossf/scorecard-action@0864cf19026789058feabb7e87baa5f140aac736 # v2.3.1
+        uses: ossf/scorecard-action@dc50aa9510b46c811795eb24b2f1ba02a914e534 # v2.3.3
         with:
           results_file: results.sarif
           results_format: sarif
@@ -44,6 +44,6 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@d39d31e687223d841ef683f52467bd88e9b21c14 # v3.25.3
+        uses: github/codeql-action/upload-sarif@2e230e8fe0ad3a14a340ad0815ddb96d599d2aff # v3.25.8
         with:
           sarif_file: results.sarif

.github/workflows/vale-action.yml

@@ -12,7 +12,7 @@ jobs:
       contents: read
       pull-requests: write
     steps:
-      - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
       - uses: errata-ai/vale-action@38bf078c328061f59879b347ca344a718a736018 # v2.1.0
         with:
           reporter: github-pr-review

.gitignore

@@ -13,6 +13,7 @@ __diff_output__
 /docs/.next
 /docs/pages/playground/*
 !/docs/pages/playground/tsconfig.json
+/docs/.env.local
 /docs/export
 /test/regressions/screenshots
 build

.mocharc.js

@@ -9,6 +9,7 @@ module.exports = {
     'docs/.next/**',
     // x-charts requires 'tsx/cjs' which conflict with the babel date-fns override for picker tests
     'packages/x-charts/**',
+    'packages/x-charts-pro/**',
   ],
   recursive: true,
   timeout: (process.env.CIRCLECI === 'true' ? 5 : 2) * 1000, // Circle CI has low-performance CPUs.