Merge branch 'mui:master' into master

arthurbalduini · Sep 27, 2024 · 4ecc5e9 · 4ecc5e9
2 parents 2b17dd2 + c36a8d5
commit 4ecc5e9
Show file tree

Hide file tree

Showing 90 changed files with 1,146 additions and 377 deletions.
diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridReferencesNoSnap.js b/docs/data/data-grid/column-menu/ColumnMenuGridReferencesNoSnap.js
@@ -137,14 +137,8 @@ const rows = [
 
 export default function ColumnMenuGridReferencesNoSnap() {
   return (
-    <div style={{ width: '100%' }}>
-      <DataGridPremium
-        columns={columns}
-        rows={rows}
-        disableColumnMenu
-        autoHeight
-        hideFooter
-      />
+    <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
+      <DataGridPremium columns={columns} rows={rows} disableColumnMenu hideFooter />
     </div>
   );
 }
diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridReferencesNoSnap.tsx b/docs/data/data-grid/column-menu/ColumnMenuGridReferencesNoSnap.tsx
@@ -143,14 +143,8 @@ const rows = [
 
 export default function ColumnMenuGridReferencesNoSnap() {
   return (
-    <div style={{ width: '100%' }}>
-      <DataGridPremium
-        columns={columns}
-        rows={rows}
-        disableColumnMenu
-        autoHeight
-        hideFooter
-      />
+    <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
+      <DataGridPremium columns={columns} rows={rows} disableColumnMenu hideFooter />
     </div>
   );
 }
diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridReferencesNoSnap.tsx.preview b/docs/data/data-grid/column-menu/ColumnMenuGridReferencesNoSnap.tsx.preview
@@ -1,7 +1 @@
-<DataGridPremium
-  columns={columns}
-  rows={rows}
-  disableColumnMenu
-  autoHeight
-  hideFooter
-/>
+<DataGridPremium columns={columns} rows={rows} disableColumnMenu hideFooter />
diff --git a/docs/data/data-grid/column-spanning/ColumnSpanningDerived.js b/docs/data/data-grid/column-spanning/ColumnSpanningDerived.js
@@ -137,6 +137,9 @@ const columns = [
 ];
 
 const rootStyles = {
+  display: 'flex',
+  flexDirection: 'column',
+  height: 'fit-content',
   width: '100%',
   '& .Maths': {
     backgroundColor: 'rgba(157, 255, 118, 0.49)',
@@ -172,7 +175,6 @@ export default function ColumnSpanningDerived() {
             left: ['day'],
           },
         }}
-        autoHeight
         disableRowSelectionOnClick
         hideFooter
         showCellVerticalBorder

diff --git a/docs/data/data-grid/column-spanning/ColumnSpanningDerived.tsx b/docs/data/data-grid/column-spanning/ColumnSpanningDerived.tsx
@@ -148,6 +148,9 @@ const columns: GridColDef<Row>[] = [
 ];
 
 const rootStyles = {
+  display: 'flex',
+  flexDirection: 'column',
+  height: 'fit-content',
   width: '100%',
   '& .Maths': {
     backgroundColor: 'rgba(157, 255, 118, 0.49)',
@@ -183,7 +186,6 @@ export default function ColumnSpanningDerived() {
             left: ['day'],
           },
         }}
-        autoHeight
         disableRowSelectionOnClick
         hideFooter
         showCellVerticalBorder

diff --git a/docs/data/data-grid/column-spanning/ColumnSpanningDerived.tsx.preview b/docs/data/data-grid/column-spanning/ColumnSpanningDerived.tsx.preview
@@ -6,7 +6,6 @@
       left: ['day'],
     },
   }}
-  autoHeight
   disableRowSelectionOnClick
   hideFooter
   showCellVerticalBorder

diff --git a/docs/data/data-grid/column-spanning/ColumnSpanningFunction.js b/docs/data/data-grid/column-spanning/ColumnSpanningFunction.js
@@ -95,14 +95,15 @@ export default function ColumnSpanningFunction() {
   return (
     <Box
       sx={{
+        display: 'flex',
+        flexDirection: 'column',
         width: '100%',
         '& .bold': {
           fontWeight: 600,
         },
       }}
     >
       <DataGrid
-        autoHeight
         disableColumnFilter
         disableRowSelectionOnClick
         hideFooter

diff --git a/docs/data/data-grid/column-spanning/ColumnSpanningFunction.tsx b/docs/data/data-grid/column-spanning/ColumnSpanningFunction.tsx
@@ -118,14 +118,15 @@ export default function ColumnSpanningFunction() {
   return (
     <Box
       sx={{
+        display: 'flex',
+        flexDirection: 'column',
         width: '100%',
         '& .bold': {
           fontWeight: 600,
         },
       }}
     >
       <DataGrid
-        autoHeight
         disableColumnFilter
         disableRowSelectionOnClick
         hideFooter

diff --git a/docs/data/data-grid/column-spanning/ColumnSpanningFunction.tsx.preview b/docs/data/data-grid/column-spanning/ColumnSpanningFunction.tsx.preview
@@ -1,5 +1,4 @@
 <DataGrid
-  autoHeight
   disableColumnFilter
   disableRowSelectionOnClick
   hideFooter

diff --git a/docs/data/data-grid/column-spanning/ColumnSpanningNumber.js b/docs/data/data-grid/column-spanning/ColumnSpanningNumber.js
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { DataGrid } from '@mui/x-data-grid';
 
 const other = {
-  autoHeight: true,
   showCellVerticalBorder: true,
   showColumnVerticalBorder: true,
 };
@@ -14,7 +13,14 @@ const rows = [
 
 export default function ColumnSpanningNumber() {
   return (
-    <div style={{ width: '100%' }}>
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        height: 'fit-content',
+      }}
+    >
       <DataGrid
         columns={[
           { field: 'username', colSpan: 2, hideable: false },

diff --git a/docs/data/data-grid/column-spanning/ColumnSpanningNumber.tsx b/docs/data/data-grid/column-spanning/ColumnSpanningNumber.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { DataGrid } from '@mui/x-data-grid';
 
 const other = {
-  autoHeight: true,
   showCellVerticalBorder: true,
   showColumnVerticalBorder: true,
 };
@@ -14,7 +13,14 @@ const rows = [
 
 export default function ColumnSpanningNumber() {
   return (
-    <div style={{ width: '100%' }}>
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        height: 'fit-content',
+      }}
+    >
       <DataGrid
         columns={[
           { field: 'username', colSpan: 2, hideable: false },

diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.js b/docs/data/data-grid/demo/PopularFeaturesDemo.js
@@ -491,6 +491,8 @@ export default function PopularFeaturesDemo() {
   return (
     <Box
       sx={{
+        display: 'flex',
+        flexDirection: 'column',
         minHeight: 1000,
         width: '100%',
         border: '1px solid',
@@ -500,7 +502,6 @@ export default function PopularFeaturesDemo() {
     >
       <DataGridPremium
         apiRef={apiRef}
-        autoHeight
         disableRowSelectionOnClick
         onRowClick={onRowClick}
         slots={{

diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.tsx b/docs/data/data-grid/demo/PopularFeaturesDemo.tsx
@@ -512,6 +512,8 @@ export default function PopularFeaturesDemo() {
   return (
     <Box
       sx={{
+        display: 'flex',
+        flexDirection: 'column',
         minHeight: 1000,
         width: '100%',
         border: '1px solid',
@@ -521,7 +523,6 @@ export default function PopularFeaturesDemo() {
     >
       <DataGridPremium
         apiRef={apiRef}
-        autoHeight
         disableRowSelectionOnClick
         onRowClick={onRowClick}
         slots={{

diff --git a/docs/data/data-grid/layout/FlexGrid.js b/docs/data/data-grid/layout/FlexGrid.js
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import { DataGrid } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+export default function FlexGrid() {
+  const [nbRows, setNbRows] = React.useState(3);
+  const removeRow = () => setNbRows((x) => Math.max(0, x - 1));
+  const addRow = () => setNbRows((x) => Math.min(100, x + 1));
+
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 100,
+    maxColumns: 6,
+  });
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Stack direction="row" spacing={1} sx={{ mb: 1 }}>
+        <Button size="small" onClick={removeRow}>
+          Remove a row
+        </Button>
+        <Button size="small" onClick={addRow}>
+          Add a row
+        </Button>
+      </Stack>
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <DataGrid {...data} rows={data.rows.slice(0, nbRows)} loading={loading} />
+      </div>
+    </Box>
+  );
+}
diff --git a/docs/data/data-grid/layout/FlexGrid.tsx b/docs/data/data-grid/layout/FlexGrid.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import { DataGrid } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+export default function FlexGrid() {
+  const [nbRows, setNbRows] = React.useState(3);
+  const removeRow = () => setNbRows((x) => Math.max(0, x - 1));
+  const addRow = () => setNbRows((x) => Math.min(100, x + 1));
+
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 100,
+    maxColumns: 6,
+  });
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Stack direction="row" spacing={1} sx={{ mb: 1 }}>
+        <Button size="small" onClick={removeRow}>
+          Remove a row
+        </Button>
+        <Button size="small" onClick={addRow}>
+          Add a row
+        </Button>
+      </Stack>
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <DataGrid {...data} rows={data.rows.slice(0, nbRows)} loading={loading} />
+      </div>
+    </Box>
+  );
+}
diff --git a/docs/data/data-grid/layout/FlexGrid.tsx.preview b/docs/data/data-grid/layout/FlexGrid.tsx.preview
@@ -0,0 +1,11 @@
+<Stack direction="row" spacing={1} sx={{ mb: 1 }}>
+  <Button size="small" onClick={removeRow}>
+    Remove a row
+  </Button>
+  <Button size="small" onClick={addRow}>
+    Add a row
+  </Button>
+</Stack>
+<div style={{ display: 'flex', flexDirection: 'column' }}>
+  <DataGrid {...data} rows={data.rows.slice(0, nbRows)} loading={loading} />
+</div>