From 5febda90ee39bfc5b4a3fe984e8d0c4cf86ecbf6 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Tue, 22 Oct 2024 16:48:56 -0400 Subject: [PATCH] [DataGrid] refactor: baseMenuList & baseMenuItem (#15049) --- .../x/api/data-grid/data-grid-premium.json | 12 ++++++++++ docs/pages/x/api/data-grid/data-grid-pro.json | 12 ++++++++++ docs/pages/x/api/data-grid/data-grid.json | 12 ++++++++++ .../data-grid-premium/data-grid-premium.json | 2 ++ .../data-grid-pro/data-grid-pro.json | 2 ++ .../data-grid/data-grid/data-grid.json | 2 ++ .../GridColumnMenuAggregationItem.tsx | 22 +++++++++---------- .../components/GridColumnMenuRowGroupItem.tsx | 9 +++++--- .../GridColumnMenuRowUngroupItem.tsx | 9 ++++---- .../components/GridExcelExportMenuItem.tsx | 7 +++--- .../components/GridColumnMenuPinningItem.tsx | 17 +++++++------- .../headerFiltering/GridHeaderFilterMenu.tsx | 16 +++++++++----- .../components/cell/GridActionsCellItem.tsx | 6 ++--- .../menuItems/GridColumnMenuFilterItem.tsx | 5 ++--- .../menuItems/GridColumnMenuHideItem.tsx | 5 ++--- .../menuItems/GridColumnMenuManageItem.tsx | 5 ++--- .../menuItems/GridColumnMenuSortItem.tsx | 13 +++++------ .../toolbar/GridToolbarDensitySelector.tsx | 10 ++++----- .../components/toolbar/GridToolbarExport.tsx | 12 +++++----- .../toolbar/GridToolbarExportContainer.tsx | 5 ++--- packages/x-data-grid/src/material/index.ts | 4 ++++ .../src/models/gridSlotsComponent.ts | 10 +++++++++ .../src/models/gridSlotsComponentsProps.ts | 6 +++++ scripts/x-data-grid-premium.exports.json | 2 ++ scripts/x-data-grid-pro.exports.json | 2 ++ scripts/x-data-grid.exports.json | 2 ++ 26 files changed, 138 insertions(+), 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 index 99283c51b8ae..ded5c1bd3c90 100644 --- 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 index 3a0923e1a1d9..42df3c139311 100644 --- 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 index 87da7c9e9a81..9994e0dc6317 100644 --- 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 index dc242fd21180..3b9442aa58e3 100644 --- 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 index 42302d388bbf..c1d26982ac46 100644 --- 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 index 141c83b1b2eb..d082ef5d495d 100644 --- 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 index f2976b011913..27fd029bb344 100644 --- 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) => { - 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,26 +67,26 @@ function GridColumnMenuAggregationItem(props: GridColumnMenuItemProps) { const label = apiRef.current.getLocaleText('aggregationMenuItemHeader'); return ( - + {label} - + - + ); } diff --git a/packages/x-data-grid-premium/src/components/GridColumnMenuRowGroupItem.tsx b/packages/x-data-grid-premium/src/components/GridColumnMenuRowGroupItem.tsx index 0cc989571312..7f661095f957 100644 --- 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 ( - + {apiRef.current.getLocaleText('unGroupColumn')(name)} - + ); }; diff --git a/packages/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItem.tsx b/packages/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItem.tsx index 48a8e21f85ff..9f100470d0b6 100644 --- 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 ( - + {apiRef.current.getLocaleText('unGroupColumn')(name)} - + ); } return ( - + {apiRef.current.getLocaleText('groupColumn')(name)} - + ); } diff --git a/packages/x-data-grid-premium/src/components/GridExcelExportMenuItem.tsx b/packages/x-data-grid-premium/src/components/GridExcelExportMenuItem.tsx index 37e265b9233b..a73c4619b3bf 100644 --- a/packages/x-data-grid-premium/src/components/GridExcelExportMenuItem.tsx +++ b/packages/x-data-grid-premium/src/components/GridExcelExportMenuItem.tsx @@ -1,18 +1,19 @@ 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; function GridExcelExportMenuItem(props: GridExcelExportMenuItemProps) { const apiRef = useGridApiContext(); + const rootProps = useGridRootProps(); const { hideMenu, options, ...other } = props; return ( - { apiRef.current.exportDataAsExcel(options); hideMenu?.(); @@ -20,7 +21,7 @@ function GridExcelExportMenuItem(props: GridExcelExportMenuItemProps) { {...other} > {apiRef.current.getLocaleText('toolbarExportExcel')} - + ); } diff --git a/packages/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx b/packages/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx index 0a07624dc306..89168d11fa8d 100644 --- 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 = ( - + {apiRef.current.getLocaleText('pinToLeft')} - + ); const pinToRightMenuItem = ( - + {apiRef.current.getLocaleText('pinToRight')} - + ); if (!colDef) { @@ -62,16 +61,16 @@ function GridColumnMenuPinningItem(props: GridColumnMenuItemProps) { : rootProps.slots.columnMenuPinRightIcon; return ( - + {apiRef.current.getLocaleText(label)} - - + + {apiRef.current.getLocaleText('unpin')} - + ); } diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx index 9c049130ee1a..c3fe31d4aea7 100644 --- 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 ( - + {operators.map((op, i) => { const label = op?.headerLabel ?? @@ -65,7 +69,7 @@ function GridHeaderFilterMenu({ ); return ( - { applyFilterChanges({ ...item, operator: op.value }); hideMenu(); @@ -75,10 +79,10 @@ function GridHeaderFilterMenu({ key={`${field}-${op.value}`} > {label} - + ); })} - + ); } diff --git a/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx b/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx index 3d39805c11f0..2c0edaec52bb 100644 --- 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 + {icon && {icon}} {label} - + ); }, ); 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 index d86f61e78098..f7db300a230c 100644 --- 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 ( - + {apiRef.current.getLocaleText('columnMenuFilter')} - + ); } 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 index ce7660929312..f6594765ba05 100644 --- 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,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 { GridColumnMenuItemProps } from '../GridColumnMenuItemProps'; @@ -43,12 +42,12 @@ function GridColumnMenuHideItem(props: GridColumnMenuItemProps) { } return ( - + {apiRef.current.getLocaleText('columnMenuHideColumn')} - + ); } diff --git a/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.tsx b/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.tsx index 860751420dda..df95549cbf30 100644 --- a/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.tsx +++ b/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.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 { GridPreferencePanelsValue } from '../../../../hooks/features/preferencesPanel/gridPreferencePanelsValue'; @@ -26,12 +25,12 @@ function GridColumnMenuManageItem(props: GridColumnMenuItemProps) { } return ( - + {apiRef.current.getLocaleText('columnMenuManageColumns')} - + ); } diff --git a/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.tsx b/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.tsx index de67a637774e..7ac4c77444da 100644 --- a/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.tsx +++ b/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.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 { useGridSelector } from '../../../../hooks/utils/useGridSelector'; @@ -55,26 +54,26 @@ function GridColumnMenuSortItem(props: GridColumnMenuItemProps) { return ( {sortingOrder.includes('asc') && sortDirection !== 'asc' ? ( - + {getLabel('columnMenuSortAsc')} - + ) : null} {sortingOrder.includes('desc') && sortDirection !== 'desc' ? ( - + {getLabel('columnMenuSortDesc')} - + ) : null} {sortingOrder.includes(null) && sortDirection != null ? ( - + {apiRef.current.getLocaleText('columnMenuUnsort')} - + ) : null} ); diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx index 5e185987fa16..d6c952c6f543 100644 --- a/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx +++ b/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx @@ -1,10 +1,8 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils'; -import MenuList from '@mui/material/MenuList'; import { ButtonProps } from '@mui/material/Button'; import { TooltipProps } from '@mui/material/Tooltip'; -import MenuItem from '@mui/material/MenuItem'; import ListItemIcon from '@mui/material/ListItemIcon'; import { gridDensitySelector } from '../../hooks/features/density/densitySelector'; import { GridDensity } from '../../models/gridDensity'; @@ -97,14 +95,14 @@ const GridToolbarDensitySelector = React.forwardRef< } const densityElements = densityOptions.map((option, index) => ( - handleDensityUpdate(option.value)} selected={option.value === density} > {option.icon} {option.label} - + )); return ( @@ -137,7 +135,7 @@ const GridToolbarDensitySelector = React.forwardRef< onClose={handleDensitySelectorClose} position="bottom-start" > - {densityElements} - + ); diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarExport.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarExport.tsx index 7b3ee4453cf5..fada5a986636 100644 --- a/packages/x-data-grid/src/components/toolbar/GridToolbarExport.tsx +++ b/packages/x-data-grid/src/components/toolbar/GridToolbarExport.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { ButtonProps } from '@mui/material/Button'; import { TooltipProps } from '@mui/material/Tooltip'; -import MenuItem from '@mui/material/MenuItem'; +import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; import { useGridApiContext } from '../../hooks/utils/useGridApiContext'; import { GridCsvExportOptions, GridPrintExportOptions } from '../../models/gridExport'; import { GridToolbarExportContainer } from './GridToolbarExportContainer'; @@ -37,10 +37,11 @@ export interface GridToolbarExportProps { function GridCsvExportMenuItem(props: GridCsvExportMenuItemProps) { const apiRef = useGridApiContext(); + const rootProps = useGridRootProps(); const { hideMenu, options, ...other } = props; return ( - { apiRef.current.exportDataAsCsv(options); hideMenu?.(); @@ -48,7 +49,7 @@ function GridCsvExportMenuItem(props: GridCsvExportMenuItemProps) { {...other} > {apiRef.current.getLocaleText('toolbarExportCSV')} - + ); } @@ -75,10 +76,11 @@ GridCsvExportMenuItem.propTypes = { function GridPrintExportMenuItem(props: GridPrintExportMenuItemProps) { const apiRef = useGridApiContext(); + const rootProps = useGridRootProps(); const { hideMenu, options, ...other } = props; return ( - { apiRef.current.exportDataAsPrint(options); hideMenu?.(); @@ -86,7 +88,7 @@ function GridPrintExportMenuItem(props: GridPrintExportMenuItemProps) { {...other} > {apiRef.current.getLocaleText('toolbarExportPrint')} - + ); } diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx index 2c00e4ba0b8b..df889bd02870 100644 --- a/packages/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx +++ b/packages/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils'; -import MenuList from '@mui/material/MenuList'; import { ButtonProps } from '@mui/material/Button'; import { TooltipProps } from '@mui/material/Tooltip'; import { isHideMenuKey } from '../../utils/keyboardUtils'; @@ -85,7 +84,7 @@ const GridToolbarExportContainer = React.forwardRef< onClose={handleMenuClose} position="bottom-start" > - (child, { hideMenu: handleMenuClose }); })} - + ); diff --git a/packages/x-data-grid/src/material/index.ts b/packages/x-data-grid/src/material/index.ts index 5377891acffc..db2748de022c 100644 --- a/packages/x-data-grid/src/material/index.ts +++ b/packages/x-data-grid/src/material/index.ts @@ -1,6 +1,8 @@ import MUIBadge from '@mui/material/Badge'; import MUICheckbox from '@mui/material/Checkbox'; import MUIDivider from '@mui/material/Divider'; +import MUIMenuList from '@mui/material/MenuList'; +import MUIMenuItem from '@mui/material/MenuItem'; import MUITextField from '@mui/material/TextField'; import MUIFormControl from '@mui/material/FormControl'; import MUISelect from '@mui/material/Select'; @@ -86,6 +88,8 @@ const materialSlots: GridBaseSlots & GridIconSlotsComponent = { baseBadge: MUIBadge, baseCheckbox: MUICheckbox, baseDivider: MUIDivider, + baseMenuList: MUIMenuList, + baseMenuItem: MUIMenuItem, baseTextField: MUITextField, baseFormControl: MUIFormControl, baseSelect: MUISelect, diff --git a/packages/x-data-grid/src/models/gridSlotsComponent.ts b/packages/x-data-grid/src/models/gridSlotsComponent.ts index 51fc7ccac3b8..c9c38a0fe356 100644 --- a/packages/x-data-grid/src/models/gridSlotsComponent.ts +++ b/packages/x-data-grid/src/models/gridSlotsComponent.ts @@ -25,6 +25,16 @@ export interface GridBaseSlots { * @default Divider */ baseDivider: React.JSXElementConstructor; + /** + * The custom MenuList component used in the grid. + * @default MenuList + */ + baseMenuList: React.JSXElementConstructor; + /** + * The custom MenuItem component used in the grid. + * @default MenuItem + */ + baseMenuItem: React.JSXElementConstructor; /** * The custom InputAdornment component used in the grid. * @default InputAdornment diff --git a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts index fb3a00c76088..8b709b41a55b 100644 --- a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts +++ b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts @@ -1,6 +1,8 @@ import * as React from 'react'; import type { BadgeProps } from '@mui/material/Badge'; import type { CheckboxProps } from '@mui/material/Checkbox'; +import type { MenuListProps } from '@mui/material/MenuList'; +import type { MenuItemProps } from '@mui/material/MenuItem'; import type { TextFieldProps } from '@mui/material/TextField'; import type { FormControlProps } from '@mui/material/FormControl'; import type { SelectProps } from '@mui/material/Select'; @@ -38,6 +40,8 @@ type DividerProps = {}; export interface BaseBadgePropsOverrides {} export interface BaseCheckboxPropsOverrides {} export interface BaseDividerPropsOverrides {} +export interface BaseMenuListPropsOverrides {} +export interface BaseMenuItemPropsOverrides {} export interface BaseTextFieldPropsOverrides {} export interface BaseFormControlPropsOverrides {} export interface BaseSelectPropsOverrides {} @@ -74,6 +78,8 @@ export interface GridSlotProps { baseBadge: BadgeProps & BaseBadgePropsOverrides; baseCheckbox: CheckboxProps & BaseCheckboxPropsOverrides; baseDivider: DividerProps & BaseDividerPropsOverrides; + baseMenuList: MenuListProps & BaseMenuListPropsOverrides; + baseMenuItem: MenuItemProps & BaseMenuItemPropsOverrides; baseTextField: TextFieldProps & BaseTextFieldPropsOverrides; baseFormControl: FormControlProps & BaseFormControlPropsOverrides; baseSelect: SelectProps & BaseSelectPropsOverrides; diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index f6e08468b288..7cd4d3eeba42 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -8,6 +8,8 @@ { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" }, { "name": "BaseInputAdornmentPropsOverrides", "kind": "Interface" }, { "name": "BaseInputLabelPropsOverrides", "kind": "Interface" }, + { "name": "BaseMenuItemPropsOverrides", "kind": "Interface" }, + { "name": "BaseMenuListPropsOverrides", "kind": "Interface" }, { "name": "BasePopperPropsOverrides", "kind": "Interface" }, { "name": "BaseSelectOptionPropsOverrides", "kind": "Interface" }, { "name": "BaseSelectPropsOverrides", "kind": "Interface" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index e88ab0b759cf..9d5b4e8b5799 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -8,6 +8,8 @@ { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" }, { "name": "BaseInputAdornmentPropsOverrides", "kind": "Interface" }, { "name": "BaseInputLabelPropsOverrides", "kind": "Interface" }, + { "name": "BaseMenuItemPropsOverrides", "kind": "Interface" }, + { "name": "BaseMenuListPropsOverrides", "kind": "Interface" }, { "name": "BasePopperPropsOverrides", "kind": "Interface" }, { "name": "BaseSelectOptionPropsOverrides", "kind": "Interface" }, { "name": "BaseSelectPropsOverrides", "kind": "Interface" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index 8414b824889b..14665ebf14a0 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -8,6 +8,8 @@ { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" }, { "name": "BaseInputAdornmentPropsOverrides", "kind": "Interface" }, { "name": "BaseInputLabelPropsOverrides", "kind": "Interface" }, + { "name": "BaseMenuItemPropsOverrides", "kind": "Interface" }, + { "name": "BaseMenuListPropsOverrides", "kind": "Interface" }, { "name": "BasePopperPropsOverrides", "kind": "Interface" }, { "name": "BaseSelectOptionPropsOverrides", "kind": "Interface" }, { "name": "BaseSelectPropsOverrides", "kind": "Interface" },