@mui/x-data-grid-pro 5.6.0 → 5.6.1

package/legacy/components/DataGridProVirtualScroller.js

@@ -9,7 +9,7 @@ import { styled, alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { useGridSelector, getDataGridUtilityClass, gridClasses, gridVisibleColumnFieldsSelector, gridRowsMetaSelector, useGridApiEventHandler, GridEvents } from '@mui/x-data-grid';
-import { useCurrentPageRows, GridVirtualScroller, GridVirtualScrollerContent, GridVirtualScrollerRenderZone, useGridVirtualScroller } from '@mui/x-data-grid/internals';
+import { GridVirtualScroller, GridVirtualScrollerContent, GridVirtualScrollerRenderZone, useGridVirtualScroller } from '@mui/x-data-grid/internals';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { gridPinnedColumnsSelector, GridPinnedPosition } from '../hooks/features/columnPinning';
@@ -126,7 +126,6 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
 
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
-  var currentPage = useCurrentPageRows(apiRef, rootProps);
   var visibleColumnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
   var expandedRowIds = useGridSelector(apiRef, gridDetailPanelExpandedRowIdsSelector);
   var detailPanelsContent = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
@@ -208,17 +207,6 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
   var pinnedColumnsStyle = {
     minHeight: contentProps.style.minHeight
   };
-  var rowsLookup = React.useMemo(function () {
-    if (rootProps.getDetailPanelContent == null) {
-      return null;
-    }
-
-    return currentPage.rows.reduce(function (acc, _ref6, index) {
-      var id = _ref6.id;
-      acc[id] = index;
-      return acc;
-    }, {});
-  }, [currentPage.rows, rootProps.getDetailPanelContent]);
 
   var getDetailPanels = function getDetailPanels() {
     var panels = [];
@@ -234,12 +222,14 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
       var id = uniqueExpandedRowIds[i];
       var content = detailPanelsContent[id]; // Check if the id exists in the current page
 
-      var exists = rowsLookup[id] !== undefined;
+      var rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(id);
+      var exists = rowIndex !== undefined;
 
       if ( /*#__PURE__*/React.isValidElement(content) && exists) {
         var height = detailPanelsHeights[id];
-        var rowIndex = rowsLookup[id];
-        var top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(id);
+        var sizes = apiRef.current.unstable_getRowInternalSizes(id);
+        var spacingTop = (sizes == null ? void 0 : sizes.spacingTop) || 0;
+        var top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(id) + spacingTop;
         panels.push( /*#__PURE__*/_jsx(VirtualScrollerDetailPanel, {
           style: {
             top: top,

package/legacy/components/GridDetailPanelToggleCell.js

@@ -50,8 +50,9 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
 
   /**
    * GridApi that let you manipulate the grid.
+   * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
    */
-  api: PropTypes.object.isRequired,
+  api: PropTypes.any.isRequired,
 
   /**
    * The mode of the cell.

package/legacy/components/GridTreeDataGroupingCell.js

@@ -84,8 +84,9 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
 
   /**
    * GridApi that let you manipulate the grid.
+   * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
    */
-  api: PropTypes.object.isRequired,
+  api: PropTypes.any.isRequired,
 
   /**
    * The mode of the cell.

package/legacy/components/index.js

@@ -1,3 +1,4 @@
 // Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-pro`
 export * from './GridTreeDataGroupingCell';
-export * from './GridColumnPinningMenuItems';
+export * from './GridColumnPinningMenuItems';
+export * from './GridDetailPanelToggleCell';

package/legacy/hooks/features/columnReorder/useGridColumnReorder.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { useGridApiEventHandler, getDataGridUtilityClass, GridEvents, useGridLogger } from '@mui/x-data-grid';
-import { useGridStateInit } from '@mui/x-data-grid/internals';
 import { gridColumnReorderDragColSelector } from './columnReorderSelector';
 var CURSOR_MOVE_DIRECTION_LEFT = 'left';
 var CURSOR_MOVE_DIRECTION_RIGHT = 'right';
@@ -22,21 +21,21 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
+
+export var columnReorderStateInitializer = function columnReorderStateInitializer(state) {
+  return _extends({}, state, {
+    columnReorder: {
+      dragCol: ''
+    }
+  });
+};
 /**
  * Only available in DataGridPro
  * @requires useGridColumns (method)
  */
 
-
 export var useGridColumnReorder = function useGridColumnReorder(apiRef, props) {
   var logger = useGridLogger(apiRef, 'useGridColumnReorder');
-  useGridStateInit(apiRef, function (state) {
-    return _extends({}, state, {
-      columnReorder: {
-        dragCol: ''
-      }
-    });
-  });
   var dragColNode = React.useRef(null);
   var cursorPosition = React.useRef({
     x: 0,

package/legacy/hooks/features/columnResize/useGridColumnResize.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { ownerDocument, useEventCallback } from '@mui/material/utils';
 import { GridEvents, gridClasses, GridColumnHeaderSeparatorSides, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
-import { useGridStateInit, clamp, findParentElementFromClassName } from '@mui/x-data-grid/internals';
+import { clamp, findParentElementFromClassName } from '@mui/x-data-grid/internals';
 import { findGridCellElementsFromCol, getFieldFromHeaderElem, findHeaderElementFromField } from '../../../utils/domUtils';
 // TODO: remove support for Safari < 13.
 // https://caniuse.com/#search=touch-action
@@ -73,22 +73,22 @@ function computeOffsetToSeparator(clickX, columnBounds, separatorSide) {
 function getSeparatorSide(element) {
   return element.classList.contains(gridClasses['columnSeparator--sideRight']) ? GridColumnHeaderSeparatorSides.Right : GridColumnHeaderSeparatorSides.Left;
 }
+
+export var columnResizeStateInitializer = function columnResizeStateInitializer(state) {
+  return _extends({}, state, {
+    columnResize: {
+      resizingColumnField: ''
+    }
+  });
+};
 /**
  * Only available in DataGridPro
  * @requires useGridColumns (method, event)
  * TODO: improve experience for last column
  */
 
-
 export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
   var logger = useGridLogger(apiRef, 'useGridColumnResize');
-  useGridStateInit(apiRef, function (state) {
-    return _extends({}, state, {
-      columnResize: {
-        resizingColumnField: ''
-      }
-    });
-  });
   var colDefRef = React.useRef();
   var colElementRef = React.useRef();
   var colCellElementsRef = React.useRef(); // To improve accessibility, the separator has padding on both sides.

package/legacy/hooks/features/detailPanel/useGridDetailPanel.js

@@ -2,19 +2,19 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { GridEvents, useGridSelector, useGridApiEventHandler, useGridApiMethod } from '@mui/x-data-grid';
-import { useGridStateInit, useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from './gridDetailPanelToggleColDef';
 import { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector } from './gridDetailPanelSelector';
-export var useGridDetailPanel = function useGridDetailPanel(apiRef, props) {
-  useGridStateInit(apiRef, function (state) {
-    var _ref, _props$detailPanelExp, _props$initialState, _props$initialState$d;
+export var detailPanelStateInitializer = function detailPanelStateInitializer(state, props) {
+  var _ref, _props$detailPanelExp, _props$initialState, _props$initialState$d;
 
-    return _extends({}, state, {
-      detailPanel: {
-        expandedRowIds: (_ref = (_props$detailPanelExp = props.detailPanelExpandedRowIds) != null ? _props$detailPanelExp : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$d = _props$initialState.detailPanel) == null ? void 0 : _props$initialState$d.expandedRowIds) != null ? _ref : []
-      }
-    });
+  return _extends({}, state, {
+    detailPanel: {
+      expandedRowIds: (_ref = (_props$detailPanelExp = props.detailPanelExpandedRowIds) != null ? _props$detailPanelExp : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$d = _props$initialState.detailPanel) == null ? void 0 : _props$initialState$d.expandedRowIds) != null ? _ref : []
+    }
   });
+};
+export var useGridDetailPanel = function useGridDetailPanel(apiRef, props) {
   var expandedRowIds = useGridSelector(apiRef, gridDetailPanelExpandedRowIdsSelector);
   var contentCache = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
   var handleCellClick = React.useCallback(function (params, event) {

package/legacy/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useGridSelector, GridEvents, useGridApiEventHandler, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, gridRowsMetaSelector } from '@mui/x-data-grid';
-import { useCurrentPageRows } from '@mui/x-data-grid/internals';
+import { useGridVisibleRows } from '@mui/x-data-grid/internals';
 
 /**
  * Only available in DataGridPro
@@ -10,7 +10,7 @@ import { useCurrentPageRows } from '@mui/x-data-grid/internals';
  */
 export var useGridInfiniteLoader = function useGridInfiniteLoader(apiRef, props) {
   var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
-  var currentPage = useCurrentPageRows(apiRef, props);
+  var currentPage = useGridVisibleRows(apiRef, props);
   var rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
   var contentHeight = Math.max(rowsMeta.currentPageTotalHeight, 1);
   var isInScrollBottomArea = React.useRef(false);

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.0
+/** @license MUI v5.6.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -16,4 +16,5 @@ export * from '@mui/x-data-grid/utils';
 export * from './DataGridPro';
 export * from './hooks';
 export * from './models';
+export * from './components';
 export { useGridApiContext, useGridApiRef, useGridRootProps } from './typeOverloads/reexports';

package/modern/DataGridPro/DataGridPro.js

@@ -12,7 +12,7 @@ import { DataGridProColumnHeaders } from '../components/DataGridProColumnHeaders
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-let RELEASE_INFO = "MTY0NjM0ODQwMDAwMA=="; // eslint-disable-next-line no-useless-concat
+let RELEASE_INFO = "MTY0Njg2NjgwMDAwMA=="; // eslint-disable-next-line no-useless-concat
 
 if (process.env.NODE_ENV !== 'production' && RELEASE_INFO === '__RELEASE' + '_INFO__') {
   // eslint-disable-next-line no-underscore-dangle
@@ -275,7 +275,8 @@ DataGridProRaw.propTypes = {
    */
   experimentalFeatures: PropTypes.shape({
     preventCommitWhileValidating: PropTypes.bool,
-    rowGrouping: PropTypes.bool
+    rowGrouping: PropTypes.bool,
+    warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
 
   /**
@@ -328,7 +329,7 @@ DataGridProRaw.propTypes = {
 
   /**
    * Function that applies CSS classes dynamically on rows.
-   * @param {GridRowParams} params With all properties from [[GridRowParams]].
+   * @param {GridRowClassNameParams} params With all properties from [[GridRowClassNameParams]].
    * @returns {string} The CSS class to apply to the row.
    */
   getRowClassName: PropTypes.func,
@@ -345,6 +346,13 @@ DataGridProRaw.propTypes = {
    */
   getRowId: PropTypes.func,
 
+  /**
+   * Function that allows to specify the spacing between rows.
+   * @param {GridRowSpacingParams} params With all properties from [[GridRowSpacingParams]].
+   * @returns {GridRowSpacing} The row spacing values.
+   */
+  getRowSpacing: PropTypes.func,
+
   /**
    * Determines the path of a row in the tree data.
    * For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"].
@@ -432,7 +440,7 @@ DataGridProRaw.propTypes = {
 
   /**
    * Set the locale text of the grid.
-   * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/grid/x-data-grid/src/internals/constants/localeTextConstants.ts) in the GitHub repository.
+   * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/grid/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.
    */
   localeText: PropTypes.object,
 
@@ -814,6 +822,12 @@ DataGridProRaw.propTypes = {
    */
   rows: PropTypes.arrayOf(PropTypes.object).isRequired,
 
+  /**
+   * Sets the type of space between rows added by `getRowSpacing`.
+   * @default "margin"
+   */
+  rowSpacingType: PropTypes.oneOf(['border', 'margin']),
+
   /**
    * Select the pageSize dynamically using the component UI.
    * @default [25, 50, 100]

package/modern/DataGridPro/useDataGridProComponent.js

@@ -1,15 +1,15 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboard, useGridKeyboardNavigation, useGridPagination, pageStateInitializer, pageSizeStateInitializer, useGridPreferencesPanel, useGridEditing, useGridRows, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors } from '@mui/x-data-grid/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboard, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, useGridRows, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, editingStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer } from '@mui/x-data-grid/internals';
 // Pro-only features
 import { useGridInfiniteLoader } from '../hooks/features/infiniteLoader/useGridInfiniteLoader';
-import { useGridColumnReorder } from '../hooks/features/columnReorder/useGridColumnReorder';
-import { useGridColumnResize } from '../hooks/features/columnResize/useGridColumnResize';
+import { useGridColumnReorder, columnReorderStateInitializer } from '../hooks/features/columnReorder/useGridColumnReorder';
+import { useGridColumnResize, columnResizeStateInitializer } from '../hooks/features/columnResize/useGridColumnResize';
 import { useGridTreeData } from '../hooks/features/treeData/useGridTreeData';
 import { useGridTreeDataPreProcessors } from '../hooks/features/treeData/useGridTreeDataPreProcessors';
 import { useGridRowGrouping, rowGroupingStateInitializer } from '../hooks/features/rowGrouping/useGridRowGrouping';
 import { useGridRowGroupingPreProcessors } from '../hooks/features/rowGrouping/useGridRowGroupingPreProcessors';
 import { useGridColumnPinning, columnPinningStateInitializer } from '../hooks/features/columnPinning/useGridColumnPinning';
 import { useGridColumnPinningPreProcessors } from '../hooks/features/columnPinning/useGridColumnPinningPreProcessors';
-import { useGridDetailPanel } from '../hooks/features/detailPanel/useGridDetailPanel';
+import { useGridDetailPanel, detailPanelStateInitializer } from '../hooks/features/detailPanel/useGridDetailPanel';
 import { useGridDetailPanelCache } from '../hooks/features/detailPanel/useGridDetailPanelCache';
 import { useGridDetailPanelPreProcessors } from '../hooks/features/detailPanel/useGridDetailPanelPreProcessors';
 export const useDataGridProComponent = (inputApiRef, props) => {
@@ -28,18 +28,28 @@ export const useDataGridProComponent = (inputApiRef, props) => {
    * Register all state initializers here.
    */
 
-  useGridInitializeState(filterStateInitializer, apiRef, props);
-  useGridInitializeState(pageSizeStateInitializer, apiRef, props);
-  useGridInitializeState(pageStateInitializer, apiRef, props);
-  useGridInitializeState(sortingStateInitializer, apiRef, props);
+  useGridInitializeState(selectionStateInitializer, apiRef, props);
+  useGridInitializeState(detailPanelStateInitializer, apiRef, props);
   useGridInitializeState(columnPinningStateInitializer, apiRef, props);
-  useGridInitializeState(rowGroupingStateInitializer, apiRef, props);
+  useGridInitializeState(rowGroupingStateInitializer, apiRef, props); // FIXME Call in the same relative position that useGridRowGrouping is called
+
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridRowGrouping(apiRef, props); // FIXME Needs to be called before the rows state initialization because it registers a rows group builder
 
   useGridTreeData(apiRef, props); // FIXME Needs to be called before the rows state initialization because it registers a rows group builder
 
   useGridInitializeState(rowsStateInitializer, apiRef, props);
+  useGridInitializeState(editingStateInitializer, apiRef, props);
+  useGridInitializeState(focusStateInitializer, apiRef, props);
+  useGridInitializeState(sortingStateInitializer, apiRef, props);
+  useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
+  useGridInitializeState(filterStateInitializer, apiRef, props);
+  useGridInitializeState(densityStateInitializer, apiRef, props);
+  useGridInitializeState(columnReorderStateInitializer, apiRef, props);
+  useGridInitializeState(columnResizeStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
+  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
+  useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridSelection(apiRef, props);
   useGridDetailPanel(apiRef, props);
   useGridColumnPinning(apiRef, props);
@@ -50,7 +60,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
   useGridSorting(apiRef, props);
-  useGridPreferencesPanel(apiRef, props);
+  useGridPreferencesPanel(apiRef);
   useGridFilter(apiRef, props);
   useGridDensity(apiRef, props);
   useGridColumnReorder(apiRef, props);

package/modern/DataGridPro/useDataGridProProps.js

@@ -31,8 +31,8 @@ export const useDataGridProProps = inProps => {
     }
 
     const mergedComponents = {};
-    Object.keys(DATA_GRID_DEFAULT_SLOTS_COMPONENTS).forEach(key => {
-      mergedComponents[key] = overrides[key] === undefined ? DATA_GRID_DEFAULT_SLOTS_COMPONENTS[key] : overrides[key];
+    Object.entries(DATA_GRID_DEFAULT_SLOTS_COMPONENTS).forEach(([key, defaultComponent]) => {
+      mergedComponents[key] = overrides[key] === undefined ? defaultComponent : overrides[key];
     });
     return mergedComponents;
   }, [themedProps.components]);

package/modern/components/DataGridProVirtualScroller.js

@@ -6,7 +6,7 @@ import { styled, alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { useGridSelector, getDataGridUtilityClass, gridClasses, gridVisibleColumnFieldsSelector, gridRowsMetaSelector, useGridApiEventHandler, GridEvents } from '@mui/x-data-grid';
-import { useCurrentPageRows, GridVirtualScroller, GridVirtualScrollerContent, GridVirtualScrollerRenderZone, useGridVirtualScroller } from '@mui/x-data-grid/internals';
+import { GridVirtualScroller, GridVirtualScrollerContent, GridVirtualScrollerRenderZone, useGridVirtualScroller } from '@mui/x-data-grid/internals';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { gridPinnedColumnsSelector, GridPinnedPosition } from '../hooks/features/columnPinning';
@@ -113,7 +113,6 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
 
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const currentPage = useCurrentPageRows(apiRef, rootProps);
   const visibleColumnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
   const expandedRowIds = useGridSelector(apiRef, gridDetailPanelExpandedRowIdsSelector);
   const detailPanelsContent = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
@@ -189,18 +188,6 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   const pinnedColumnsStyle = {
     minHeight: contentProps.style.minHeight
   };
-  const rowsLookup = React.useMemo(() => {
-    if (rootProps.getDetailPanelContent == null) {
-      return null;
-    }
-
-    return currentPage.rows.reduce((acc, {
-      id
-    }, index) => {
-      acc[id] = index;
-      return acc;
-    }, {});
-  }, [currentPage.rows, rootProps.getDetailPanelContent]);
 
   const getDetailPanels = () => {
     const panels = [];
@@ -216,12 +203,14 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       const id = uniqueExpandedRowIds[i];
       const content = detailPanelsContent[id]; // Check if the id exists in the current page
 
-      const exists = rowsLookup[id] !== undefined;
+      const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(id);
+      const exists = rowIndex !== undefined;
 
       if ( /*#__PURE__*/React.isValidElement(content) && exists) {
         const height = detailPanelsHeights[id];
-        const rowIndex = rowsLookup[id];
-        const top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(id);
+        const sizes = apiRef.current.unstable_getRowInternalSizes(id);
+        const spacingTop = sizes?.spacingTop || 0;
+        const top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(id) + spacingTop;
         panels.push( /*#__PURE__*/_jsx(VirtualScrollerDetailPanel, {
           style: {
             top,

package/modern/components/GridDetailPanelToggleCell.js

@@ -54,8 +54,9 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
 
   /**
    * GridApi that let you manipulate the grid.
+   * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
    */
-  api: PropTypes.object.isRequired,
+  api: PropTypes.any.isRequired,
 
   /**
    * The mode of the cell.

package/modern/components/GridTreeDataGroupingCell.js

@@ -86,8 +86,9 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
 
   /**
    * GridApi that let you manipulate the grid.
+   * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
    */
-  api: PropTypes.object.isRequired,
+  api: PropTypes.any.isRequired,
 
   /**
    * The mode of the cell.

package/modern/components/index.js

@@ -1,3 +1,4 @@
 // Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-pro`
 export * from './GridTreeDataGroupingCell';
-export * from './GridColumnPinningMenuItems';
+export * from './GridColumnPinningMenuItems';
+export * from './GridDetailPanelToggleCell';

package/modern/hooks/features/columnReorder/useGridColumnReorder.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { useGridApiEventHandler, getDataGridUtilityClass, GridEvents, useGridLogger } from '@mui/x-data-grid';
-import { useGridStateInit } from '@mui/x-data-grid/internals';
 import { gridColumnReorderDragColSelector } from './columnReorderSelector';
 const CURSOR_MOVE_DIRECTION_LEFT = 'left';
 const CURSOR_MOVE_DIRECTION_RIGHT = 'right';
@@ -22,19 +21,19 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
+
+export const columnReorderStateInitializer = state => _extends({}, state, {
+  columnReorder: {
+    dragCol: ''
+  }
+});
 /**
  * Only available in DataGridPro
  * @requires useGridColumns (method)
  */
 
-
 export const useGridColumnReorder = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridColumnReorder');
-  useGridStateInit(apiRef, state => _extends({}, state, {
-    columnReorder: {
-      dragCol: ''
-    }
-  }));
   const dragColNode = React.useRef(null);
   const cursorPosition = React.useRef({
     x: 0,

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { ownerDocument, useEventCallback } from '@mui/material/utils';
 import { GridEvents, gridClasses, GridColumnHeaderSeparatorSides, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
-import { useGridStateInit, clamp, findParentElementFromClassName } from '@mui/x-data-grid/internals';
+import { clamp, findParentElementFromClassName } from '@mui/x-data-grid/internals';
 import { findGridCellElementsFromCol, getFieldFromHeaderElem, findHeaderElementFromField } from '../../../utils/domUtils';
 // TODO: remove support for Safari < 13.
 // https://caniuse.com/#search=touch-action
@@ -73,20 +73,20 @@ function computeOffsetToSeparator(clickX, columnBounds, separatorSide) {
 function getSeparatorSide(element) {
   return element.classList.contains(gridClasses['columnSeparator--sideRight']) ? GridColumnHeaderSeparatorSides.Right : GridColumnHeaderSeparatorSides.Left;
 }
+
+export const columnResizeStateInitializer = state => _extends({}, state, {
+  columnResize: {
+    resizingColumnField: ''
+  }
+});
 /**
  * Only available in DataGridPro
  * @requires useGridColumns (method, event)
  * TODO: improve experience for last column
  */
 
-
 export const useGridColumnResize = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridColumnResize');
-  useGridStateInit(apiRef, state => _extends({}, state, {
-    columnResize: {
-      resizingColumnField: ''
-    }
-  }));
   const colDefRef = React.useRef();
   const colElementRef = React.useRef();
   const colCellElementsRef = React.useRef(); // To improve accessibility, the separator has padding on both sides.

package/modern/hooks/features/detailPanel/useGridDetailPanel.js

@@ -1,17 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { GridEvents, useGridSelector, useGridApiEventHandler, useGridApiMethod } from '@mui/x-data-grid';
-import { useGridStateInit, useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from './gridDetailPanelToggleColDef';
 import { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector } from './gridDetailPanelSelector';
-export const useGridDetailPanel = (apiRef, props) => {
-  useGridStateInit(apiRef, state => {
-    return _extends({}, state, {
-      detailPanel: {
-        expandedRowIds: props.detailPanelExpandedRowIds ?? props.initialState?.detailPanel?.expandedRowIds ?? []
-      }
-    });
+export const detailPanelStateInitializer = (state, props) => {
+  return _extends({}, state, {
+    detailPanel: {
+      expandedRowIds: props.detailPanelExpandedRowIds ?? props.initialState?.detailPanel?.expandedRowIds ?? []
+    }
   });
+};
+export const useGridDetailPanel = (apiRef, props) => {
   const expandedRowIds = useGridSelector(apiRef, gridDetailPanelExpandedRowIdsSelector);
   const contentCache = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
   const handleCellClick = React.useCallback((params, event) => {

package/modern/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useGridSelector, GridEvents, useGridApiEventHandler, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, gridRowsMetaSelector } from '@mui/x-data-grid';
-import { useCurrentPageRows } from '@mui/x-data-grid/internals';
+import { useGridVisibleRows } from '@mui/x-data-grid/internals';
 
 /**
  * Only available in DataGridPro
@@ -10,7 +10,7 @@ import { useCurrentPageRows } from '@mui/x-data-grid/internals';
  */
 export const useGridInfiniteLoader = (apiRef, props) => {
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
-  const currentPage = useCurrentPageRows(apiRef, props);
+  const currentPage = useGridVisibleRows(apiRef, props);
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
   const contentHeight = Math.max(rowsMeta.currentPageTotalHeight, 1);
   const isInScrollBottomArea = React.useRef(false);

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.0
+/** @license MUI v5.6.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -16,4 +16,5 @@ export * from '@mui/x-data-grid/utils';
 export * from './DataGridPro';
 export * from './hooks';
 export * from './models';
+export * from './components';
 export { useGridApiContext, useGridApiRef, useGridRootProps } from './typeOverloads/reexports';

package/node/DataGridPro/DataGridPro.js

@@ -35,7 +35,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 // This is the package release date. Each package version should update this const
 // automatically when a new version is published on npm.
-let RELEASE_INFO = "MTY0NjM0ODQwMDAwMA=="; // eslint-disable-next-line no-useless-concat
+let RELEASE_INFO = "MTY0Njg2NjgwMDAwMA=="; // eslint-disable-next-line no-useless-concat
 
 if (process.env.NODE_ENV !== 'production' && RELEASE_INFO === '__RELEASE' + '_INFO__') {
   // eslint-disable-next-line no-underscore-dangle
@@ -300,7 +300,8 @@ DataGridProRaw.propTypes = {
    */
   experimentalFeatures: _propTypes.default.shape({
     preventCommitWhileValidating: _propTypes.default.bool,
-    rowGrouping: _propTypes.default.bool
+    rowGrouping: _propTypes.default.bool,
+    warnIfFocusStateIsNotSynced: _propTypes.default.bool
   }),
 
   /**
@@ -353,7 +354,7 @@ DataGridProRaw.propTypes = {
 
   /**
    * Function that applies CSS classes dynamically on rows.
-   * @param {GridRowParams} params With all properties from [[GridRowParams]].
+   * @param {GridRowClassNameParams} params With all properties from [[GridRowClassNameParams]].
    * @returns {string} The CSS class to apply to the row.
    */
   getRowClassName: _propTypes.default.func,
@@ -370,6 +371,13 @@ DataGridProRaw.propTypes = {
    */
   getRowId: _propTypes.default.func,
 
+  /**
+   * Function that allows to specify the spacing between rows.
+   * @param {GridRowSpacingParams} params With all properties from [[GridRowSpacingParams]].
+   * @returns {GridRowSpacing} The row spacing values.
+   */
+  getRowSpacing: _propTypes.default.func,
+
   /**
    * Determines the path of a row in the tree data.
    * For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"].
@@ -457,7 +465,7 @@ DataGridProRaw.propTypes = {
 
   /**
    * Set the locale text of the grid.
-   * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/grid/x-data-grid/src/internals/constants/localeTextConstants.ts) in the GitHub repository.
+   * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/grid/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.
    */
   localeText: _propTypes.default.object,
 
@@ -839,6 +847,12 @@ DataGridProRaw.propTypes = {
    */
   rows: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
 
+  /**
+   * Sets the type of space between rows added by `getRowSpacing`.
+   * @default "margin"
+   */
+  rowSpacingType: _propTypes.default.oneOf(['border', 'margin']),
+
   /**
    * Select the pageSize dynamically using the component UI.
    * @default [25, 50, 100]