[DataGrid] Update column menu API components -> slots

docs/data/data-grid/column-menu/AddNewColumnMenuGrid.js

@@ -22,11 +22,11 @@ function CustomColumnMenu(props) {
   return (
     <GridColumnMenu
       {...props}
-      components={{
+      slots={{
         // Add new item
         ColumnMenuUserItem: CustomUserItem,
       }}
-      componentsProps={{
+      slotProps={{
         columnMenuUserItem: {
           // set `displayOrder` for new item
           displayOrder: 15,

docs/data/data-grid/column-menu/AddNewColumnMenuGrid.tsx

@@ -27,11 +27,11 @@ function CustomColumnMenu(props: GridColumnMenuProps) {
   return (
     <GridColumnMenu
       {...props}
-      components={{
+      slots={{
         // Add new item
         ColumnMenuUserItem: CustomUserItem,
       }}
-      componentsProps={{
+      slotProps={{
         columnMenuUserItem: {
           // set `displayOrder` for new item
           displayOrder: 15,

docs/data/data-grid/column-menu/ColumnMenuGridReferences.js

@@ -79,7 +79,7 @@ ComponentTag.propTypes = {
 const columns = [
   {
     field: 'slot',
-    headerName: 'Component',
+    headerName: 'Slot',
     width: 240,
     renderCell: (params) => (
       <ComponentTag value={params.value} plan={params.row.plan} />
@@ -97,42 +97,42 @@ const columns = [
 const rows = [
   {
     id: 1,
-    slot: 'ColumnMenuSortItem',
+    slot: 'columnMenuSortItem',
     defaultComponent: 'GridColumnMenuSortItem',
     displayOrder: 10,
     plan: 'Community',
   },
   {
     id: 3,
-    slot: 'ColumnMenuFilterItem',
+    slot: 'columnMenuFilterItem',
     defaultComponent: 'GridColumnMenuFilterItem',
     displayOrder: 20,
     plan: 'Community',
   },
   {
     id: 7,
-    slot: 'ColumnMenuColumnsItem',
+    slot: 'columnMenuColumnsItem',
     defaultComponent: 'GridColumnMenuColumnsItem',
     displayOrder: 30,
     plan: 'Community',
   },
   {
     id: 9,
-    slot: 'ColumnMenuPinningItem',
+    slot: 'columnMenuPinningItem',
     defaultComponent: 'GridColumnMenuPinningItem',
     displayOrder: 15,
     plan: 'Pro',
   },
   {
     id: 11,
-    slot: 'ColumnMenuAggregationItem',
+    slot: 'columnMenuAggregationItem',
     defaultComponent: 'GridColumnMenuAggregationItem',
     displayOrder: 23,
     plan: 'Premium',
   },
   {
     id: 13,
-    slot: 'ColumnMenuGroupingItem',
+    slot: 'columnMenuGroupingItem',
     defaultComponent: 'GridColumnMenuGroupingItem',
     displayOrder: 27,
     plan: 'Premium',

docs/data/data-grid/column-menu/ColumnMenuGridReferences.tsx

@@ -69,7 +69,7 @@ function ComponentTag(props: { value?: string; plan?: string }) {
 const columns = [
   {
     field: 'slot',
-    headerName: 'Component',
+    headerName: 'Slot',
     width: 240,
     renderCell: (params: GridRenderCellParams<any, string>) => (
       <ComponentTag value={params.value} plan={params.row.plan} />
@@ -89,42 +89,42 @@ const columns = [
 const rows = [
   {
     id: 1,
-    slot: 'ColumnMenuSortItem',
+    slot: 'columnMenuSortItem',
     defaultComponent: 'GridColumnMenuSortItem',
     displayOrder: 10,
     plan: 'Community',
   },
   {
     id: 3,
-    slot: 'ColumnMenuFilterItem',
+    slot: 'columnMenuFilterItem',
     defaultComponent: 'GridColumnMenuFilterItem',
     displayOrder: 20,
     plan: 'Community',
   },
   {
     id: 7,
-    slot: 'ColumnMenuColumnsItem',
+    slot: 'columnMenuColumnsItem',
     defaultComponent: 'GridColumnMenuColumnsItem',
     displayOrder: 30,
     plan: 'Community',
   },
   {
     id: 9,
-    slot: 'ColumnMenuPinningItem',
+    slot: 'columnMenuPinningItem',
     defaultComponent: 'GridColumnMenuPinningItem',
     displayOrder: 15,
     plan: 'Pro',
   },
   {
     id: 11,
-    slot: 'ColumnMenuAggregationItem',
+    slot: 'columnMenuAggregationItem',
     defaultComponent: 'GridColumnMenuAggregationItem',
     displayOrder: 23,
     plan: 'Premium',
   },
   {
     id: 13,
-    slot: 'ColumnMenuGroupingItem',
+    slot: 'columnMenuGroupingItem',
     defaultComponent: 'GridColumnMenuGroupingItem',
     displayOrder: 27,
     plan: 'Premium',

docs/data/data-grid/column-menu/HideColumnMenuGrid.js

@@ -6,9 +6,9 @@ function CustomColumnMenu(props) {
   return (
     <GridColumnMenu
       {...props}
-      components={{
-        // Hide `ColumnMenuColumnsItem`
-        ColumnMenuColumnsItem: null,
+      slots={{
+        // Hide `columnMenuColumnsItem`
+        columnMenuColumnsItem: null,
       }}
     />
   );

docs/data/data-grid/column-menu/HideColumnMenuGrid.tsx

@@ -6,9 +6,9 @@ function CustomColumnMenu(props: GridColumnMenuProps) {
   return (
     <GridColumnMenu
       {...props}
-      components={{
-        // Hide `ColumnMenuColumnsItem`
-        ColumnMenuColumnsItem: null,
+      slots={{
+        // Hide `columnMenuColumnsItem`
+        columnMenuColumnsItem: null,
       }}
     />
   );

docs/data/data-grid/column-menu/OverrideColumnMenuGrid.js

@@ -37,9 +37,9 @@ function CustomColumnMenu(props) {
   return (
     <GridColumnMenu
       {...props}
-      components={{
-        // Override slot for `ColumnMenuFilterItem`
-        ColumnMenuFilterItem: CustomFilterItem,
+      slots={{
+        // Override slot for `columnMenuFilterItem`
+        columnMenuFilterItem: CustomFilterItem,
       }}
     />
   );

docs/data/data-grid/column-menu/OverrideColumnMenuGrid.tsx

@@ -36,9 +36,9 @@ function CustomColumnMenu(props: GridColumnMenuProps) {
   return (
     <GridColumnMenu
       {...props}
-      components={{
-        // Override slot for `ColumnMenuFilterItem`
-        ColumnMenuFilterItem: CustomFilterItem,
+      slots={{
+        // Override slot for `columnMenuFilterItem`
+        columnMenuFilterItem: CustomFilterItem,
       }}
     />
   );

docs/data/data-grid/column-menu/ReorderColumnMenuGrid.js

@@ -6,7 +6,7 @@ function CustomColumnMenu(props) {
   return (
     <GridColumnMenu
       {...props}
-      componentsProps={{
+      slotProps={{
         // Swap positions of filter and sort items
         columnMenuFilterItem: {
           displayOrder: 0, // Previously `10`

docs/data/data-grid/column-menu/ReorderColumnMenuGrid.tsx

@@ -6,7 +6,7 @@ function CustomColumnMenu(props: GridColumnMenuProps) {
   return (
     <GridColumnMenu
       {...props}
-      componentsProps={{
+      slotProps={{
         // Swap positions of filter and sort items
         columnMenuFilterItem: {
           displayOrder: 0, // Previously `10`

docs/data/data-grid/column-menu/column-menu.md

@@ -12,30 +12,26 @@ It can be accessed by clicking on the 3-dots icon that appears on hover on a hea
 
 ## Customize column menu items
 
-You can customize the column menu items by passing the `components` and `componentsProps` props to the `<GridColumnMenu />` component:
+You can customize the column menu items by passing the `slots` and `slotProps` props to the `<GridColumnMenu />` component:
 
-- `components` - use this prop to override default column menu components or add new components.
-- `componentsProps` - use this prop to override or pass [`displayOrder`](/x/react-data-grid/column-menu/#reordering-menu-items) for column menu items. You can also use this to pass extra props to custom column menu components.
-
-:::warning
-The `components` prop uses pascal case (`ColumnMenuFilterItem`), while `componentsProps` uses camel case (`columnMenuFilterItem`).
-:::
+- `slots` - use this prop to override default column menu slots or add new slots.
+- `slotProps` - use this prop to override or pass [`displayOrder`](/x/react-data-grid/column-menu/#reordering-menu-items) for column menu items. You can also use this to pass extra props to custom column menu slots.
 
 ### Adding a menu item
 
-To add a new menu item, create a new item slot and pass it to the `components` prop. In the example below, the new slot is called `ColumnMenuUserItem` but you can choose any name and it'll be added to the menu automatically.
-You can also set the `displayOrder` (default `100`) or pass new props to the components using `componentsProps` prop.
+To add a new menu item, create a new item slot and pass it to the `slots` prop. In the example below, the new slot is called `columnMenuUserItem` but you can choose any name and it'll be added to the menu automatically.
+You can also set the `displayOrder` (default `100`) or pass new props to the slots using `slotProps` prop.
 
 ```tsx
 function CustomColumnMenu(props: GridColumnMenuProps) {
   return (
     <GridColumnMenu
       {...props}
-      components={{
+      slots={{
         // Add new item
-        ColumnMenuUserItem: CustomUserItem,
+        columnMenuUserItem: CustomUserItem,
       }}
-      componentsProps={{
+      slotProps={{
         columnMenuUserItem: {
           // set `displayOrder` for the new item
           displayOrder: 15,
@@ -53,17 +49,17 @@ function CustomColumnMenu(props: GridColumnMenuProps) {
 
 ### Overriding default menu items
 
-Use the `components` prop to override default menu items.
+Use the `slots` prop to override default menu items.
 Check [this table](/x/react-data-grid/column-menu/#default-column-menu-items) to know the overridable slot name for each menu item.
 
 ```tsx
 function CustomColumnMenu(props: GridColumnMenuProps) {
   return (
     <GridColumnMenu
       {...props}
-      components={{
-        // Override `ColumnMenuFilterItem` component
-        ColumnMenuFilterItem: CustomFilterItem,
+      slots={{
+        // Override `columnMenuFilterItem` component
+        columnMenuFilterItem: CustomFilterItem,
       }}
     />
   );
@@ -74,17 +70,17 @@ function CustomColumnMenu(props: GridColumnMenuProps) {
 
 ### Hiding a menu item
 
-To hide a menu item, you can set its respective slot in `components` to `null`.
+To hide a menu item, you can set its respective slot in `slots` to `null`.
 Check [this table](/x/react-data-grid/column-menu/#default-column-menu-items) to know the slot name for each menu item.
 
 ```tsx
 function CustomColumnMenu(props: GridColumnMenuProps) {
   return (
     <GridColumnMenu
       {...props}
-      components={{
-        // Hide `ColumnMenuColumnsItem`
-        ColumnMenuColumnsItem: null,
+      slots={{
+        // Hide `columnMenuColumnsItem`
+        columnMenuColumnsItem: null,
       }}
     />
   );
@@ -97,7 +93,7 @@ function CustomColumnMenu(props: GridColumnMenuProps) {
 
 Every item is assigned a `displayOrder` based on which it is shown before or after other items. It works in ascending order; the smaller the number is, the earlier it is displayed on the list. For new items default value for `displayOrder` is **100**.
 
-You can override `displayOrder` for the default or new items in `componentsProps`.
+You can override `displayOrder` for the default or new items in `slotProps`.
 
 Check [this table](/x/react-data-grid/column-menu/#default-column-menu-items) to see default `displayOrder` for each menu item.
 
@@ -106,7 +102,7 @@ function CustomColumnMenu(props: GridColumnMenuProps) {
   return (
     <GridColumnMenu
       {...props}
-      componentsProps={{
+      slotProps={{
         // Swap positions of filter and sort items
         columnMenuFilterItem: {
           displayOrder: 0, // Previously `10`
@@ -124,18 +120,18 @@ function CustomColumnMenu(props: GridColumnMenuProps) {
 
 ### Default column menu items
 
-As a reference, here are the column menu `components` along with the default item components and `displayOrder`.
+As a reference, here are the column menu `slots` along with the default item components and `displayOrder`.
 
 {{"demo": "ColumnMenuGridReferences.js", "bg": "inline", "hideToolbar": true}}
 
 ## Custom menu component
 
-You can also customize and replace the column menu by [passing a fully custom component](/x/react-data-grid/components/#overriding-components) to the `ColumnMenu` slot of the Data Grid. If you want to add some of the default menu items to your custom component, you can import and re-use them.
+You can also customize and replace the column menu by [passing a fully custom component](/x/react-data-grid/components/#overriding-components) to the `columnMenu` slot of the Data Grid. If you want to add some of the default menu items to your custom component, you can import and re-use them.
 
 {{"demo": "CustomColumnMenuGrid.js", "bg": "inline"}}
 
 :::info
-<strong>Tip</strong>: The `ColumnMenu` component and its components slots receive the `colDef` prop corresponding to the current column; you can use this to conditionally render some items or change some logic.
+<strong>Tip</strong>: The `columnMenu` component and its components slots receive the `colDef` prop corresponding to the current column; you can use this to conditionally render some items or change some logic.
 :::
 
 ## Disable column menu

packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenu.tsx

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import {
   GridGenericColumnMenu,
   GridColumnMenuProps,
-  GRID_COLUMN_MENU_COMPONENTS,
-  GRID_COLUMN_MENU_COMPONENTS_PROPS,
+  GRID_COLUMN_MENU_SLOTS,
+  GRID_COLUMN_MENU_SLOT_PROPS,
   GridColumnMenuItemProps,
 } from '@mui/x-data-grid-pro';
 import { GridColumnMenuAggregationItem } from './GridColumnMenuAggregationItem';
@@ -23,14 +23,14 @@ export function GridColumnMenuGroupingItem(props: GridColumnMenuItemProps) {
   return null;
 }
 
-export const GRID_COLUMN_MENU_COMPONENTS_PREMIUM = {
-  ...GRID_COLUMN_MENU_COMPONENTS,
-  ColumnMenuAggregationItem: GridColumnMenuAggregationItem,
-  ColumnMenuGroupingItem: GridColumnMenuGroupingItem,
+export const GRID_COLUMN_MENU_SLOTS_PREMIUM = {
+  ...GRID_COLUMN_MENU_SLOTS,
+  columnMenuAggregationItem: GridColumnMenuAggregationItem,
+  columnMenuGroupingItem: GridColumnMenuGroupingItem,
 };
 
-export const GRID_COLUMN_MENU_COMPONENTS_PROPS_PREMIUM = {
-  ...GRID_COLUMN_MENU_COMPONENTS_PROPS,
+export const GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM = {
+  ...GRID_COLUMN_MENU_SLOT_PROPS,
   columnMenuAggregationItem: { displayOrder: 23 },
   columnMenuGroupingItem: { displayOrder: 27 },
 };
@@ -41,8 +41,8 @@ const GridPremiumColumnMenu = React.forwardRef<HTMLUListElement, GridColumnMenuP
       <GridGenericColumnMenu
         ref={ref}
         {...props}
-        defaultComponents={GRID_COLUMN_MENU_COMPONENTS_PREMIUM}
-        defaultComponentsProps={GRID_COLUMN_MENU_COMPONENTS_PROPS_PREMIUM}
+        defaultSlots={GRID_COLUMN_MENU_SLOTS_PREMIUM}
+        defaultSlotProps={GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM}
       />
     );
   },

packages/grid/x-data-grid-premium/src/components/reexports.ts

@@ -1,5 +1,5 @@
 export {
   GridPremiumColumnMenu as GridColumnMenu,
-  GRID_COLUMN_MENU_COMPONENTS_PREMIUM as GRID_COLUMN_MENU_COMPONENTS,
-  GRID_COLUMN_MENU_COMPONENTS_PROPS_PREMIUM as GRID_COLUMN_MENU_COMPONENTS_PROPS,
+  GRID_COLUMN_MENU_SLOTS_PREMIUM as GRID_COLUMN_MENU_SLOTS,
+  GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM as GRID_COLUMN_MENU_SLOT_PROPS,
 } from './GridPremiumColumnMenu';

packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx

@@ -120,7 +120,7 @@ export const useGridAggregationPreProcessors = (
         return columnMenuItems;
       }
 
-      return [...columnMenuItems, 'ColumnMenuAggregationItem'];
+      return [...columnMenuItems, 'columnMenuAggregationItem'];
     },
     [props.aggregationFunctions, props.disableAggregation],
   );