mui · alexfauquette · Jan 10, 2024 · Jan 3, 2024 · Jan 3, 2024 · Jan 3, 2024
diff --git a/babel.config.js b/babel.config.js
@@ -17,6 +17,7 @@ const defaultAlias = {
   '@mui/x-charts': resolveAliasPath('./packages/x-charts/src'),
   '@mui/x-tree-view': resolveAliasPath('./packages/x-tree-view/src'),
   '@mui/markdown': '@mui/monorepo/packages/markdown',
+  '@mui/material-nextjs': '@mui/monorepo/packages/mui-material-nextjs/src',
   '@mui-internal/api-docs-builder': '@mui/monorepo/packages/api-docs-builder',
   '@mui-internal/docs-utilities': '@mui/monorepo/packages/docs-utilities',
   '@mui-internal/test-utils': resolveAliasPath(

diff --git a/docs/.link-check-errors.txt b/docs/.link-check-errors.txt
@@ -4,8 +4,10 @@ Broken links found by `yarn docs:link-check` that exist:
 - https://mui.com/base-ui/react-portal/components-api/
 - https://mui.com/blog/material-ui-v4-is-out/#premium-themes-store-✨
 - https://mui.com/material-ui/api/button/#props
+- https://mui.com/material-ui/api/input-base/#InputBase-prop-disableInjectingGlobalStyles
 - https://mui.com/material-ui/api/menu-item/#css
 - https://mui.com/material-ui/api/popper/#props
+- https://mui.com/material-ui/discover-more/roadmap/#priorities
 - https://mui.com/material-ui/guides/api/#native-properties
 - https://mui.com/size-snapshot/
 - https://mui.com/system/styles/api/#creategenerateclassname-options-class-name-generator
@@ -16,4 +18,3 @@ Broken links found by `yarn docs:link-check` that exist:
 - https://mui.com/x/api/data-grid/data-grid/#props
 - https://mui.com/x/api/data-grid/data-grid/#slots
 - https://mui.com/x/api/date-pickers/date-picker/#slots
-- https://mui.com/x/react-charts/#getting-started
diff --git a/docs/babel.config.js b/docs/babel.config.js
@@ -14,6 +14,7 @@ const alias = {
   '@mui/docs': '../node_modules/@mui/monorepo/packages/mui-docs/src',
   '@mui/markdown': '../node_modules/@mui/monorepo/packages/markdown',
   '@mui/monorepo': '../node_modules/@mui/monorepo',
+  '@mui/material-nextjs': '../node_modules/@mui/monorepo/packages/mui-material-nextjs/src',
   '@mui-internal/api-docs-builder': '../node_modules/@mui/monorepo/packages/api-docs-builder',
   '@mui-internal/docs-utilities': '../node_modules/@mui/monorepo/packages/docs-utilities',
   docs: '../node_modules/@mui/monorepo/docs',

diff --git a/docs/data/charts-component-api-pages.ts b/docs/data/charts-component-api-pages.ts
@@ -1,24 +1,70 @@
 import type { MuiPage } from '@mui/monorepo/docs/src/MuiPage';
 
-export default [
-  { pathname: '/x/api/charts/area-element', title: 'AreaElement' },
-  { pathname: '/x/api/charts/area-plot', title: 'AreaPlot' },
-  { pathname: '/x/api/charts/bar-chart', title: 'BarChart' },
-  { pathname: '/x/api/charts/bar-element', title: 'BarElement' },
-  { pathname: '/x/api/charts/bar-plot', title: 'BarPlot' },
-  { pathname: '/x/api/charts/cartesian-context-provider', title: 'CartesianContextProvider' },
-  { pathname: '/x/api/charts/charts-axis', title: 'ChartsAxis' },
-  { pathname: '/x/api/charts/charts-axis-highlight', title: 'ChartsAxisHighlight' },
-  { pathname: '/x/api/charts/charts-axis-tooltip-content', title: 'ChartsAxisTooltipContent' },
-  { pathname: '/x/api/charts/charts-clip-path', title: 'ChartsClipPath' },
-  { pathname: '/x/api/charts/charts-item-tooltip-content', title: 'ChartsItemTooltipContent' },
-  { pathname: '/x/api/charts/charts-legend', title: 'ChartsLegend' },
-  { pathname: '/x/api/charts/charts-reference-line', title: 'ChartsReferenceLine' },
-  { pathname: '/x/api/charts/charts-text', title: 'ChartsText' },
-  { pathname: '/x/api/charts/charts-tooltip', title: 'ChartsTooltip' },
-  { pathname: '/x/api/charts/charts-voronoi-handler', title: 'ChartsVoronoiHandler' },
-  { pathname: '/x/api/charts/charts-x-axis', title: 'ChartsXAxis' },
-  { pathname: '/x/api/charts/charts-y-axis', title: 'ChartsYAxis' },
+const apiPages: MuiPage[] = [
+  {
+    pathname: '/x/api/charts/area-element',
+    title: 'AreaElement',
+  },
+  {
+    pathname: '/x/api/charts/area-plot',
+    title: 'AreaPlot',
+  },
+  {
+    pathname: '/x/api/charts/bar-chart',
+    title: 'BarChart',
+  },
+  {
+    pathname: '/x/api/charts/bar-element',
+    title: 'BarElement',
+  },
+  {
+    pathname: '/x/api/charts/bar-plot',
+    title: 'BarPlot',
+  },
+  {
+    pathname: '/x/api/charts/charts-axis',
+    title: 'ChartsAxis',
+  },
+  {
+    pathname: '/x/api/charts/charts-axis-highlight',
+    title: 'ChartsAxisHighlight',
+  },
+  {
+    pathname: '/x/api/charts/charts-axis-tooltip-content',
+    title: 'ChartsAxisTooltipContent',
+  },
+  {
+    pathname: '/x/api/charts/charts-clip-path',
+    title: 'ChartsClipPath',
+  },
+  {
+    pathname: '/x/api/charts/charts-item-tooltip-content',
+    title: 'ChartsItemTooltipContent',
+  },
+  {
+    pathname: '/x/api/charts/charts-legend',
+    title: 'ChartsLegend',
+  },
+  {
+    pathname: '/x/api/charts/charts-reference-line',
+    title: 'ChartsReferenceLine',
+  },
+  {
+    pathname: '/x/api/charts/charts-surface',
+    title: 'ChartsSurface',
+  },
+  {
+    pathname: '/x/api/charts/charts-text',
+    title: 'ChartsText',
+  },
+  {
+    pathname: '/x/api/charts/charts-tooltip',
+    title: 'ChartsTooltip',
+  },
+  {
+    pathname: '/x/api/charts/charts-voronoi-handler',
+    title: 'ChartsVoronoiHandler',
+  },
   {
     pathname: '/x/api/charts/default-charts-axis-tooltip-content',
     title: 'DefaultChartsAxisTooltipContent',
@@ -27,22 +73,73 @@ export default [
     pathname: '/x/api/charts/default-charts-item-tooltip-content',
     title: 'DefaultChartsItemTooltipContent',
   },
-  { pathname: '/x/api/charts/drawing-provider', title: 'DrawingProvider' },
-  { pathname: '/x/api/charts/line-chart', title: 'LineChart' },
-  { pathname: '/x/api/charts/line-element', title: 'LineElement' },
-  { pathname: '/x/api/charts/line-highlight-element', title: 'LineHighlightElement' },
-  { pathname: '/x/api/charts/line-highlight-plot', title: 'LineHighlightPlot' },
-  { pathname: '/x/api/charts/line-plot', title: 'LinePlot' },
-  { pathname: '/x/api/charts/mark-element', title: 'MarkElement' },
-  { pathname: '/x/api/charts/mark-plot', title: 'MarkPlot' },
-  { pathname: '/x/api/charts/pie-arc', title: 'PieArc' },
-  { pathname: '/x/api/charts/pie-arc-label', title: 'PieArcLabel' },
-  { pathname: '/x/api/charts/pie-arc-label-plot', title: 'PieArcLabelPlot' },
-  { pathname: '/x/api/charts/pie-arc-plot', title: 'PieArcPlot' },
-  { pathname: '/x/api/charts/pie-chart', title: 'PieChart' },
-  { pathname: '/x/api/charts/pie-plot', title: 'PiePlot' },
-  { pathname: '/x/api/charts/scatter', title: 'Scatter' },
-  { pathname: '/x/api/charts/scatter-chart', title: 'ScatterChart' },
-  { pathname: '/x/api/charts/scatter-plot', title: 'ScatterPlot' },
-  { pathname: '/x/api/charts/spark-line-chart', title: 'SparkLineChart' },
-] as MuiPage[];
+  {
+    pathname: '/x/api/charts/line-chart',
+    title: 'LineChart',
+  },
+  {
+    pathname: '/x/api/charts/line-element',
+    title: 'LineElement',
+  },
+  {
+    pathname: '/x/api/charts/line-highlight-element',
+    title: 'LineHighlightElement',
+  },
+  {
+    pathname: '/x/api/charts/line-highlight-plot',
+    title: 'LineHighlightPlot',
+  },
+  {
+    pathname: '/x/api/charts/line-plot',
+    title: 'LinePlot',
+  },
+  {
+    pathname: '/x/api/charts/mark-element',
+    title: 'MarkElement',
+  },
+  {
+    pathname: '/x/api/charts/mark-plot',
+    title: 'MarkPlot',
+  },
+  {
+    pathname: '/x/api/charts/pie-arc',
+    title: 'PieArc',
+  },
+  {
+    pathname: '/x/api/charts/pie-arc-label',
+    title: 'PieArcLabel',
+  },
+  {
+    pathname: '/x/api/charts/pie-arc-label-plot',
+    title: 'PieArcLabelPlot',
+  },
+  {
+    pathname: '/x/api/charts/pie-arc-plot',
+    title: 'PieArcPlot',
+  },
+  {
+    pathname: '/x/api/charts/pie-chart',
+    title: 'PieChart',
+  },
+  {
+    pathname: '/x/api/charts/pie-plot',
+    title: 'PiePlot',
+  },
+  {
+    pathname: '/x/api/charts/scatter',
+    title: 'Scatter',
+  },
+  {
+    pathname: '/x/api/charts/scatter-chart',
+    title: 'ScatterChart',
+  },
+  {
+    pathname: '/x/api/charts/scatter-plot',
+    title: 'ScatterPlot',
+  },
+  {
+    pathname: '/x/api/charts/spark-line-chart',
+    title: 'SparkLineChart',
+  },
+];
+export default apiPages;
diff --git a/docs/data/charts/areas-demo/areas-demo.md b/docs/data/charts/areas-demo/areas-demo.md
@@ -1,5 +1,6 @@
 ---
 title: Charts - Areas demonstration
+components: LineChart, LineElement, LineHighlightElement, LineHighlightPlot, LinePlot, MarkElement, MarkPlot, AreaElement, AreaPlot
 ---
 
 # Charts - Areas demonstration

diff --git a/docs/data/charts/axis/axis.md b/docs/data/charts/axis/axis.md
@@ -1,5 +1,6 @@
 ---
 title: Charts - Axis
+components: ChartsAxis, ChartsReferenceLine, ChartsText
 ---
 
 # Charts - Axis

diff --git a/docs/data/charts/bar-demo/bar-demo.md b/docs/data/charts/bar-demo/bar-demo.md
@@ -1,5 +1,6 @@
 ---
 title: Charts - Bar demonstration
+components: BarChart, BarElement, BarPlot
 ---
 
 # Charts - Bar demonstration

diff --git a/docs/data/charts/bars/bars.md b/docs/data/charts/bars/bars.md
@@ -1,5 +1,6 @@
 ---
 title: React Bar chart
+components: BarChart, BarElement, BarPlot
 ---
 
 # Charts - Bars

diff --git a/docs/data/charts/components/components.md b/docs/data/charts/components/components.md
@@ -1,5 +1,6 @@
 ---
 title: Charts - Custom components
+components: ChartsClipPath, ChartsSurface, CartesianContextProvider, DrawingProvider, HighlightProvider, InteractionProvider, SeriesContextProvider
 ---
 
 # Charts - Custom components

diff --git a/docs/data/charts/legend/legend.md b/docs/data/charts/legend/legend.md
@@ -1,5 +1,6 @@
 ---
 title: Charts - Legend
+components: ChartsLegend, ChartsText
 ---
 
 # Charts - Legend

diff --git a/docs/data/charts/line-demo/line-demo.md b/docs/data/charts/line-demo/line-demo.md
@@ -1,5 +1,6 @@
 ---
 title: Charts - Line demonstration
+components: LineChart, LineElement, LineHighlightElement, LineHighlightPlot, LinePlot, MarkElement, MarkPlot
 ---
 
 # Charts - Line demonstration

diff --git a/docs/data/charts/lines/lines.md b/docs/data/charts/lines/lines.md
@@ -1,5 +1,6 @@
 ---
 title: React Line chart
+components: LineChart, LineElement, LineHighlightElement, LineHighlightPlot, LinePlot, MarkElement, MarkPlot, AreaElement, AreaPlot
 ---
 
 # Charts - Lines

diff --git a/docs/data/charts/pie-demo/pie-demo.md b/docs/data/charts/pie-demo/pie-demo.md
@@ -1,5 +1,6 @@
 ---
 title: Charts - Pie demonstration
+components: PieArc, PieArcLabel, PieArcLabelPlot, PieArcPlot, PieChart, PiePlot
 ---
 
 # Charts - Pie demonstration

diff --git a/docs/data/charts/pie/pie.md b/docs/data/charts/pie/pie.md
@@ -1,5 +1,6 @@
 ---
 title: React Pie chart
+components: PieArc, PieArcLabel, PieArcLabelPlot, PieArcPlot, PieChart, PiePlot
 ---
 
 # Charts - Pie

diff --git a/docs/data/charts/scatter-demo/scatter-demo.md b/docs/data/charts/scatter-demo/scatter-demo.md
@@ -1,5 +1,6 @@
 ---
 title: Charts - Scatter demonstration
+components: Scatter, ScatterChart, ScatterPlot, ChartsVoronoiHandler
 ---
 
 # Charts - Scatter demonstration

diff --git a/docs/data/charts/scatter/scatter.md b/docs/data/charts/scatter/scatter.md
@@ -1,5 +1,6 @@
 ---
 title: React Scatter chart
+components: Scatter, ScatterChart, ScatterPlot, ChartsVoronoiHandler
 ---
 
 # Charts - Scatter

diff --git a/docs/data/charts/sparkline/sparkline.md b/docs/data/charts/sparkline/sparkline.md
@@ -1,5 +1,6 @@
 ---
 title: React Sparkline chart
+components: SparkLineChart
 ---
 
 # Charts - Sparkline

diff --git a/docs/data/charts/tooltip/tooltip.md b/docs/data/charts/tooltip/tooltip.md
@@ -1,5 +1,6 @@
 ---
 title: Charts - Tooltip
+components: ChartsAxisTooltipContent, ChartsItemTooltipContent, ChartsTooltip, DefaultChartsAxisTooltipContent, DefaultChartsItemTooltipContent, ChartsAxisHighlight
 ---
 
 # Charts - Tooltip

diff --git a/docs/data/data-grid-component-api-pages.ts b/docs/data/data-grid-component-api-pages.ts
@@ -1,10 +1,31 @@
 import type { MuiPage } from '@mui/monorepo/docs/src/MuiPage';
 
-export default [
-  { pathname: '/x/api/data-grid/data-grid', title: 'DataGrid' },
-  { pathname: '/x/api/data-grid/data-grid-premium', title: 'DataGridPremium', plan: 'premium' },
-  { pathname: '/x/api/data-grid/data-grid-pro', title: 'DataGridPro', plan: 'pro' },
-  { pathname: '/x/api/data-grid/grid-filter-form', title: 'GridFilterForm' },
-  { pathname: '/x/api/data-grid/grid-filter-panel', title: 'GridFilterPanel' },
-  { pathname: '/x/api/data-grid/grid-toolbar-quick-filter', title: 'GridToolbarQuickFilter' },
-] as MuiPage[];
+const apiPages: MuiPage[] = [
+  {
+    pathname: '/x/api/data-grid/data-grid',
+    title: 'DataGrid',
+  },
+  {
+    pathname: '/x/api/data-grid/data-grid-premium',
+    title: 'DataGridPremium',
+    plan: 'premium',
+  },
+  {
+    pathname: '/x/api/data-grid/data-grid-pro',
+    title: 'DataGridPro',
+    plan: 'pro',
+  },
+  {
+    pathname: '/x/api/data-grid/grid-filter-form',
+    title: 'GridFilterForm',
+  },
+  {
+    pathname: '/x/api/data-grid/grid-filter-panel',
+    title: 'GridFilterPanel',
+  },
+  {
+    pathname: '/x/api/data-grid/grid-toolbar-quick-filter',
+    title: 'GridToolbarQuickFilter',
+  },
+];
+export default apiPages;
diff --git a/docs/data/data-grid/demo/FullFeaturedDemo.js b/docs/data/data-grid/demo/FullFeaturedDemo.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
 import {
   DataGridPro,
   GRID_CHECKBOX_SELECTION_FIELD,
@@ -133,7 +132,7 @@ const AntDesignStyledDataGridPro = styled(DataGridPro)(({ theme }) => ({
   },
 }));
 
-const StyledBox = styled(Box)(({ theme }) => ({
+const StyledBox = styled('div')(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   height: 600,

diff --git a/docs/data/data-grid/demo/FullFeaturedDemo.tsx b/docs/data/data-grid/demo/FullFeaturedDemo.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
 import {
   DataGridPro,
   GRID_CHECKBOX_SELECTION_FIELD,
@@ -133,7 +132,7 @@ const AntDesignStyledDataGridPro = styled(DataGridPro)(({ theme }) => ({
   },
 }));
 
-const StyledBox = styled(Box)(({ theme }) => ({
+const StyledBox = styled('div')(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   height: 600,

diff --git a/docs/data/data-grid/editing/ValidateServerNameGrid.js b/docs/data/data-grid/editing/ValidateServerNameGrid.js
@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
 import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
 import { DataGrid, GridEditInputCell } from '@mui/x-data-grid';
 
-const StyledBox = styled(Box)(({ theme }) => ({
+const StyledBox = styled('div')(({ theme }) => ({
   height: 400,
   width: '100%',
   '& .MuiDataGrid-cell--editable': {