Merge branch 'master' into pickers-useRtl

.github/workflows/codeql.yml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@9fdb3e49720b44c48891d036bb502feb25684276 # v3.25.6
+        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@9fdb3e49720b44c48891d036bb502feb25684276 # v3.25.6
+        uses: github/codeql-action/analyze@2e230e8fe0ad3a14a340ad0815ddb96d599d2aff # v3.25.8

.github/workflows/l10n.yml

@@ -18,9 +18,8 @@ jobs:
     steps:
       - run: echo "${{ github.actor }}"
       - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
-      - uses: pnpm/action-setup@a3252b78c470c02df07e9d59298aecedc3ccdd6d #v3.0.0
+      - 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@6d74047dcef155976a15e4a124dde2c7fe0c5522 # v3.0.1
+        uses: eps1lon/actions-label-merge-conflict@1b1b1fcde06a9b3d089f3464c96417961dde1168 # v3.0.2
         with:
           dirtyLabel: 'PR: out-of-date'
           repoToken: '${{ secrets.GITHUB_TOKEN }}'

.github/workflows/scorecards.yml

@@ -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@9fdb3e49720b44c48891d036bb502feb25684276 # v3.25.6
+        uses: github/codeql-action/upload-sarif@2e230e8fe0ad3a14a340ad0815ddb96d599d2aff # v3.25.8
         with:
           sarif_file: results.sarif

.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

docs/data/charts/bar-demo/PositiveAndNegativeBarChart.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { AxisConfig } from '@mui/x-charts/models';
 
 const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
 const pData = [2400, 1398, -9800, 3908, 4800, -3800, 4300];
@@ -34,7 +33,7 @@ export default function PositiveAndNegativeBarChart() {
         {
           data: xLabels,
           scaleType: 'band',
-        } as Omit<AxisConfig, 'id'>,
+        },
       ]}
       yAxis={[{ max: 10000 }]}
     />

docs/data/data-grid/filtering/QuickFilteringExcludeHiddenColumns.js

@@ -1,74 +1,90 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { DataGrid, GridToolbar } from '@mui/x-data-grid';
-import { randomTraderName, randomEmail } from '@mui/x-data-grid-generator';
-import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { DataGrid, GridToolbar } from '@mui/x-data-grid';
+import { useMovieData } from '@mui/x-data-grid-generator';
 
-const columns = [
-  { field: 'id', headerName: 'ID', width: 80 },
-  { field: 'name', headerName: 'Name', width: 150 },
-  { field: 'email', headerName: 'Email', width: 150 },
-  { field: 'age', headerName: 'Age', type: 'number' },
-];
-
-const rows = [
-  { id: 1, name: randomTraderName(), email: randomEmail(), age: 25 },
-  { id: 2, name: randomTraderName(), email: randomEmail(), age: 36 },
-  { id: 3, name: randomTraderName(), email: randomEmail(), age: 19 },
-  { id: 4, name: randomTraderName(), email: randomEmail(), age: 28 },
-  { id: 5, name: randomTraderName(), email: randomEmail(), age: 23 },
-  { id: 6, name: randomTraderName(), email: randomEmail(), age: 27 },
-  { id: 7, name: randomTraderName(), email: randomEmail(), age: 18 },
-  { id: 8, name: randomTraderName(), email: randomEmail(), age: 31 },
-  { id: 9, name: randomTraderName(), email: randomEmail(), age: 24 },
-  { id: 10, name: randomTraderName(), email: randomEmail(), age: 35 },
-];
+const VISIBLE_FIELDS = ['title', 'company', 'director', 'year', 'cinematicUniverse'];
 
 export default function QuickFilteringExcludeHiddenColumns() {
+  const data = useMovieData();
+
+  const columns = React.useMemo(
+    () => data.columns.filter((column) => VISIBLE_FIELDS.includes(column.field)),
+    [data.columns],
+  );
+
   const [filterModel, setFilterModel] = React.useState({
     items: [],
     quickFilterExcludeHiddenColumns: true,
-    quickFilterValues: ['1'],
+    quickFilterValues: ['War'],
   });
 
-  const [columnVisibilityModel, setColumnVisibilityModel] = React.useState({});
+  const [columnVisibilityModel, setColumnVisibilityModel] = React.useState({
+    company: false,
+  });
+
+  const handleFilterModelChange = React.useCallback(
+    (newModel) => setFilterModel(newModel),
+    [],
+  );
+
+  const handleColumnVisibilityChange = React.useCallback(
+    (newModel) => setColumnVisibilityModel(newModel),
+    [],
+  );
+
+  const toggleYearColumn = React.useCallback(
+    (event) => setColumnVisibilityModel(() => ({ company: event.target.checked })),
+    [],
+  );
+
+  const toggleExcludeHiddenColumns = React.useCallback(
+    (event) =>
+      setFilterModel((model) => ({
+        ...model,
+        quickFilterExcludeHiddenColumns: event.target.checked,
+      })),
+    [],
+  );
 
   return (
     <Box sx={{ width: 1 }}>
       <FormControlLabel
-        checked={columnVisibilityModel.id !== false}
-        onChange={(event) =>
-          setColumnVisibilityModel(() => ({ id: event.target.checked }))
-        }
+        checked={columnVisibilityModel.year}
+        onChange={toggleYearColumn}
         control={<Switch color="primary" />}
-        label="Show ID column"
+        label="Show company column"
       />
       <FormControlLabel
         checked={filterModel.quickFilterExcludeHiddenColumns}
-        onChange={(event) =>
-          setFilterModel((model) => ({
-            ...model,
-            quickFilterExcludeHiddenColumns: event.target.checked,
-          }))
-        }
+        onChange={toggleExcludeHiddenColumns}
         control={<Switch color="primary" />}
         label="Exclude hidden columns"
       />
       <Box sx={{ height: 400 }}>
         <DataGrid
+          {...data}
           columns={columns}
-          rows={rows}
+          initialState={{
+            filter: {
+              filterModel,
+            },
+          }}
           disableColumnFilter
+          disableColumnSelector
           disableDensitySelector
           slots={{ toolbar: GridToolbar }}
+          slotProps={{
+            toolbar: {
+              showQuickFilter: true,
+            },
+          }}
           filterModel={filterModel}
-          onFilterModelChange={(newModel) => setFilterModel(newModel)}
-          slotProps={{ toolbar: { showQuickFilter: true } }}
+          onFilterModelChange={handleFilterModelChange}
           columnVisibilityModel={columnVisibilityModel}
-          onColumnVisibilityModelChange={(newModel) =>
-            setColumnVisibilityModel(newModel)
-          }
+          onColumnVisibilityModelChange={handleColumnVisibilityChange}
         />
       </Box>
     </Box>

docs/data/data-grid/filtering/QuickFilteringExcludeHiddenColumns.tsx

@@ -1,82 +1,95 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
+import Switch from '@mui/material/Switch';
+import FormControlLabel from '@mui/material/FormControlLabel';
 import {
   DataGrid,
-  GridToolbar,
-  GridRowsProp,
-  GridColDef,
-  GridFilterModel,
   GridColumnVisibilityModel,
+  GridFilterModel,
+  GridToolbar,
 } from '@mui/x-data-grid';
-import { randomTraderName, randomEmail } from '@mui/x-data-grid-generator';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Switch from '@mui/material/Switch';
+import { useMovieData } from '@mui/x-data-grid-generator';
 
-const columns: GridColDef[] = [
-  { field: 'id', headerName: 'ID', width: 80 },
-  { field: 'name', headerName: 'Name', width: 150 },
-  { field: 'email', headerName: 'Email', width: 150 },
-  { field: 'age', headerName: 'Age', type: 'number' },
-];
-
-const rows: GridRowsProp = [
-  { id: 1, name: randomTraderName(), email: randomEmail(), age: 25 },
-  { id: 2, name: randomTraderName(), email: randomEmail(), age: 36 },
-  { id: 3, name: randomTraderName(), email: randomEmail(), age: 19 },
-  { id: 4, name: randomTraderName(), email: randomEmail(), age: 28 },
-  { id: 5, name: randomTraderName(), email: randomEmail(), age: 23 },
-  { id: 6, name: randomTraderName(), email: randomEmail(), age: 27 },
-  { id: 7, name: randomTraderName(), email: randomEmail(), age: 18 },
-  { id: 8, name: randomTraderName(), email: randomEmail(), age: 31 },
-  { id: 9, name: randomTraderName(), email: randomEmail(), age: 24 },
-  { id: 10, name: randomTraderName(), email: randomEmail(), age: 35 },
-];
+const VISIBLE_FIELDS = ['title', 'company', 'director', 'year', 'cinematicUniverse'];
 
 export default function QuickFilteringExcludeHiddenColumns() {
+  const data = useMovieData();
+
+  const columns = React.useMemo(
+    () => data.columns.filter((column) => VISIBLE_FIELDS.includes(column.field)),
+    [data.columns],
+  );
+
   const [filterModel, setFilterModel] = React.useState<GridFilterModel>({
     items: [],
     quickFilterExcludeHiddenColumns: true,
-    quickFilterValues: ['1'],
+    quickFilterValues: ['War'],
   });
 
   const [columnVisibilityModel, setColumnVisibilityModel] =
-    React.useState<GridColumnVisibilityModel>({});
+    React.useState<GridColumnVisibilityModel>({ company: false });
+
+  const handleFilterModelChange = React.useCallback(
+    (newModel: GridFilterModel) => setFilterModel(newModel),
+    [],
+  );
+
+  const handleColumnVisibilityChange = React.useCallback(
+    (newModel: GridColumnVisibilityModel) => setColumnVisibilityModel(newModel),
+    [],
+  );
+
+  const toggleYearColumn = React.useCallback(
+    (event: React.SyntheticEvent) =>
+      setColumnVisibilityModel(() => ({ company: (event.target as any).checked })),
+    [],
+  );
+
+  const toggleExcludeHiddenColumns = React.useCallback(
+    (event: React.SyntheticEvent) =>
+      setFilterModel((model) => ({
+        ...model,
+        quickFilterExcludeHiddenColumns: (event.target as any).checked,
+      })),
+    [],
+  );
 
   return (
     <Box sx={{ width: 1 }}>
       <FormControlLabel
-        checked={columnVisibilityModel.id !== false}
-        onChange={(event) =>
-          setColumnVisibilityModel(() => ({ id: (event.target as any).checked }))
-        }
+        checked={columnVisibilityModel.year}
+        onChange={toggleYearColumn}
         control={<Switch color="primary" />}
-        label="Show ID column"
+        label="Show company column"
       />
       <FormControlLabel
         checked={filterModel.quickFilterExcludeHiddenColumns}
-        onChange={(event) =>
-          setFilterModel((model) => ({
-            ...model,
-            quickFilterExcludeHiddenColumns: (event.target as any).checked,
-          }))
-        }
+        onChange={toggleExcludeHiddenColumns}
         control={<Switch color="primary" />}
         label="Exclude hidden columns"
       />
       <Box sx={{ height: 400 }}>
         <DataGrid
+          {...data}
           columns={columns}
-          rows={rows}
+          initialState={{
+            filter: {
+              filterModel,
+            },
+          }}
           disableColumnFilter
+          disableColumnSelector
           disableDensitySelector
           slots={{ toolbar: GridToolbar }}
+          slotProps={{
+            toolbar: {
+              showQuickFilter: true,
+            },
+          }}
           filterModel={filterModel}
-          onFilterModelChange={(newModel) => setFilterModel(newModel)}
-          slotProps={{ toolbar: { showQuickFilter: true } }}
+          onFilterModelChange={handleFilterModelChange}
           columnVisibilityModel={columnVisibilityModel}
-          onColumnVisibilityModelChange={(newModel) =>
-            setColumnVisibilityModel(newModel)
-          }
+          onColumnVisibilityModelChange={handleColumnVisibilityChange}
         />
       </Box>
     </Box>

docs/data/data-grid/filtering/QuickFilteringGrid.js

@@ -1,16 +1,12 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { DataGrid, GridToolbar } from '@mui/x-data-grid';
-import { useDemoData } from '@mui/x-data-grid-generator';
+import { useMovieData } from '@mui/x-data-grid-generator';
 
-const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
+const VISIBLE_FIELDS = ['title', 'company', 'director', 'year', 'cinematicUniverse'];
 
 export default function QuickFilteringGrid() {
-  const { data } = useDemoData({
-    dataSet: 'Employee',
-    visibleFields: VISIBLE_FIELDS,
-    rowLength: 100,
-  });
+  const data = useMovieData();
 
   // Otherwise filter will be applied on fields such as the hidden column id
   const columns = React.useMemo(

docs/data/data-grid/filtering/QuickFilteringGrid.tsx

@@ -1,16 +1,12 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { DataGrid, GridToolbar } from '@mui/x-data-grid';
-import { useDemoData } from '@mui/x-data-grid-generator';
+import { useMovieData } from '@mui/x-data-grid-generator';
 
-const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
+const VISIBLE_FIELDS = ['title', 'company', 'director', 'year', 'cinematicUniverse'];
 
 export default function QuickFilteringGrid() {
-  const { data } = useDemoData({
-    dataSet: 'Employee',
-    visibleFields: VISIBLE_FIELDS,
-    rowLength: 100,
-  });
+  const data = useMovieData();
 
   // Otherwise filter will be applied on fields such as the hidden column id
   const columns = React.useMemo(