[DataGrid] refactor: baseMenuList & baseMenuItem (#15049)

mui · Oct 22, 2024 · 5febda9 · 5febda9
1 parent eac48e1
commit 5febda9
Show file tree

Hide file tree

Showing 26 changed files with 138 additions and 71 deletions.
diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -814,6 +814,18 @@
       "default": "Divider",
       "class": null
     },
+    {
+      "name": "baseMenuList",
+      "description": "The custom MenuList component used in the grid.",
+      "default": "MenuList",
+      "class": null
+    },
+    {
+      "name": "baseMenuItem",
+      "description": "The custom MenuItem component used in the grid.",
+      "default": "MenuItem",
+      "class": null
+    },
     {
       "name": "baseInputAdornment",
       "description": "The custom InputAdornment component used in the grid.",

diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -746,6 +746,18 @@
       "default": "Divider",
       "class": null
     },
+    {
+      "name": "baseMenuList",
+      "description": "The custom MenuList component used in the grid.",
+      "default": "MenuList",
+      "class": null
+    },
+    {
+      "name": "baseMenuItem",
+      "description": "The custom MenuItem component used in the grid.",
+      "default": "MenuItem",
+      "class": null
+    },
     {
       "name": "baseInputAdornment",
       "description": "The custom InputAdornment component used in the grid.",

diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
@@ -633,6 +633,18 @@
       "default": "Divider",
       "class": null
     },
+    {
+      "name": "baseMenuList",
+      "description": "The custom MenuList component used in the grid.",
+      "default": "MenuList",
+      "class": null
+    },
+    {
+      "name": "baseMenuItem",
+      "description": "The custom MenuItem component used in the grid.",
+      "default": "MenuItem",
+      "class": null
+    },
     {
       "name": "baseInputAdornment",
       "description": "The custom InputAdornment component used in the grid.",

diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
@@ -1239,6 +1239,8 @@
     "baseIconButton": "The custom IconButton component used in the grid.",
     "baseInputAdornment": "The custom InputAdornment component used in the grid.",
     "baseInputLabel": "The custom InputLabel component used in the grid.",
+    "baseMenuItem": "The custom MenuItem component used in the grid.",
+    "baseMenuList": "The custom MenuList component used in the grid.",
     "basePopper": "The custom Popper component used in the grid.",
     "baseSelect": "The custom Select component used in the grid.",
     "baseSelectOption": "The custom SelectOption component used in the grid.",

diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
@@ -1177,6 +1177,8 @@
     "baseIconButton": "The custom IconButton component used in the grid.",
     "baseInputAdornment": "The custom InputAdornment component used in the grid.",
     "baseInputLabel": "The custom InputLabel component used in the grid.",
+    "baseMenuItem": "The custom MenuItem component used in the grid.",
+    "baseMenuList": "The custom MenuList component used in the grid.",
     "basePopper": "The custom Popper component used in the grid.",
     "baseSelect": "The custom Select component used in the grid.",
     "baseSelectOption": "The custom SelectOption component used in the grid.",

diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
@@ -1057,6 +1057,8 @@
     "baseIconButton": "The custom IconButton component used in the grid.",
     "baseInputAdornment": "The custom InputAdornment component used in the grid.",
     "baseInputLabel": "The custom InputLabel component used in the grid.",
+    "baseMenuItem": "The custom MenuItem component used in the grid.",
+    "baseMenuList": "The custom MenuList component used in the grid.",
     "basePopper": "The custom Popper component used in the grid.",
     "baseSelect": "The custom Select component used in the grid.",
     "baseSelectOption": "The custom SelectOption component used in the grid.",

diff --git a/packages/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx b/packages/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx
@@ -1,13 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GridColumnMenuItemProps, useGridSelector } from '@mui/x-data-grid-pro';
-import MenuItem from '@mui/material/MenuItem';
 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';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import {
@@ -53,8 +51,8 @@ function GridColumnMenuAggregationItem(props: GridColumnMenuItemProps) {
     return '';
   }, [rootProps.aggregationFunctions, aggregationModel, colDef]);
 
-  const handleAggregationItemChange = (event: SelectChangeEvent<string | undefined>) => {
-    const newAggregationItem = event.target?.value || undefined;
+  const handleAggregationItemChange = (event: Event) => {
+    const newAggregationItem = (event.target as HTMLSelectElement | null)?.value || undefined;
     const currentModel = gridAggregationModelSelector(apiRef);
     const { [colDef.field]: columnItem, ...otherColumnItems } = currentModel;
     const newModel: GridAggregationModel =
@@ -69,39 +67,39 @@ function GridColumnMenuAggregationItem(props: GridColumnMenuItemProps) {
   const label = apiRef.current.getLocaleText('aggregationMenuItemHeader');
 
   return (
-    <MenuItem disableRipple>
+    <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>
-          <Select
+          <rootProps.slots.baseSelect
             labelId={`${id}-label`}
             id={`${id}-input`}
             value={selectedAggregationRule}
             label={label}
             color="primary"
-            onChange={handleAggregationItemChange}
+            onChange={handleAggregationItemChange as any}
             onBlur={(event) => event.stopPropagation()}
             fullWidth
           >
-            <MenuItem value="">...</MenuItem>
+            <rootProps.slots.baseMenuItem value="">...</rootProps.slots.baseMenuItem>
             {availableAggregationFunctions.map((aggFunc) => (
-              <MenuItem key={aggFunc} value={aggFunc}>
+              <rootProps.slots.baseMenuItem key={aggFunc} value={aggFunc}>
                 {getAggregationFunctionLabel({
                   apiRef,
                   aggregationRule: {
                     aggregationFunctionName: aggFunc,
                     aggregationFunction: rootProps.aggregationFunctions[aggFunc],
                   },
                 })}
-              </MenuItem>
+              </rootProps.slots.baseMenuItem>
             ))}
-          </Select>
+          </rootProps.slots.baseSelect>
         </FormControl>
       </ListItemText>
-    </MenuItem>
+    </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,5 +1,4 @@
 import * as React from 'react';
-import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import {
@@ -32,12 +31,16 @@ export function GridColumnMenuRowGroupItem(props: GridColumnMenuItemProps) {
     const groupedColumn = columnsLookup[field];
     const name = groupedColumn.headerName ?? field;
     return (
-      <MenuItem onClick={ungroupColumn} key={field} disabled={!groupedColumn.groupable}>
+      <rootProps.slots.baseMenuItem
+        onClick={ungroupColumn}
+        key={field}
+        disabled={!groupedColumn.groupable}
+      >
         <ListItemIcon>
           <rootProps.slots.columnMenuUngroupIcon fontSize="small" />
         </ListItemIcon>
         <ListItemText>{apiRef.current.getLocaleText('unGroupColumn')(name)}</ListItemText>
-      </MenuItem>
+      </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,5 +1,4 @@
 import * as React from 'react';
-import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import {
@@ -36,21 +35,21 @@ export function GridColumnMenuRowUngroupItem(props: GridColumnMenuItemProps) {
 
   if (rowGroupingModel.includes(colDef.field)) {
     return (
-      <MenuItem onClick={ungroupColumn}>
+      <rootProps.slots.baseMenuItem onClick={ungroupColumn}>
         <ListItemIcon>
           <rootProps.slots.columnMenuUngroupIcon fontSize="small" />
         </ListItemIcon>
         <ListItemText>{apiRef.current.getLocaleText('unGroupColumn')(name)}</ListItemText>
-      </MenuItem>
+      </rootProps.slots.baseMenuItem>
     );
   }
 
   return (
-    <MenuItem onClick={groupColumn}>
+    <rootProps.slots.baseMenuItem onClick={groupColumn}>
       <ListItemIcon>
         <rootProps.slots.columnMenuGroupIcon fontSize="small" />
       </ListItemIcon>
       <ListItemText>{apiRef.current.getLocaleText('groupColumn')(name)}</ListItemText>
-    </MenuItem>
+    </rootProps.slots.baseMenuItem>
   );
 }
diff --git a/packages/x-data-grid-premium/src/components/GridExcelExportMenuItem.tsx b/packages/x-data-grid-premium/src/components/GridExcelExportMenuItem.tsx
@@ -1,26 +1,27 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MenuItem from '@mui/material/MenuItem';
 import { GridExportMenuItemProps } from '@mui/x-data-grid-pro';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { GridExcelExportOptions } from '../hooks/features/export';
 
 export type GridExcelExportMenuItemProps = GridExportMenuItemProps<GridExcelExportOptions>;
 
 function GridExcelExportMenuItem(props: GridExcelExportMenuItemProps) {
   const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
   const { hideMenu, options, ...other } = props;
 
   return (
-    <MenuItem
+    <rootProps.slots.baseMenuItem
       onClick={() => {
         apiRef.current.exportDataAsExcel(options);
         hideMenu?.();
       }}
       {...other}
     >
       {apiRef.current.getLocaleText('toolbarExportExcel')}
-    </MenuItem>
+    </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,7 +1,6 @@
 import * as React from 'react';
 import { useRtl } from '@mui/system/RtlProvider';
 import PropTypes from 'prop-types';
-import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import { GridPinnedColumnPosition, GridColumnMenuItemProps } from '@mui/x-data-grid';
@@ -27,21 +26,21 @@ function GridColumnMenuPinningItem(props: GridColumnMenuItemProps) {
     onClick(event);
   };
   const pinToLeftMenuItem = (
-    <MenuItem onClick={pinColumn(GridPinnedColumnPosition.LEFT)}>
+    <rootProps.slots.baseMenuItem onClick={pinColumn(GridPinnedColumnPosition.LEFT)}>
       <ListItemIcon>
         <rootProps.slots.columnMenuPinLeftIcon fontSize="small" />
       </ListItemIcon>
       <ListItemText>{apiRef.current.getLocaleText('pinToLeft')}</ListItemText>
-    </MenuItem>
+    </rootProps.slots.baseMenuItem>
   );
 
   const pinToRightMenuItem = (
-    <MenuItem onClick={pinColumn(GridPinnedColumnPosition.RIGHT)}>
+    <rootProps.slots.baseMenuItem onClick={pinColumn(GridPinnedColumnPosition.RIGHT)}>
       <ListItemIcon>
         <rootProps.slots.columnMenuPinRightIcon fontSize="small" />
       </ListItemIcon>
       <ListItemText>{apiRef.current.getLocaleText('pinToRight')}</ListItemText>
-    </MenuItem>
+    </rootProps.slots.baseMenuItem>
   );
 
   if (!colDef) {
@@ -62,16 +61,16 @@ function GridColumnMenuPinningItem(props: GridColumnMenuItemProps) {
         : rootProps.slots.columnMenuPinRightIcon;
     return (
       <React.Fragment>
-        <MenuItem onClick={pinColumn(otherSide)}>
+        <rootProps.slots.baseMenuItem onClick={pinColumn(otherSide)}>
           <ListItemIcon>
             <Icon fontSize="small" />
           </ListItemIcon>
           <ListItemText>{apiRef.current.getLocaleText(label)}</ListItemText>
-        </MenuItem>
-        <MenuItem onClick={unpinColumn}>
+        </rootProps.slots.baseMenuItem>
+        <rootProps.slots.baseMenuItem onClick={unpinColumn}>
           <ListItemIcon />
           <ListItemText>{apiRef.current.getLocaleText('unpin')}</ListItemText>
-        </MenuItem>
+        </rootProps.slots.baseMenuItem>
       </React.Fragment>
     );
   }

diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx
@@ -1,9 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MenuList from '@mui/material/MenuList';
-import MenuItem from '@mui/material/MenuItem';
 import { unstable_capitalize as capitalize, HTMLElementType } from '@mui/utils';
 import {
+  useGridRootProps,
   useGridApiContext,
   GridMenu,
   GridFilterOperator,
@@ -33,6 +32,7 @@ function GridHeaderFilterMenu({
   labelledBy,
 }: GridHeaderFilterMenuProps) {
   const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
 
   const hideMenu = React.useCallback(() => {
     apiRef.current.hideHeaderFilterMenu();
@@ -56,7 +56,11 @@ function GridHeaderFilterMenu({
 
   return (
     <GridMenu placement="bottom-end" open={open} target={target} onClose={hideMenu}>
-      <MenuList aria-labelledby={labelledBy} id={id} onKeyDown={handleListKeyDown}>
+      <rootProps.slots.baseMenuList
+        aria-labelledby={labelledBy}
+        id={id}
+        onKeyDown={handleListKeyDown}
+      >
         {operators.map((op, i) => {
           const label =
             op?.headerLabel ??
@@ -65,7 +69,7 @@ function GridHeaderFilterMenu({
             );
 
           return (
-            <MenuItem
+            <rootProps.slots.baseMenuItem
               onClick={() => {
                 applyFilterChanges({ ...item, operator: op.value });
                 hideMenu();
@@ -75,10 +79,10 @@ function GridHeaderFilterMenu({
               key={`${field}-${op.value}`}
             >
               {label}
-            </MenuItem>
+            </rootProps.slots.baseMenuItem>
           );
         })}
-      </MenuList>
+      </rootProps.slots.baseMenuList>
     </GridMenu>
   );
 }

diff --git a/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx b/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { IconButtonProps } from '@mui/material/IconButton';
-import MenuItem, { MenuItemProps } from '@mui/material/MenuItem';
+import { MenuItemProps } from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
@@ -70,10 +70,10 @@ const GridActionsCellItem = React.forwardRef<HTMLElement, GridActionsCellItemPro
     };
 
     return (
-      <MenuItem ref={ref} {...(other as any)} onClick={handleClick}>
+      <rootProps.slots.baseMenuItem ref={ref} {...(other as any)} onClick={handleClick}>
         {icon && <ListItemIcon>{icon}</ListItemIcon>}
         {label}
-      </MenuItem>
+      </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,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext';
@@ -25,12 +24,12 @@ function GridColumnMenuFilterItem(props: GridColumnMenuItemProps) {
   }
 
   return (
-    <MenuItem onClick={showFilter}>
+    <rootProps.slots.baseMenuItem onClick={showFilter}>
       <ListItemIcon>
         <rootProps.slots.columnMenuFilterIcon fontSize="small" />
       </ListItemIcon>
       <ListItemText>{apiRef.current.getLocaleText('columnMenuFilter')}</ListItemText>
-    </MenuItem>
+    </rootProps.slots.baseMenuItem>
   );
 }