@mui/x-data-grid 8.4.0 → 8.5.1

package/components/virtualization/GridVirtualScrollerContent.js

@@ -47,4 +47,5 @@ const GridVirtualScrollerContent = exports.GridVirtualScrollerContent = (0, _for
     className: (0, _clsx.default)(classes.root, props.className),
     ref: ref
   }));
-});
+});
+if (process.env.NODE_ENV !== "production") GridVirtualScrollerContent.displayName = "GridVirtualScrollerContent";

package/components/virtualization/GridVirtualScrollerRenderZone.js

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

package/constants/gridClasses.d.ts

@@ -619,6 +619,10 @@ export interface GridClasses {
    * Styles applied to the root element of the row reorder cell when dragging is allowed
    */
   'rowReorderCell--draggable': string;
+  /**
+   * Styles applied to the row reorder icon element.
+   */
+  rowReorderIcon: string;
   /**
    * Styles applied to the skeleton row element.
    */

package/constants/gridClasses.js

@@ -1,12 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getDataGridUtilityClass = getDataGridUtilityClass;
 exports.gridClasses = void 0;
-var _utils = require("@mui/utils");
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 function getDataGridUtilityClass(slot) {
-  return (0, _utils.unstable_generateUtilityClass)('MuiDataGrid', slot);
+  return (0, _generateUtilityClass.default)('MuiDataGrid', slot);
 }
-const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'autoHeight', 'autosizing', 'mainContent', 'withSidePanel', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'container--top', 'container--bottom', 'detailPanel', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortButton', 'sortIcon', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction']);
+const gridClasses = exports.gridClasses = (0, _generateUtilityClasses.default)('MuiDataGrid', ['aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'autoHeight', 'autosizing', 'mainContent', 'withSidePanel', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'container--top', 'container--bottom', 'detailPanel', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderIcon', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortButton', 'sortIcon', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction']);

package/esm/DataGrid/DataGrid.js

@@ -22,7 +22,7 @@ const configuration = {
     useCellAggregationResult: () => null
   }
 };
-const DataGridRaw = forwardRef(function DataGrid(inProps, ref) {
+const DataGridRaw = function DataGrid(inProps, ref) {
   const props = useDataGridProps(inProps);
   const privateApiRef = useGridApiInitialization(props.apiRef, props);
   useDataGridComponent(privateApiRef, props);
@@ -41,7 +41,8 @@ const DataGridRaw = forwardRef(function DataGrid(inProps, ref) {
       ref: ref
     }))
   });
-});
+};
+if (process.env.NODE_ENV !== "production") DataGridRaw.displayName = "DataGridRaw";
 /**
  * Features:
  * - [DataGrid](https://mui.com/x/react-data-grid/features/)
@@ -49,7 +50,7 @@ const DataGridRaw = forwardRef(function DataGrid(inProps, ref) {
  * API:
  * - [DataGrid API](https://mui.com/x/api/data-grid/data-grid/)
  */
-export const DataGrid = /*#__PURE__*/React.memo(DataGridRaw);
+export const DataGrid = /*#__PURE__*/React.memo(forwardRef(DataGridRaw));
 if (process.env.NODE_ENV !== "production") DataGrid.displayName = "DataGrid";
 DataGridRaw.propTypes = {
   // ----------------------------- Warning --------------------------------

package/esm/components/GridColumnHeaders.js

@@ -47,6 +47,7 @@ const GridColumnHeaders = forwardRef(function GridColumnHeaders(props, ref) {
     children: [getColumnGroupHeadersRows(), getColumnHeadersRow()]
   }));
 });
+if (process.env.NODE_ENV !== "production") GridColumnHeaders.displayName = "GridColumnHeaders";
 process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/GridFooter.js

@@ -30,6 +30,7 @@ const GridFooter = forwardRef(function GridFooter(props, ref) {
     children: [selectedRowCountElement, rowCountElement, paginationElement]
   }));
 });
+if (process.env.NODE_ENV !== "production") GridFooter.displayName = "GridFooter";
 process.env.NODE_ENV !== "production" ? GridFooter.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/GridLoadingOverlay.js

@@ -47,6 +47,7 @@ const GridLoadingOverlay = forwardRef(function GridLoadingOverlay(props, ref) {
     children: /*#__PURE__*/_jsx(Component, {})
   }));
 });
+if (process.env.NODE_ENV !== "production") GridLoadingOverlay.displayName = "GridLoadingOverlay";
 process.env.NODE_ENV !== "production" ? GridLoadingOverlay.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/GridNoColumnsOverlay.js

@@ -26,6 +26,7 @@ const GridNoColumnsOverlay = forwardRef(function GridNoColumnsOverlay(props, ref
     }))]
   }));
 });
+if (process.env.NODE_ENV !== "production") GridNoColumnsOverlay.displayName = "GridNoColumnsOverlay";
 process.env.NODE_ENV !== "production" ? GridNoColumnsOverlay.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/GridNoResultsOverlay.js

@@ -11,4 +11,5 @@ export const GridNoResultsOverlay = forwardRef(function GridNoResultsOverlay(pro
     ref: ref,
     children: noResultsOverlayLabel
   }));
-});
+});
+if (process.env.NODE_ENV !== "production") GridNoResultsOverlay.displayName = "GridNoResultsOverlay";

package/esm/components/GridNoRowsOverlay.js

@@ -13,6 +13,7 @@ const GridNoRowsOverlay = forwardRef(function GridNoRowsOverlay(props, ref) {
     children: noRowsLabel
   }));
 });
+if (process.env.NODE_ENV !== "production") GridNoRowsOverlay.displayName = "GridNoRowsOverlay";
 process.env.NODE_ENV !== "production" ? GridNoRowsOverlay.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/GridRow.js

@@ -6,7 +6,7 @@ const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "c
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import useForkRef from '@mui/utils/useForkRef';
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { isObjectEmpty } from '@mui/x-internals/isObjectEmpty';
@@ -302,6 +302,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     })]
   }));
 });
+if (process.env.NODE_ENV !== "production") GridRow.displayName = "GridRow";
 process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/GridRowCount.js

@@ -51,6 +51,7 @@ const GridRowCount = forwardRef(function GridRowCount(props, ref) {
     children: [apiRef.current.getLocaleText('footerTotalRows'), " ", text]
   }));
 });
+if (process.env.NODE_ENV !== "production") GridRowCount.displayName = "GridRowCount";
 process.env.NODE_ENV !== "production" ? GridRowCount.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/GridSelectedRowCount.js

@@ -55,6 +55,7 @@ const GridSelectedRowCount = forwardRef(function GridSelectedRowCount(props, ref
     children: rowSelectedText
   }));
 });
+if (process.env.NODE_ENV !== "production") GridSelectedRowCount.displayName = "GridSelectedRowCount";
 process.env.NODE_ENV !== "production" ? GridSelectedRowCount.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/GridShadowScrollArea.js

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

package/esm/components/GridSkeletonLoadingOverlay.js

@@ -186,6 +186,7 @@ export const GridSkeletonLoadingOverlayInner = forwardRef(function GridSkeletonL
     children: children
   }));
 });
+if (process.env.NODE_ENV !== "production") GridSkeletonLoadingOverlayInner.displayName = "GridSkeletonLoadingOverlayInner";
 export const GridSkeletonLoadingOverlay = forwardRef(function GridSkeletonLoadingOverlay(props, forwardedRef) {
   const apiRef = useGridApiContext();
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
@@ -195,4 +196,5 @@ export const GridSkeletonLoadingOverlay = forwardRef(function GridSkeletonLoadin
     skeletonRowsCount: skeletonRowsCount,
     ref: forwardedRef
   }));
-});
+});
+if (process.env.NODE_ENV !== "production") GridSkeletonLoadingOverlay.displayName = "GridSkeletonLoadingOverlay";

package/esm/components/cell/GridActionsCell.js

@@ -4,7 +4,7 @@ const _excluded = ["api", "colDef", "id", "hasFocus", "isEditable", "field", "va
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useRtl } from '@mui/system/RtlProvider';
-import { unstable_useId as useId } from '@mui/utils';
+import useId from '@mui/utils/useId';
 import { gridClasses } from "../../constants/gridClasses.js";
 import { GridMenu } from "../menu/GridMenu.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";

package/esm/components/cell/GridActionsCellItem.js

@@ -54,6 +54,7 @@ const GridActionsCellItem = forwardRef((props, ref) => {
     children: label
   }));
 });
+if (process.env.NODE_ENV !== "production") GridActionsCellItem.displayName = "GridActionsCellItem";
 process.env.NODE_ENV !== "production" ? GridActionsCellItem.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/cell/GridCell.js

@@ -5,7 +5,10 @@ const _excluded = ["column", "row", "rowId", "rowNode", "align", "children", "co
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_ownerDocument as ownerDocument, unstable_capitalize as capitalize } from '@mui/utils';
+import useForkRef from '@mui/utils/useForkRef';
+import composeClasses from '@mui/utils/composeClasses';
+import ownerDocument from '@mui/utils/ownerDocument';
+import capitalize from '@mui/utils/capitalize';
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { useRtl } from '@mui/system/RtlProvider';
 import { forwardRef } from '@mui/x-internals/forwardRef';
@@ -308,6 +311,7 @@ const GridCell = forwardRef(function GridCell(props, ref) {
     children: children
   }));
 });
+if (process.env.NODE_ENV !== "production") GridCell.displayName = "GridCell";
 process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/cell/GridEditBooleanCell.js

@@ -4,7 +4,9 @@ const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowN
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses, unstable_useId as useId, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import useId from '@mui/utils/useId';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";

package/esm/components/cell/GridEditDateCell.js

@@ -3,7 +3,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "inputProps", "isValidating", "isProcessingProps", "onValueChange", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { styled } from '@mui/material/styles';
 import { NotRendered } from "../../utils/assert.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";

package/esm/components/cell/GridEditInputCell.js

@@ -3,7 +3,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "isValidating", "debounceMs", "isProcessingProps", "onValueChange", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { styled } from '@mui/material/styles';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { NotRendered } from "../../utils/assert.js";
@@ -97,6 +98,7 @@ const GridEditInputCell = forwardRef((props, ref) => {
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") GridEditInputCell.displayName = "GridEditInputCell";
 process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/cell/GridEditSingleSelectCell.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange", "initialOpen", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { GridCellEditStopReasons } from "../../models/params/gridEditCellParams.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { GridEditModes } from "../../models/gridEditRowModel.js";

package/esm/components/cell/GridSkeletonCell.js

@@ -4,7 +4,8 @@ const _excluded = ["field", "type", "align", "width", "height", "empty", "style"
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import capitalize from '@mui/utils/capitalize';
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { createRandomNumberGenerator } from "../../utils/utils.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";

package/esm/components/columnHeaders/GridBaseColumnHeaders.js

@@ -41,4 +41,5 @@ export const GridBaseColumnHeaders = forwardRef(function GridColumnHeaders(props
     role: "presentation",
     ref: ref
   }));
-});
+});
+if (process.env.NODE_ENV !== "production") GridBaseColumnHeaders.displayName = "GridBaseColumnHeaders";

package/esm/components/columnHeaders/GridColumnGroupHeader.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { unstable_useId as useId, unstable_composeClasses as composeClasses } from '@mui/utils';
+import useId from '@mui/utils/useId';
+import composeClasses from '@mui/utils/composeClasses';
 import { useRtl } from '@mui/system/RtlProvider';
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";

package/esm/components/columnHeaders/GridColumnHeaderFilterIconButton.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_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import useId from '@mui/utils/useId';
 import { useGridSelector } from "../../hooks/index.js";
 import { gridPreferencePanelSelectorWithLabel, gridPreferencePanelStateSelector } from "../../hooks/features/preferencesPanel/gridPreferencePanelSelector.js";
 import { GridPreferencePanelsValue } from "../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";

package/esm/components/columnHeaders/GridColumnHeaderItem.js

@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import useId from '@mui/utils/useId';
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { useRtl } from '@mui/system/RtlProvider';
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";

package/esm/components/columnHeaders/GridColumnHeaderSeparator.js

@@ -3,7 +3,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["resizable", "resizing", "height", "side"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import capitalize from '@mui/utils/capitalize';
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/components/columnHeaders/GridColumnHeaderTitle.js

@@ -46,6 +46,7 @@ const ColumnHeaderInnerTitle = forwardRef(function ColumnHeaderInnerTitle(props,
     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/esm/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["classes", "columnMenuOpen", "colIndex", "height", "isResizing", "sortDirection", "hasFocus", "tabIndex", "separatorSide", "isDraggable", "headerComponent", "description", "elementId", "width", "columnMenuIconButton", "columnMenu", "columnTitleIconButtons", "headerClassName", "label", "resizable", "draggableContainerProps", "columnHeaderSeparatorProps", "style"];
 import * as React from 'react';
 import clsx from 'clsx';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import useForkRef from '@mui/utils/useForkRef';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
 import { GridColumnHeaderTitle } from "./GridColumnHeaderTitle.js";
@@ -90,4 +90,5 @@ const GridGenericColumnHeaderItem = forwardRef(function GridGenericColumnHeaderI
     }, columnHeaderSeparatorProps)), columnMenu]
   }));
 });
+if (process.env.NODE_ENV !== "production") GridGenericColumnHeaderItem.displayName = "GridGenericColumnHeaderItem";
 export { GridGenericColumnHeaderItem };

package/esm/components/columnHeaders/GridIconButtonContainer.js

@@ -39,4 +39,5 @@ export const GridIconButtonContainer = forwardRef(function GridIconButtonContain
   }, other, {
     ref: ref
   }));
-});
+});
+if (process.env.NODE_ENV !== "production") GridIconButtonContainer.displayName = "GridIconButtonContainer";

package/esm/components/columnSelection/GridCellCheckboxRenderer.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["field", "id", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "api"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
@@ -86,6 +86,7 @@ const GridCellCheckboxForwardRef = forwardRef(function GridCellCheckboxRenderer(
     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/esm/components/columnSelection/GridHeaderCheckbox.js

@@ -156,6 +156,7 @@ const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
     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/esm/components/columnsManagement/GridColumnsManagement.js

@@ -173,7 +173,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,
@@ -191,7 +191,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/esm/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/esm/components/columnsPanel/ColumnsPanelTrigger.js

@@ -6,11 +6,11 @@ import PropTypes from 'prop-types';
 import useId from '@mui/utils/useId';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import useForkRef from '@mui/utils/useForkRef';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import { useGridPanelContext } from "../panel/GridPanelContext.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { 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 columns panel.
@@ -60,7 +60,7 @@ const ColumnsPanelTrigger = forwardRef(function ColumnsPanelTrigger(props, ref)
     }
     onPointerUp?.(event);
   };
-  const element = useGridComponentRenderer(rootProps.slots.baseButton, render, _extends({}, rootProps.slotProps?.baseButton, {
+  const element = useComponentRenderer(rootProps.slots.baseButton, render, _extends({}, rootProps.slotProps?.baseButton, {
     id: buttonId,
     'aria-haspopup': 'true',
     'aria-expanded': open ? 'true' : undefined,
@@ -75,6 +75,7 @@ const ColumnsPanelTrigger = forwardRef(function ColumnsPanelTrigger(props, ref)
     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/esm/components/containers/GridFooterContainer.js

@@ -43,6 +43,7 @@ const GridFooterContainer = forwardRef(function GridFooterContainer(props, ref)
     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/esm/components/containers/GridOverlay.js

@@ -50,6 +50,7 @@ const GridOverlay = forwardRef(function GridOverlay(props, ref) {
     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/esm/components/containers/GridRoot.js

@@ -4,7 +4,9 @@ const _excluded = ["className", "children", "sidePanel"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_useForkRef as useForkRef, unstable_capitalize as capitalize, unstable_composeClasses as composeClasses } from '@mui/utils';
+import useForkRef from '@mui/utils/useForkRef';
+import capitalize from '@mui/utils/capitalize';
+import composeClasses from '@mui/utils/composeClasses';
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridRootStyles } from "./GridRootStyles.js";
@@ -68,6 +70,7 @@ const GridRoot = 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/esm/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/esm/components/containers/GridRootStyles.js

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

package/esm/components/containers/GridToolbarContainer.js

@@ -56,6 +56,7 @@ const GridToolbarContainer = forwardRef(function GridToolbarContainer(props, ref
     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/esm/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'] & {