Merge branch 'master' into selection-refacto

mui · Apr 17, 2024 · c52985c · c52985c
2 parents 2c37246 + 55870b4
commit c52985c
Show file tree

Hide file tree

Showing 187 changed files with 3,853 additions and 889 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,92 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.2.0
+
+_Apr 12, 2024_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎨 Make grid colors customizable through the MUI themes API
+- 🌍 Improve French (fr-FR), German (de-DE), and Swedish (sv-SE) locales on the Data Grid and Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/[email protected]`
+
+- [DataGrid] Add missing `api` property to `GridCallbackDetails` (#12742) @sai6855
+- [DataGrid] Do not escape double quotes when copying to clipboard (#12722) @cherniavskii
+- [DataGrid] Fix column vertical border (#12741) @romgrk
+- [DataGrid] Fix invalid date error when filtering `date`/`dateTime` columns (#12709) @cherniavskii
+- [DataGrid] Fix overflow with dynamic row height (#12683) @romgrk
+- [DataGrid] Make colors customizable (#12614) @romgrk
+- [l10n] Improve French (fr-FR) locale (#12755) @derek-0000
+- [l10n] Improve German (de-DE) locale (#12752) @Jens-Schoen
+- [l10n] Improve Swedish (sv-SE) locale (#12731) @pontusdacke
+
+#### `@mui/[email protected]` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/[email protected]`.
+
+#### `@mui/[email protected]` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/[email protected]`, plus:
+
+- [DataGridPremium] Fix clipboard paste not working when cell loses focus (#12724) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/[email protected]`
+
+- [fields] Fix field editing after closing the picker (#12675) @LukasTy
+- [l10n] Improve French (fr-FR) locale (#12692) @FaroukBel
+- [l10n] Improve German (de-DE) locale (#12752) @Jens-Schoen
+- [l10n] Improve Swedish (sv-SE) locale (#12731) @pontusdacke
+- [pickers] Fix desktop date time Pickers grid layout (#12748) @LukasTy
+
+#### `@mui/[email protected]` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/[email protected]`, plus:
+
+- [DateTimeRangePicker] Fix desktop toolbar style (#12760) @LukasTy
+
+### Charts
+
+#### `@mui/[email protected]`
+
+- [charts] Fix Bar chart with empty dataset throwing an error (#12708) @JCQuintas
+- [charts] Fix `tickLabelInterval` not working on `YAxis` (#12746) @JCQuintas
+
+### Tree View
+
+#### `@mui/[email protected]`
+
+- [TreeView] Add a new lookup to access an item index without expansive computation (#12729) @flaviendelangle
+- [TreeView] Clean up usage of term "node" in internals (#12655) @noraleonte
+- [TreeView] Improve performance by removing `getNavigableChildrenIds` method (#12713) @flaviendelangle
+- [TreeView] Remove `state.items.itemTree` (#12717) @flaviendelangle
+- [TreeView] Remove remaining occurences of the word "node" in the codebase (#12712) @flaviendelangle
+- [TreeView] Return `instance` and `publicAPI` methods from plugin and populate the main objects inside `useTreeView` (#12650) @flaviendelangle
+- [TreeView] Fix behaviors when the item order changes (#12369) @flaviendelangle
+
+### Docs
+
+- [docs] Add `AxisFormatter` documentation for customizing tick/tooltip value formatting (#12700) @JCQuintas
+- [docs] Add file explorer example to rich tree view customization docs (#12707) @noraleonte
+- [docs] Do not use import of depth 3 in the doc (#12716) @flaviendelangle
+- [docs] Explain how to clip plots with composition (#12679) @alexfauquette
+- [docs] Fix typo in Data Grid v7 migration page (#12720) @bfaulk96
+- [docs] Fix typo in Pickers v7 migration page (#12721) @bfaulk96
+
+### Core
+
+- [core] Support multiple resolved `l10n` PR packages (#12735) @LukasTy
+- [core] Update Netlify release references in release README (#12687) @LukasTy
+- [core] Use `describeTreeView` for icons tests (#12672) @flaviendelangle
+- [core] Use `describeTreeView` in existing tests for `useTreeViewItems` (#12732) @flaviendelangle
+
 ## 7.1.1
 
 _Apr 5, 2024_

diff --git a/docs/data/charts/areas-demo/AreaChartFillByValue.js b/docs/data/charts/areas-demo/AreaChartFillByValue.js
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { green, red } from '@mui/material/colors';
 import Stack from '@mui/material/Stack';
 import { useYScale, useDrawingArea } from '@mui/x-charts/hooks';
-import { LineChart } from '@mui/x-charts/LineChart';
+import { LineChart, areaElementClasses } from '@mui/x-charts/LineChart';
 
 const data = [4000, 3000, -1000, 500, -2100, -250, 3490];
 const xData = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
@@ -43,7 +43,7 @@ export default function AreaChartFillByValue() {
         height={200}
         margin={{ top: 20, bottom: 30, left: 75 }}
         sx={{
-          '& .MuiAreaElement-root': {
+          [`& .${areaElementClasses.root}`]: {
             fill: 'url(#swich-color-id-1)',
           },
         }}
@@ -64,7 +64,7 @@ export default function AreaChartFillByValue() {
         height={200}
         margin={{ top: 20, bottom: 30, left: 75 }}
         sx={{
-          '& .MuiAreaElement-root': {
+          [`& .${areaElementClasses.root}`]: {
             fill: 'url(#swich-color-id-2)',
           },
         }}

diff --git a/docs/data/charts/areas-demo/AreaChartFillByValue.tsx b/docs/data/charts/areas-demo/AreaChartFillByValue.tsx
@@ -3,7 +3,7 @@ import { ScaleLinear } from 'd3-scale';
 import { green, red } from '@mui/material/colors';
 import Stack from '@mui/material/Stack';
 import { useYScale, useDrawingArea } from '@mui/x-charts/hooks';
-import { LineChart } from '@mui/x-charts/LineChart';
+import { LineChart, areaElementClasses } from '@mui/x-charts/LineChart';
 
 const data = [4000, 3000, -1000, 500, -2100, -250, 3490];
 const xData = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
@@ -50,7 +50,7 @@ export default function AreaChartFillByValue() {
         height={200}
         margin={{ top: 20, bottom: 30, left: 75 }}
         sx={{
-          '& .MuiAreaElement-root': {
+          [`& .${areaElementClasses.root}`]: {
             fill: 'url(#swich-color-id-1)',
           },
         }}
@@ -71,7 +71,7 @@ export default function AreaChartFillByValue() {
         height={200}
         margin={{ top: 20, bottom: 30, left: 75 }}
         sx={{
-          '& .MuiAreaElement-root': {
+          [`& .${areaElementClasses.root}`]: {
             fill: 'url(#swich-color-id-2)',
           },
         }}

diff --git a/docs/data/charts/areas-demo/SimpleAreaChart.js b/docs/data/charts/areas-demo/SimpleAreaChart.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { LineChart } from '@mui/x-charts/LineChart';
+import { LineChart, lineElementClasses } from '@mui/x-charts/LineChart';
 
 const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
 const xLabels = [
@@ -20,7 +20,7 @@ export default function SimpleAreaChart() {
       series={[{ data: uData, label: 'uv', area: true, showMark: false }]}
       xAxis={[{ scaleType: 'point', data: xLabels }]}
       sx={{
-        '.MuiLineElement-root': {
+        [`& .${lineElementClasses.root}`]: {
           display: 'none',
         },
       }}

diff --git a/docs/data/charts/areas-demo/SimpleAreaChart.tsx b/docs/data/charts/areas-demo/SimpleAreaChart.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { LineChart } from '@mui/x-charts/LineChart';
+import { LineChart, lineElementClasses } from '@mui/x-charts/LineChart';
 
 const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
 const xLabels = [
@@ -20,7 +20,7 @@ export default function SimpleAreaChart() {
       series={[{ data: uData, label: 'uv', area: true, showMark: false }]}
       xAxis={[{ scaleType: 'point', data: xLabels }]}
       sx={{
-        '.MuiLineElement-root': {
+        [`& .${lineElementClasses.root}`]: {
           display: 'none',
         },
       }}

diff --git a/docs/data/charts/areas-demo/SimpleAreaChart.tsx.preview b/docs/data/charts/areas-demo/SimpleAreaChart.tsx.preview
@@ -4,7 +4,7 @@
   series={[{ data: uData, label: 'uv', area: true, showMark: false }]}
   xAxis={[{ scaleType: 'point', data: xLabels }]}
   sx={{
-    '.MuiLineElement-root': {
+    [`& .${lineElementClasses.root}`]: {
       display: 'none',
     },
   }}

diff --git a/docs/data/charts/areas-demo/StackedAreaChart.js b/docs/data/charts/areas-demo/StackedAreaChart.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { LineChart } from '@mui/x-charts/LineChart';
+import { LineChart, lineElementClasses } from '@mui/x-charts/LineChart';
 
 const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
 const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
@@ -32,7 +32,7 @@ export default function StackedAreaChart() {
       ]}
       xAxis={[{ scaleType: 'point', data: xLabels }]}
       sx={{
-        '.MuiLineElement-root': {
+        [`& .${lineElementClasses.root}`]: {
           display: 'none',
         },
       }}

diff --git a/docs/data/charts/areas-demo/StackedAreaChart.tsx b/docs/data/charts/areas-demo/StackedAreaChart.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { LineChart } from '@mui/x-charts/LineChart';
+import { LineChart, lineElementClasses } from '@mui/x-charts/LineChart';
 
 const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
 const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
@@ -32,7 +32,7 @@ export default function StackedAreaChart() {
       ]}
       xAxis={[{ scaleType: 'point', data: xLabels }]}
       sx={{
-        '.MuiLineElement-root': {
+        [`& .${lineElementClasses.root}`]: {
           display: 'none',
         },
       }}

diff --git a/docs/data/charts/axis/AxisCustomizationNoSnap.js b/docs/data/charts/axis/AxisCustomizationNoSnap.js
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
-import { DEFAULT_X_AXIS_KEY } from '@mui/x-charts/constants';
 import { ScatterChart } from '@mui/x-charts/ScatterChart';
 import { Chance } from 'chance';
 
@@ -41,7 +40,6 @@ export default function AxisCustomizationNoSnap() {
             ]}
             leftAxis={null}
             bottomAxis={{
-              axisId: DEFAULT_X_AXIS_KEY,
               ...defaultXAxis,
               ...props,
             }}

diff --git a/docs/data/charts/axis/ModifyAxisPosition.js b/docs/data/charts/axis/ModifyAxisPosition.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants';
 import { ScatterChart } from '@mui/x-charts/ScatterChart';
 import { Chance } from 'chance';
 
@@ -22,8 +21,8 @@ export default function ModifyAxisPosition() {
         {...params}
         leftAxis={null}
         bottomAxis={null}
-        topAxis={DEFAULT_X_AXIS_KEY}
-        rightAxis={DEFAULT_Y_AXIS_KEY}
+        topAxis={{}}
+        rightAxis={{}}
         margin={{ top: 30, bottom: 10 }}
       />
     </Box>

diff --git a/docs/data/charts/axis/ModifyAxisPosition.tsx b/docs/data/charts/axis/ModifyAxisPosition.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants';
 import { ScatterChart } from '@mui/x-charts/ScatterChart';
 import { Chance } from 'chance';
 
@@ -22,8 +21,8 @@ export default function ModifyAxisPosition() {
         {...params}
         leftAxis={null}
         bottomAxis={null}
-        topAxis={DEFAULT_X_AXIS_KEY}
-        rightAxis={DEFAULT_Y_AXIS_KEY}
+        topAxis={{}}
+        rightAxis={{}}
         margin={{ top: 30, bottom: 10 }}
       />
     </Box>

diff --git a/docs/data/charts/axis/ModifyAxisPosition.tsx.preview b/docs/data/charts/axis/ModifyAxisPosition.tsx.preview
@@ -2,7 +2,7 @@
   {...params}
   leftAxis={null}
   bottomAxis={null}
-  topAxis={DEFAULT_X_AXIS_KEY}
-  rightAxis={DEFAULT_Y_AXIS_KEY}
+  topAxis={{}}
+  rightAxis={{}}
   margin={{ top: 30, bottom: 10 }}
 />
diff --git a/docs/data/charts/axis/axis.md b/docs/data/charts/axis/axis.md
@@ -197,7 +197,9 @@ Those pros can accept three type of value:
 
 - `null` to not display the axis
 - `string` which should correspond to the id of a `xAxis` for top and bottom. Or to the id of a `yAxis` for left and right.
-- `object` which will be passed as props to `<XAxis />` or `<YAxis />`. It allows to specify which axis should be represent, and to customize the design of the axis.
+- `object` which will be passed as props to `<XAxis />` or `<YAxis />`. It allows to specify which axis should be represent with the `axisId` property, and to customize the design of the axis.
+
+The demo below uses `leftAxis={null}` to remove the left axis, and `rightAxis={{}}` to set a right axis without overriding the default y-axis configuration.
 
 {{"demo": "ModifyAxisPosition.js"}}