@mui/x-data-grid 8.3.1 → 8.5.0

package/components/toolbarV8/ToolbarContext.js

@@ -8,6 +8,7 @@ exports.ToolbarContext = void 0;
 exports.useToolbarContext = useToolbarContext;
 var React = _interopRequireWildcard(require("react"));
 const ToolbarContext = exports.ToolbarContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ToolbarContext.displayName = "ToolbarContext";
 function useToolbarContext() {
   const context = React.useContext(ToolbarContext);
   if (context === undefined) {

package/components/toolbarV8/utils.d.ts

@@ -0,0 +1,5 @@
+export declare function sortByDocumentPosition(a: {
+  ref: React.RefObject<HTMLButtonElement | null>;
+}, b: {
+  ref: React.RefObject<HTMLButtonElement | null>;
+}): 0 | 1 | -1;

package/components/toolbarV8/utils.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sortByDocumentPosition = sortByDocumentPosition;
+/* eslint-disable no-bitwise */
+function sortByDocumentPosition(a, b) {
+  if (!a.ref.current || !b.ref.current) {
+    return 0;
+  }
+  const position = a.ref.current.compareDocumentPosition(b.ref.current);
+  if (!position) {
+    return 0;
+  }
+  if (position & Node.DOCUMENT_POSITION_FOLLOWING || position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
+    return -1;
+  }
+  if (position & Node.DOCUMENT_POSITION_PRECEDING || position & Node.DOCUMENT_POSITION_CONTAINS) {
+    return 1;
+  }
+  return 0;
+}

package/components/virtualization/GridMainContainer.js

@@ -56,4 +56,5 @@ const GridMainContainer = exports.GridMainContainer = (0, _forwardRef.forwardRef
       "data-id": "gridPanelAnchor"
     }), props.children]
   }));
-});
+});
+if (process.env.NODE_ENV !== "production") GridMainContainer.displayName = "GridMainContainer";

package/components/virtualization/GridVirtualScrollbar.js

@@ -152,4 +152,5 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forw
       className: classes.content
     })
   });
-});
+});
+if (process.env.NODE_ENV !== "production") GridVirtualScrollbar.displayName = "GridVirtualScrollbar";

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/context/GridRootPropsContext.js

@@ -8,6 +8,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridRootPropsContext = void 0;
 var React = _interopRequireWildcard(require("react"));
 const GridRootPropsContext = exports.GridRootPropsContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== 'production') {
-  GridRootPropsContext.displayName = 'GridRootPropsContext';
-}
+if (process.env.NODE_ENV !== "production") GridRootPropsContext.displayName = "GridRootPropsContext";

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,8 @@ 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 --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/GridApiContext.js

@@ -2,6 +2,4 @@
 
 import * as React from 'react';
 export const GridApiContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== 'production') {
-  GridApiContext.displayName = 'GridApiContext';
-}
+if (process.env.NODE_ENV !== "production") GridApiContext.displayName = "GridApiContext";

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/GridColumnUnsortedIcon.js

@@ -13,4 +13,5 @@ export const GridColumnUnsortedIcon = /*#__PURE__*/React.memo(function GridColum
   const [nextSortDirection] = sortingOrder;
   const Icon = nextSortDirection === 'asc' ? rootProps.slots.columnSortedAscendingIcon : rootProps.slots.columnSortedDescendingIcon;
   return Icon ? /*#__PURE__*/_jsx(Icon, _extends({}, other)) : null;
-});
+});
+if (process.env.NODE_ENV !== "production") GridColumnUnsortedIcon.displayName = "GridColumnUnsortedIcon";

package/esm/components/GridConfigurationContext.js

@@ -2,6 +2,4 @@
 
 import * as React from 'react';
 export const GridConfigurationContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== 'production') {
-  GridConfigurationContext.displayName = 'GridConfigurationContext';
-}
+if (process.env.NODE_ENV !== "production") GridConfigurationContext.displayName = "GridConfigurationContext";

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';
@@ -246,6 +246,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
       rowNode: rowNode
     }, slotProps?.cell), column.field);
   };
+  if (process.env.NODE_ENV !== "production") getCell.displayName = "getCell";
   const leftCells = pinnedColumns.left.map((column, i) => {
     const indexRelativeToAllColumns = i;
     return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.left.length, PinnedColumnPosition.LEFT);
@@ -301,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";
@@ -258,4 +258,5 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
   value: PropTypes.any
 } : void 0;
 export { GridActionsCell };
-export const renderActionsCell = params => /*#__PURE__*/_jsx(GridActionsCell, _extends({}, params));
+export const renderActionsCell = params => /*#__PURE__*/_jsx(GridActionsCell, _extends({}, params));
+if (process.env.NODE_ENV !== "production") renderActionsCell.displayName = "renderActionsCell";

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/GridBooleanCell.js

@@ -115,10 +115,12 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
   value: PropTypes.any
 } : void 0;
 const GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
+if (process.env.NODE_ENV !== "production") GridBooleanCell.displayName = "GridBooleanCell";
 export { GridBooleanCell };
 export const renderBooleanCell = params => {
   if (params.field !== GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD && isAutogeneratedRowNode(params.rowNode)) {
     return '';
   }
   return /*#__PURE__*/_jsx(GridBooleanCell, _extends({}, params));
-};
+};
+if (process.env.NODE_ENV !== "production") renderBooleanCell.displayName = "renderBooleanCell";

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";
@@ -136,4 +138,5 @@ process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes = {
   value: PropTypes.any
 } : void 0;
 export { GridEditBooleanCell };
-export const renderEditBooleanCell = params => /*#__PURE__*/_jsx(GridEditBooleanCell, _extends({}, params));
+export const renderEditBooleanCell = params => /*#__PURE__*/_jsx(GridEditBooleanCell, _extends({}, params));
+if (process.env.NODE_ENV !== "production") renderEditBooleanCell.displayName = "renderEditBooleanCell";

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";
@@ -190,4 +191,5 @@ process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes = {
   value: PropTypes.any
 } : void 0;
 export { GridEditDateCell };
-export const renderEditDateCell = params => /*#__PURE__*/_jsx(GridEditDateCell, _extends({}, params));
+export const renderEditDateCell = params => /*#__PURE__*/_jsx(GridEditDateCell, _extends({}, params));
+if (process.env.NODE_ENV !== "production") renderEditDateCell.displayName = "renderEditDateCell";

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 |
@@ -165,4 +167,5 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   value: PropTypes.any
 } : void 0;
 export { GridEditInputCell };
-export const renderEditInputCell = params => /*#__PURE__*/_jsx(GridEditInputCell, _extends({}, params));
+export const renderEditInputCell = params => /*#__PURE__*/_jsx(GridEditInputCell, _extends({}, params));
+if (process.env.NODE_ENV !== "production") renderEditInputCell.displayName = "renderEditInputCell";

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";
@@ -186,4 +186,5 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   value: PropTypes.any
 } : void 0;
 export { GridEditSingleSelectCell };
-export const renderEditSingleSelectCell = params => /*#__PURE__*/_jsx(GridEditSingleSelectCell, _extends({}, params));
+export const renderEditSingleSelectCell = params => /*#__PURE__*/_jsx(GridEditSingleSelectCell, _extends({}, params));
+if (process.env.NODE_ENV !== "production") renderEditSingleSelectCell.displayName = "renderEditSingleSelectCell";

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/ColumnHeaderMenuIcon.js

@@ -60,4 +60,5 @@ export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
       }))
     }))
   });
-});
+});
+if (process.env.NODE_ENV !== "production") ColumnHeaderMenuIcon.displayName = "ColumnHeaderMenuIcon";

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";
@@ -110,7 +111,7 @@ function GridColumnHeaderItem(props) {
     onDragStart: publish('columnHeaderDragStart'),
     onDragEnter: publish('columnHeaderDragEnter'),
     onDragOver: publish('columnHeaderDragOver'),
-    onDragEnd: publish('columnHeaderDragEnd')
+    onDragEndCapture: publish('columnHeaderDragEnd')
   } : {}, [isDraggable, publish]);
   const columnHeaderSeparatorProps = React.useMemo(() => ({
     onMouseDown: publish('columnSeparatorMouseDown'),

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";
@@ -58,6 +59,7 @@ function GridColumnHeaderSeparatorRaw(props) {
   );
 }
 const GridColumnHeaderSeparator = /*#__PURE__*/React.memo(GridColumnHeaderSeparatorRaw);
+if (process.env.NODE_ENV !== "production") GridColumnHeaderSeparator.displayName = "GridColumnHeaderSeparator";
 process.env.NODE_ENV !== "production" ? GridColumnHeaderSeparatorRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -12,6 +12,7 @@ function GridColumnHeaderSortIconRaw(props) {
   });
 }
 const GridColumnHeaderSortIcon = /*#__PURE__*/React.memo(GridColumnHeaderSortIconRaw);
+if (process.env.NODE_ENV !== "production") GridColumnHeaderSortIcon.displayName = "GridColumnHeaderSortIcon";
 process.env.NODE_ENV !== "production" ? GridColumnHeaderSortIconRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

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";