[DataGrid] Refactor: create base button props

packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react';
-import { IconButtonProps } from '@mui/material/IconButton';
+import { GridSlotProps } from '@mui/x-data-grid';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
-interface GridHeaderFilterClearIconProps extends IconButtonProps {}
+type BaseIconButtonProps = GridSlotProps['baseIconButton'];
 
-const sx = { padding: '2px' };
+// FIXME(v8:romgrk): Make parametric
+interface GridHeaderFilterClearIconProps extends BaseIconButtonProps {}
+
+const style = { padding: '2px' };
 
 function GridHeaderFilterClearButton(props: GridHeaderFilterClearIconProps) {
   const rootProps = useGridRootProps();
@@ -13,7 +16,7 @@ function GridHeaderFilterClearButton(props: GridHeaderFilterClearIconProps) {
       tabIndex={-1}
       aria-label="Clear filter"
       size="small"
-      sx={sx}
+      style={style}
       {...props}
       {...rootProps.slotProps?.baseIconButton}
     >

packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx

@@ -11,7 +11,7 @@ import { refType, unstable_useId as useId } from '@mui/utils';
 import { gridHeaderFilteringMenuSelector } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
-const sx = {
+const style = {
   width: 22,
   height: 22,
   margin: 'auto 0 10px 5px',
@@ -69,7 +69,7 @@ function GridHeaderFilterMenuContainer(props: {
         tabIndex={-1}
         size="small"
         onClick={handleClick}
-        sx={sx}
+        style={style}
         disabled={disabled}
         {...rootProps.slotProps?.baseIconButton}
       >

packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { IconButtonProps } from '@mui/material/IconButton';
-import { MenuItemProps } from '@mui/material/MenuItem';
+import { GridSlotProps } from '../../models/gridSlotsComponentsProps';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
 interface GridActionsCellItemCommonProps {
@@ -11,9 +10,13 @@ interface GridActionsCellItemCommonProps {
   component?: React.ElementType;
 }
 
+// FIXME(v8:romgrk): Make parametric
 export type GridActionsCellItemProps = GridActionsCellItemCommonProps &
   (
-    | ({ showInMenu?: false; icon: React.ReactElement } & Omit<IconButtonProps, 'component'>)
+    | ({ showInMenu?: false; icon: React.ReactElement } & Omit<
+        GridSlotProps['baseIconButton'],
+        'component'
+      >)
     | ({
         showInMenu: true;
         /**
@@ -22,7 +25,7 @@ export type GridActionsCellItemProps = GridActionsCellItemCommonProps &
          */
         closeMenuOnClick?: boolean;
         closeMenu?: () => void;
-      } & Omit<MenuItemProps, 'component'>)
+      } & Omit<GridSlotProps['baseMenuItem'], 'component'>)
   );
 
 const GridActionsCellItem = React.forwardRef<HTMLElement, GridActionsCellItemProps>(

packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx

@@ -71,7 +71,6 @@ function GridColumnHeaderFilterIconButton(props: ColumnHeaderFilterIconButtonPro
     <rootProps.slots.baseIconButton
       id={labelId}
       onClick={toggleFilter}
-      color="default"
       aria-label={apiRef.current.getLocaleText('columnHeaderFiltersLabel')}
       size="small"
       tabIndex={-1}

packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx

@@ -241,15 +241,15 @@ function GridColumnsManagement(props: GridColumnsManagementProps) {
               <rootProps.slots.baseIconButton
                 aria-label={apiRef.current.getLocaleText('columnsManagementDeleteIconLabel')}
                 size="small"
-                sx={[
+                style={
                   searchValue
                     ? {
                         visibility: 'visible',
                       }
                     : {
                         visibility: 'hidden',
-                      },
-                ]}
+                      }
+                }
                 tabIndex={-1}
                 onClick={handleSearchReset}
                 {...rootProps.slotProps?.baseIconButton}

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

@@ -161,15 +161,15 @@ function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps) {
               aria-label={apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel')}
               size="small"
               edge="end"
-              sx={[
+              style={
                 searchValue
                   ? {
                       visibility: 'visible',
                     }
                   : {
                       visibility: 'hidden',
-                    },
-              ]}
+                    }
+              }
               onClick={handleSearchReset}
               {...rootProps.slotProps?.baseIconButton}
             >

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

@@ -1,10 +1,35 @@
+type Ref = React.RefCallback<HTMLElement> | React.RefObject<HTMLElement> | null;
+
 export type BadgeProps = {
   badgeContent?: React.ReactNode;
   children: React.ReactNode;
   color?: 'primary' | 'default' | 'error';
+  invisible?: boolean;
   overlap?: 'circular';
   variant?: 'dot';
-  invisible?: boolean;
+  style?: React.CSSProperties;
+};
+
+export type ButtonProps = {
+  ref?: Ref;
+  children?: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+  id?: string;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+  role?: string;
+  size?: 'small' | 'medium' | 'large';
+  startIcon?: React.ReactNode;
+  style?: React.CSSProperties;
+  tabIndex?: number;
+  title?: string;
+  touchRippleRef?: any; // FIXME(v8:romgrk): find a way to remove
+};
+
+export type IconButtonProps = Omit<ButtonProps, 'startIcon'> & {
+  color?: 'default' | 'primary';
+  edge?: 'start' | 'end' | false;
 };
 
 export type DividerProps = {};
@@ -20,4 +45,5 @@ export type MenuItemProps = {
   iconEnd?: React.ReactNode;
   selected?: boolean;
   value?: number | string | readonly string[];
+  style?: React.CSSProperties;
 };

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

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import type { BadgeProps as MUIBadgeProps } from '@mui/material/Badge';
+import type { ButtonProps as MUIButtonProps } from '@mui/material/Button';
 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';
 import type { SwitchProps } from '@mui/material/Switch';
-import type { ButtonProps } from '@mui/material/Button';
-import type { IconButtonProps } from '@mui/material/IconButton';
+import type { IconButtonProps as MUIIconButtonProps } from '@mui/material/IconButton';
 import type { InputAdornmentProps } from '@mui/material/InputAdornment';
 import type { TooltipProps } from '@mui/material/Tooltip';
 import type { InputLabelProps } from '@mui/material/InputLabel';
@@ -33,7 +33,13 @@ 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';
+import type {
+  BadgeProps,
+  ButtonProps,
+  DividerProps,
+  IconButtonProps,
+  MenuItemProps,
+} from './gridBaseSlots';
 
 type RootProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
 type MainProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
@@ -102,6 +108,8 @@ interface BaseSlotProps {
 
 interface MaterialSlotProps {
   baseBadge: MUIBadgeProps;
+  baseButton: MUIButtonProps;
+  baseIconButton: MUIIconButtonProps;
   baseMenuItem: MUIMenuItemProps;
 }