Merge branch 'master' into detail-panel-set

mui · Dec 16, 2024 · a9beaaa · a9beaaa
2 parents 912c61b + 4e0cc3c
commit a9beaaa
Show file tree

Hide file tree

Showing 25 changed files with 334 additions and 297 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -232,7 +232,7 @@ jobs:
   test_browser:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.49.0-noble
+      - image: mcr.microsoft.com/playwright:v1.49.1-noble
     steps:
       - checkout
       - install_js:
@@ -263,7 +263,7 @@ jobs:
   test_e2e:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.49.0-noble
+      - image: mcr.microsoft.com/playwright:v1.49.1-noble
     steps:
       - checkout
       - install_js:
@@ -274,7 +274,7 @@ jobs:
   test_e2e_website:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.49.0-noble
+      - image: mcr.microsoft.com/playwright:v1.49.1-noble
     steps:
       - checkout
       - install_js:
@@ -287,7 +287,7 @@ jobs:
   test_regressions:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.49.0-noble
+      - image: mcr.microsoft.com/playwright:v1.49.1-noble
     steps:
       - checkout
       - install_js:

diff --git a/package.json b/package.json
@@ -97,10 +97,10 @@
     "@mui/material": "^5.16.9",
     "@mui/monorepo": "github:mui/material-ui#454a4c081a3cda665d5e608e1fc3d600d14eee53",
     "@mui/utils": "^5.16.8",
-    "@next/eslint-plugin-next": "15.0.4",
+    "@next/eslint-plugin-next": "15.1.0",
     "@octokit/plugin-retry": "^7.1.2",
     "@octokit/rest": "^21.0.2",
-    "@playwright/test": "^1.49.0",
+    "@playwright/test": "^1.49.1",
     "@types/babel__core": "^7.20.5",
     "@types/babel__traverse": "^7.20.6",
     "@types/chai": "^4.3.20",
@@ -109,7 +109,7 @@
     "@types/karma": "^6.3.9",
     "@types/lodash": "^4.17.13",
     "@types/mocha": "^10.0.10",
-    "@types/node": "^20.17.9",
+    "@types/node": "^20.17.10",
     "@types/react": "^18.3.14",
     "@types/react-dom": "^18.3.2",
     "@types/requestidlecallback": "^0.3.7",
@@ -140,7 +140,7 @@
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-webpack": "^0.13.9",
+    "eslint-import-resolver-webpack": "^0.13.10",
     "eslint-plugin-filenames": "^1.3.2",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsdoc": "^50.6.0",
@@ -186,7 +186,7 @@
     "sinon": "^19.0.2",
     "stream-browserify": "^3.0.0",
     "string-replace-loader": "^3.1.0",
-    "terser-webpack-plugin": "^5.3.10",
+    "terser-webpack-plugin": "^5.3.11",
     "tsx": "^4.19.2",
     "typescript": "^5.7.2",
     "unist-util-visit": "^5.0.0",
@@ -198,7 +198,7 @@
   },
   "resolutions": {
     "react-is": "^18.3.1",
-    "@types/node": "^20.17.9"
+    "@types/node": "^20.17.10"
   },
   "packageManager": "[email protected]",
   "engines": {

diff --git a/packages/rsc-builder/package.json b/packages/rsc-builder/package.json
@@ -9,6 +9,6 @@
   },
   "devDependencies": {
     "@types/mocha": "^10.0.10",
-    "@types/node": "^20.17.9"
+    "@types/node": "^20.17.10"
   }
 }
diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json
@@ -74,7 +74,7 @@
     "@react-spring/core": "^9.7.5",
     "@react-spring/shared": "^9.7.5",
     "@types/prop-types": "^15.7.14",
-    "@types/react-is": "^18.3.0",
+    "@types/react-is": "^18.3.1",
     "@types/use-sync-external-store": "^0.0.6",
     "csstype": "^3.1.3",
     "rimraf": "^6.0.1"

diff --git a/packages/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx b/packages/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx
@@ -1,8 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GridColumnMenuItemProps, useGridSelector } from '@mui/x-data-grid-pro';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
 import { unstable_useId as useId } from '@mui/utils';
@@ -67,38 +65,36 @@ function GridColumnMenuAggregationItem(props: GridColumnMenuItemProps) {
   const label = apiRef.current.getLocaleText('aggregationMenuItemHeader');
 
   return (
-    <rootProps.slots.baseMenuItem disableRipple>
-      <ListItemIcon>
-        <rootProps.slots.columnMenuAggregationIcon fontSize="small" />
-      </ListItemIcon>
-      <ListItemText>
-        <FormControl size="small" fullWidth sx={{ minWidth: 150 }}>
-          <InputLabel id={`${id}-label`}>{label}</InputLabel>
-          <rootProps.slots.baseSelect
-            labelId={`${id}-label`}
-            id={`${id}-input`}
-            value={selectedAggregationRule}
-            label={label}
-            color="primary"
-            onChange={handleAggregationItemChange as any}
-            onBlur={(event) => event.stopPropagation()}
-            fullWidth
-          >
-            <rootProps.slots.baseMenuItem value="">...</rootProps.slots.baseMenuItem>
-            {availableAggregationFunctions.map((aggFunc) => (
-              <rootProps.slots.baseMenuItem key={aggFunc} value={aggFunc}>
-                {getAggregationFunctionLabel({
-                  apiRef,
-                  aggregationRule: {
-                    aggregationFunctionName: aggFunc,
-                    aggregationFunction: rootProps.aggregationFunctions[aggFunc],
-                  },
-                })}
-              </rootProps.slots.baseMenuItem>
-            ))}
-          </rootProps.slots.baseSelect>
-        </FormControl>
-      </ListItemText>
+    <rootProps.slots.baseMenuItem
+      inert
+      iconStart={<rootProps.slots.columnMenuAggregationIcon fontSize="small" />}
+    >
+      <FormControl size="small" fullWidth sx={{ minWidth: 150 }}>
+        <InputLabel id={`${id}-label`}>{label}</InputLabel>
+        <rootProps.slots.baseSelect
+          labelId={`${id}-label`}
+          id={`${id}-input`}
+          value={selectedAggregationRule}
+          label={label}
+          color="primary"
+          onChange={handleAggregationItemChange as any}
+          onBlur={(event) => event.stopPropagation()}
+          fullWidth
+        >
+          <rootProps.slots.baseMenuItem value="">...</rootProps.slots.baseMenuItem>
+          {availableAggregationFunctions.map((aggFunc) => (
+            <rootProps.slots.baseMenuItem key={aggFunc} value={aggFunc}>
+              {getAggregationFunctionLabel({
+                apiRef,
+                aggregationRule: {
+                  aggregationFunctionName: aggFunc,
+                  aggregationFunction: rootProps.aggregationFunctions[aggFunc],
+                },
+              })}
+            </rootProps.slots.baseMenuItem>
+          ))}
+        </rootProps.slots.baseSelect>
+      </FormControl>
     </rootProps.slots.baseMenuItem>
   );
 }

diff --git a/packages/x-data-grid-premium/src/components/GridColumnMenuRowGroupItem.tsx b/packages/x-data-grid-premium/src/components/GridColumnMenuRowGroupItem.tsx
@@ -1,6 +1,4 @@
 import * as React from 'react';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import {
   useGridSelector,
   gridColumnLookupSelector,
@@ -35,11 +33,9 @@ export function GridColumnMenuRowGroupItem(props: GridColumnMenuItemProps) {
         onClick={ungroupColumn}
         key={field}
         disabled={!groupedColumn.groupable}
+        iconStart={<rootProps.slots.columnMenuUngroupIcon fontSize="small" />}
       >
-        <ListItemIcon>
-          <rootProps.slots.columnMenuUngroupIcon fontSize="small" />
-        </ListItemIcon>
-        <ListItemText>{apiRef.current.getLocaleText('unGroupColumn')(name)}</ListItemText>
+        {apiRef.current.getLocaleText('unGroupColumn')(name)}
       </rootProps.slots.baseMenuItem>
     );
   };

diff --git a/packages/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItem.tsx b/packages/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItem.tsx
@@ -1,6 +1,4 @@
 import * as React from 'react';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import {
   gridColumnLookupSelector,
   useGridSelector,
@@ -35,21 +33,21 @@ export function GridColumnMenuRowUngroupItem(props: GridColumnMenuItemProps) {
 
   if (rowGroupingModel.includes(colDef.field)) {
     return (
-      <rootProps.slots.baseMenuItem onClick={ungroupColumn}>
-        <ListItemIcon>
-          <rootProps.slots.columnMenuUngroupIcon fontSize="small" />
-        </ListItemIcon>
-        <ListItemText>{apiRef.current.getLocaleText('unGroupColumn')(name)}</ListItemText>
+      <rootProps.slots.baseMenuItem
+        onClick={ungroupColumn}
+        iconStart={<rootProps.slots.columnMenuUngroupIcon fontSize="small" />}
+      >
+        {apiRef.current.getLocaleText('unGroupColumn')(name)}
       </rootProps.slots.baseMenuItem>
     );
   }
 
   return (
-    <rootProps.slots.baseMenuItem onClick={groupColumn}>
-      <ListItemIcon>
-        <rootProps.slots.columnMenuGroupIcon fontSize="small" />
-      </ListItemIcon>
-      <ListItemText>{apiRef.current.getLocaleText('groupColumn')(name)}</ListItemText>
+    <rootProps.slots.baseMenuItem
+      onClick={groupColumn}
+      iconStart={<rootProps.slots.columnMenuGroupIcon fontSize="small" />}
+    >
+      {apiRef.current.getLocaleText('groupColumn')(name)}
     </rootProps.slots.baseMenuItem>
   );
 }
diff --git a/packages/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx b/packages/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx
@@ -1,8 +1,6 @@
 import * as React from 'react';
 import { useRtl } from '@mui/system/RtlProvider';
 import PropTypes from 'prop-types';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import { GridPinnedColumnPosition, GridColumnMenuItemProps } from '@mui/x-data-grid';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -26,20 +24,20 @@ function GridColumnMenuPinningItem(props: GridColumnMenuItemProps) {
     onClick(event);
   };
   const pinToLeftMenuItem = (
-    <rootProps.slots.baseMenuItem onClick={pinColumn(GridPinnedColumnPosition.LEFT)}>
-      <ListItemIcon>
-        <rootProps.slots.columnMenuPinLeftIcon fontSize="small" />
-      </ListItemIcon>
-      <ListItemText>{apiRef.current.getLocaleText('pinToLeft')}</ListItemText>
+    <rootProps.slots.baseMenuItem
+      onClick={pinColumn(GridPinnedColumnPosition.LEFT)}
+      iconStart={<rootProps.slots.columnMenuPinLeftIcon fontSize="small" />}
+    >
+      {apiRef.current.getLocaleText('pinToLeft')}
     </rootProps.slots.baseMenuItem>
   );
 
   const pinToRightMenuItem = (
-    <rootProps.slots.baseMenuItem onClick={pinColumn(GridPinnedColumnPosition.RIGHT)}>
-      <ListItemIcon>
-        <rootProps.slots.columnMenuPinRightIcon fontSize="small" />
-      </ListItemIcon>
-      <ListItemText>{apiRef.current.getLocaleText('pinToRight')}</ListItemText>
+    <rootProps.slots.baseMenuItem
+      onClick={pinColumn(GridPinnedColumnPosition.RIGHT)}
+      iconStart={<rootProps.slots.columnMenuPinRightIcon fontSize="small" />}
+    >
+      {apiRef.current.getLocaleText('pinToRight')}
     </rootProps.slots.baseMenuItem>
   );
 
@@ -61,15 +59,14 @@ function GridColumnMenuPinningItem(props: GridColumnMenuItemProps) {
         : rootProps.slots.columnMenuPinRightIcon;
     return (
       <React.Fragment>
-        <rootProps.slots.baseMenuItem onClick={pinColumn(otherSide)}>
-          <ListItemIcon>
-            <Icon fontSize="small" />
-          </ListItemIcon>
-          <ListItemText>{apiRef.current.getLocaleText(label)}</ListItemText>
+        <rootProps.slots.baseMenuItem
+          onClick={pinColumn(otherSide)}
+          iconStart={<Icon fontSize="small" />}
+        >
+          {apiRef.current.getLocaleText(label)}
         </rootProps.slots.baseMenuItem>
-        <rootProps.slots.baseMenuItem onClick={unpinColumn}>
-          <ListItemIcon />
-          <ListItemText>{apiRef.current.getLocaleText('unpin')}</ListItemText>
+        <rootProps.slots.baseMenuItem onClick={unpinColumn} iconStart="">
+          {apiRef.current.getLocaleText('unpin')}
         </rootProps.slots.baseMenuItem>
       </React.Fragment>
     );

diff --git a/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx b/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { IconButtonProps } from '@mui/material/IconButton';
 import { MenuItemProps } from '@mui/material/MenuItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
 interface GridActionsCellItemCommonProps {
@@ -70,8 +69,12 @@ const GridActionsCellItem = React.forwardRef<HTMLElement, GridActionsCellItemPro
     };
 
     return (
-      <rootProps.slots.baseMenuItem ref={ref} {...(other as any)} onClick={handleClick}>
-        {icon && <ListItemIcon>{icon}</ListItemIcon>}
+      <rootProps.slots.baseMenuItem
+        ref={ref}
+        {...(other as any)}
+        onClick={handleClick}
+        iconStart={icon}
+      >
         {label}
       </rootProps.slots.baseMenuItem>
     );

diff --git a/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.tsx b/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext';
 import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps';
 import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps';
@@ -24,11 +22,11 @@ function GridColumnMenuFilterItem(props: GridColumnMenuItemProps) {
   }
 
   return (
-    <rootProps.slots.baseMenuItem onClick={showFilter}>
-      <ListItemIcon>
-        <rootProps.slots.columnMenuFilterIcon fontSize="small" />
-      </ListItemIcon>
-      <ListItemText>{apiRef.current.getLocaleText('columnMenuFilter')}</ListItemText>
+    <rootProps.slots.baseMenuItem
+      onClick={showFilter}
+      iconStart={<rootProps.slots.columnMenuFilterIcon fontSize="small" />}
+    >
+      {apiRef.current.getLocaleText('columnMenuFilter')}
     </rootProps.slots.baseMenuItem>
   );
 }

diff --git a/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.tsx b/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps';
 import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps';
@@ -42,11 +40,12 @@ function GridColumnMenuHideItem(props: GridColumnMenuItemProps) {
   }
 
   return (
-    <rootProps.slots.baseMenuItem onClick={toggleColumn} disabled={disabled}>
-      <ListItemIcon>
-        <rootProps.slots.columnMenuHideIcon fontSize="small" />
-      </ListItemIcon>
-      <ListItemText>{apiRef.current.getLocaleText('columnMenuHideColumn')}</ListItemText>
+    <rootProps.slots.baseMenuItem
+      onClick={toggleColumn}
+      disabled={disabled}
+      iconStart={<rootProps.slots.columnMenuHideIcon fontSize="small" />}
+    >
+      {apiRef.current.getLocaleText('columnMenuHideColumn')}
     </rootProps.slots.baseMenuItem>
   );
 }