[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/src/components/menu/GridMenu.tsx

@@ -1,16 +1,14 @@
 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 { GridBaseSlots } from '../../models/gridSlotsComponent';
 import { getDataGridUtilityClass, gridClasses } from '../../constants/gridClasses';
 import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -43,10 +41,9 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-const GridMenuRoot = styled(Popper, {
+const GridMenuRoot = styled('div' as unknown as GridBaseSlots['basePopper'], {
   name: 'MuiDataGrid',
   slot: 'Menu',
-  overridesResolver: (_, styles) => styles.menu,
 })<{ ownerState: OwnerState }>(({ theme }) => ({
   zIndex: theme.zIndex.modal,
   [`& .${gridClasses.menuList}`]: {
@@ -59,15 +56,9 @@ export interface GridMenuProps extends Omit<PopperProps, 'onKeyDown' | 'children
   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 +82,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) => {
     if (event.target && (target === event.target || target?.contains(event.target as Node))) {
       return;
     }
@@ -114,23 +95,16 @@ function GridMenu(props: GridMenuProps) {
       className={clsx(classes.root, className)}
       ownerState={rootProps}
       open={open}
-      anchorEl={target as any}
+      target={target as any}
       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,12 +115,82 @@ GridMenu.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
+  className: PropTypes.string,
+  clickAwayMouseEvent: PropTypes.oneOf([
+    'onClick',
+    'onMouseDown',
+    'onMouseUp',
+    'onPointerDown',
+    'onPointerUp',
+    false,
+  ]),
+  clickAwayTouchEvent: PropTypes.oneOf(['onTouchEnd', 'onTouchStart', false]),
+  flip: PropTypes.bool,
+  focusTrap: PropTypes.bool,
+  focusTrapEnabled: PropTypes.bool,
+  id: PropTypes.string,
+  onClickAway: PropTypes.shape({
+    '__@hasInstance@654': PropTypes.func.isRequired,
+    '__@metadata@656': PropTypes.any,
+    apply: PropTypes.func.isRequired,
+    arguments: PropTypes.any.isRequired,
+    bind: PropTypes.func.isRequired,
+    call: PropTypes.func.isRequired,
+    caller: PropTypes.object.isRequired,
+    length: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
+    prototype: PropTypes.any.isRequired,
+    toString: PropTypes.func.isRequired,
+  }),
   onClose: PropTypes.func.isRequired,
+  onDidMount: PropTypes.shape({
+    '__@hasInstance@654': PropTypes.func.isRequired,
+    '__@metadata@656': PropTypes.any,
+    apply: PropTypes.func.isRequired,
+    arguments: PropTypes.any.isRequired,
+    bind: PropTypes.func.isRequired,
+    call: PropTypes.func.isRequired,
+    caller: PropTypes.object.isRequired,
+    length: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
+    prototype: PropTypes.any.isRequired,
+    toString: PropTypes.func.isRequired,
+  }),
+  onDidUnmount: PropTypes.shape({
+    '__@hasInstance@654': PropTypes.func.isRequired,
+    '__@metadata@656': PropTypes.any,
+    apply: PropTypes.func.isRequired,
+    arguments: PropTypes.any.isRequired,
+    bind: PropTypes.func.isRequired,
+    call: PropTypes.func.isRequired,
+    caller: PropTypes.object.isRequired,
+    length: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
+    prototype: PropTypes.any.isRequired,
+    toString: PropTypes.func.isRequired,
+  }),
   onExited: PropTypes.func,
+  open: PropTypes.bool.isRequired,
   /**
-   * If `true`, the component is shown.
+   * @default 'bottom'
    */
-  open: PropTypes.bool.isRequired,
+  placement: PropTypes.oneOf([
+    'auto-end',
+    'auto-start',
+    'auto',
+    'bottom-end',
+    'bottom-start',
+    'bottom',
+    'left-end',
+    'left-start',
+    'left',
+    'right-end',
+    'right-start',
+    'right',
+    'top-end',
+    'top-start',
+    'top',
+  ]),
   position: PropTypes.oneOf([
     'bottom-end',
     'bottom-start',
@@ -162,6 +206,7 @@ GridMenu.propTypes = {
     'top',
   ]),
   target: HTMLElementType,
+  transition: PropTypes.bool,
 } as any;
 
 export { GridMenu };

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>

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

@@ -25,7 +25,7 @@ describe('<GridPanel />', () => {
     );
   }
 
-  describeConformance(<GridPanel disablePortal open />, () => ({
+  describeConformance(<GridPanel open />, () => ({
     classes: classes as any,
     inheritComponent: Popper,
     muiName: 'MuiGridPanel',