@mui/x-data-grid 8.0.0-alpha.12 → 8.0.0-alpha.14

package/esm/components/export/ExportPrint.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { GridPrintExportOptions } from "../../models/gridExport.js";
+import type { GridSlotProps } from '../../models';
+export type ExportPrintProps = GridSlotProps['baseButton'] & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<GridSlotProps['baseButton']>;
+  /**
+   * The options to apply on the Print export.
+   * @demos
+   *   - [Print export](/x/react-data-grid/export/#print-export)
+   */
+  options?: GridPrintExportOptions;
+};
+/**
+ * A button that triggers a print export.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Export](https://mui.com/x/react-data-grid/components/export/)
+ *
+ * API:
+ *
+ * - [ExportPrint API](https://mui.com/x/api/data-grid/export-print/)
+ */
+declare const ExportPrint: React.ForwardRefExoticComponent<ExportPrintProps> | React.ForwardRefExoticComponent<Omit<ExportPrintProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { ExportPrint };

package/esm/components/export/ExportPrint.js

@@ -0,0 +1,189 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["render", "options", "onClick"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A button that triggers a print export.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Export](https://mui.com/x/react-data-grid/components/export/)
+ *
+ * API:
+ *
+ * - [ExportPrint API](https://mui.com/x/api/data-grid/export-print/)
+ */
+const ExportPrint = forwardRef(function ExportPrint(props, ref) {
+  const {
+      render,
+      options,
+      onClick
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const handleClick = event => {
+    apiRef.current.exportDataAsPrint(options);
+    onClick?.(event);
+  };
+  const element = useGridComponentRenderer(rootProps.slots.baseButton, render, _extends({}, rootProps.slotProps?.baseButton, {
+    onClick: handleClick
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: element
+  });
+});
+process.env.NODE_ENV !== "production" ? ExportPrint.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * A ref for imperative actions.
+   * It currently only supports `focusVisible()` action.
+   */
+  action: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focusVisible: PropTypes.func.isRequired
+    })
+  })]),
+  /**
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
+   */
+  centerRipple: PropTypes.bool,
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: PropTypes.oneOf(['error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),
+  component: PropTypes.elementType,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, no elevation is used.
+   * @default false
+   */
+  disableElevation: PropTypes.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * If `true`, the touch ripple effect is disabled.
+   * @default false
+   */
+  disableTouchRipple: PropTypes.bool,
+  /**
+   * Element placed after the children.
+   */
+  endIcon: PropTypes.node,
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * @default false
+   */
+  focusRipple: PropTypes.bool,
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName: PropTypes.string,
+  /**
+   * If `true`, the button will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The URL to link to when the button is clicked.
+   * If defined, an `a` element will be used as the root node.
+   */
+  href: PropTypes.string,
+  /**
+   * The component used to render a link when the `href` prop is provided.
+   * @default 'a'
+   */
+  LinkComponent: PropTypes.elementType,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible: PropTypes.func,
+  /**
+   * The options to apply on the Print export.
+   * @demos
+   *   - [Print export](/x/react-data-grid/export/#print-export)
+   */
+  options: PropTypes.shape({
+    allColumns: PropTypes.bool,
+    bodyClassName: PropTypes.string,
+    copyStyles: PropTypes.bool,
+    fields: PropTypes.arrayOf(PropTypes.string),
+    fileName: PropTypes.string,
+    getRowsToExport: PropTypes.func,
+    hideFooter: PropTypes.bool,
+    hideToolbar: PropTypes.bool,
+    includeCheckboxes: PropTypes.bool,
+    pageStyle: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+  }),
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   */
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  /**
+   * Element placed before the children.
+   */
+  startIcon: PropTypes.node,
+  style: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  tabIndex: PropTypes.number,
+  /**
+   * Props applied to the `TouchRipple` element.
+   */
+  TouchRippleProps: PropTypes.object,
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef: PropTypes.any,
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant: PropTypes.oneOf(['contained', 'outlined', 'text'])
+} : void 0;
+export { ExportPrint };

package/esm/components/export/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ExportCsv.js";
+export * from "./ExportPrint.js";

package/esm/components/export/index.js

@@ -0,0 +1,2 @@
+export * from "./ExportCsv.js";
+export * from "./ExportPrint.js";

package/esm/components/filterPanel/FilterPanelTrigger.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import type { GridSlotProps } from '../../models';
+export interface FilterPanelState {
+  /**
+   * If `true`, the filter panel is open.
+   */
+  open: boolean;
+  /**
+   * The number of active filters.
+   */
+  filterCount: number;
+}
+export type FilterPanelTriggerProps = Omit<GridSlotProps['baseButton'], 'className'> & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<GridSlotProps['baseButton'], FilterPanelState>;
+  /**
+   * A function to customize rendering of the component.
+   */
+  className?: string | ((state: FilterPanelState) => string);
+};
+/**
+ * A button that opens and closes the filter panel.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Filter Panel](https://mui.com/x/react-data-grid/components/filter-panel/)
+ *
+ * API:
+ *
+ * - [FilterPanelTrigger API](https://mui.com/x/api/data-grid/filter-panel-trigger/)
+ */
+declare const FilterPanelTrigger: React.ForwardRefExoticComponent<FilterPanelTriggerProps> | React.ForwardRefExoticComponent<Omit<FilterPanelTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { FilterPanelTrigger };

package/esm/components/filterPanel/FilterPanelTrigger.js

@@ -0,0 +1,205 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["render", "className", "onClick", "onPointerUp"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import useId from '@mui/utils/useId';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { gridFilterActiveItemsSelector, gridPreferencePanelStateSelector, GridPreferencePanelsValue, useGridSelector } from "../../hooks/index.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A button that opens and closes the filter panel.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Filter Panel](https://mui.com/x/react-data-grid/components/filter-panel/)
+ *
+ * API:
+ *
+ * - [FilterPanelTrigger API](https://mui.com/x/api/data-grid/filter-panel-trigger/)
+ */
+const FilterPanelTrigger = forwardRef(function FilterPanelTrigger(props, ref) {
+  const {
+      render,
+      className,
+      onClick,
+      onPointerUp
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const buttonId = useId();
+  const panelId = useId();
+  const apiRef = useGridApiContext();
+  const panelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
+  const open = panelState.open && panelState.openedPanelValue === GridPreferencePanelsValue.filters;
+  const activeFilters = useGridSelector(apiRef, gridFilterActiveItemsSelector);
+  const filterCount = activeFilters.length;
+  const state = {
+    open,
+    filterCount
+  };
+  const resolvedClassName = typeof className === 'function' ? className(state) : className;
+  const handleClick = event => {
+    if (open) {
+      apiRef.current.hidePreferences();
+    } else {
+      apiRef.current.showPreferences(GridPreferencePanelsValue.filters, panelId, buttonId);
+    }
+    onClick?.(event);
+  };
+  const handlePointerUp = event => {
+    if (open) {
+      event.stopPropagation();
+    }
+    onPointerUp?.(event);
+  };
+  const element = useGridComponentRenderer(rootProps.slots.baseButton, render, _extends({}, rootProps.slotProps?.baseButton, {
+    id: buttonId,
+    'aria-haspopup': 'true',
+    'aria-expanded': open ? 'true' : undefined,
+    'aria-controls': open ? panelId : undefined,
+    onClick: handleClick,
+    onPointerUp: handlePointerUp,
+    className: resolvedClassName
+  }, other, {
+    ref
+  }), state);
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: element
+  });
+});
+process.env.NODE_ENV !== "production" ? FilterPanelTrigger.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * A ref for imperative actions.
+   * It currently only supports `focusVisible()` action.
+   */
+  action: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focusVisible: PropTypes.func.isRequired
+    })
+  })]),
+  /**
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
+   */
+  centerRipple: PropTypes.bool,
+  /**
+   * A function to customize rendering of the component.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: PropTypes.oneOf(['error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),
+  component: PropTypes.elementType,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, no elevation is used.
+   * @default false
+   */
+  disableElevation: PropTypes.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * If `true`, the touch ripple effect is disabled.
+   * @default false
+   */
+  disableTouchRipple: PropTypes.bool,
+  /**
+   * Element placed after the children.
+   */
+  endIcon: PropTypes.node,
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * @default false
+   */
+  focusRipple: PropTypes.bool,
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName: PropTypes.string,
+  /**
+   * If `true`, the button will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The URL to link to when the button is clicked.
+   * If defined, an `a` element will be used as the root node.
+   */
+  href: PropTypes.string,
+  /**
+   * The component used to render a link when the `href` prop is provided.
+   * @default 'a'
+   */
+  LinkComponent: PropTypes.elementType,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible: PropTypes.func,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   */
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  /**
+   * Element placed before the children.
+   */
+  startIcon: PropTypes.node,
+  style: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  tabIndex: PropTypes.number,
+  /**
+   * Props applied to the `TouchRipple` element.
+   */
+  TouchRippleProps: PropTypes.object,
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef: PropTypes.any,
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant: PropTypes.oneOf(['contained', 'outlined', 'text'])
+} : void 0;
+export { FilterPanelTrigger };

package/esm/components/filterPanel/index.d.ts

@@ -0,0 +1 @@
+export * from "./FilterPanelTrigger.js";

package/esm/components/filterPanel/index.js

@@ -0,0 +1 @@
+export * from "./FilterPanelTrigger.js";

package/esm/components/index.d.ts

@@ -17,4 +17,9 @@ export * from "./GridNoColumnsOverlay.js";
 export { GridPagination } from "./GridPagination.js";
 export * from "./GridRowCount.js";
 export * from "./GridRow.js";
-export * from "./GridSelectedRowCount.js";
+export * from "./GridSelectedRowCount.js";
+export * from "./columnsPanel/index.js";
+export * from "./export/index.js";
+export * from "./filterPanel/index.js";
+export * from "./toolbarV8/index.js";
+export * from "./quickFilter/index.js";

package/esm/components/index.js

@@ -17,4 +17,9 @@ export * from "./GridNoColumnsOverlay.js";
 export { GridPagination } from "./GridPagination.js";
 export * from "./GridRowCount.js";
 export * from "./GridRow.js";
-export * from "./GridSelectedRowCount.js";
+export * from "./GridSelectedRowCount.js";
+export * from "./columnsPanel/index.js";
+export * from "./export/index.js";
+export * from "./filterPanel/index.js";
+export * from "./toolbarV8/index.js";
+export * from "./quickFilter/index.js";

package/esm/components/menu/GridMenu.js

@@ -6,6 +6,8 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect, HTMLElementType } from '@mui/utils';
 import { styled } from '@mui/material/styles';
+import { vars } from "../../constants/cssVariables.js";
+import { useCSSVariablesClass } from "../../utils/css/context.js";
 import { getDataGridUtilityClass, gridClasses } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
@@ -23,14 +25,12 @@ const useUtilityClasses = ownerState => {
 const GridMenuRoot = styled(NotRendered, {
   name: 'MuiDataGrid',
   slot: 'Menu'
-})(({
-  theme
-}) => ({
-  zIndex: theme.zIndex.modal,
+})({
+  zIndex: vars.zIndex.menu,
   [`& .${gridClasses.menuList}`]: {
     outline: 0
   }
-}));
+});
 function GridMenu(props) {
   const {
       open,
@@ -45,6 +45,7 @@ function GridMenu(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
+  const variablesClass = useCSSVariablesClass();
   const savedFocusRef = React.useRef(null);
   useEnhancedEffect(() => {
     if (open) {
@@ -69,7 +70,7 @@ function GridMenu(props) {
   };
   return /*#__PURE__*/_jsx(GridMenuRoot, _extends({
     as: rootProps.slots.basePopper,
-    className: clsx(classes.root, className),
+    className: clsx(classes.root, className, variablesClass),
     ownerState: rootProps,
     open: open,
     target: target,

package/esm/components/menu/columnMenu/GridColumnHeaderMenu.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_useEventCallback as useEventCallback, HTMLElementType } from '@mui/utils';
+import useEventCallback from '@mui/utils/useEventCallback';
+import HTMLElementType from '@mui/utils/HTMLElementType';
 import { useGridApiContext } from "../../../hooks/utils/useGridApiContext.js";
 import { GridMenu } from "../GridMenu.js";
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/components/panel/GridPanel.js

@@ -7,8 +7,9 @@ import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
 import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
 import useEventCallback from '@mui/utils/useEventCallback';
-import Paper from '@mui/material/Paper';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { vars } from "../../constants/cssVariables.js";
+import { useCSSVariablesClass } from "../../utils/css/context.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { NotRendered } from "../../utils/assert.js";
@@ -16,25 +17,23 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const gridPanelClasses = generateUtilityClasses('MuiDataGrid', ['panel', 'paper']);
 const GridPanelRoot = styled(NotRendered, {
   name: 'MuiDataGrid',
-  slot: 'Panel'
-})(({
-  theme
-}) => ({
-  zIndex: theme.zIndex.modal
-}));
-const GridPaperRoot = styled(Paper, {
+  slot: 'panel'
+})({
+  zIndex: vars.zIndex.panel
+});
+const GridPanelContent = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'Paper'
-})(({
-  theme
-}) => ({
-  backgroundColor: (theme.vars || theme).palette.background.paper,
+  slot: 'panelContent'
+})({
+  backgroundColor: vars.colors.background.overlay,
+  borderRadius: vars.radius.base,
+  boxShadow: vars.shadows.overlay,
   minWidth: 300,
   maxHeight: 450,
   display: 'flex',
-  maxWidth: `calc(100vw - ${theme.spacing(0.5)})`,
+  maxWidth: `calc(100vw - ${vars.spacing(0.5)})`,
   overflow: 'auto'
-}));
+});
 const GridPanel = forwardRef((props, ref) => {
   const {
       children,
@@ -45,6 +44,7 @@ const GridPanel = forwardRef((props, ref) => {
   const rootProps = useGridRootProps();
   const classes = gridPanelClasses;
   const [isPlaced, setIsPlaced] = React.useState(false);
+  const variablesClass = useCSSVariablesClass();
   const onDidShow = useEventCallback(() => setIsPlaced(true));
   const onDidHide = useEventCallback(() => setIsPlaced(false));
   const handleClickAway = useEventCallback(() => {
@@ -69,7 +69,7 @@ const GridPanel = forwardRef((props, ref) => {
     as: rootProps.slots.basePopper,
     ownerState: rootProps,
     placement: "bottom-start",
-    className: clsx(classes.panel, className),
+    className: clsx(classes.panel, className, variablesClass),
     target: target,
     flip: true,
     onDidShow: onDidShow,
@@ -77,14 +77,12 @@ const GridPanel = forwardRef((props, ref) => {
     onClickAway: handleClickAway,
     clickAwayMouseEvent: "onPointerUp",
     clickAwayTouchEvent: false,
-    focusTrap: true,
-    focusTrapEnabled: true
+    focusTrap: true
   }, other, rootProps.slotProps?.basePopper, {
     ref: ref,
-    children: /*#__PURE__*/_jsx(GridPaperRoot, {
+    children: /*#__PURE__*/_jsx(GridPanelContent, {
       className: classes.paper,
       ownerState: rootProps,
-      elevation: 8,
       onKeyDown: handleKeyDown,
       children: isPlaced && children
     })

package/esm/components/panel/GridPanelContent.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
+import { vars } from "../../constants/cssVariables.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -20,19 +21,16 @@ const useUtilityClasses = ownerState => {
 };
 const GridPanelContentRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'PanelContent',
-  overridesResolver: (props, styles) => styles.panelContent
-})(({
-  theme
-}) => ({
+  slot: 'PanelContent'
+})({
   display: 'flex',
   flexDirection: 'column',
   overflow: 'auto',
   flex: '1 1',
   maxHeight: 400,
-  padding: theme.spacing(2.5, 1.5, 2, 1),
-  gap: theme.spacing(2.5)
-}));
+  padding: vars.spacing(2.5, 1.5, 2, 1),
+  gap: vars.spacing(2.5)
+});
 function GridPanelContent(props) {
   const {
       className