[DataGrid] Refactor: move Badge to leaf import

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

@@ -8,7 +8,7 @@ import {
 } from '@mui/utils';
 import { ButtonProps } from '@mui/material/Button';
 import { TooltipProps } from '@mui/material/Tooltip';
-import { BadgeProps } from '@mui/material/Badge';
+import { BadgeProps } from '../../models/gridBaseSlots';
 import { gridColumnLookupSelector } from '../../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridFilterActiveItemsSelector } from '../../hooks/features/filter/gridFilterSelector';
@@ -42,6 +42,7 @@ const GridToolbarFilterListRoot = styled('ul', {
   padding: theme.spacing(0, 1),
 }));
 
+// FIXME(v8:romgrk): override slotProps
 export interface GridToolbarFilterButtonProps {
   /**
    * The props used for each slot inside.

packages/x-data-grid/src/models/gridBaseSlots.ts

@@ -0,0 +1,23 @@
+export type BadgeProps = {
+  badgeContent?: React.ReactNode;
+  children: React.ReactNode;
+  color?: 'primary' | 'default' | 'error';
+  overlap?: 'circular';
+  variant?: 'dot';
+  invisible?: boolean;
+};
+
+export type DividerProps = {};
+
+export type MenuItemProps = {
+  autoFocus?: boolean;
+  children: React.ReactNode;
+  /** For items that aren't interactive themselves (but may contain an interactive widget) */
+  inert?: boolean;
+  disabled?: boolean;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  iconStart?: React.ReactNode;
+  iconEnd?: React.ReactNode;
+  selected?: boolean;
+  value?: number | string | readonly string[];
+};

packages/x-data-grid/src/models/gridSlotsComponentsProps.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import type { BadgeProps } from '@mui/material/Badge';
+import type { BadgeProps as MUIBadgeProps } from '@mui/material/Badge';
 import type { CheckboxProps } from '@mui/material/Checkbox';
 import type { MenuListProps } from '@mui/material/MenuList';
+import type { MenuItemProps as MUIMenuItemProps } 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';
@@ -32,24 +33,11 @@ import type { GridColumnsManagementProps } from '../components/columnsManagement
 import type { GridLoadingOverlayProps } from '../components/GridLoadingOverlay';
 import type { GridRowCountProps } from '../components/GridRowCount';
 import type { GridColumnHeaderSortIconProps } from '../components/columnHeaders/GridColumnHeaderSortIcon';
+import type { BadgeProps, DividerProps, MenuItemProps } from './gridBaseSlots';
 
-type DividerProps = {};
 type RootProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
 type MainProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
 
-type MenuItemProps = {
-  autoFocus?: boolean;
-  children: React.ReactNode;
-  /** For items that aren't interactive themselves (but may contain an interactive widget) */
-  inert?: boolean;
-  disabled?: boolean;
-  onClick?: React.MouseEventHandler<HTMLElement>;
-  iconStart?: React.ReactNode;
-  iconEnd?: React.ReactNode;
-  selected?: boolean;
-  value?: number | string | readonly string[];
-};
-
 // Overrides for module augmentation
 export interface BaseBadgePropsOverrides {}
 export interface BaseCheckboxPropsOverrides {}
@@ -88,7 +76,7 @@ export interface PinnedRowsPropsOverrides {}
 export interface SkeletonCellPropsOverrides {}
 export interface RowPropsOverrides {}
 
-export interface GridSlotProps {
+interface BaseSlotProps {
   baseBadge: BadgeProps & BaseBadgePropsOverrides;
   baseCheckbox: CheckboxProps & BaseCheckboxPropsOverrides;
   baseDivider: DividerProps & BaseDividerPropsOverrides;
@@ -110,6 +98,14 @@ export interface GridSlotProps {
     children?: React.ReactNode;
   } & BaseSelectOptionPropsOverrides;
   baseChip: ChipProps & BaseChipPropsOverrides;
+}
+
+interface MaterialSlotProps {
+  baseBadge: MUIBadgeProps;
+  baseMenuItem: MUIMenuItemProps;
+}
+
+interface ElementSlotProps {
   cell: GridCellProps & CellPropsOverrides;
   columnHeaders: GridColumnHeadersProps;
   columnHeaderFilterIconButton: ColumnHeaderFilterIconButtonProps &
@@ -141,6 +137,18 @@ export interface GridSlotProps {
   root: RootProps;
 }
 
+/* Merge MUI types into base types to keep slotProps working. */
+type Merge<A, B> = {
+  [K in keyof A | keyof B]: K extends keyof A & keyof B
+    ? A[K] & B[K]
+    : K extends keyof B
+      ? B[K]
+      : K extends keyof A
+        ? A[K]
+        : never;
+};
+export type GridSlotProps = Merge<BaseSlotProps, MaterialSlotProps> & ElementSlotProps;
+
 /**
  * Overridable components props dynamically passed to the component at rendering.
  */

scripts/x-data-grid-premium.exports.json

@@ -567,7 +567,7 @@
   { "name": "GridSkeletonCell", "kind": "Variable" },
   { "name": "GridSkeletonCellProps", "kind": "Interface" },
   { "name": "GridSkeletonRowNode", "kind": "Interface" },
-  { "name": "GridSlotProps", "kind": "Interface" },
+  { "name": "GridSlotProps", "kind": "TypeAlias" },
   { "name": "GridSlots", "kind": "Interface" },
   { "name": "GridSlotsComponent", "kind": "Interface" },
   { "name": "GridSlotsComponentsProps", "kind": "TypeAlias" },

scripts/x-data-grid-pro.exports.json

@@ -518,7 +518,7 @@
   { "name": "GridSkeletonCell", "kind": "Variable" },
   { "name": "GridSkeletonCellProps", "kind": "Interface" },
   { "name": "GridSkeletonRowNode", "kind": "Interface" },
-  { "name": "GridSlotProps", "kind": "Interface" },
+  { "name": "GridSlotProps", "kind": "TypeAlias" },
   { "name": "GridSlots", "kind": "Interface" },
   { "name": "GridSlotsComponent", "kind": "Interface" },
   { "name": "GridSlotsComponentsProps", "kind": "TypeAlias" },

scripts/x-data-grid.exports.json

@@ -469,7 +469,7 @@
   { "name": "GridSkeletonCell", "kind": "Variable" },
   { "name": "GridSkeletonCellProps", "kind": "Interface" },
   { "name": "GridSkeletonRowNode", "kind": "Interface" },
-  { "name": "GridSlotProps", "kind": "Interface" },
+  { "name": "GridSlotProps", "kind": "TypeAlias" },
   { "name": "GridSlots", "kind": "Interface" },
   { "name": "GridSlotsComponent", "kind": "Interface" },
   { "name": "GridSlotsComponentsProps", "kind": "TypeAlias" },