Merge branch 'master' into list-view-tests

.github/workflows/cherry-pick-next-to-master.yml → .github/workflows/cherry-pick-master-to-v7.yml

@@ -1,17 +1,17 @@
-name: Cherry pick next to master
+name: Cherry pick master to v7
 
 on:
   pull_request_target:
     branches:
-      - next
+      - master
     types: ['closed']
 
 permissions: {}
 
 jobs:
-  cherry_pick_to_master:
+  cherry_pick_to_v7:
     runs-on: ubuntu-latest
-    name: Cherry pick into master
+    name: Cherry pick into v7
     permissions:
       pull-requests: write
       contents: write
@@ -26,7 +26,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         uses: carloscastrojumo/github-cherry-pick-action@503773289f4a459069c832dc628826685b75b4b3 # v1.0.10
         with:
-          branch: master
+          branch: v7.x
           body: 'Cherry-pick of #{old_pull_request_id}'
           cherry-pick-branch: ${{ format('cherry-pick-{0}', github.event.number) }}
           title: '{old_title} (@${{ github.event.pull_request.user.login }})'

.github/workflows/cherry-pick-master-to-v6.yml → .github/workflows/cherry-pick-v7-to-v6.yml

@@ -1,17 +1,17 @@
-name: Cherry pick master to v6
+name: Cherry pick v7 to v6
 
 on:
   pull_request_target:
     branches:
-      - master
+      - v7.x
     types: ['closed']
 
 permissions: {}
 
 jobs:
-  cherry_pick_to_v6:
+  cherry_pick_v7_to_v6:
     runs-on: ubuntu-latest
-    name: Cherry pick into v6
+    name: Cherry pick v7 into v6
     permissions:
       pull-requests: write
       contents: write

changelogOld/CHANGELOG.v6.md

@@ -1485,7 +1485,7 @@ Same changes as in `@mui/[email protected]`, plus:
 - [docs] Fix charts demo using too deep import (#10263) @LukasTy
 - [docs] Fix `e.g.` typo @oliviertassinari
 - [docs] Fix npm package indentation @oliviertassinari
-- [docs] Fix typo in tree view docs @oliviertassinari
+- [docs] Fix typo in Tree View docs @oliviertassinari
 - [docs] Improve the week picker example (#8257) @flaviendelangle
 - [docs] Include code links in the Data Grid demo (#10219) @cherniavskii
 - [docs] Polish page for SEO (#10216) @oliviertassinari
@@ -1546,7 +1546,7 @@ Same changes as in `@mui/[email protected]`.
 
 - [docs] Add `DemoContainer` and `DemoItem` JSDoc (#10186) @LukasTy
 - [docs] Add link to `custom layout` page (#10184) @LukasTy
-- [docs] Add tree view nav item (#10181) @LukasTy
+- [docs] Add Tree View nav item (#10181) @LukasTy
 - [docs] Fix wrong chart tooltip reference (#10169) @oliviertassinari
 - [docs] Improve chart SEO (#10170) @oliviertassinari
 - [docs] Precise expired license key condition (#10165) @oliviertassinari
@@ -1748,7 +1748,7 @@ _Aug 4, 2023_
 
 We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
 
-- ⌚️ Move the tree view component from `@mui/lab` package
+- ⌚️ Move the Tree View component from `@mui/lab` package
 
   The `<TreeView />` component has been moved to the MUI X repository.
   It is now accessible from its own package: `@mui/x-tree-view`.
@@ -1804,7 +1804,7 @@ Same changes as in `@mui/[email protected]`.
 ### Tree View / `@mui/[email protected]`
 
 - [TreeView] Add missing exported types (#9862) @flaviendelangle
-- [TreeView] Add tree view to changelog generator script (#9903) @MBilalShafi
+- [TreeView] Add Tree View to changelog generator script (#9903) @MBilalShafi
 - [TreeView] Create the package on the X repository (#9798) @flaviendelangle
 - [TreeView] Improve props typing (#9855) @flaviendelangle
 

codecov.yml

@@ -10,15 +10,15 @@ coverage:
       adapters:
         target: 100%
         paths:
-          - 'packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts'
-          - 'packages/x-date-pickers/src/AdapterDateFnsV3/AdapterDateFnsV3.ts'
-          - 'packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts'
-          - 'packages/x-date-pickers/src/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.ts'
-          - 'packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts'
-          - 'packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts'
-          - 'packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts'
-          - 'packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.ts'
-          - 'packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.ts'
+          - packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts
+          - packages/x-date-pickers/src/AdapterDateFnsV3/AdapterDateFnsV3.ts
+          - packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts
+          - packages/x-date-pickers/src/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.ts
+          - packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts
+          - packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts
+          - packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts
+          - packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.ts
+          - packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.ts
     patch: off
 
 comment: false

docs/.link-check-errors.txt

@@ -1,2 +1,3 @@
 Broken links found by `docs:link-check` that exist:
 
+- https://mui.com/x/react-date-pickers/fields/#accessible-dom-structure

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

@@ -36,7 +36,7 @@ You can pass this gradient definition as a children of the `<LineChart />` and u
 To do so you will need to use the [`<linearGradient />`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient) and [`<stop />`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/stop) SVG elements.
 
 The first part is to get the SVG total height.
-Which can be done with the `useDrawingArea` hook.
+Which can be done with the `useDrawingArea()` hook.
 It's useful to define the `<linearGradient />` as a vector that goes from the top to the bottom of our SVG container.
 
 Then to define where the gradient should switch from one color to another, you can use the `useYScale` hook to get the y coordinate of value 0.

docs/data/charts/axis/axis.md

@@ -56,7 +56,7 @@ Which expects an array of value coherent with the `scaleType`:
 Some series types also require specific axis attributes:
 
 - line plots require an `xAxis` to have `data` provided
-- bar plots require an `xAxis` with `scaleType='band'` and some `data` provided.
+- bar plots require an `xAxis` with `scaleType="band"` and some `data` provided.
 
 ### Axis formatter
 

docs/data/charts/bars/bars.md

@@ -100,7 +100,7 @@ Learn more about the `colorMap` properties in the [Styling docs](/x/react-charts
 
 {{"demo": "ColorScale.js"}}
 
-### Border Radius
+### Border radius
 
 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).
 
@@ -117,7 +117,7 @@ Or you can pass `'value'` to display the raw value of the bar.
 
 {{"demo": "BarLabel.js"}}
 
-### Custom Labels
+### Custom labels
 
 You can display, change, or hide labels based on conditional logic.
 To do so, provide a function to the `barLabel`.
@@ -174,7 +174,7 @@ import ChartsOnAxisClickHandler from '@mui/x-charts/ChartsOnAxisClickHandler';
 To skip animation at the creation and update of your chart, you can use the `skipAnimation` prop.
 When set to `true` it skips animation powered by `@react-spring/web`.
 
-Charts containers already use the `useReducedMotion` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important).
+Charts containers already use the `useReducedMotion()` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important).
 
 ```jsx
 // For a single component chart

docs/data/charts/components/components.md

@@ -20,7 +20,7 @@ Charts dimensions are defined by a few props:
 The term **drawing area** refers to the space available to plot data (scatter points, lines, or pie arcs).
 The `margin` is used to leave some space for extra elements, such as the axes, the legend, or the title.
 
-You can use the `useDrawingArea` hook in the charts subcomponents to get the coordinates of the **drawing area**.
+You can use the `useDrawingArea()` hook in the charts subcomponents to get the coordinates of the **drawing area**.
 
 ```jsx
 import { useDrawingArea } from '@mui/x-charts';

docs/data/charts/gauge/gauge.md

@@ -101,7 +101,7 @@ import {
 
 ### Creating your components
 
-To create your own components, use the `useGaugeState` hook which provides all you need about the gauge configuration:
+To create your own components, use the `useGaugeState()` hook which provides all you need about the gauge configuration:
 
 - information about the value: `value`, `valueMin`, `valueMax`
 - information to plot the arc: `startAngle`, `endAngle`, `outerRadius`, `innerRadius`, `cornerRadius`, `cx`, and `cy`

docs/data/charts/getting-started/getting-started.md

@@ -4,20 +4,20 @@ githubLabel: 'component: charts'
 packageName: '@mui/x-charts'
 ---
 
-# Charts - Getting Started
+# Charts - Getting started
 
-<p class="description">Get started with the MUI X Charts components. Install the package, configure your application, and start using the components.</p>
+<p class="description">Install the MUI X Charts package to start building React data visualization components.</p>
 
 ## Installation
 
-Using your favorite package manager, install `@mui/x-charts-pro` for the commercial version, or `@mui/x-charts` for the free community version.
+Run one of the following commands to install the free Community version or the paid Pro version of the MUI X Charts:
 
 <!-- #default-branch-switch -->
 
 {{"component": "modules/components/ChartsInstallationInstructions.js"}}
 
-The Charts package has a peer dependency on `@mui/material`.
-If you are not already using it in your project, you can install it with:
+The Charts packages have a peer dependency on `@mui/material`.
+If you're not already using it, install it with the following command:
 
 <codeblock storageKey="package-manager">
 
@@ -37,7 +37,7 @@ yarn add @mui/material @emotion/react @emotion/styled
 
 <!-- #react-peer-version -->
 
-Please note that [react](https://www.npmjs.com/package/react) and [react-dom](https://www.npmjs.com/package/react-dom) are peer dependencies too:
+[`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom) are also peer dependencies:
 
 ```json
 "peerDependencies": {
@@ -46,85 +46,66 @@ Please note that [react](https://www.npmjs.com/package/react) and [react-dom](ht
 },
 ```
 
-### Style engine
-
-Material UI is using [Emotion](https://emotion.sh/docs/introduction) as a styling engine by default. If you want to use [`styled-components`](https://styled-components.com/) instead, run:
-
-<codeblock storageKey="package-manager">
-```bash npm
-npm install @mui/styled-engine-sc styled-components
-```
-
-```bash pnpm
-pnpm add @mui/styled-engine-sc styled-components
-```
-
-```bash yarn
-yarn add @mui/styled-engine-sc styled-components
-```
-
-</codeblock>
-
-Take a look at the [Styled engine guide](/material-ui/integrations/styled-components/) for more information about how to configure `styled-components` as the style engine.
-
 ### Usage with D3
 
 To help folks using CommonJS, the `@mui/x-charts` package uses a vendored package named `@mui/x-charts-vendor` to access D3 libraries.
+You can import D3 functions from `@mui/x-charts-vendor/d3-color`.
 
-If you need some D3 functions, you can import them with `@mui/x-charts-vendor/d3-color`.
+## Rendering Charts
 
-## Displaying charts
+MUI X Charts can be rendered as _self-contained_ or _composable_ components.
+[Self-contained components](#self-contained-charts) are simpler to get started with and are recommended for most common use cases; more complex visualization (such as combining Bar and Line Charts on a single plot) requires [custom composition](#composable-charts).
 
-A Chart can be rendered in one of two ways: as a single component, or by composing subcomponents.
+### Self-contained Charts
 
-### Single charts
+Self-contained Chart components are imported and rendered as a single React component (such as `<BarChart />` or `<LineChart />`) which contains all of the necessary subcomponents.
 
-For common use cases, the single component is the recommended way.
-Those components' names end with "Chart", as opposed to "Plot", and only require the series prop describing the data to render.
+These components require a `series` prop describing the data to render, as well as a numerical value (rendered in pixels) for the `height` prop.
+The `width` prop is optional; if no value is provided, the Charts expand to fill the available space.
 
 {{"demo": "SimpleCharts.js"}}
 
-### Composed charts
+### Composable Charts
 
-To combine different Charts, like Lines with Bars, you can use composition with the `ChartContainer` wrapper.
+More complex use cases require composition of the necessary subcomponents inside of a Chart Container wrapper.
+Subcomponents include:
 
-Inside this wrapper, render either axis components, such as `XAxis` and `YAxis`, or any plot component like `BarPlot`, `LinePlot`, `AreaPlot`, and `ScatterPlot`.
+- Axis components – to define the X and Y axes
+- Plot components – to create Bars, Lines, or any other Chart type
+- Auxillary components - to add Tooltips, Highlights, and more
+- Utilities - such as classes and types
 
-Visit the [Composition page](/x/react-charts/composition/) for more details.
+See the [Charts composition documentation](/x/react-charts/composition/) for complete details.
 
-{{"demo": "Combining.js"}}
+The demo below shows how to use composition to create a custom Chart that combines a Bar and a Line Chart on a single plot:
 
-### Positions
+{{"demo": "Combining.js"}}
 
-Charts are composed of two main areas.
-The SVG defined by its `width` and `height` delimits the available space.
+## Chart layouts
 
-Within this SVG, a dedicated "drawing area" (aka "plot area") serves as the canvas for data representation.
-Here, elements like lines, bars, and areas visually depict the information.
-It's controlled by the `margin = {top, bottom, left, right}` object defining the margin between the SVG and the drawing area.
+The layout of a Chart is defined by two main spaces: the plot area, and the outer margins.
 
-The space left by margins can display axes, titles, a legend, or any other additional information.
+The `width` and `height` props define the dimensions of the SVG which is the root of the chart.
+Within this SVG, the plot area (or drawing area) serves as the canvas for data visualization, where the lines, bars or other visual elements are rendered.
+The size of the plot area is determined by the `margin = {top, bottom, left, right}` object which defines its outer margins inside the SVG.
+The outer margin space is where information like axes, titles, and legends are displayed.
 
-For more information about the position configuration, visit the [styling page](/x/react-charts/styling/#styling).
+See the [Styling documentation](/x/react-charts/styling/#placement) for complete details.
 
 ## Axis management
 
-MUI X Charts have a flexible approach to axis management, supporting multiple-axis charts with any combination of scales and ranges.
-
-Visit the [Axis page](/x/react-charts/axis/) for more details.
-
-## Styling
+MUI X Charts take a flexible approach to axis management, with support for multiple axes and any combination of scales and ranges.
 
-MUI X Charts follows the Material UI styling and features all of the customization tools you'd find there, making tweaking charts as straightforward as designing buttons.
-
-Visit the [Styling page](/x/react-charts/styling/) for more details.
+See the [Axis documentation](/x/react-charts/axis/) for complete details.
 
 ## TypeScript
 
-In order to benefit from the [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users need to import the following types.
-Internally, it uses module augmentation to extend the default theme structure.
+To benefit from [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users must import the following types.
+These types use module augmentation to extend the default theme structure.
 
 ```tsx
+// only one import is necessary,
+// from the version you're currently using.
 import type {} from '@mui/x-charts/themeAugmentation';
 import type {} from '@mui/x-charts-pro/themeAugmentation';
 
@@ -140,8 +121,3 @@ const theme = createTheme({
   },
 });
 ```
-
-:::info
-You don't have to import the theme augmentation from both `@mui/x-charts` and `@mui/x-charts-pro` when using `@mui/x-charts-pro`.
-Importing it from `@mui/x-charts-pro` is enough.
-:::

docs/data/charts/lines/lines.md

@@ -235,7 +235,7 @@ sx={{
 To skip animation at the creation and update of your chart, you can use the `skipAnimation` prop.
 When set to `true` it skips animation powered by `@react-spring/web`.
 
-Charts containers already use the `useReducedMotion` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important).
+Charts containers already use the `useReducedMotion()` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important).
 
 :::warning
 If you support interactive ways to add or remove series from your chart, you have to provide the series' id.

docs/data/charts/overview/overview.md

@@ -7,34 +7,33 @@ packageName: '@mui/x-charts'
 
 # MUI X Charts
 
-<p class="description">A fast and extendable library of react chart components for data visualization.</p>
+<p class="description">A collection of React chart components for data visualization.</p>
 
 {{"component": "@mui/docs/ComponentLinkHeader", "design": false}}
 
 ## Overview
 
-The `@mui/x-charts` is an MIT library for rendering charts relying on [D3.js](https://d3js.org/) for data manipulation and SVG for rendering.
-And, like other MUI X components, charts are production-ready components that integrate smoothly into your app.
+MUI X Charts is a library of production-ready components for rendering charts with React.
+It uses [D3.js](https://d3js.org/) for data manipulation and SVGs for rendering.
 
-With a high level of customization, MUI X Charts provides three levels of customization layers: **single components** with great defaults, extensive **configuration props**, and **subcomponents** for flexible composition.
-Additionally, you can also use all the [MUI System](https://mui.com/system/getting-started/) tools, such as the theme override or the `sx` prop.
+The components provide a high level of customization, with beautiful defaults as well as extensive configuration props and flexible composition options.
+They also have access to all [MUI System](https://mui.com/system/getting-started/) tools such as theme overrides and the `sx` prop.
 
 {{"demo": "ChartsOverviewDemo.js", "defaultCodeOpen": true}}
 
-## Using the documentation
+## All MUI X Charts
 
-The MUI X Charts documentation has a slightly different structure than other MUI X components.
-Instead of having a long page for each, the pages are divided in two:
+{{"component": "modules/components/ChartComponentsGrid.js"}}
 
-1. General description of the built-in features the component provides.
-2. A set of examples demonstrating the component with customizations.
+## Using this documentation
 
-## All MUI X Charts components
+Each Chart type has two accompanying documents:
 
-{{"component": "modules/components/ChartComponentsGrid.js"}}
+1. **Overview** – a general description of built-in features
+2. **Demo** – a collection of custom examples
 
 ## Supported features
 
-The features that are shared across multiple Charts components, such as axes and legends, are also documented on separate pages.
+Features shared across Chart components such as axes and legends are described in standalone documents:
 
 {{"component": "modules/components/ChartFeaturesGrid.js"}}