[DataGrid] Add missing slotProps to panel interface

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

@@ -23,7 +23,7 @@ function CustomToolbar({ setFilterButtonEl }) {
   );
 }
 
-export default function CustomFilterPanelPosition() {
+export default function CustomFilterPanelPositionNoSnap() {
   const { data, loading } = useDemoData({
     dataSet: 'Employee',
     visibleFields: VISIBLE_FIELDS,

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

@@ -32,7 +32,7 @@ function CustomToolbar({ setFilterButtonEl }: GridSlotProps['toolbar']) {
   );
 }
 
-export default function CustomFilterPanelPosition() {
+export default function CustomFilterPanelPositionNoSnap() {
   const { data, loading } = useDemoData({
     dataSet: 'Employee',
     visibleFields: VISIBLE_FIELDS,

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

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
+
+export default function FilterPanelPlacementColumnHeadersNoSnap() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Employee',
+    visibleFields: VISIBLE_FIELDS,
+    rowLength: 100,
+  });
+
+  const columnHeadersRef = React.useRef(null);
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        {...data}
+        loading={loading}
+        showToolbar
+        slotProps={{
+          columnHeaders: {
+            ref: columnHeadersRef,
+          },
+          panel: {
+            placement: 'bottom-start',
+            target: columnHeadersRef.current,
+          },
+        }}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
+
+export default function FilterPanelPlacementColumnHeadersNoSnap() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Employee',
+    visibleFields: VISIBLE_FIELDS,
+    rowLength: 100,
+  });
+
+  const columnHeadersRef = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        {...data}
+        loading={loading}
+        showToolbar
+        slotProps={{
+          columnHeaders: {
+            ref: columnHeadersRef,
+          },
+          panel: {
+            placement: 'bottom-start',
+            target: columnHeadersRef.current,
+          },
+        }}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,14 @@
+<DataGrid
+  {...data}
+  loading={loading}
+  showToolbar
+  slotProps={{
+    columnHeaders: {
+      ref: columnHeadersRef,
+    },
+    panel: {
+      placement: 'bottom-start',
+      target: columnHeadersRef.current,
+    },
+  }}
+/>

docs/data/data-grid/filtering/customization.md

@@ -177,9 +177,17 @@ To pass props directly to the `InputComponent` and not its wrapper, you can use
 
 ### Customize the filter panel position
 
+#### Toolbar button anchor
+
 The demo below shows how to anchor the filter panel to the toolbar button instead of the column header.
 
-{{"demo": "CustomFilterPanelPosition.js", "bg": "inline", "defaultCodeOpen": false}}
+{{"demo": "CustomFilterPanelPositionNoSnap.js", "bg": "inline", "defaultCodeOpen": false}}
+
+#### Column headers anchor
+
+The following demo shows how to make panels always appear on the bottom-left under the column headers mimicking the default behavior of Data Grid v7.
+
+{{"demo": "FilterPanelPlacementColumnHeadersNoSnap.js", "bg": "inline", "defaultCodeOpen": false}}
 
 ## API
 

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

@@ -23,10 +23,7 @@ export interface GridPanelClasses {
   paper: string;
 }
 
-export interface GridPanelProps extends Pick<
-  GridSlotProps['basePopper'],
-  'id' | 'className' | 'target' | 'flip'
-> {
+export interface GridPanelProps extends Omit<GridSlotProps['basePopper'], 'ref'> {
   ref?: React.Ref<HTMLDivElement>;
   children?: React.ReactNode;
   /**
@@ -134,11 +131,48 @@ GridPanel.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
+  clickAwayMouseEvent: PropTypes.oneOf([
+    'onClick',
+    'onMouseDown',
+    'onMouseUp',
+    'onPointerDown',
+    'onPointerUp',
+    false,
+  ]),
+  clickAwayTouchEvent: PropTypes.oneOf(['onTouchEnd', 'onTouchStart', false]),
   flip: PropTypes.bool,
+  focusTrap: PropTypes.bool,
   id: PropTypes.string,
+  onClickAway: PropTypes.func,
   onClose: PropTypes.func,
+  onDidHide: PropTypes.func,
+  onDidShow: PropTypes.func,
+  onExited: PropTypes.func,
   open: PropTypes.bool.isRequired,
+  /**
+   * @default 'bottom'
+   */
+  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',
+  ]),
+  role: PropTypes.string,
+  style: PropTypes.object,
   target: PropTypes /* @typescript-to-proptypes-ignore */.any,
+  transition: PropTypes.bool,
 } as any;
 
 export { GridPanel };