@mui/x-data-grid 8.4.0 → 8.5.1

package/components/columnHeaders/GridColumnGroupHeader.js

@@ -8,7 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnGroupHeader = GridColumnGroupHeader;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("@mui/utils");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -18,7 +19,7 @@ var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _GridGenericColumnHeaderItem = require("./GridGenericColumnHeaderItem");
 var _domUtils = require("../../utils/domUtils");
 var _constants = require("../../internals/constants");
-var _utils2 = require("../../internals/utils");
+var _utils = require("../../internals/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -37,7 +38,7 @@ const useUtilityClasses = ownerState => {
     titleContainer: ['columnHeaderTitleContainer', 'withBorderColor'],
     titleContainerContent: ['columnHeaderTitleContainerContent']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 function GridColumnGroupHeader(props) {
   const {
@@ -87,7 +88,7 @@ function GridColumnGroupHeader(props) {
     isDragging: false
   });
   const label = headerName ?? groupId;
-  const id = (0, _utils.unstable_useId)();
+  const id = (0, _useId.default)();
   const elementId = groupId === null ? `empty-group-cell-${id}` : groupId;
   const classes = useUtilityClasses(ownerState);
   React.useLayoutEffect(() => {
@@ -114,7 +115,7 @@ function GridColumnGroupHeader(props) {
     onBlur: publish('columnGroupHeaderBlur')
   }), [publish]);
   const headerClassName = typeof group.headerClassName === 'function' ? group.headerClassName(renderParams) : group.headerClassName;
-  const style = React.useMemo(() => (0, _utils2.attachPinnedStyle)((0, _extends2.default)({}, props.style), isRtl, pinnedPosition, pinnedOffset), [pinnedPosition, pinnedOffset, props.style, isRtl]);
+  const style = React.useMemo(() => (0, _utils.attachPinnedStyle)((0, _extends2.default)({}, props.style), isRtl, pinnedPosition, pinnedOffset), [pinnedPosition, pinnedOffset, props.style, isRtl]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridGenericColumnHeaderItem.GridGenericColumnHeaderItem, (0, _extends2.default)({
     ref: headerCellRef,
     classes: classes,

package/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -9,7 +9,8 @@ exports.GridColumnHeaderFilterIconButton = GridColumnHeaderFilterIconButtonWrapp
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _hooks = require("../../hooks");
 var _gridPreferencePanelSelector = require("../../hooks/features/preferencesPanel/gridPreferencePanelSelector");
 var _gridPreferencePanelsValue = require("../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
@@ -25,7 +26,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     icon: ['filterIcon']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 function GridColumnHeaderFilterIconButtonWrapped(props) {
   if (!props.counter) {
@@ -54,9 +55,9 @@ function GridColumnHeaderFilterIconButton(props) {
     classes: rootProps.classes
   });
   const classes = useUtilityClasses(ownerState);
-  const labelId = (0, _utils.unstable_useId)();
+  const labelId = (0, _useId.default)();
   const isOpen = (0, _hooks.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelSelectorWithLabel, labelId);
-  const panelId = (0, _utils.unstable_useId)();
+  const panelId = (0, _useId.default)();
   const toggleFilter = React.useCallback(event => {
     event.preventDefault();
     event.stopPropagation();

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -10,7 +10,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _fastMemo = require("@mui/x-internals/fastMemo");
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
@@ -21,7 +22,7 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _GridGenericColumnHeaderItem = require("./GridGenericColumnHeaderItem");
 var _domUtils = require("../../utils/domUtils");
 var _constants = require("../../internals/constants");
-var _utils2 = require("../../internals/utils");
+var _utils = require("../../internals/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -49,7 +50,7 @@ const useUtilityClasses = ownerState => {
     titleContainer: ['columnHeaderTitleContainer'],
     titleContainerContent: ['columnHeaderTitleContainerContent']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 function GridColumnHeaderItem(props) {
   const {
@@ -75,8 +76,8 @@ function GridColumnHeaderItem(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const isRtl = (0, _RtlProvider.useRtl)();
   const headerCellRef = React.useRef(null);
-  const columnMenuId = (0, _utils.unstable_useId)();
-  const columnMenuButtonId = (0, _utils.unstable_useId)();
+  const columnMenuId = (0, _useId.default)();
+  const columnMenuButtonId = (0, _useId.default)();
   const iconButtonRef = React.useRef(null);
   const [showColumnMenuIcon, setShowColumnMenuIcon] = React.useState(columnMenuOpen);
   const isDraggable = React.useMemo(() => !rootProps.disableColumnReorder && !disableReorder && !colDef.disableReorder, [rootProps.disableColumnReorder, disableReorder, colDef.disableReorder]);
@@ -179,7 +180,7 @@ function GridColumnHeaderItem(props) {
     colDef
   }) : colDef.headerClassName;
   const label = colDef.headerName ?? colDef.field;
-  const style = React.useMemo(() => (0, _utils2.attachPinnedStyle)((0, _extends2.default)({}, props.style), isRtl, pinnedPosition, pinnedOffset), [pinnedPosition, pinnedOffset, props.style, isRtl]);
+  const style = React.useMemo(() => (0, _utils.attachPinnedStyle)((0, _extends2.default)({}, props.style), isRtl, pinnedPosition, pinnedOffset), [pinnedPosition, pinnedOffset, props.style, isRtl]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridGenericColumnHeaderItem.GridGenericColumnHeaderItem, (0, _extends2.default)({
     ref: headerCellRef,
     classes: classes,

package/components/columnHeaders/GridColumnHeaderSeparator.js

@@ -10,7 +10,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -28,10 +29,10 @@ const useUtilityClasses = ownerState => {
     side
   } = ownerState;
   const slots = {
-    root: ['columnSeparator', resizable && 'columnSeparator--resizable', resizing && 'columnSeparator--resizing', side && `columnSeparator--side${(0, _utils.unstable_capitalize)(side)}`],
+    root: ['columnSeparator', resizable && 'columnSeparator--resizable', resizing && 'columnSeparator--resizing', side && `columnSeparator--side${(0, _capitalize.default)(side)}`],
     icon: ['iconSeparator']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 function GridColumnHeaderSeparatorRaw(props) {
   const {

package/components/columnHeaders/GridColumnHeaderTitle.js

@@ -54,6 +54,7 @@ const ColumnHeaderInnerTitle = (0, _forwardRef.forwardRef)(function ColumnHeader
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") ColumnHeaderInnerTitle.displayName = "ColumnHeaderInnerTitle";
 // No React.memo here as if we display the sort icon, we need to recalculate the isOver
 function GridColumnHeaderTitle(props) {
   const {

package/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _GridColumnHeaderTitle = require("./GridColumnHeaderTitle");
@@ -46,7 +46,7 @@ const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = (0, _f
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const headerCellRef = React.useRef(null);
-  const handleRef = (0, _utils.unstable_useForkRef)(headerCellRef, ref);
+  const handleRef = (0, _useForkRef.default)(headerCellRef, ref);
   let ariaSort = 'none';
   if (sortDirection != null) {
     ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
@@ -97,4 +97,5 @@ const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = (0, _f
       side: separatorSide
     }, columnHeaderSeparatorProps)), columnMenu]
   }));
-});
+});
+if (process.env.NODE_ENV !== "production") GridGenericColumnHeaderItem.displayName = "GridGenericColumnHeaderItem";

package/components/columnHeaders/GridIconButtonContainer.js

@@ -47,4 +47,5 @@ const GridIconButtonContainer = exports.GridIconButtonContainer = (0, _forwardRe
   }, other, {
     ref: ref
   }));
-});
+});
+if (process.env.NODE_ENV !== "production") GridIconButtonContainer.displayName = "GridIconButtonContainer";

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -10,13 +10,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
-var _utils2 = require("../../hooks/features/rowSelection/utils");
+var _utils = require("../../hooks/features/rowSelection/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["field", "id", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "api"];
 const useUtilityClasses = ownerState => {
@@ -26,7 +26,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['checkboxInput']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = (0, _forwardRef.forwardRef)(function GridCellCheckboxRenderer(props, ref) {
   const {
@@ -68,7 +68,7 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = (0, _for
   const {
     isIndeterminate,
     isChecked
-  } = (0, _useGridSelector.useGridSelector)(apiRef, _utils2.checkboxPropsSelector, {
+  } = (0, _useGridSelector.useGridSelector)(apiRef, _utils.checkboxPropsSelector, {
     groupId: id,
     autoSelectParents: rootProps.rowSelectionPropagation?.parents ?? false
   });
@@ -94,6 +94,7 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = (0, _for
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") GridCellCheckboxForwardRef.displayName = "GridCellCheckboxForwardRef";
 process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/columnSelection/GridHeaderCheckbox.js

@@ -164,6 +164,7 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = (0, _forwardRef.forwardR
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") GridHeaderCheckbox.displayName = "GridHeaderCheckbox";
 process.env.NODE_ENV !== "production" ? GridHeaderCheckbox.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/columnsManagement/GridColumnsManagement.js

@@ -182,7 +182,7 @@ function GridColumnsManagement(props) {
           className: classes.row,
           disabled: column.hideable === false || pivotActive,
           checked: columnVisibilityModel[column.field] !== false,
-          onClick: toggleColumn,
+          onChange: toggleColumn,
           name: column.field,
           inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined,
           label: column.headerName || column.field,
@@ -200,7 +200,7 @@ function GridColumnsManagement(props) {
         disabled: hideableColumns.length === 0 || pivotActive,
         checked: allHideableColumnsVisible,
         indeterminate: !allHideableColumnsVisible && !allHideableColumnsHidden,
-        onClick: () => toggleAllColumns(!allHideableColumnsVisible),
+        onChange: () => toggleAllColumns(!allHideableColumnsVisible),
         name: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
         label: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
         density: "compact"

package/components/columnsPanel/ColumnsPanelTrigger.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import type { GridSlotProps } from "../../models/index.js";
 export interface ColumnsPanelState {
   /**

package/components/columnsPanel/ColumnsPanelTrigger.js

@@ -13,11 +13,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
 var _GridPanelContext = require("../panel/GridPanelContext");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _hooks = require("../../hooks");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["render", "className", "onClick", "onPointerUp"];
 /**
@@ -68,7 +68,7 @@ const ColumnsPanelTrigger = exports.ColumnsPanelTrigger = (0, _forwardRef.forwar
     }
     onPointerUp?.(event);
   };
-  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseButton, {
+  const element = (0, _useComponentRenderer.useComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseButton, {
     id: buttonId,
     'aria-haspopup': 'true',
     'aria-expanded': open ? 'true' : undefined,
@@ -83,6 +83,7 @@ const ColumnsPanelTrigger = exports.ColumnsPanelTrigger = (0, _forwardRef.forwar
     children: element
   });
 });
+if (process.env.NODE_ENV !== "production") ColumnsPanelTrigger.displayName = "ColumnsPanelTrigger";
 process.env.NODE_ENV !== "production" ? ColumnsPanelTrigger.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/containers/GridFooterContainer.js

@@ -51,6 +51,7 @@ const GridFooterContainer = exports.GridFooterContainer = (0, _forwardRef.forwar
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") GridFooterContainer.displayName = "GridFooterContainer";
 process.env.NODE_ENV !== "production" ? GridFooterContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/containers/GridOverlay.js

@@ -58,6 +58,7 @@ const GridOverlay = exports.GridOverlay = (0, _forwardRef.forwardRef)(function G
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") GridOverlay.displayName = "GridOverlay";
 process.env.NODE_ENV !== "production" ? GridOverlay.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/containers/GridRoot.js

@@ -11,7 +11,9 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _fastMemo = require("@mui/x-internals/fastMemo");
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _GridRootStyles = require("./GridRootStyles");
@@ -33,9 +35,9 @@ const useUtilityClasses = (ownerState, density) => {
     showCellVerticalBorder
   } = ownerState;
   const slots = {
-    root: ['root', autoHeight && 'autoHeight', `root--density${(0, _utils.unstable_capitalize)(density)}`, ownerState.slots.toolbar === null && 'root--noToolbar', 'withBorderColor', showCellVerticalBorder && 'withVerticalBorder']
+    root: ['root', autoHeight && 'autoHeight', `root--density${(0, _capitalize.default)(density)}`, ownerState.slots.toolbar === null && 'root--noToolbar', 'withBorderColor', showCellVerticalBorder && 'withVerticalBorder']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const GridRoot = (0, _forwardRef.forwardRef)(function GridRoot(props, ref) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -54,7 +56,7 @@ const GridRoot = (0, _forwardRef.forwardRef)(function GridRoot(props, ref) {
     }
     apiRef.current.publishEvent('rootMount', node);
   }, [apiRef]);
-  const handleRef = (0, _utils.unstable_useForkRef)(rootElementRef, ref, rootMountCallback);
+  const handleRef = (0, _useForkRef.default)(rootElementRef, ref, rootMountCallback);
   const ownerState = rootProps;
   const classes = useUtilityClasses(ownerState, density);
   const cssVariables = (0, _context.useCSSVariablesContext)();
@@ -76,6 +78,7 @@ const GridRoot = (0, _forwardRef.forwardRef)(function GridRoot(props, ref) {
     }), sidePanel, cssVariables.tag]
   }));
 });
+if (process.env.NODE_ENV !== "production") GridRoot.displayName = "GridRoot";
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/containers/GridRootStyles.d.ts

@@ -1,5 +1,5 @@
 import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 export type OwnerState = DataGridProcessedProps;
-export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
   ownerState: OwnerState;
 }, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;

package/components/containers/GridRootStyles.js

@@ -721,7 +721,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       opacity: _cssVariables.vars.colors.interactive.disabledOpacity
     },
     [`& .${_gridClasses.gridClasses['rowReorderCell--draggable']}`]: {
-      cursor: 'move',
+      cursor: 'grab',
       opacity: 1
     },
     [`& .${_gridClasses.gridClasses.rowReorderCellContainer}`]: {
@@ -832,6 +832,9 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       marginRight: _cssVariables.vars.spacing(2)
     },
     /* ScrollbarFiller styles */
+    [`& .${_gridClasses.gridClasses.columnHeaders} .${_gridClasses.gridClasses.scrollbarFiller}`]: {
+      backgroundColor: headerBackground
+    },
     [`.${_gridClasses.gridClasses.scrollbarFiller}`]: {
       minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
       alignSelf: 'stretch',
@@ -853,6 +856,9 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['filler--borderBottom']}`]: {
       borderBottom: '1px solid var(--DataGrid-rowBorderColor)'
     },
+    [`& .${_gridClasses.gridClasses.columnHeaders} .${_gridClasses.gridClasses.filler}`]: {
+      backgroundColor: headerBackground
+    },
     /* Hide grid rows, row filler, and vertical scrollbar. Used when skeleton/no columns overlay is visible */
     [`& .${_gridClasses.gridClasses['main--hiddenContent']}`]: {
       [`& .${_gridClasses.gridClasses.virtualScrollerContent}`]: {

package/components/containers/GridToolbarContainer.js

@@ -64,6 +64,7 @@ const GridToolbarContainer = exports.GridToolbarContainer = (0, _forwardRef.forw
     children: children
   }));
 });
+if (process.env.NODE_ENV !== "production") GridToolbarContainer.displayName = "GridToolbarContainer";
 process.env.NODE_ENV !== "production" ? GridToolbarContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/export/ExportCsv.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import { GridCsvExportOptions } from "../../models/gridExport.js";
 import type { GridSlotProps } from "../../models/index.js";
 export type ExportCsvProps = GridSlotProps['baseButton'] & {

package/components/export/ExportCsv.js

@@ -11,9 +11,9 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["render", "options", "onClick"];
 /**
@@ -41,7 +41,7 @@ const ExportCsv = exports.ExportCsv = (0, _forwardRef.forwardRef)(function Expor
     apiRef.current.exportDataAsCsv(options);
     onClick?.(event);
   };
-  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseButton, {
+  const element = (0, _useComponentRenderer.useComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseButton, {
     onClick: handleClick
   }, other, {
     ref
@@ -50,6 +50,7 @@ const ExportCsv = exports.ExportCsv = (0, _forwardRef.forwardRef)(function Expor
     children: element
   });
 });
+if (process.env.NODE_ENV !== "production") ExportCsv.displayName = "ExportCsv";
 process.env.NODE_ENV !== "production" ? ExportCsv.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/export/ExportPrint.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import { GridPrintExportOptions } from "../../models/gridExport.js";
 import type { GridSlotProps } from "../../models/index.js";
 export type ExportPrintProps = GridSlotProps['baseButton'] & {

package/components/export/ExportPrint.js

@@ -11,9 +11,9 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["render", "options", "onClick"];
 /**
@@ -41,7 +41,7 @@ const ExportPrint = exports.ExportPrint = (0, _forwardRef.forwardRef)(function E
     apiRef.current.exportDataAsPrint(options);
     onClick?.(event);
   };
-  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseButton, {
+  const element = (0, _useComponentRenderer.useComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseButton, {
     onClick: handleClick
   }, other, {
     ref
@@ -50,6 +50,7 @@ const ExportPrint = exports.ExportPrint = (0, _forwardRef.forwardRef)(function E
     children: element
   });
 });
+if (process.env.NODE_ENV !== "production") ExportPrint.displayName = "ExportPrint";
 process.env.NODE_ENV !== "production" ? ExportPrint.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/filterPanel/FilterPanelTrigger.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import type { GridSlotProps } from "../../models/index.js";
 export interface FilterPanelState {
   /**

package/components/filterPanel/FilterPanelTrigger.js

@@ -12,12 +12,12 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _GridPanelContext = require("../panel/GridPanelContext");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _hooks = require("../../hooks");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["render", "className", "onClick", "onPointerUp"];
 /**
@@ -71,7 +71,7 @@ const FilterPanelTrigger = exports.FilterPanelTrigger = (0, _forwardRef.forwardR
     }
     onPointerUp?.(event);
   };
-  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseButton, {
+  const element = (0, _useComponentRenderer.useComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseButton, {
     id: buttonId,
     'aria-haspopup': 'true',
     'aria-expanded': open ? 'true' : undefined,
@@ -86,6 +86,7 @@ const FilterPanelTrigger = exports.FilterPanelTrigger = (0, _forwardRef.forwardR
     children: element
   });
 });
+if (process.env.NODE_ENV !== "production") FilterPanelTrigger.displayName = "FilterPanelTrigger";
 process.env.NODE_ENV !== "production" ? FilterPanelTrigger.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/menu/GridMenu.js

@@ -11,7 +11,9 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
 var _styles = require("@mui/material/styles");
 var _cssVariables = require("../../constants/cssVariables");
 var _context = require("../../utils/css/context");
@@ -28,7 +30,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['menu']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const GridMenuRoot = (0, _styles.styled)(_assert.NotRendered, {
   name: 'MuiDataGrid',
@@ -55,7 +57,7 @@ function GridMenu(props) {
   const classes = useUtilityClasses(rootProps);
   const variablesClass = (0, _context.useCSSVariablesClass)();
   const savedFocusRef = React.useRef(null);
-  (0, _utils.unstable_useEnhancedEffect)(() => {
+  (0, _useEnhancedEffect.default)(() => {
     if (open) {
       savedFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     } else {
@@ -102,5 +104,5 @@ process.env.NODE_ENV !== "production" ? GridMenu.propTypes = {
   onExited: _propTypes.default.func,
   open: _propTypes.default.bool.isRequired,
   position: _propTypes.default.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
-  target: _utils.HTMLElementType
+  target: _HTMLElementType.default
 } : void 0;

package/components/menu/columnMenu/GridColumnMenu.js

@@ -53,6 +53,7 @@ const GridGenericColumnMenu = exports.GridGenericColumnMenu = (0, _forwardRef.fo
     children: orderedSlots.map(([Component, otherProps], index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, (0, _extends2.default)({}, otherProps), index))
   }));
 });
+if (process.env.NODE_ENV !== "production") GridGenericColumnMenu.displayName = "GridGenericColumnMenu";
 process.env.NODE_ENV !== "production" ? GridGenericColumnMenu.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -92,6 +93,7 @@ const GridColumnMenu = exports.GridColumnMenu = (0, _forwardRef.forwardRef)(func
     defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS
   }));
 });
+if (process.env.NODE_ENV !== "production") GridColumnMenu.displayName = "GridColumnMenu";
 process.env.NODE_ENV !== "production" ? GridColumnMenu.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/menu/columnMenu/GridColumnMenuContainer.js

@@ -53,6 +53,7 @@ const GridColumnMenuContainer = exports.GridColumnMenuContainer = (0, _forwardRe
     children: children
   }));
 });
+if (process.env.NODE_ENV !== "production") GridColumnMenuContainer.displayName = "GridColumnMenuContainer";
 process.env.NODE_ENV !== "production" ? GridColumnMenuContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/panel/GridPanel.js

@@ -12,7 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
-var _utils = require("@mui/utils");
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _cssVariables = require("../../constants/cssVariables");
@@ -22,7 +22,7 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _assert = require("../../utils/assert");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "classes", "onClose"];
-const gridPanelClasses = exports.gridPanelClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['panel', 'paper']);
+const gridPanelClasses = exports.gridPanelClasses = (0, _generateUtilityClasses.default)('MuiDataGrid', ['panel', 'paper']);
 const GridPanelRoot = (0, _styles.styled)(_assert.NotRendered, {
   name: 'MuiDataGrid',
   slot: 'panel'
@@ -95,6 +95,7 @@ const GridPanel = exports.GridPanel = (0, _forwardRef.forwardRef)((props, ref) =
     })
   }));
 });
+if (process.env.NODE_ENV !== "production") GridPanel.displayName = "GridPanel";
 process.env.NODE_ENV !== "production" ? GridPanel.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/panel/GridPanelWrapper.js

@@ -51,4 +51,5 @@ const GridPanelWrapper = exports.GridPanelWrapper = (0, _forwardRef.forwardRef)(
   }, other, {
     ref: ref
   }));
-});
+});
+if (process.env.NODE_ENV !== "production") GridPanelWrapper.displayName = "GridPanelWrapper";