Merge branch 'mui:master' into column-resize-fix

mui · Nov 5, 2024 · 84ecae7 · 84ecae7
2 parents c5dcb25 + f50938c
commit 84ecae7
Show file tree

Hide file tree

Showing 19 changed files with 255 additions and 136 deletions.
diff --git a/docs/data/charts/bars/BarAnimation.tsx b/docs/data/charts/bars/BarAnimation.tsx
@@ -5,6 +5,7 @@ import Slider from '@mui/material/Slider';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
 import { BarChart } from '@mui/x-charts/BarChart';
+import { HighlightScope } from '@mui/x-charts/context';
 
 export default function BarAnimation() {
   const [seriesNb, setSeriesNb] = React.useState(2);
@@ -67,10 +68,10 @@ export default function BarAnimation() {
   );
 }
 
-const highlightScope = {
+const highlightScope: HighlightScope = {
   highlight: 'series',
   fade: 'global',
-} as const;
+};
 
 const series = [
   {

diff --git a/docs/data/charts/highlighting/ControlledHighlight.js b/docs/data/charts/highlighting/ControlledHighlight.js
@@ -18,8 +18,8 @@ export default function ControlledHighlight() {
     seriesId: 'A',
     dataIndex: 0,
   });
-  const [highlighted, setHighlighted] = React.useState('item');
-  const [faded, setFaded] = React.useState('global');
+  const [highlight, setHighlight] = React.useState('item');
+  const [fade, setFade] = React.useState('global');
 
   const handleHighLightedSeries = (event, newHighLightedSeries) => {
     if (newHighLightedSeries !== null) {
@@ -80,8 +80,8 @@ export default function ControlledHighlight() {
           series={barChartsProps.series.map((series) => ({
             ...series,
             highlightScope: {
-              highlighted,
-              faded,
+              highlight,
+              fade,
             },
           }))}
           highlightedItem={highlightedItem}
@@ -98,8 +98,8 @@ export default function ControlledHighlight() {
         <TextField
           select
           label="highlighted"
-          value={highlighted}
-          onChange={(event) => setHighlighted(event.target.value)}
+          value={highlight}
+          onChange={(event) => setHighlight(event.target.value)}
           sx={{ minWidth: 150 }}
         >
           <MenuItem value={'none'}>none</MenuItem>
@@ -109,8 +109,8 @@ export default function ControlledHighlight() {
         <TextField
           select
           label="faded"
-          value={faded}
-          onChange={(event) => setFaded(event.target.value)}
+          value={fade}
+          onChange={(event) => setFade(event.target.value)}
           sx={{ minWidth: 150 }}
         >
           <MenuItem value={'none'}>none</MenuItem>

diff --git a/docs/data/charts/highlighting/ControlledHighlight.tsx b/docs/data/charts/highlighting/ControlledHighlight.tsx
@@ -19,8 +19,8 @@ export default function ControlledHighlight() {
       seriesId: 'A',
       dataIndex: 0,
     });
-  const [highlighted, setHighlighted] = React.useState('item');
-  const [faded, setFaded] = React.useState('global');
+  const [highlight, setHighlight] = React.useState('item');
+  const [fade, setFade] = React.useState('global');
 
   const handleHighLightedSeries = (event: any, newHighLightedSeries: string) => {
     if (newHighLightedSeries !== null) {
@@ -81,8 +81,8 @@ export default function ControlledHighlight() {
           series={barChartsProps.series.map((series) => ({
             ...series,
             highlightScope: {
-              highlighted,
-              faded,
+              highlight,
+              fade,
             } as HighlightScope,
           }))}
           highlightedItem={highlightedItem}
@@ -99,8 +99,8 @@ export default function ControlledHighlight() {
         <TextField
           select
           label="highlighted"
-          value={highlighted}
-          onChange={(event) => setHighlighted(event.target.value)}
+          value={highlight}
+          onChange={(event) => setHighlight(event.target.value)}
           sx={{ minWidth: 150 }}
         >
           <MenuItem value={'none'}>none</MenuItem>
@@ -110,8 +110,8 @@ export default function ControlledHighlight() {
         <TextField
           select
           label="faded"
-          value={faded}
-          onChange={(event) => setFaded(event.target.value)}
+          value={fade}
+          onChange={(event) => setFade(event.target.value)}
           sx={{ minWidth: 150 }}
         >
           <MenuItem value={'none'}>none</MenuItem>

diff --git a/docs/data/charts/highlighting/ElementHighlights.js b/docs/data/charts/highlighting/ElementHighlights.js
@@ -88,8 +88,8 @@ const pieChartsParams = {
 export default function ElementHighlights() {
   const [chartType, setChartType] = React.useState('bar');
   const [withArea, setWithArea] = React.useState(false);
-  const [highlighted, setHighlighted] = React.useState('item');
-  const [faded, setFaded] = React.useState('global');
+  const [highlight, setHighlight] = React.useState('item');
+  const [fade, setFade] = React.useState('global');
 
   const handleChartType = (event, newChartType) => {
     if (newChartType !== null) {
@@ -123,8 +123,8 @@ export default function ElementHighlights() {
             series={barChartsParams.series.map((series) => ({
               ...series,
               highlightScope: {
-                highlighted,
-                faded,
+                highlight,
+                fade,
               },
             }))}
           />
@@ -137,8 +137,8 @@ export default function ElementHighlights() {
               ...series,
               area: withArea,
               highlightScope: {
-                highlighted,
-                faded,
+                highlight,
+                fade,
               },
             }))}
           />
@@ -150,8 +150,8 @@ export default function ElementHighlights() {
             series={scatterChartsParams.series.map((series) => ({
               ...series,
               highlightScope: {
-                highlighted,
-                faded,
+                highlight,
+                fade,
               },
             }))}
           />
@@ -163,8 +163,8 @@ export default function ElementHighlights() {
             series={pieChartsParams.series.map((series) => ({
               ...series,
               highlightScope: {
-                highlighted,
-                faded,
+                highlight,
+                fade,
               },
             }))}
           />
@@ -179,9 +179,9 @@ export default function ElementHighlights() {
       >
         <TextField
           select
-          label="highlighted"
-          value={highlighted}
-          onChange={(event) => setHighlighted(event.target.value)}
+          label="highlight"
+          value={highlight}
+          onChange={(event) => setHighlight(event.target.value)}
           sx={{ minWidth: 150 }}
         >
           <MenuItem value={'none'}>none</MenuItem>
@@ -190,9 +190,9 @@ export default function ElementHighlights() {
         </TextField>
         <TextField
           select
-          label="faded"
-          value={faded}
-          onChange={(event) => setFaded(event.target.value)}
+          label="fade"
+          value={fade}
+          onChange={(event) => setFade(event.target.value)}
           sx={{ minWidth: 150 }}
         >
           <MenuItem value={'none'}>none</MenuItem>

diff --git a/docs/data/charts/highlighting/ElementHighlights.tsx b/docs/data/charts/highlighting/ElementHighlights.tsx
@@ -89,8 +89,8 @@ const pieChartsParams = {
 export default function ElementHighlights() {
   const [chartType, setChartType] = React.useState('bar');
   const [withArea, setWithArea] = React.useState(false);
-  const [highlighted, setHighlighted] = React.useState('item');
-  const [faded, setFaded] = React.useState('global');
+  const [highlight, setHighlight] = React.useState('item');
+  const [fade, setFade] = React.useState('global');
 
   const handleChartType = (event: any, newChartType: string) => {
     if (newChartType !== null) {
@@ -124,8 +124,8 @@ export default function ElementHighlights() {
             series={barChartsParams.series.map((series) => ({
               ...series,
               highlightScope: {
-                highlighted,
-                faded,
+                highlight,
+                fade,
               } as HighlightScope,
             }))}
           />
@@ -138,8 +138,8 @@ export default function ElementHighlights() {
               ...series,
               area: withArea,
               highlightScope: {
-                highlighted,
-                faded,
+                highlight,
+                fade,
               } as HighlightScope,
             }))}
           />
@@ -151,8 +151,8 @@ export default function ElementHighlights() {
             series={scatterChartsParams.series.map((series) => ({
               ...series,
               highlightScope: {
-                highlighted,
-                faded,
+                highlight,
+                fade,
               } as HighlightScope,
             }))}
           />
@@ -164,8 +164,8 @@ export default function ElementHighlights() {
             series={pieChartsParams.series.map((series) => ({
               ...series,
               highlightScope: {
-                highlighted,
-                faded,
+                highlight,
+                fade,
               } as HighlightScope,
             }))}
           />
@@ -180,9 +180,9 @@ export default function ElementHighlights() {
       >
         <TextField
           select
-          label="highlighted"
-          value={highlighted}
-          onChange={(event) => setHighlighted(event.target.value)}
+          label="highlight"
+          value={highlight}
+          onChange={(event) => setHighlight(event.target.value)}
           sx={{ minWidth: 150 }}
         >
           <MenuItem value={'none'}>none</MenuItem>
@@ -191,9 +191,9 @@ export default function ElementHighlights() {
         </TextField>
         <TextField
           select
-          label="faded"
-          value={faded}
-          onChange={(event) => setFaded(event.target.value)}
+          label="fade"
+          value={fade}
+          onChange={(event) => setFade(event.target.value)}
           sx={{ minWidth: 150 }}
         >
           <MenuItem value={'none'}>none</MenuItem>

diff --git a/...ata/data-grid/layout/AutoHeightOverlay.js → ...ata/data-grid/layout/GridOverlayHeight.js b/...ata/data-grid/layout/AutoHeightOverlay.js → ...ata/data-grid/layout/GridOverlayHeight.js
@@ -56,11 +56,10 @@ function CustomNoRowsOverlay() {
   );
 }
 
-export default function AutoHeightOverlay() {
+export default function GridOverlayHeight() {
   return (
-    <Box sx={{ width: '100%' }}>
+    <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
       <DataGrid
-        autoHeight
         columns={[{ field: 'ID' }, { field: 'First name' }, { field: 'Last name' }]}
         rows={[]}
         slots={{ noRowsOverlay: CustomNoRowsOverlay }}

diff --git a/...ta/data-grid/layout/AutoHeightOverlay.tsx → ...ta/data-grid/layout/GridOverlayHeight.tsx b/...ta/data-grid/layout/AutoHeightOverlay.tsx → ...ta/data-grid/layout/GridOverlayHeight.tsx
@@ -56,11 +56,10 @@ function CustomNoRowsOverlay() {
   );
 }
 
-export default function AutoHeightOverlay() {
+export default function GridOverlayHeight() {
   return (
-    <Box sx={{ width: '100%' }}>
+    <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
       <DataGrid
-        autoHeight
         columns={[{ field: 'ID' }, { field: 'First name' }, { field: 'Last name' }]}
         rows={[]}
         slots={{ noRowsOverlay: CustomNoRowsOverlay }}

diff --git a/...grid/layout/AutoHeightOverlay.tsx.preview → ...grid/layout/GridOverlayHeight.tsx.preview b/...grid/layout/AutoHeightOverlay.tsx.preview → ...grid/layout/GridOverlayHeight.tsx.preview
@@ -1,5 +1,4 @@
 <DataGrid
-  autoHeight
   columns={[{ field: 'ID' }, { field: 'First name' }, { field: 'Last name' }]}
   rows={[]}
   slots={{ noRowsOverlay: CustomNoRowsOverlay }}

diff --git a/docs/data/data-grid/layout/layout.md b/docs/data/data-grid/layout/layout.md
@@ -41,6 +41,17 @@ You can predefine dimensions for the parent of the Data Grid.
 
 {{"demo": "FixedSizeGrid.js", "bg": "inline"}}
 
+## Overlay height
+
+When data grid has no content, overlays (such as
+["Loading"](/x/react-data-grid/overlays/#loading-overlay) or
+["No rows"](/x/react-data-grid/overlays/#no-rows-overlay))
+take the height of two rows by default.
+
+To customize the overlay height, use the `--DataGrid-overlayHeight` CSS variable.
+
+{{"demo": "GridOverlayHeight.js", "bg": "inline"}}
+
 ## Auto height
 
 :::error
@@ -52,17 +63,6 @@ This means that the Data Grid's height will be determined by the number of rows,
 
 {{"demo": "AutoHeightGrid.js", "bg": "inline"}}
 
-### Overlay height
-
-When `autoHeight` is enabled, grid overlays (such as
-["Loading"](/x/react-data-grid/overlays/#loading-overlay) or
-["No rows"](/x/react-data-grid/overlays/#no-rows-overlay))
-take the height of two rows by default.
-
-To customize the overlay height, use the `--DataGrid-overlayHeight` CSS variable.
-
-{{"demo": "AutoHeightOverlay.js", "bg": "inline"}}
-
 ## API
 
 - [DataGrid](/x/api/data-grid/data-grid/)

diff --git a/packages/x-charts/src/PieChart/PieArc.tsx b/packages/x-charts/src/PieChart/PieArc.tsx
@@ -9,7 +9,6 @@ import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { PieItemId } from '../models';
-import { HighlightScope } from '../context';
 
 export interface PieArcClasses {
   /** Styles applied to the root element. */
@@ -64,10 +63,6 @@ export type PieArcProps = Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> &
   PieArcOwnerState & {
     cornerRadius: SpringValue<number>;
     endAngle: SpringValue<number>;
-    /**
-     * @deprecated Use the `isFaded` or `isHighlighted` props instead.
-     */
-    highlightScope?: Partial<HighlightScope>;
     innerRadius: SpringValue<number>;
     onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
     outerRadius: SpringValue<number>;
@@ -90,7 +85,6 @@ function PieArc(props: PieArcProps) {
     outerRadius,
     paddingAngle,
     startAngle,
-    highlightScope,
     ...other
   } = props;
 
@@ -137,15 +131,6 @@ PieArc.propTypes = {
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
   dataIndex: PropTypes.number.isRequired,
-  /**
-   * @deprecated Use the `isFaded` or `isHighlighted` props instead.
-   */
-  highlightScope: PropTypes.shape({
-    fade: PropTypes.oneOf(['global', 'none', 'series']),
-    faded: PropTypes.oneOf(['global', 'none', 'series']),
-    highlight: PropTypes.oneOf(['item', 'none', 'series']),
-    highlighted: PropTypes.oneOf(['item', 'none', 'series']),
-  }),
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   isFaded: PropTypes.bool.isRequired,
   isHighlighted: PropTypes.bool.isRequired,