Merge branch 'v7.x' into cherry-pick-15556

docs/data/charts-component-api-pages.ts → docs/data/chartsApiPages.ts

@@ -1,6 +1,6 @@
 import type { MuiPage } from 'docs/src/MuiPage';
 
-const apiPages: MuiPage[] = [
+const chartsApiPages: MuiPage[] = [
   {
     pathname: '/x/api/charts/animated-area',
     title: 'AnimatedArea',
@@ -230,4 +230,4 @@ const apiPages: MuiPage[] = [
     title: 'SparkLineChart',
   },
 ];
-export default apiPages;
+export default chartsApiPages;

docs/data/data-grid/localization/data.json

@@ -35,7 +35,7 @@
     "languageTag": "zh-CN",
     "importName": "zhCN",
     "localeName": "Chinese (Simplified)",
-    "missingKeysCount": 1,
+    "missingKeysCount": 0,
     "totalKeysCount": 123,
     "githubLink": "https://github.com/mui/mui-x/blob/v7.x/packages/x-data-grid/src/locales/zhCN.ts"
   },
@@ -195,15 +195,15 @@
     "languageTag": "pt-PT",
     "importName": "ptPT",
     "localeName": "Portuguese",
-    "missingKeysCount": 1,
+    "missingKeysCount": 0,
     "totalKeysCount": 123,
     "githubLink": "https://github.com/mui/mui-x/blob/v7.x/packages/x-data-grid/src/locales/ptPT.ts"
   },
   {
     "languageTag": "pt-BR",
     "importName": "ptBR",
     "localeName": "Portuguese (Brazil)",
-    "missingKeysCount": 1,
+    "missingKeysCount": 0,
     "totalKeysCount": 123,
     "githubLink": "https://github.com/mui/mui-x/blob/v7.x/packages/x-data-grid/src/locales/ptBR.ts"
   },
@@ -235,7 +235,7 @@
     "languageTag": "es-ES",
     "importName": "esES",
     "localeName": "Spanish",
-    "missingKeysCount": 1,
+    "missingKeysCount": 0,
     "totalKeysCount": 123,
     "githubLink": "https://github.com/mui/mui-x/blob/v7.x/packages/x-data-grid/src/locales/esES.ts"
   },

docs/data/data-grid/row-height/VirtualizeColumnsWithAutoRowHeight.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+
+function useData(rowLength, columnLength) {
+  const [data, setData] = React.useState({ columns: [], rows: [] });
+
+  React.useEffect(() => {
+    const rows = [];
+
+    for (let i = 0; i < rowLength; i += 1) {
+      const row = {
+        id: i,
+      };
+
+      for (let j = 1; j <= columnLength; j += 1) {
+        row[`price${j}M`] = `${i.toString()}, ${j} `;
+      }
+
+      rows.push(row);
+    }
+
+    const columns = [];
+
+    for (let j = 1; j <= columnLength; j += 1) {
+      columns.push({ field: `price${j}M`, headerName: `${j}M`, width: 55 });
+    }
+
+    setData({
+      rows,
+      columns,
+    });
+  }, [rowLength, columnLength]);
+
+  return data;
+}
+
+export default function VirtualizeColumnsWithAutoRowHeight() {
+  const data = useData(100, 100);
+
+  return (
+    <div style={{ height: 600, width: '100%' }}>
+      <DataGrid
+        {...data}
+        getRowHeight={() => 'auto'}
+        virtualizeColumnsWithAutoRowHeight
+      />
+    </div>
+  );
+}

docs/data/data-grid/row-height/VirtualizeColumnsWithAutoRowHeight.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { DataGrid, GridColDef, GridRowId } from '@mui/x-data-grid';
+
+export interface DataRowModel {
+  id: GridRowId;
+  [price: string]: number | string;
+}
+
+export interface GridData {
+  columns: GridColDef[];
+  rows: DataRowModel[];
+}
+
+function useData(rowLength: number, columnLength: number) {
+  const [data, setData] = React.useState<GridData>({ columns: [], rows: [] });
+
+  React.useEffect(() => {
+    const rows: DataRowModel[] = [];
+
+    for (let i = 0; i < rowLength; i += 1) {
+      const row: DataRowModel = {
+        id: i,
+      };
+
+      for (let j = 1; j <= columnLength; j += 1) {
+        row[`price${j}M`] = `${i.toString()}, ${j} `;
+      }
+
+      rows.push(row);
+    }
+
+    const columns: GridColDef[] = [];
+
+    for (let j = 1; j <= columnLength; j += 1) {
+      columns.push({ field: `price${j}M`, headerName: `${j}M`, width: 55 });
+    }
+
+    setData({
+      rows,
+      columns,
+    });
+  }, [rowLength, columnLength]);
+
+  return data;
+}
+
+export default function VirtualizeColumnsWithAutoRowHeight() {
+  const data = useData(100, 100);
+
+  return (
+    <div style={{ height: 600, width: '100%' }}>
+      <DataGrid
+        {...data}
+        getRowHeight={() => 'auto'}
+        virtualizeColumnsWithAutoRowHeight
+      />
+    </div>
+  );
+}

docs/data/data-grid/row-height/VirtualizeColumnsWithAutoRowHeight.tsx.preview

@@ -0,0 +1,5 @@
+<DataGrid
+  {...data}
+  getRowHeight={() => 'auto'}
+  virtualizeColumnsWithAutoRowHeight
+/>

docs/data/data-grid/row-height/row-height.md

@@ -54,7 +54,6 @@ This side effect happens because a row height estimation is used while a row is
 You can configure the estimated value used by passing a function to the `getEstimatedRowHeight` prop.
 If not provided, the default row height of `52px` is used as estimation.
 It's recommended to pass this prop if the content deviates too much from the default value.
-Note that, due to the implementation adopted, the virtualization of the columns is also disabled to force all columns to be rendered at the same time.
 
 ```tsx
 <DataGrid getRowHeight={() => 'auto'} getEstimatedRowHeight={() => 200} />
@@ -78,6 +77,17 @@ Add padding to the cells to increase the space between the content and the cell
 
 :::
 
+### Column virtualization
+
+By default, the virtualization of the columns is disabled to force all columns to be rendered at the same time and calculate the row height correctly.
+However, this can lead to poor performance when rendering a lot of columns.
+
+If you need column virtualization, you can set the `virtualizeColumnsWithAutoRowHeight` prop to `true`.
+With this approach, the Data Grid measures the row height based on the visible columns.
+However, the row height might change during horizontal scrolling.
+
+{{"demo": "VirtualizeColumnsWithAutoRowHeight.js", "bg": "inline" }}
+
 ## Row density
 
 Give your users the option to change the default row density to match their preferences—compact, standard, or comfortable.

docs/data/data-grid/virtualization/virtualization.md

@@ -31,7 +31,12 @@ By default, columns coming under 150 pixels region are rendered outside of the v
 
 {{"demo": "ColumnVirtualizationGrid.js", "bg": "inline"}}
 
-You can disable column virtualization by calling `apiRef.current.unstable_setColumnVirtualization(false)`, or by setting the column buffer to the number of total columns.
+You can disable column virtualization by calling `apiRef.current.unstable_setColumnVirtualization(false)`, or by setting the [`columnBufferPx`](/x/api/data-grid/data-grid/#data-grid-prop-columnBufferPx) to a high value.
+
+:::info
+Column virtualization is disabled when dynamic row height is enabled.
+See [dynamic row height and column virtualization](/x/react-data-grid/row-height/#column-virtualization) to learn more.
+:::
 
 ## Disable virtualization
 

docs/data/data-grid-component-api-pages.ts → docs/data/dataGridApiPages.ts

@@ -1,6 +1,6 @@
 import type { MuiPage } from 'docs/src/MuiPage';
 
-const apiPages: MuiPage[] = [
+const dataGridApiPages: MuiPage[] = [
   {
     pathname: '/x/api/data-grid/data-grid',
     title: 'DataGrid',
@@ -28,4 +28,4 @@ const apiPages: MuiPage[] = [
     title: 'GridToolbarQuickFilter',
   },
 ];
-export default apiPages;
+export default dataGridApiPages;

docs/data/date-pickers-component-api-pages.ts → docs/data/datePickersApiPages.ts

@@ -1,6 +1,6 @@
 import type { MuiPage } from 'docs/src/MuiPage';
 
-const apiPages: MuiPage[] = [
+const datePickersApiPages: MuiPage[] = [
   {
     pathname: '/x/api/date-pickers/date-calendar',
     title: 'DateCalendar',
@@ -233,4 +233,4 @@ const apiPages: MuiPage[] = [
     title: 'YearCalendar',
   },
 ];
-export default apiPages;
+export default datePickersApiPages;

docs/data/pages.ts

@@ -1,8 +1,8 @@
 import type { MuiPage } from 'docs/src/MuiPage';
-import chartsComponentApi from './charts-component-api-pages';
-import dataGridComponentApi from './data-grid-component-api-pages';
-import pickersComponentApi from './date-pickers-component-api-pages';
-import treeViewComponentApi from './tree-view-component-api-pages';
+import chartsComponentApi from './chartsApiPages';
+import dataGridComponentApi from './dataGridApiPages';
+import pickersComponentApi from './datePickersApiPages';
+import treeViewComponentApi from './treeViewApiPages';
 
 const pages: MuiPage[] = [
   {

docs/data/tree-view-component-api-pages.ts → docs/data/treeViewApiPages.ts

@@ -1,6 +1,6 @@
 import type { MuiPage } from 'docs/src/MuiPage';
 
-const apiPages: MuiPage[] = [
+const treeViewApiPages: MuiPage[] = [
   {
     pathname: '/x/api/tree-view/rich-tree-view',
     title: 'RichTreeView',
@@ -27,4 +27,4 @@ const apiPages: MuiPage[] = [
     title: 'TreeView',
   },
 ];
-export default apiPages;
+export default treeViewApiPages;

docs/pages/x/api/data-grid/data-grid-premium.json

@@ -656,7 +656,8 @@
       }
     },
     "unstable_listView": { "type": { "name": "bool" } },
-    "unstable_rowSpanning": { "type": { "name": "bool" }, "default": "false" }
+    "unstable_rowSpanning": { "type": { "name": "bool" }, "default": "false" },
+    "virtualizeColumnsWithAutoRowHeight": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "DataGridPremium",
   "imports": [

docs/pages/x/api/data-grid/data-grid-pro.json

@@ -587,7 +587,8 @@
       }
     },
     "unstable_listView": { "type": { "name": "bool" } },
-    "unstable_rowSpanning": { "type": { "name": "bool" }, "default": "false" }
+    "unstable_rowSpanning": { "type": { "name": "bool" }, "default": "false" },
+    "virtualizeColumnsWithAutoRowHeight": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "DataGridPro",
   "imports": [

docs/pages/x/api/data-grid/data-grid.json

@@ -485,7 +485,8 @@
       },
       "additionalInfo": { "sx": true }
     },
-    "unstable_rowSpanning": { "type": { "name": "bool" }, "default": "false" }
+    "unstable_rowSpanning": { "type": { "name": "bool" }, "default": "false" },
+    "virtualizeColumnsWithAutoRowHeight": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "DataGrid",
   "imports": [

docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json

@@ -669,6 +669,9 @@
     },
     "unstable_rowSpanning": {
       "description": "If <code>true</code>, the Data Grid will auto span the cells over the rows having the same value."
+    },
+    "virtualizeColumnsWithAutoRowHeight": {
+      "description": "If <code>true</code>, the Data Grid enables column virtualization when <code>getRowHeight</code> is set to <code>() =&gt; &#39;auto&#39;</code>. By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. For datasets with a large number of columns, this can cause performance issues. The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally."
     }
   },
   "classDescriptions": {

docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json

@@ -607,6 +607,9 @@
     },
     "unstable_rowSpanning": {
       "description": "If <code>true</code>, the Data Grid will auto span the cells over the rows having the same value."
+    },
+    "virtualizeColumnsWithAutoRowHeight": {
+      "description": "If <code>true</code>, the Data Grid enables column virtualization when <code>getRowHeight</code> is set to <code>() =&gt; &#39;auto&#39;</code>. By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. For datasets with a large number of columns, this can cause performance issues. The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally."
     }
   },
   "classDescriptions": {

docs/translations/api-docs/data-grid/data-grid/data-grid.json

@@ -487,6 +487,9 @@
     },
     "unstable_rowSpanning": {
       "description": "If <code>true</code>, the Data Grid will auto span the cells over the rows having the same value."
+    },
+    "virtualizeColumnsWithAutoRowHeight": {
+      "description": "If <code>true</code>, the Data Grid enables column virtualization when <code>getRowHeight</code> is set to <code>() =&gt; &#39;auto&#39;</code>. By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. For datasets with a large number of columns, this can cause performance issues. The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally."
     }
   },
   "classDescriptions": {

package.json

@@ -95,7 +95,7 @@
     "@mui/internal-markdown": "^1.0.17",
     "@mui/internal-test-utils": "^1.0.17",
     "@mui/material": "^5.16.7",
-    "@mui/monorepo": "github:mui/material-ui#010de4505361345951824d905d1508d6f258ba67",
+    "@mui/monorepo": "github:mui/material-ui#7aa841466a01b745012e59e9d201ed50807a022e",
     "@mui/utils": "^5.16.6",
     "@next/eslint-plugin-next": "14.2.15",
     "@octokit/plugin-retry": "^7.1.2",

packages/x-charts/src/hooks/useInteractionItemProps.ts

@@ -28,7 +28,10 @@ export const useInteractionItemProps = (skip?: boolean) => {
       });
     };
     const onPointerLeave = (event: React.PointerEvent) => {
-      event.currentTarget.releasePointerCapture(event.pointerId);
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+
       dispatchInteraction({ type: 'leaveItem', data });
       clearHighlighted();
     };

packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx

@@ -1127,6 +1127,14 @@ DataGridPremiumRaw.propTypes = {
    * @default false
    */
   unstable_rowSpanning: PropTypes.bool,
+  /**
+   * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.
+   * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.
+   * For datasets with a large number of columns, this can cause performance issues.
+   * The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally.
+   * @default false
+   */
+  virtualizeColumnsWithAutoRowHeight: PropTypes.bool,
 } as any;
 
 interface DataGridPremiumComponent {

packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx

@@ -1026,4 +1026,12 @@ DataGridProRaw.propTypes = {
    * @default false
    */
   unstable_rowSpanning: PropTypes.bool,
+  /**
+   * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.
+   * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.
+   * For datasets with a large number of columns, this can cause performance issues.
+   * The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally.
+   * @default false
+   */
+  virtualizeColumnsWithAutoRowHeight: PropTypes.bool,
 } as any;

packages/x-data-grid/src/DataGrid/DataGrid.tsx

@@ -821,4 +821,12 @@ DataGridRaw.propTypes = {
    * @default false
    */
   unstable_rowSpanning: PropTypes.bool,
+  /**
+   * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.
+   * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.
+   * For datasets with a large number of columns, this can cause performance issues.
+   * The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally.
+   * @default false
+   */
+  virtualizeColumnsWithAutoRowHeight: PropTypes.bool,
 } as any;