[DataGrid] Refactor: move ListItem(Text|Icon) to leaf import

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>
   );
 }

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>
     );
   };

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>
   );
 }

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>
     );

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>
     );

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>
   );
 }

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>
   );
 }

packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.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 { GridPreferencePanelsValue } from '../../../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
 import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext';
 import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps';
@@ -25,11 +23,11 @@ function GridColumnMenuManageItem(props: GridColumnMenuItemProps) {
   }
 
   return (
-    <rootProps.slots.baseMenuItem onClick={showColumns}>
-      <ListItemIcon>
-        <rootProps.slots.columnMenuManageColumnsIcon fontSize="small" />
-      </ListItemIcon>
-      <ListItemText>{apiRef.current.getLocaleText('columnMenuManageColumns')}</ListItemText>
+    <rootProps.slots.baseMenuItem
+      onClick={showColumns}
+      iconStart={<rootProps.slots.columnMenuManageColumnsIcon fontSize="small" />}
+    >
+      {apiRef.current.getLocaleText('columnMenuManageColumns')}
     </rootProps.slots.baseMenuItem>
   );
 }

packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.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 { useGridSelector } from '../../../../hooks/utils/useGridSelector';
 import { gridSortModelSelector } from '../../../../hooks/features/sorting/gridSortingSelector';
 import { GridSortDirection } from '../../../../models/gridSortModel';
@@ -54,25 +52,26 @@ function GridColumnMenuSortItem(props: GridColumnMenuItemProps) {
   return (
     <React.Fragment>
       {sortingOrder.includes('asc') && sortDirection !== 'asc' ? (
-        <rootProps.slots.baseMenuItem onClick={onSortMenuItemClick} data-value="asc">
-          <ListItemIcon>
-            <rootProps.slots.columnMenuSortAscendingIcon fontSize="small" />
-          </ListItemIcon>
-          <ListItemText>{getLabel('columnMenuSortAsc')}</ListItemText>
+        <rootProps.slots.baseMenuItem
+          onClick={onSortMenuItemClick}
+          data-value="asc"
+          iconStart={<rootProps.slots.columnMenuSortAscendingIcon fontSize="small" />}
+        >
+          {getLabel('columnMenuSortAsc')}
         </rootProps.slots.baseMenuItem>
       ) : null}
       {sortingOrder.includes('desc') && sortDirection !== 'desc' ? (
-        <rootProps.slots.baseMenuItem onClick={onSortMenuItemClick} data-value="desc">
-          <ListItemIcon>
-            <rootProps.slots.columnMenuSortDescendingIcon fontSize="small" />
-          </ListItemIcon>
-          <ListItemText>{getLabel('columnMenuSortDesc')}</ListItemText>
+        <rootProps.slots.baseMenuItem
+          onClick={onSortMenuItemClick}
+          data-value="desc"
+          iconStart={<rootProps.slots.columnMenuSortDescendingIcon fontSize="small" />}
+        >
+          {getLabel('columnMenuSortDesc')}
         </rootProps.slots.baseMenuItem>
       ) : null}
       {sortingOrder.includes(null) && sortDirection != null ? (
-        <rootProps.slots.baseMenuItem onClick={onSortMenuItemClick}>
-          <ListItemIcon />
-          <ListItemText>{apiRef.current.getLocaleText('columnMenuUnsort')}</ListItemText>
+        <rootProps.slots.baseMenuItem onClick={onSortMenuItemClick} iconStart="">
+          {apiRef.current.getLocaleText('columnMenuUnsort')}
         </rootProps.slots.baseMenuItem>
       ) : null}
     </React.Fragment>

packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
 import { ButtonProps } from '@mui/material/Button';
 import { TooltipProps } from '@mui/material/Tooltip';
-import ListItemIcon from '@mui/material/ListItemIcon';
 import { gridDensitySelector } from '../../hooks/features/density/densitySelector';
 import { GridDensity } from '../../models/gridDensity';
 import { isHideMenuKey } from '../../utils/keyboardUtils';
@@ -99,8 +98,8 @@ const GridToolbarDensitySelector = React.forwardRef<
       key={index}
       onClick={() => handleDensityUpdate(option.value)}
       selected={option.value === density}
+      iconStart={option.icon}
     >
-      <ListItemIcon>{option.icon}</ListItemIcon>
       {option.label}
     </rootProps.slots.baseMenuItem>
   ));