Merge branch 'next' into feat-virtualization-range

docs/constants.js

@@ -2,5 +2,5 @@
 
 module.exports = {
   SOURCE_CODE_REPO: 'https://github.com/mui/mui-x',
-  SOURCE_GITHUB_BRANCH: 'next', // #default-branch-switch
+  SOURCE_GITHUB_BRANCH: 'master', // #default-branch-switch
 };

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

@@ -13,17 +13,19 @@ packageName: '@mui/x-charts'
 
 Run one of the following commands to add the MUI X Charts to your project:
 
+<!-- #default-branch-switch -->
+
 <codeblock storageKey="package-manager">
 ```bash npm
-npm install @mui/x-charts@next
+npm install @mui/x-charts
 ```
 
 ```bash yarn
-yarn add @mui/x-charts@next
+yarn add @mui/x-charts
 ```
 
 ```bash pnpm
-pnpm add @mui/x-charts@next
+pnpm add @mui/x-charts
 ```
 
 </codeblock>

docs/data/data-grid/accessibility/DensitySelectorSmallGrid.js

@@ -15,6 +15,8 @@ function CustomToolbar() {
 }
 
 export default function DensitySelectorSmallGrid() {
+  const [density, setDensity] = React.useState('compact');
+
   const { data } = useDemoData({
     dataSet: 'Commodity',
     rowLength: 4,
@@ -25,7 +27,11 @@ export default function DensitySelectorSmallGrid() {
     <div style={{ height: 300, width: '100%' }}>
       <DataGrid
         {...data}
-        density="compact"
+        density={density}
+        onDensityChange={(newDensity) => {
+          console.info(`Density updated to: ${newDensity}`);
+          setDensity(newDensity);
+        }}
         slots={{
           toolbar: CustomToolbar,
         }}

docs/data/data-grid/accessibility/DensitySelectorSmallGrid.tsx

@@ -3,6 +3,7 @@ import {
   DataGrid,
   GridToolbarContainer,
   GridToolbarDensitySelector,
+  GridDensity,
 } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
@@ -15,6 +16,8 @@ function CustomToolbar() {
 }
 
 export default function DensitySelectorSmallGrid() {
+  const [density, setDensity] = React.useState<GridDensity>('compact');
+
   const { data } = useDemoData({
     dataSet: 'Commodity',
     rowLength: 4,
@@ -25,7 +28,11 @@ export default function DensitySelectorSmallGrid() {
     <div style={{ height: 300, width: '100%' }}>
       <DataGrid
         {...data}
-        density="compact"
+        density={density}
+        onDensityChange={(newDensity) => {
+          console.info(`Density updated to: ${newDensity}`);
+          setDensity(newDensity);
+        }}
         slots={{
           toolbar: CustomToolbar,
         }}

docs/data/data-grid/accessibility/DensitySelectorSmallGrid.tsx.preview

@@ -1,6 +1,10 @@
 <DataGrid
   {...data}
-  density="compact"
+  density={density}
+  onDensityChange={(newDensity) => {
+    console.info(`Density updated to: ${newDensity}`);
+    setDensity(newDensity);
+  }}
   slots={{
     toolbar: CustomToolbar,
   }}

docs/data/data-grid/accessibility/accessibility.md

@@ -22,22 +22,56 @@ The [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/grid
 
 You can change the density of the rows and the column header.
 
-### Density selector
+### Density selection from the toolbar
 
-To enable the density selector, create a toolbar containing the `GridToolbarDensitySelector` component and apply it using the `toolbar` property in the Data Grid's `slots` prop.
-The user can then change the density of the Data Grid by using the density selector from the toolbar, as the following demo illustrates:
+To enable the density selection from the toolbar, you can do one of the following:
+
+1. Enable the default toolbar component by passing the `slots.toolbar` prop to the Data Grid.
+2. Create a specific toolbar containing only the `GridToolbarDensitySelector` component and apply it using the `toolbar` property in the Data Grid's `slots` prop.
+
+The user can then change the density of the Data Grid by using the density selection menu from the toolbar, as the following demo illustrates:
 
 {{"demo": "DensitySelectorGrid.js", "bg": "inline"}}
 
-To hide the density selector, add the `disableDensitySelector` prop to the Data Grid.
+To disable the density selection menu, pass the `disableDensitySelector` prop to the Data Grid.
+
+### Set the density programmatically
+
+The Data Grid exposes the `density` prop which supports the following values:
+
+- `standard` (default)
+- `compact`
+- `comfortable`
+
+You can set the density programmatically in one of the following ways:
+
+1. Uncontrolled – initialize the density with the `initialState.density` prop.
+
+   ```tsx
+   <DataGrid
+     initialState={{
+       density: 'compact',
+     }}
+   />
+   ```
+
+2. Controlled – pass the `density` and `onDensityChange` props. For more advanced use cases, you can also subscribe to the `densityChange` grid event.
+
+   ```tsx
+   const [density, setDensity] = React.useState<GridDensity>('compact');
 
-### Density prop
+   return (
+     <DataGrid
+       density={density}
+       onDensityChange={(newDensity) => setDensity(newDensity)}
+     />
+   );
+   ```
 
-Set the vertical density of the Data Grid using the `density` prop.
-This prop applies the values determined by the `rowHeight` and `columnHeaderHeight` props, if supplied.
+The `density` prop applies the values determined by the `rowHeight` and `columnHeaderHeight` props, if supplied.
 The user can override this setting with the optional toolbar density selector.
 
-The following demo shows a Data Grid with the default density set to `compact`:
+The following demo shows a Data Grid with the controlled density set to `compact` and outputs the current density to the console when the user changes it using the density selector from the toolbar:
 
 {{"demo": "DensitySelectorSmallGrid.js", "bg": "inline"}}
 

docs/data/data-grid/events/events.json

@@ -202,6 +202,13 @@
     "event": "MuiEvent<{}>",
     "componentProp": "onResize"
   },
+  {
+    "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
+    "name": "densityChange",
+    "description": "Fired when the density changes.",
+    "params": "GridDensity",
+    "event": "MuiEvent<{}>"
+  },
   {
     "projects": ["x-data-grid-premium"],
     "name": "excelExportStateChange",

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

@@ -8,10 +8,6 @@ Using your favorite package manager, install `@mui/x-data-grid-pro` or `@mui/x-d
 
 <!-- #default-branch-switch -->
 
-:::warning
-The `next` tag is used to download the latest v7 **pre-release** version.
-:::
-
 {{"component": "modules/components/DataGridInstallationInstructions.js"}}
 
 The Data Grid package has a peer dependency on `@mui/material`.