Merge branch 'master' into improve-plPL-locale

docs/.link-check-errors.txt

@@ -1,3 +1,5 @@
 Broken links found by `docs:link-check` that exist:
 
+- https://mui.com/x/react-data-grid/#premium-plan
+- https://mui.com/x/react-data-grid/getting-started/#feature-comparison
 - https://mui.com/x/react-date-pickers/fields/#accessible-dom-structure

docs/data/charts/axis/axis.md

@@ -93,7 +93,7 @@ It can take 3 different values:
 
 - `"nice"` Rounds the domain at human friendly values. It's the default behavior.
 - `"strict"` Sets the domain to the min/max value to display.
-- `([minValue, maxValue]) => [min, max]` Receives the calculated extremums as parameters, and should return the axis domain.
+- `(minValue, maxValue) => { min, max }` Receives the calculated extremums as parameters, and should return the axis domain.
 
 The demo below shows different ways to set the y-axis range.
 They always display the same data, going from -15 to 92, but with different `domainLimit` settings.

docs/data/charts/components/HtmlLegend.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { useLegend } from '@mui/x-charts/hooks';
-import { ChartDataProvider } from '@mui/x-charts/context';
+import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { BarPlot } from '@mui/x-charts/BarChart';
 import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';

docs/data/charts/components/HtmlLegend.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { useLegend } from '@mui/x-charts/hooks';
-import { ChartDataProvider } from '@mui/x-charts/context';
+import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { BarPlot } from '@mui/x-charts/BarChart';
 import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';

docs/data/charts/composition/composition.md

@@ -2,7 +2,7 @@
 title: React Chart composition
 productId: x-charts
 githubLabel: 'component: charts'
-components: ChartContainer, ChartContainerPro, ChartsGrid, ChartDataProvider, ChartsSurface
+components: ChartContainer, ChartContainerPro, ChartsGrid, ChartDataProvider, ChartDataProviderPro, ChartsSurface
 packageName: '@mui/x-charts'
 ---
 

docs/data/charts/legend/LegendClickNoSnap.js

@@ -10,7 +10,7 @@ import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';
 import { ChartsLegend, PiecewiseColorLegend } from '@mui/x-charts/ChartsLegend';
 
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
-import { ChartDataProvider } from '@mui/x-charts/context';
+import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
 
 /** @type {import('@mui/x-charts/PieChart').PieChartProps['series']} */
 const pieSeries = [

docs/data/charts/legend/LegendLabelPositions.js

@@ -5,7 +5,7 @@ import {
   piecewiseColorDefaultLabelFormatter,
   PiecewiseColorLegend,
 } from '@mui/x-charts/ChartsLegend';
-import { ChartDataProvider } from '@mui/x-charts/context';
+import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
 import { ChartsAxesGradients } from '@mui/x-charts/internals';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';

docs/data/charts/legend/LegendLabelPositions.tsx

@@ -6,7 +6,7 @@ import {
   PiecewiseColorLegend,
   PiecewiseLabelFormatterParams,
 } from '@mui/x-charts/ChartsLegend';
-import { ChartDataProvider } from '@mui/x-charts/context';
+import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
 import { ChartsAxesGradients } from '@mui/x-charts/internals';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';

docs/data/charts/line-demo/CustomLineMarks.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { LineChart } from '@mui/x-charts/LineChart';
+
+const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
+const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
+const xLabels = [
+  'Page A',
+  'Page B',
+  'Page C',
+  'Page D',
+  'Page E',
+  'Page F',
+  'Page G',
+];
+
+export default function CustomLineMarks() {
+  return (
+    <LineChart
+      width={500}
+      height={300}
+      series={[
+        {
+          data: pData,
+          label: 'pv',
+          shape: 'cross',
+          showMark: ({ index }) => index % 2 === 0,
+        },
+        {
+          data: uData,
+          label: 'uv',
+          shape: 'diamond',
+          showMark: ({ index }) => index % 2 === 0,
+        },
+      ]}
+      xAxis={[{ scaleType: 'point', data: xLabels }]}
+    />
+  );
+}

docs/data/charts/line-demo/CustomLineMarks.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { LineChart } from '@mui/x-charts/LineChart';
+
+const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
+const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
+const xLabels = [
+  'Page A',
+  'Page B',
+  'Page C',
+  'Page D',
+  'Page E',
+  'Page F',
+  'Page G',
+];
+
+export default function CustomLineMarks() {
+  return (
+    <LineChart
+      width={500}
+      height={300}
+      series={[
+        {
+          data: pData,
+          label: 'pv',
+          shape: 'cross',
+          showMark: ({ index }) => index % 2 === 0,
+        },
+        {
+          data: uData,
+          label: 'uv',
+          shape: 'diamond',
+          showMark: ({ index }) => index % 2 === 0,
+        },
+      ]}
+      xAxis={[{ scaleType: 'point', data: xLabels }]}
+    />
+  );
+}

docs/data/charts/line-demo/TinyLineChart.js

@@ -32,7 +32,7 @@ export default function TinyLineChart() {
         },
         [`& .${markElementClasses.root}`]: {
           stroke: '#8884d8',
-          scale: '0.6',
+          r: 4, // Modify the circle radius
           fill: '#fff',
           strokeWidth: 2,
         },

docs/data/charts/line-demo/TinyLineChart.tsx

@@ -32,7 +32,7 @@ export default function TinyLineChart() {
         },
         [`& .${markElementClasses.root}`]: {
           stroke: '#8884d8',
-          scale: '0.6',
+          r: 4, // Modify the circle radius
           fill: '#fff',
           strokeWidth: 2,
         },

docs/data/charts/line-demo/line-demo.md

@@ -43,3 +43,10 @@ To do so, the `slots.line` is set with a custom components that render the defau
 - The second one is clipped to show predictions (from the limit to the right of the chart) with dash styling.
 
 {{"demo": "LineWithPrediction.js"}}
+
+## CustomLineMarks
+
+Notice that using another shape than "circle" renders a `<path />` instead of the `<circle />` for mark elements.
+This modification implies a small drop of rendering performances (around +50ms to render 1.000 marks).
+
+{{"demo": "CustomLineMarks.js"}}

docs/data/chartsApiPages.ts

@@ -51,6 +51,11 @@ const chartsApiPages: MuiPage[] = [
     pathname: '/x/api/charts/chart-data-provider',
     title: 'ChartDataProvider',
   },
+  {
+    pathname: '/x/api/charts/chart-data-provider-pro',
+    title: 'ChartDataProviderPro',
+    plan: 'pro',
+  },
   {
     pathname: '/x/api/charts/charts-axis',
     title: 'ChartsAxis',

docs/data/data-grid/cells/cells.md

@@ -0,0 +1,70 @@
+# Data Grid - Cells
+
+<p class="description">Learn how to customize the rendered elements and values of a cell.</p>
+
+## Customizing cells
+
+The Data Grid provides several methods for customizing the rendered elements and values of a cell, including `renderCell()`, `valueGetter()`, and `valueFormatter()`.
+This document describes the key differences and specific use cases for each.
+
+### renderCell()
+
+Use the `renderCell()` function to render any element inside of a cell.
+This is the only way to render a React component inside a cell, and also the only way to customize a cell's behavior—for example, by adding a click handler.
+
+Though powerful, it's also expensive in terms of performance, so it should only be used as a last resort when there are no other means for implementing a specific use case.
+
+Here's an example of a cell that uses `renderCell()` to render a button:
+
+```tsx
+const columns: GridColDef[] = [
+  {
+    field: 'date',
+    headerName: 'Year',
+    renderCell: (params: GridRenderCellParams<any, Date>) => (
+      <strong>
+        {params.value.getFullYear()}
+        <Button
+          variant="contained"
+          size="small"
+          style={{ marginLeft: 16 }}
+          tabIndex={params.hasFocus ? 0 : -1}
+        >
+          Open
+        </Button>
+      </strong>
+    ),
+  },
+];
+```
+
+See [Column definition—Rendering cells](/x/react-data-grid/column-definition/#rendering-cells) for more details.
+
+### valueGetter()
+
+Use the `valueGetter()` function to derive a cell's value from the row data.
+This is the the most performant way to customize the contents of a cell, and it does so without altering the row data itself.
+
+Common use cases include:
+
+- Transforming a value (for example, converting a decimal value to a percentage value)
+- Deriving a value from multiple fields (for example, concatenating first name and last name)
+- Deriving a value from a nested field (for example, `user.address.city`)
+
+This function is also used internally in the Data Grid to filter, sort, and render (if `renderCell()` or `valueFormatter()` are not provided).
+
+See [Column definition—Value getter](/x/react-data-grid/column-definition/#value-getter) for more details.
+
+### valueFormatter()
+
+Use the `valueFormatter()` function to format a cell's value (without changing the underlying row data).
+
+Common use cases include:
+
+- Formatting a date to a custom display format
+- Formatting a decimal value to a percentage and appending a `%` sign
+- Formatting a boolean value to `Yes` or `No`
+
+Unlike `valueGetter()`, this function only impacts rendering—_not_ internal calculations like filtering or sorting.
+
+See [Column definition—value formatter](/x/react-data-grid/column-definition/#value-formatter) for more details.