Merge next

.eslintrc.js

@@ -157,10 +157,10 @@ module.exports = {
       },
     },
     buildPackageRestrictedImports('@mui/x-charts', 'x-charts'),
-    buildPackageRestrictedImports('@mui/x-data-grid', 'grid/x-data-grid'),
-    buildPackageRestrictedImports('@mui/x-data-grid-pro', 'grid/x-data-grid-pro'),
-    buildPackageRestrictedImports('@mui/x-data-grid-premium', 'grid/x-data-grid-premium'),
-    buildPackageRestrictedImports('@mui/x-data-grid-generator', 'grid/x-data-grid-generator'),
+    buildPackageRestrictedImports('@mui/x-data-grid', 'x-data-grid'),
+    buildPackageRestrictedImports('@mui/x-data-grid-pro', 'x-data-grid-pro'),
+    buildPackageRestrictedImports('@mui/x-data-grid-premium', 'x-data-grid-premium'),
+    buildPackageRestrictedImports('@mui/x-data-grid-generator', 'x-data-grid-generator'),
     buildPackageRestrictedImports('@mui/x-pickers', 'x-pickers'),
     buildPackageRestrictedImports('@mui/x-pickers-pro', 'x-pickers-pro'),
     buildPackageRestrictedImports('@mui/x-license', 'x-license'),

.github/workflows/no-response.yml

@@ -8,8 +8,10 @@ on:
   issue_comment:
     types: [created]
   schedule:
-    # Schedule for five minutes after the hour, every hour
-    - cron: '5 * * * *'
+    # These runs in our repos are spread evenly throughout the day to avoid hitting rate limits.
+    # If you change this schedule, consider changing the remaining repositories as well.
+    # Runs at 3 am, 3 pm
+    - cron: '0 3,15 * * *'
 
 permissions: {}
 

babel.config.js

@@ -16,7 +16,6 @@ const defaultAlias = {
   '@mui/x-date-pickers-pro': resolveAliasPath('./packages/x-date-pickers-pro/src'),
   '@mui/x-charts': resolveAliasPath('./packages/x-charts/src'),
   '@mui/x-tree-view': resolveAliasPath('./packages/x-tree-view/src'),
-  '@mui/markdown': '@mui/monorepo/packages/markdown',
   '@mui/material-nextjs': '@mui/monorepo/packages/mui-material-nextjs/src',
   '@mui-internal/api-docs-builder': resolveAliasPath(
     './node_modules/@mui/monorepo/packages/api-docs-builder',

docs/babel.config.js

@@ -12,7 +12,6 @@ const alias = {
   '@mui/x-tree-view': '../packages/x-tree-view/src',
   '@mui/x-license': '../packages/x-license/src',
   '@mui/docs': '../node_modules/@mui/monorepo/packages/mui-docs/src',
-  '@mui/markdown': '../node_modules/@mui/monorepo/packages/markdown',
   '@mui/monorepo': '../node_modules/@mui/monorepo',
   '@mui/material-nextjs': '../node_modules/@mui/monorepo/packages/mui-material-nextjs/src',
   '@mui-internal/api-docs-builder': '../node_modules/@mui/monorepo/packages/api-docs-builder',

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/column-dimensions/ColumnAutosizingAsync.js

@@ -60,11 +60,14 @@ export default function ColumnAutosizingAsync() {
     setIsLoading(true);
     getFakeData(100)
       .then((data) => {
-        return ReactDOM.flushSync(() => {
+        ReactDOM.flushSync(() => {
           setIsLoading(false);
           apiRef.current.updateRows(data.rows);
         });
       })
+      // `sleep`/`setTimeout` is required because `.updateRows` is an
+      // async function throttled to avoid choking on frequent changes.
+      .then(() => sleep(0))
       .then(() =>
         apiRef.current.autosizeColumns({
           includeHeaders: true,
@@ -103,3 +106,9 @@ export default function ColumnAutosizingAsync() {
     </div>
   );
 }
+
+function sleep(ms) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}

docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.tsx

@@ -60,11 +60,14 @@ export default function ColumnAutosizingAsync() {
     setIsLoading(true);
     getFakeData(100)
       .then((data) => {
-        return ReactDOM.flushSync(() => {
+        ReactDOM.flushSync(() => {
           setIsLoading(false);
           apiRef.current.updateRows(data.rows);
         });
       })
+      // `sleep`/`setTimeout` is required because `.updateRows` is an
+      // async function throttled to avoid choking on frequent changes.
+      .then(() => sleep(0))
       .then(() =>
         apiRef.current.autosizeColumns({
           includeHeaders: true,
@@ -103,3 +106,9 @@ export default function ColumnAutosizingAsync() {
     </div>
   );
 }
+
+function sleep(ms: number) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}

docs/data/data-grid/demo/FullFeaturedDemo.js

@@ -301,7 +301,6 @@ export default function FullFeaturedDemo() {
         loading={loading}
         checkboxSelection
         disableRowSelectionOnClick
-        rowThreshold={0}
         initialState={{
           ...data.initialState,
           pinnedColumns: { left: [GRID_CHECKBOX_SELECTION_FIELD, 'desk'] },

docs/data/data-grid/demo/FullFeaturedDemo.tsx

@@ -341,7 +341,6 @@ export default function FullFeaturedDemo() {
         loading={loading}
         checkboxSelection
         disableRowSelectionOnClick
-        rowThreshold={0}
         initialState={{
           ...data.initialState,
           pinnedColumns: { left: [GRID_CHECKBOX_SELECTION_FIELD, 'desk'] },

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`.