Merge branch 'master' into row-spanning

.github/workflows/codeql.yml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@4dd16135b69a43b6c8efb853346f8437d92d3c93 # v3.26.6
+        uses: github/codeql-action/init@294a9d92911152fe08befb9ec03e240add280cb3 # v3.26.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@4dd16135b69a43b6c8efb853346f8437d92d3c93 # v3.26.6
+        uses: github/codeql-action/analyze@294a9d92911152fe08befb9ec03e240add280cb3 # v3.26.8

.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@4dd16135b69a43b6c8efb853346f8437d92d3c93 # v3.26.6
+        uses: github/codeql-action/upload-sarif@294a9d92911152fe08befb9ec03e240add280cb3 # v3.26.8
         with:
           sarif_file: results.sarif

.github/workflows/vale-action.yml

@@ -14,10 +14,12 @@ jobs:
     steps:
       - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
       - uses: errata-ai/vale-action@38bf078c328061f59879b347ca344a718a736018 # v2.1.0
+        continue-on-error: true # GitHub Action flag needed until https://github.com/errata-ai/vale-action/issues/89 is fixed
         with:
-          reporter: github-pr-review
-          files: docs/data
-        env:
+          # Errors should be more visible
+          fail_on_error: true
+          # The other reports don't work, not really https://github.com/reviewdog/reviewdog#reporters
+          reporter: github-pr-check
           # Required, set by GitHub actions automatically:
           # https://docs.github.com/en/actions/security-guides/automatic-token-authentication#about-the-github_token-secret
-          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          token: ${{secrets.GITHUB_TOKEN}}

.vale.ini

@@ -1,6 +1,6 @@
 # Vale config. More information at https://vale.sh/docs/topics/config/
 StylesPath = .github/styles
-MinAlertLevel = error
+MinAlertLevel = warning
 
 # To update mui-vale package:
 # 1. Go to the docs folder in the material-ui repo

CHANGELOG.md

@@ -75,7 +75,7 @@ Same changes as in `@mui/x-charts@7.17.0`.
 ### Docs
 
 - [docs] Add missing callout on "Imperative API" tree view sections (#14503) @flaviendelangle
-- [docs] Fix broken redirection to MUI X v5 @oliviertassinari
+- [docs] Fix broken redirection to MUI X v5 @oliviertassinari
 - [docs] Fix multiple `console.error` messages on `charts` docs (#14554) @JCQuintas
 - [docs] Fixed typo in Row Grouping recipes (#14549) @Miodini
 - [docs] Match title with blog posts @oliviertassinari
@@ -195,7 +195,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
 
 - 💫 Support Material UI v6 (`@mui/material@6`) peer dependency (#14142) @cherniavskii
 
-You can now use MUI X components with either v5 or v6 of `@mui/material` package 🎉
+You can now use MUI X components with either v5 or v6 of `@mui/material` package 🎉
 
 - 🐞 Bugfixes
 
@@ -240,7 +240,7 @@ Same changes as in `@mui/x-charts@7.15.0`, plus:
 
 - [docs] Fix sentence case `h2` @oliviertassinari
 - [docs] Clarify contribution guide references @oliviertassinari
-- [docs] Fix Stack Overflow issue canned response @oliviertassinari
+- [docs] Fix Stack Overflow issue canned response @oliviertassinari
 - [docs] Fix outdated link to support page @oliviertassinari
 - [docs] Fix use of Material UI @oliviertassinari
 - [docs] Update deprecated props in docs (#14295) @JCQuintas
@@ -498,7 +498,7 @@ The [Pro plan](https://mui.com/x/introduction/licensing/#pro-plan) is receiving
 
 As always, every feature released as part of the MIT plan will remain free and MIT licensed forever.
 
-This expansion of the Pro plan comes with some adjustments to our pricing strategy. Learn more about those in the [Upcoming changes to MUI X pricing in 2024](https://mui.com/blog/mui-x-sep-2024-price-update/) blog post.
+This expansion of the Pro plan comes with some adjustments to our pricing strategy. Learn more about those in the [Upcoming changes to MUI X pricing in 2024](https://mui.com/blog/mui-x-sep-2024-price-update/) blog post.
 
 ### Highlights
 
@@ -563,7 +563,7 @@ Same changes as in `@mui/x-date-pickers@7.12.0`.
 #### `@mui/x-charts@7.12.0`
 
 - [charts] Fix incorrect `axisId` prop being allowed in xAxis/yAxis config. Use `id` instead. (#13986) @JCQuintas
-- [charts] Use vendor to have Common JS bundle working out of the box (#13608) @alexfauquette
+- [charts] Use vendor to have CommonJS bundle working out of the box (#13608) @alexfauquette
 - [charts] Divide the `SeriesProvider` to use in filtering (#14026) @JCQuintas
 
 ### Tree View

README.md

@@ -26,14 +26,14 @@
 Each component provides best-in-class UX and DX, with sophisticated UX workflows for data-rich applications.
 Components include the Data Grid, Date and Time Pickers, Charts, and Tree View.
 
-MUI X extends the core functionality of [Material UI](https://github.com/mui/material-ui/), but the advanced components also stand on their own and can be fully customized to meet the needs of any design system.
+MUI X extends the core functionality of [Material UI](https://github.com/mui/material-ui/), but the advanced components also stand on their own and can be fully customized to meet the needs of any design system.
 
-MUI X is **open-core**: [Community](#community-plan) components are MIT-licensed and free forever, while more advanced features and components require a [Pro](#pro-plan) or [Premium](#premium-plan) commercial license.
+MUI X is **open-core**: [Community](#community-plan) components are MIT-licensed and free forever, while more advanced features and components require a [Pro](#pro-plan) or [Premium](#premium-plan) commercial license.
 See [Licensing](#licensing) for more information.
 
 ## Documentation
 
-Get started in the [MUI X documentation](https://mui.com/x/introduction/).
+Get started in the [MUI X documentation](https://mui.com/x/introduction/).
 
 - [Data Grid](https://mui.com/x/react-data-grid/)
 - [Date and Time Pickers](https://mui.com/x/react-date-pickers/)

babel.config.js

@@ -104,14 +104,14 @@ module.exports = function getBabelConfig(api) {
 
   if (process.env.NODE_ENV === 'test') {
     plugins.push(['@babel/plugin-transform-export-namespace-from']);
-    // We replace `date-fns` imports with an aliased `date-fns@v3` version installed as `date-fns-v3` for tests.
+    // We replace `date-fns` imports with an aliased `date-fns@v4` version installed as `date-fns-v4` for tests.
     // The plugin is patched to only run on `AdapterDateFnsV3.ts`.
-    // TODO: remove when we upgrade to date-fns v3 by default.
+    // TODO: remove when we upgrade to date-fns v4 by default.
     plugins.push([
       'babel-plugin-replace-imports',
       {
         test: /date-fns/i,
-        replacer: 'date-fns-v3',
+        replacer: 'date-fns-v4',
         // This option is provided by the `patches/babel-plugin-replace-imports@1.0.2.patch` patch
         filenameIncludes: 'src/AdapterDateFnsV3/',
       },

docs/data/charts/axis/AxisTextCustomizationNoSnap.js

@@ -2,14 +2,12 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   height: 300,
 };
 
-const valueFormatter = (value) => `${value}mm`;
-
 export default function AxisTextCustomizationNoSnap() {
   return (
     <ChartsUsageDemo

docs/data/charts/axis/GridDemo.js

@@ -2,15 +2,13 @@ import * as React from 'react';
 import { axisClasses } from '@mui/x-charts/ChartsAxis';
 import { chartsGridClasses } from '@mui/x-charts/ChartsGrid';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   yAxis: [{ label: 'rainfall (mm)' }],
   height: 300,
 };
 
-const valueFormatter = (value) => `${value}mm`;
-
 export default function GridDemo() {
   return (
     <BarChart

docs/data/charts/axis/GridDemo.tsx

@@ -2,15 +2,13 @@ import * as React from 'react';
 import { axisClasses } from '@mui/x-charts/ChartsAxis';
 import { chartsGridClasses } from '@mui/x-charts/ChartsGrid';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   yAxis: [{ label: 'rainfall (mm)' }],
   height: 300,
 };
 
-const valueFormatter = (value: number | null) => `${value}mm`;
-
 export default function GridDemo() {
   return (
     <BarChart

docs/data/charts/bars/BarsDataset.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
 import { axisClasses } from '@mui/x-charts/ChartsAxis';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   yAxis: [
@@ -18,8 +18,6 @@ const chartSetting = {
   },
 };
 
-const valueFormatter = (value) => `${value}mm`;
-
 export default function BarsDataset() {
   return (
     <BarChart

docs/data/charts/bars/BarsDataset.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
 import { axisClasses } from '@mui/x-charts/ChartsAxis';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   yAxis: [
@@ -18,8 +18,6 @@ const chartSetting = {
   },
 };
 
-const valueFormatter = (value: number | null) => `${value}mm`;
-
 export default function BarsDataset() {
   return (
     <BarChart

docs/data/charts/bars/GridDemo.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   xAxis: [
@@ -12,8 +12,6 @@ const chartSetting = {
   height: 400,
 };
 
-const valueFormatter = (value) => `${value}mm`;
-
 export default function GridDemo() {
   return (
     <BarChart

docs/data/charts/bars/GridDemo.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   xAxis: [
@@ -12,8 +12,6 @@ const chartSetting = {
   height: 400,
 };
 
-const valueFormatter = (value: number | null) => `${value}mm`;
-
 export default function GridDemo() {
   return (
     <BarChart

docs/data/charts/bars/HorizontalBars.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   xAxis: [
@@ -12,8 +12,6 @@ const chartSetting = {
   height: 400,
 };
 
-const valueFormatter = (value) => `${value}mm`;
-
 export default function HorizontalBars() {
   return (
     <BarChart

docs/data/charts/bars/HorizontalBars.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   xAxis: [
@@ -12,8 +12,6 @@ const chartSetting = {
   height: 400,
 };
 
-const valueFormatter = (value: number | null) => `${value}mm`;
-
 export default function HorizontalBars() {
   return (
     <BarChart

docs/data/charts/bars/TickPlacementBars.js

@@ -7,7 +7,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Radio from '@mui/material/Radio';
 import { BarChart } from '@mui/x-charts/BarChart';
 import { axisClasses } from '@mui/x-charts/ChartsAxis';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 function TickParamsSelector({
   tickPlacement,
@@ -57,8 +57,6 @@ function TickParamsSelector({
   );
 }
 
-const valueFormatter = (value) => `${value}mm`;
-
 const chartSetting = {
   yAxis: [
     {

docs/data/charts/bars/TickPlacementBars.tsx

@@ -7,7 +7,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Radio from '@mui/material/Radio';
 import { BarChart } from '@mui/x-charts/BarChart';
 import { axisClasses } from '@mui/x-charts/ChartsAxis';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 type TickParamsSelectorProps = {
   tickPlacement: 'end' | 'start' | 'middle' | 'extremities';
@@ -72,8 +72,6 @@ function TickParamsSelector({
   );
 }
 
-const valueFormatter = (value: number | null) => `${value}mm`;
-
 const chartSetting = {
   yAxis: [
     {

docs/data/charts/bars/bars.md

@@ -104,7 +104,7 @@ Learn more about the `colorMap` properties in the [Styling docs](/x/react-charts
 
 To give your bar chart rounded corners, you can change the value of the `borderRadius` property on the [BarChart](/x/api/charts/bar-chart/#bar-chart-prop-slots).
 
-It will work with any positive value and will be properly applied to horizontal layouts, stacks and negative values.
+It works with any positive value and is properly applied to horizontal layouts, stacks, and negative values.
 
 {{"demo": "BorderRadius.js"}}
 
@@ -119,7 +119,7 @@ Or you can pass `'value'` to display the raw value of the bar.
 
 ### Custom Labels
 
-You can display, change or hide labels based on conditional logic.
+You can display, change, or hide labels based on conditional logic.
 To do so, provide a function to the `barLabel`.
 Labels are not displayed if the function returns `null`.
 

docs/data/charts/composition/composition.md

@@ -58,9 +58,11 @@ For example, the Bar Chart component assumes that `series` will be of type `'bar
 With composition, the chart container isn't able to guess the series type, so you must explicitly define it.
 
 ```jsx
-<BarChart series={[{
+<BarChart
+  series={[{
     data: [1, 2, 3] // No need to specify it is a bar series
-}]} />
+  }]}
+/>
 
 <ChartContainer
   series={[

docs/data/charts/dataset/weather.ts

@@ -84,3 +84,7 @@ export const dataset = [
     month: 'Dec',
   },
 ];
+
+export function valueFormatter(value: number | null) {
+  return `${value}mm`;
+}