[DataGrid] Refactor: create base Popper

docs/data/data-grid/filtering/CustomFilterPanelPosition.js

@@ -33,7 +33,7 @@ export default function CustomFilterPanelPosition() {
         slots={{ toolbar: CustomToolbar }}
         slotProps={{
           panel: {
-            anchorEl: filterButtonEl,
+            target: filterButtonEl,
           },
           toolbar: { setFilterButtonEl },
         }}

docs/data/data-grid/filtering/CustomFilterPanelPosition.tsx

@@ -43,7 +43,7 @@ export default function CustomFilterPanelPosition() {
         slots={{ toolbar: CustomToolbar }}
         slotProps={{
           panel: {
-            anchorEl: filterButtonEl,
+            target: filterButtonEl,
           },
           toolbar: { setFilterButtonEl },
         }}

docs/data/data-grid/filtering/CustomFilterPanelPosition.tsx.preview

@@ -4,7 +4,7 @@
   slots={{ toolbar: CustomToolbar }}
   slotProps={{
     panel: {
-      anchorEl: filterButtonEl,
+      target: filterButtonEl,
     },
     toolbar: { setFilterButtonEl },
   }}

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

@@ -59,7 +59,7 @@ function GridHeaderFilterMenu({
   }
 
   return (
-    <GridMenu placement="bottom-end" open={open} target={target} onClose={hideMenu}>
+    <GridMenu position="bottom-end" open={open} target={target} onClose={hideMenu}>
       <rootProps.slots.baseMenuList
         aria-labelledby={labelledBy}
         id={id}

packages/x-data-grid/src/components/menu/GridMenu.tsx

@@ -1,20 +1,19 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import ClickAwayListener, { ClickAwayListenerProps } from '@mui/material/ClickAwayListener';
 import {
   unstable_composeClasses as composeClasses,
   unstable_useEnhancedEffect as useEnhancedEffect,
   HTMLElementType,
 } from '@mui/utils';
-import Grow, { GrowProps } from '@mui/material/Grow';
-import Paper from '@mui/material/Paper';
-import Popper, { PopperProps } from '@mui/material/Popper';
 import { styled } from '@mui/material/styles';
+import { PopperProps } from '../../models/gridBaseSlots';
+import { GridSlotProps } from '../../models/gridSlotsComponent';
 import { getDataGridUtilityClass, gridClasses } from '../../constants/gridClasses';
 import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { NotRendered } from '../../utils/assert';
 
 type MenuPosition =
   | 'bottom-end'
@@ -43,31 +42,24 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-const GridMenuRoot = styled(Popper, {
+const GridMenuRoot = styled(NotRendered<GridSlotProps['basePopper']>, {
   name: 'MuiDataGrid',
   slot: 'Menu',
-  overridesResolver: (_, styles) => styles.menu,
 })<{ ownerState: OwnerState }>(({ theme }) => ({
   zIndex: theme.zIndex.modal,
   [`& .${gridClasses.menuList}`]: {
     outline: 0,
   },
 }));
 
-export interface GridMenuProps extends Omit<PopperProps, 'onKeyDown' | 'children'> {
+export interface GridMenuProps extends Pick<PopperProps, 'className' | 'onExited'> {
   open: boolean;
   target: HTMLElement | null;
   onClose: (event?: Event) => void;
   position?: MenuPosition;
-  onExited?: GrowProps['onExited'];
   children: React.ReactNode;
 }
 
-const transformOrigin = {
-  'bottom-start': 'top left',
-  'bottom-end': 'top right',
-};
-
 function GridMenu(props: GridMenuProps) {
   const { open, target, onClose, children, position, className, onExited, ...other } = props;
   const apiRef = useGridApiContext();
@@ -91,17 +83,7 @@ function GridMenu(props: GridMenuProps) {
     apiRef.current.publishEvent(eventName, { target });
   }, [apiRef, open, target]);
 
-  const handleExited = (popperOnExited: (() => void) | undefined) => (node: HTMLElement) => {
-    if (popperOnExited) {
-      popperOnExited();
-    }
-
-    if (onExited) {
-      onExited(node);
-    }
-  };
-
-  const handleClickAway: ClickAwayListenerProps['onClickAway'] = (event) => {
+  const handleClickAway = (event: MouseEvent | TouchEvent) => {
     if (event.target && (target === event.target || target?.contains(event.target as Node))) {
       return;
     }
@@ -114,23 +96,16 @@ function GridMenu(props: GridMenuProps) {
       className={clsx(classes.root, className)}
       ownerState={rootProps}
       open={open}
-      anchorEl={target as any}
+      target={target}
       transition
       placement={position}
+      onClickAway={handleClickAway}
+      onExited={onExited}
+      clickAwayMouseEvent="onMouseDown"
       {...other}
       {...rootProps.slotProps?.basePopper}
     >
-      {({ TransitionProps, placement }) => (
-        <ClickAwayListener onClickAway={handleClickAway} mouseEvent="onMouseDown">
-          <Grow
-            {...TransitionProps}
-            style={{ transformOrigin: transformOrigin[placement as keyof typeof transformOrigin] }}
-            onExited={handleExited(TransitionProps?.onExited)}
-          >
-            <Paper>{children}</Paper>
-          </Grow>
-        </ClickAwayListener>
-      )}
+      {children}
     </GridMenuRoot>
   );
 }
@@ -141,11 +116,9 @@ GridMenu.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
+  className: PropTypes.string,
   onClose: PropTypes.func.isRequired,
   onExited: PropTypes.func,
-  /**
-   * If `true`, the component is shown.
-   */
   open: PropTypes.bool.isRequired,
   position: PropTypes.oneOf([
     'bottom-end',

packages/x-data-grid/src/components/menu/columnMenu/GridColumnHeaderMenu.tsx

@@ -46,7 +46,7 @@ function GridColumnHeaderMenu({
 
   return (
     <GridMenu
-      placement={`bottom-${colDef!.align === 'right' ? 'start' : 'end'}` as any}
+      position={`bottom-${colDef!.align === 'right' ? 'start' : 'end'}` as any}
       open={open}
       target={target}
       onClose={hideMenu}

packages/x-data-grid/src/components/panel/GridColumnsPanel.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import { GridPanelWrapper, GridPanelWrapperProps } from './GridPanelWrapper';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
@@ -14,12 +13,4 @@ function GridColumnsPanel(props: GridColumnsPanelProps) {
   );
 }
 
-GridColumnsPanel.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  slotProps: PropTypes.object,
-} as any;
-
 export { GridColumnsPanel };

packages/x-data-grid/src/components/panel/GridPanel.spec.tsx

@@ -4,7 +4,7 @@ import { GridPanel } from '@mui/x-data-grid';
 function MyPanel() {
   return (
     <div>
-      <GridPanel classes={{ paper: 'paper' }} open modifiers={[{ name: 'flip', enabled: false }]} />
+      <GridPanel classes={{ paper: 'paper' }} open flip={false} />
       {/* @ts-expect-error foo classes doesn't exist */}
       <GridPanel classes={{ foo: 'foo' }} />
     </div>