[DataGrid] Refactor: remove more material

packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx

@@ -160,6 +160,7 @@ DataGridPremiumRaw.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  className: PropTypes.string,
   /**
    * The character used to separate cell values when copying to the clipboard.
    * @default '\t'
@@ -1097,6 +1098,7 @@ DataGridPremiumRaw.propTypes = {
    * @default (pastedText) => { const text = pastedText.replace(/\r?\n$/, ''); return text.split(/\r\n|\n|\r/).map((row) => row.split('\t')); }
    */
   splitClipboardPastedText: PropTypes.func,
+  style: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx

@@ -138,6 +138,7 @@ DataGridProRaw.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  className: PropTypes.string,
   /**
    * The character used to separate cell values when copying to the clipboard.
    * @default '\t'
@@ -996,6 +997,7 @@ DataGridProRaw.propTypes = {
       sort: PropTypes.oneOf(['asc', 'desc']),
     }),
   ),
+  style: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

packages/x-data-grid/src/DataGrid/DataGrid.tsx

@@ -125,6 +125,7 @@ DataGridRaw.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  className: PropTypes.string,
   /**
    * The character used to separate cell values when copying to the clipboard.
    * @default '\t'
@@ -796,6 +797,7 @@ DataGridRaw.propTypes = {
       sort: PropTypes.oneOf(['asc', 'desc']),
     }),
   ),
+  style: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { SvgIconProps } from '@mui/material/SvgIcon';
 import composeClasses from '@mui/utils/composeClasses';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridRowMaximumTreeDepthSelector } from '../../hooks/features/rows/gridRowsSelector';
@@ -25,7 +24,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-interface GridBooleanCellProps extends GridRenderCellParams, Omit<SvgIconProps, 'tabIndex' | 'id'> {
+interface GridBooleanCellProps extends GridRenderCellParams {
   hideDescendantCount?: boolean;
 }
 

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import { SelectProps, SelectChangeEvent } from '@mui/material/Select';
+import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
 import { GridCellEditStopReasons } from '../../models/params/gridEditCellParams';
 import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -13,16 +13,17 @@ import {
 } from '../panel/filterPanel/filterPanelUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 
-export interface GridEditSingleSelectCellProps
-  extends GridRenderEditCellParams,
-    Omit<SelectProps, 'id' | 'tabIndex' | 'value'> {
+export interface GridEditSingleSelectCellProps extends GridRenderEditCellParams {
   /**
    * Callback called when the value is changed by the user.
-   * @param {SelectChangeEvent<any>} event The event source of the callback.
+   * @param {Event<any>} event The event source of the callback.
    * @param {any} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
    * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
    */
-  onValueChange?: (event: SelectChangeEvent<any>, newValue: any) => Promise<void> | void;
+  onValueChange?: (
+    event: Parameters<NonNullable<GridSlotProps['baseSelect']['onOpen']>>[0],
+    newValue: any,
+  ) => Promise<void> | void;
   /**
    * If true, the select opens by default.
    */
@@ -122,7 +123,7 @@ function GridEditSingleSelectCell(props: GridEditSingleSelectCellProps) {
     }
   };
 
-  const handleOpen: SelectProps['onOpen'] = (event) => {
+  const handleOpen: GridSlotProps['baseSelect']['onOpen'] = (event) => {
     if (isKeyboardEvent(event) && event.key === 'Enter') {
       return;
     }
@@ -217,7 +218,7 @@ GridEditSingleSelectCell.propTypes = {
   isValidating: PropTypes.bool,
   /**
    * Callback called when the value is changed by the user.
-   * @param {SelectChangeEvent<any>} event The event source of the callback.
+   * @param {Event<any>} event The event source of the callback.
    * @param {any} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
    * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
    */

packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx

@@ -6,7 +6,6 @@ import {
   unstable_useId as useId,
   unstable_capitalize as capitalize,
 } from '@mui/utils';
-import { SelectChangeEvent } from '@mui/material/Select';
 import { styled } from '@mui/material/styles';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { vars } from '../../../constants/cssVariables';
@@ -314,7 +313,7 @@ const GridFilterForm = forwardRef<HTMLDivElement, GridFilterFormProps>(
     }, [item, currentColumn]);
 
     const changeColumn = React.useCallback(
-      (event: SelectChangeEvent<any>) => {
+      (event: React.ChangeEvent<any>) => {
         const field = event.target.value as string;
         const column = apiRef.current.getColumn(field)!;
 
@@ -367,7 +366,7 @@ const GridFilterForm = forwardRef<HTMLDivElement, GridFilterFormProps>(
     );
 
     const changeOperator = React.useCallback(
-      (event: SelectChangeEvent<any>) => {
+      (event: React.ChangeEvent<any>) => {
         const operator = event.target.value as string;
 
         const newOperator = currentColumn?.filterOperators!.find((op) => op.value === operator);
@@ -386,7 +385,7 @@ const GridFilterForm = forwardRef<HTMLDivElement, GridFilterFormProps>(
     );
 
     const changeLogicOperator = React.useCallback(
-      (event: SelectChangeEvent<any>) => {
+      (event: React.ChangeEvent<any>) => {
         const logicOperator =
           (event.target.value as string) === GridLogicOperator.And.toString()
             ? GridLogicOperator.And

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

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useId from '@mui/utils/useId';
-import { ButtonProps } from '@mui/material/Button';
-import { TooltipProps } from '@mui/material/Tooltip';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import useForkRef from '@mui/utils/useForkRef';
+import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
 import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
@@ -17,7 +16,10 @@ interface GridToolbarColumnsButtonProps {
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps?: { button?: Partial<ButtonProps>; tooltip?: Partial<TooltipProps> };
+  slotProps?: {
+    button?: Partial<GridSlotProps['baseButton']>;
+    tooltip?: Partial<GridSlotProps['baseTooltip']>;
+  };
 }
 
 const GridToolbarColumnsButton = forwardRef<HTMLButtonElement, GridToolbarColumnsButtonProps>(

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

@@ -1,9 +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 { ButtonProps } from '@mui/material/Button';
-import { TooltipProps } from '@mui/material/Tooltip';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
 import { gridDensitySelector } from '../../hooks/features/density/densitySelector';
 import { GridDensity } from '../../models/gridDensity';
 import { isHideMenuKey } from '../../utils/keyboardUtils';
@@ -19,7 +18,10 @@ interface GridToolbarDensitySelectorProps {
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps?: { button?: Partial<ButtonProps>; tooltip?: Partial<TooltipProps> };
+  slotProps?: {
+    button?: Partial<GridSlotProps['baseButton']>;
+    tooltip?: Partial<GridSlotProps['baseTooltip']>;
+  };
 }
 
 const GridToolbarDensitySelector = forwardRef<HTMLButtonElement, GridToolbarDensitySelectorProps>(

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

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { ButtonProps } from '@mui/material/Button';
-import { TooltipProps } from '@mui/material/Tooltip';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { GridCsvExportOptions, GridPrintExportOptions } from '../../models/gridExport';
@@ -32,7 +31,10 @@ export interface GridToolbarExportProps {
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps?: { button?: Partial<ButtonProps>; tooltip?: Partial<TooltipProps> };
+  slotProps?: {
+    button?: Partial<GridSlotProps['baseButton']>;
+    tooltip?: Partial<GridSlotProps['baseTooltip']>;
+  };
   // TODO v8: Remove this loophole
   // Refactored from: [key: string]: any;
   [x: `data-${string}`]: string;

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

@@ -1,9 +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 { ButtonProps } from '@mui/material/Button';
-import { TooltipProps } from '@mui/material/Tooltip';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
 import { isHideMenuKey } from '../../utils/keyboardUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { GridMenu } from '../menu/GridMenu';
@@ -15,7 +14,10 @@ interface GridToolbarExportContainerProps {
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps?: { button?: Partial<ButtonProps>; tooltip?: Partial<TooltipProps> };
+  slotProps?: {
+    button?: Partial<GridSlotProps['baseButton']>;
+    tooltip?: Partial<GridSlotProps['baseTooltip']>;
+  };
 }
 
 const GridToolbarExportContainer = forwardRef<

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

@@ -6,12 +6,10 @@ import {
   unstable_capitalize as capitalize,
   unstable_useId as useId,
 } from '@mui/utils';
-import { ButtonProps } from '@mui/material/Button';
-import { TooltipProps } from '@mui/material/Tooltip';
-import { forwardRef } from '@mui/x-internals/forwardRef';
 import useForkRef from '@mui/utils/useForkRef';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
 import { vars } from '../../constants/cssVariables';
-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';
@@ -46,16 +44,15 @@ const GridToolbarFilterListRoot = styled('ul', {
   padding: vars.spacing(0, 1),
 });
 
-// FIXME(v8:romgrk): override slotProps
 export interface GridToolbarFilterButtonProps {
   /**
    * The props used for each slot inside.
    * @default {}
    */
   slotProps?: {
-    button?: Partial<ButtonProps>;
-    tooltip?: Partial<TooltipProps>;
-    badge?: Partial<BadgeProps>;
+    button?: Partial<GridSlotProps['baseButton']>;
+    tooltip?: Partial<GridSlotProps['baseTooltip']>;
+    badge?: Partial<GridSlotProps['baseBadge']>;
   };
 }
 

packages/x-data-grid/src/components/toolbarV8/GridToolbar.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import Menu from '@mui/material/Menu';
 import useId from '@mui/utils/useId';
 import { styled } from '@mui/system';
+import { GridMenu } from '../menu/GridMenu';
 import { Toolbar } from './Toolbar';
 import { ToolbarButton } from './ToolbarButton';
 import { FilterPanelTrigger } from '../filterPanel';
@@ -91,41 +91,45 @@ function GridToolbar(props: GridToolbarProps) {
               aria-controls={exportMenuId}
               aria-haspopup="true"
               aria-expanded={exportMenuOpen ? 'true' : undefined}
-              onClick={() => setExportMenuOpen(true)}
+              onClick={() => setExportMenuOpen(!exportMenuOpen)}
             >
               <rootProps.slots.exportIcon fontSize="small" />
             </ToolbarButton>
           </rootProps.slots.baseTooltip>
 
-          <Menu
-            id={exportMenuId}
-            anchorEl={exportMenuTriggerRef.current}
+          <GridMenu
+            target={exportMenuTriggerRef.current}
             open={exportMenuOpen}
             onClose={closeExportMenu}
-            MenuListProps={{
-              'aria-labelledby': exportMenuTriggerId,
-            }}
+            position="bottom-start"
           >
-            {!printOptions?.disableToolbarButton && (
-              <ExportPrint
-                render={<rootProps.slots.baseMenuItem {...rootProps.slotProps?.baseMenuItem} />}
-                options={printOptions}
-                onClick={closeExportMenu}
-              >
-                {apiRef.current.getLocaleText('toolbarExportPrint')}
-              </ExportPrint>
-            )}
-            {!csvOptions?.disableToolbarButton && (
-              <ExportCsv
-                render={<rootProps.slots.baseMenuItem {...rootProps.slotProps?.baseMenuItem} />}
-                options={csvOptions}
-                onClick={closeExportMenu}
-              >
-                {apiRef.current.getLocaleText('toolbarExportCSV')}
-              </ExportCsv>
-            )}
-            {additionalExportMenuItems?.(closeExportMenu)}
-          </Menu>
+            <rootProps.slots.baseMenuList
+              id={exportMenuId}
+              aria-labelledby={exportMenuTriggerId}
+              autoFocusItem
+              {...rootProps.slotProps?.baseMenuList}
+            >
+              {!printOptions?.disableToolbarButton && (
+                <ExportPrint
+                  render={<rootProps.slots.baseMenuItem {...rootProps.slotProps?.baseMenuItem} />}
+                  options={printOptions}
+                  onClick={closeExportMenu}
+                >
+                  {apiRef.current.getLocaleText('toolbarExportPrint')}
+                </ExportPrint>
+              )}
+              {!csvOptions?.disableToolbarButton && (
+                <ExportCsv
+                  render={<rootProps.slots.baseMenuItem {...rootProps.slotProps?.baseMenuItem} />}
+                  options={csvOptions}
+                  onClick={closeExportMenu}
+                >
+                  {apiRef.current.getLocaleText('toolbarExportCSV')}
+                </ExportCsv>
+              )}
+              {additionalExportMenuItems?.(closeExportMenu)}
+            </rootProps.slots.baseMenuList>
+          </GridMenu>
         </React.Fragment>
       )}
 

packages/x-data-grid/src/models/props/DataGridProps.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { RefObject } from '@mui/x-internals/types';
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
-import { CommonProps } from '@mui/material/OverridableComponent';
 import { GridDensity } from '../gridDensity';
 import { GridEditMode } from '../gridEditRowModel';
 import { GridFeatureMode } from '../gridFeatureMode';
@@ -40,6 +39,11 @@ import type {
   GridUpdateRowError,
 } from '../../hooks/features/dataSource/gridDataSourceError';
 
+type CommonProps = {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
 export interface GridExperimentalFeatures {
   /**
    * Emits a warning if the cell receives focus without also syncing the focus state.