@mui/x-data-grid-pro 6.0.0-alpha.0 → 6.0.0-alpha.2

package/CHANGELOG.md

@@ -3,6 +3,215 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v6.0.0-alpha.2
+
+_Oct 7, 2022_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Further progress on stabilizing new date field components
+- 🎁 Improve support for theme augmentation in the DataGrid (#6269) @cherniavskii
+- 🌍 Add Japanese (ja-JP) locale to pickers (#6365) @sho918
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-alpha.2` / `@mui/x-data-grid-pro@v6.0.0-alpha.2` / `@mui/x-data-grid-premium@v6.0.0-alpha.2`
+
+#### Breaking changes
+
+- 🎁 The aggregation is no longer experimental.
+
+  You can now use the aggregation without the `experimentalFeatures.aggregation` flag enabled.
+
+  ```diff
+  <DataGridPremium
+  -  experimentalFeatures={{ aggregation: true }}
+  />
+  ```
+
+  The aggregation of the columns through the column menu is now enabled by default on `DataGridPremium`. You can set `disableAggregation={true}` to disable it.
+
+#### Changes
+
+- [DataGrid] Add filter item ID to `.MuiDataGrid-filterForm` (#6313) @m4theushw
+- [DataGrid] Add missing `valueOptions` (#6401) @DanailH
+- [DataGrid] Don't start edit mode when pressing Shift + Space (#6228) @m4theushw
+- [DataGrid] Fix error when using column grouping with all columns hidden (#6405) @alexfauquette
+- [DataGrid] Pass generics to the components in the theme augmentation (#6269) @cherniavskii
+- [DataGridPremium] Remove the aggregation from the experimental features (#6372) @flaviendelangle
+
+### `@mui/x-date-pickers@v6.0.0-alpha.2` / `@mui/x-date-pickers-pro@v6.0.0-alpha.2`
+
+#### Breaking changes
+
+- The `renderDay` prop has been replaced by a `Day` component slot.
+  You can find more information about this pattern in the [MUI Base documentation](https://mui.com/base/getting-started/usage/#shared-props).
+
+  ```diff
+  // Same for any other date, date time or date range picker.
+  <DatePicker
+  -  renderDay={(_, dayProps) => <CustomDay {...dayProps} />}
+  +  components={{ Day: CustomDay }}
+  />
+  ```
+
+#### Changes
+
+- [DateRangePicker] Fix the shape of the first selected day when the start date has an hour set (#6403) @flaviendelangle
+- [l10n] Add Japanese (ja-JP) locale to pickers (#6365) @sho918
+- [DateRangePicker] Force focus to stay on inputs (#6324) @alexfauquette
+- [pickers] Improve edition on field components (#6339) @flaviendelangle
+- [pickers] Improve field selection behaviors (#6317) @flaviendelangle
+- [pickers] Replace the `renderDay` prop with a `Day` component slot (#6293) @flaviendelangle
+
+### Docs
+
+- [docs] Apply style guide to Data Grid Aggregation page (#5781) @samuelsycamore
+- [docs] Fix code examples of editing cells (#6004) @TiagoPortfolio
+- [docs] Fix customized day rendering demo style (#6342) (#6399) @Ambrish-git
+- [docs] Implement Style Guide on "Advanced" Data Grid doc pages (#6331) @samuelsycamore
+- [docs] Use components instead of demos for `SelectorsDocs` (#6103) @flaviendelangle
+- [license] Add new license status 'Out of scope' (#5260) @flaviendelangle
+
+### Core
+
+- [core] Speedup of yarn install in the CI (#6395) @oliviertassinari
+- [test] Remove redundant test clean-ups (#6377) @oliviertassinari
+- [test] Replace `React.render` with `React.createRoot` in e2e tests (#6393) @m4theushw
+
+## 6.0.0-alpha.1
+
+_Sep 29, 2022_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Better support for custom overlays (#5808) @cherniavskii
+- 🖨️ Improve print export (#6273) @oliviertassinari
+- 🎁 Reduce confusion when initializing pickers with a date value (#6170) @flaviendelangle
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-alpha.1` / `@mui/x-data-grid-pro@v6.0.0-alpha.1` / `@mui/x-data-grid-premium@v6.0.0-alpha.1`
+
+#### Breaking changes
+
+- New internal rows structure for v6 (#4927) @flaviendelangle
+
+  Some selectors related to the rows have been renamed to better describe the type of rows they are returning:
+
+  ```diff
+  -const result = gridRowsIdToIdLookupSelector(apiRef);
+  +const result = gridRowsDataRowIdToIdLookupSelector(apiRef);
+  ```
+
+  ```diff
+  -const result = gridRowTreeDepthSelector(apiRef);
+  +const result = gridRowMaximumTreeDepthSelector(apiRef);
+  ```
+
+  The format of the tree nodes (the element accessible in `params.node` or with the `apiRef.current.getRowNode` method) have changed.
+  You have a new `type` property, which can be useful, for example, to apply custom behavior on groups.
+  Here is an example of the old and new approach showing how to apply a custom value formatter in groups for the grouping column:
+
+  ```diff
+   <DataGridPremium 
+     groupingColDef={() => ({
+       valueFormatter: (params) => {
+         if (params.id == null) {
+           return params.value;
+         }
+
+         const rowNode = apiRef.current.getRowNode(params.id!)!;
+  -      if (rowNode.children?.length) {
+  +      if (rowNode.type === 'group') {
+           return `by ${rowNode.groupingKey ?? ''}`;
+         }
+
+         return params.value;
+       }
+     })}
+   />
+  ```
+
+- The `GridFeatureModeConstant` constant no longer exists (#6077) @DanailH
+
+  ```diff
+  -import { GridFeatureModeConstant } from '@mui/x-data-grid';
+  ```
+
+#### Changes
+
+- [DataGrid] Fix `GridPagination` props typing (#6238) @cherniavskii
+- [DataGrid] Fix `GridRow` not forwarding `ref` to the root element (#6274) @cherniavskii
+- [DataGrid] Fix `undefined` value being showed in filter button tooltip text (#6259) @cherniavskii
+- [DataGrid] Fix blank space when changing page with dynamic row height (#6049) @m4theushw
+- [DataGrid] New internal rows structure for v6 (#4927) @flaviendelangle
+- [DataGrid] Revert cell/row mode if `processRowUpdate` fails (#6185) @m4theushw
+- [DataGrid] Rework overlays layout (#5808) @cherniavskii
+- [DataGrid] Improve print support (#6273) @oliviertassinari
+- [DataGridPremium] Add missing `themeAugmentation` module (#6270) @cherniavskii
+
+### `@mui/x-date-pickers@v6.0.0-alpha.1` / `@mui/x-date-pickers-pro@v6.0.0-alpha.1`
+
+#### Breaking changes
+
+- [pickers] Do not support unparsed date formats anymore (#6170) @flaviendelangle
+
+  The `value` prop of the pickers now expects a parsed value.
+  Until now, it was possible to provide any format that your date management library was able to parse.
+  For instance, you could pass `value={new Date()}` when using `AdapterDayjs`.
+
+  This brought a lot of confusion so we decided to remove this behavior.
+  The format expected by the `value` prop is now the same as for any other prop holding a date.
+  Here is the syntax to initialize a date picker at the current date for each adapter:
+
+  ```tsx
+  // Date-fns
+  <DatePicker value={new Date()} />
+
+  // Dayjs
+  import dayjs from 'dayjs'
+  <DatePicker value={dayjs()} />
+
+  // Moment
+  import moment from 'moment'
+  <DatePicker value={moment()} />
+
+  // Luxon
+  import { DateTime } from 'luxon'
+  <DatePicker value={DateTime.now()} />
+  ```
+
+#### Changes
+
+- [DatePicker] Respect `minDate` and `maxDate` when opening a `DatePicker` or `DateTimePicker` (#6309) @alexfauquette
+- [DateTimePicker] Fix validation with `shouldDisableMonth` and `shouldDisableYear` (#6266) @flaviendelangle
+- [TimePicker] Add support for `disablePast` and `disableFuture` validation props (#6226) @LukasTy
+- [CalendarPicker] Prevent getting focus when `autoFocus=false` (#6304) @alexfauquette
+- [DateField] Extend moment adapter to support `expandFormat` and `formatTokenMap` (#6215) @alexfauquette
+- [pickers] Allow to control the selected sections (#6209, #6307) @flaviendelangle
+- [pickers] Do not loose the value of date sections not present in the format in the new field components (#6141) @flaviendelangle
+- [pickers] Do not support unparsed date formats anymore (#6170) @flaviendelangle
+- [pickers] Support slots on the `DateField` component  (#6048) @flaviendelangle
+- [pickers] Support Luxon v3 in `AdapterLuxon` (#6069) @alexfauquette
+- [pickers] New components `TimeField` and `DateTimeField` (#6312) @flaviendelangle
+- [pickers] Support basic mobile edition on new field components (#5958) @flaviendelangle
+
+### Docs
+
+- [docs] Fix issue in DataGrid/DataGridPro row styling demo (#6264) @MBilalShafi
+- [docs] Improve pickers Getting Started examples (#6292) @flaviendelangle
+- [docs] Pass model change callbacks in controlled grid editing demos (#6296) @cherniavskii
+- [docs] Update the CodeSandbox to use the `next` branch (#6275) @oliviertassinari
+
+### Core
+
+- [core] Fix typing error (#6291) @flaviendelangle
+- [core] Fix typo in the state updater of `useField` (#6311) @flaviendelangle
+- [core] Remove `GridFeatureModeConstant` (#6077) @DanailH
+- [core] Simplify testing architecture (#6043) @flaviendelangle
+- [test] Skip test in Chrome non-headless and Edge (#6318) @m4theushw
+
 ## 6.0.0-alpha.0
 
 _Sep 22, 2022_

package/DataGridPro/DataGridPro.js

@@ -437,7 +437,7 @@ DataGridProRaw.propTypes = {
   /**
    * Determines if a group should be expanded after its creation.
    * This prop takes priority over the `defaultGroupingExpansionDepth` prop.
-   * @param {GridRowTreeNodeConfig} node The node of the group to test.
+   * @param {GridGroupNode} node The node of the group to test.
    * @returns {boolean} A boolean indicating if the group is expanded.
    */
   isGroupExpandedByDefault: PropTypes.func,

package/DataGridPro/useDataGridProProps.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
-import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS, GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES, GridFeatureModeConstant } from '@mui/x-data-grid';
+import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS, GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES } from '@mui/x-data-grid';
 
 /**
  * The default values of `DataGridProPropsWithDefaultValue` to inject in the props of DataGridPro.
@@ -14,7 +14,7 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_D
   disableChildrenFiltering: false,
   disableChildrenSorting: false,
   rowReordering: false,
-  rowsLoadingMode: GridFeatureModeConstant.client,
+  rowsLoadingMode: 'client',
   getDetailPanelHeight: () => 500
 });
 export const useDataGridProProps = inProps => {

package/components/DataGridProVirtualScroller.js

@@ -4,7 +4,7 @@ const _excluded = ["className", "disableVirtualization"];
 import * as React from 'react';
 import { styled, alpha } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { useGridSelector, getDataGridUtilityClass, gridClasses, gridVisibleColumnFieldsSelector, gridRowsMetaSelector, useGridApiEventHandler } from '@mui/x-data-grid';
+import { useGridSelector, getDataGridUtilityClass, gridClasses, gridVisibleColumnFieldsSelector, gridRowsMetaSelector, useGridApiEventHandler, GridOverlays } from '@mui/x-data-grid';
 import { GridVirtualScroller, GridVirtualScrollerContent, GridVirtualScrollerRenderZone, useGridVirtualScroller, calculatePinnedRowsHeight } from '@mui/x-data-grid/internals';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -299,7 +299,7 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   }
 
   return /*#__PURE__*/_jsxs(GridVirtualScroller, _extends({}, getRootProps(other), {
-    children: [topPinnedRowsData.length > 0 ? /*#__PURE__*/_jsxs(VirtualScrollerPinnedRows, {
+    children: [/*#__PURE__*/_jsx(GridOverlays, {}), topPinnedRowsData.length > 0 ? /*#__PURE__*/_jsxs(VirtualScrollerPinnedRows, {
       className: classes.topPinnedRows,
       ownerState: {
         position: 'top'

package/components/GridRowReorderCell.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { gridRowTreeDepthSelector, gridSortModelSelector, useGridApiContext, useGridSelector, getDataGridUtilityClass, gridEditRowsStateSelector } from '@mui/x-data-grid';
+import { gridRowMaximumTreeDepthSelector, gridSortModelSelector, useGridApiContext, useGridSelector, getDataGridUtilityClass, gridEditRowsStateSelector } from '@mui/x-data-grid';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -19,12 +19,10 @@ const useUtilityClasses = ownerState => {
 };
 
 const GridRowReorderCell = params => {
-  var _params$rowNode$posit;
-
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
-  const treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
+  const treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
   const editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector); // eslint-disable-next-line no-underscore-dangle
 
   const cellValue = params.row.__reorder__ || params.id; // TODO: remove sortModel and treeDepth checks once row reorder is compatible
@@ -60,7 +58,7 @@ const GridRowReorderCell = params => {
     onDragEnd: publish('rowDragEnd')
   } : null;
 
-  if (((_params$rowNode$posit = params.rowNode.position) != null ? _params$rowNode$posit : 'body') !== 'body') {
+  if (params.rowNode.type === 'footer') {
     return null;
   }
 
@@ -77,7 +75,7 @@ const GridRowReorderCell = params => {
 
 export { GridRowReorderCell };
 export const renderRowReorderCell = params => {
-  if (params.rowNode.isPinned) {
+  if (params.rowNode.type === 'footer' || params.rowNode.type === 'pinnedRow') {
     return null;
   }
 

package/components/GridTreeDataGroupingCell.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { GridRenderCellParams } from '@mui/x-data-grid';
-interface GridTreeDataGroupingCellProps extends GridRenderCellParams {
+import { GridRenderCellParams, GridGroupNode } from '@mui/x-data-grid';
+interface GridTreeDataGroupingCellProps extends GridRenderCellParams<any, any, any, GridGroupNode> {
     hideDescendantCount?: boolean;
 }
 declare const GridTreeDataGroupingCell: {

package/hooks/features/detailPanel/useGridDetailPanel.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridSelector, useGridApiEventHandler, useGridApiMethod, gridRowIdsSelector } from '@mui/x-data-grid';
+import { useGridSelector, useGridApiEventHandler, useGridApiMethod, gridDataRowIdsSelector } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from './gridDetailPanelToggleColDef';
 import { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector, gridDetailPanelRawHeightCacheSelector } from './gridDetailPanelSelector';
@@ -22,7 +22,7 @@ function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeig
   // only call getDetailPanelContent when asked for an id
 
 
-  const rowIds = gridRowIdsSelector(apiRef);
+  const rowIds = gridDataRowIdsSelector(apiRef);
   const contentCache = rowIds.reduce((acc, id) => {
     const params = apiRef.current.getRowParams(id);
     acc[id] = getDetailPanelContent(params);

package/hooks/features/detailPanel/useGridDetailPanelCache.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridApiEventHandler, gridRowIdsSelector } from '@mui/x-data-grid';
+import { useGridApiEventHandler, gridDataRowIdsSelector } from '@mui/x-data-grid';
 
 function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeight, previousHeightCache) {
   if (typeof getDetailPanelContent !== 'function') {
@@ -9,7 +9,7 @@ function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeig
   // only call getDetailPanelContent when asked for an id
 
 
-  const rowIds = gridRowIdsSelector(apiRef);
+  const rowIds = gridDataRowIdsSelector(apiRef);
   const contentCache = rowIds.reduce((acc, id) => {
     const params = apiRef.current.getRowParams(id);
     acc[id] = getDetailPanelContent(params);

package/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useGridSelector, useGridApiEventHandler, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, gridRowsMetaSelector, GridFeatureModeConstant } from '@mui/x-data-grid';
+import { useGridSelector, useGridApiEventHandler, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, gridRowsMetaSelector } from '@mui/x-data-grid';
 import { useGridVisibleRows } from '@mui/x-data-grid/internals';
 
 /**
@@ -16,7 +16,7 @@ export const useGridInfiniteLoader = (apiRef, props) => {
   const handleRowsScrollEnd = React.useCallback(scrollPosition => {
     const dimensions = apiRef.current.getRootDimensions(); // Prevent the infite loading working in combination with lazy loading
 
-    if (!dimensions || props.rowsLoadingMode !== GridFeatureModeConstant.client) {
+    if (!dimensions || props.rowsLoadingMode !== 'client') {
       return;
     }
 

package/hooks/features/lazyLoader/useGridLazyLoader.js

@@ -1,8 +1,12 @@
 import * as React from 'react';
-import { useGridApiEventHandler, GridFeatureModeConstant, useGridSelector, gridSortModelSelector, gridFilterModelSelector, useGridApiOptionHandler } from '@mui/x-data-grid';
+import { useGridApiEventHandler, useGridSelector, gridSortModelSelector, gridFilterModelSelector, useGridApiOptionHandler } from '@mui/x-data-grid';
 import { useGridVisibleRows, getRenderableIndexes } from '@mui/x-data-grid/internals';
 
-function findSkeletonRowsSection(visibleRows, range) {
+function findSkeletonRowsSection({
+  apiRef,
+  visibleRows,
+  range
+}) {
   let {
     firstRowIndex,
     lastRowIndex
@@ -13,16 +17,19 @@ function findSkeletonRowsSection(visibleRows, range) {
   let isSkeletonSectionFound = false;
 
   while (!isSkeletonSectionFound && firstRowIndex < lastRowIndex) {
-    if (!visibleRowsSection[startIndex].model && !visibleRowsSection[endIndex].model) {
+    const isStartingWithASkeletonRow = apiRef.current.getRowNode(visibleRowsSection[startIndex].id).type === 'skeletonRow';
+    const isEndingWithASkeletonRow = apiRef.current.getRowNode(visibleRowsSection[endIndex].id).type === 'skeletonRow';
+
+    if (isStartingWithASkeletonRow && isEndingWithASkeletonRow) {
       isSkeletonSectionFound = true;
     }
 
-    if (visibleRowsSection[startIndex].model) {
+    if (!isStartingWithASkeletonRow) {
       startIndex += 1;
       firstRowIndex += 1;
     }
 
-    if (visibleRowsSection[endIndex].model) {
+    if (!isEndingWithASkeletonRow) {
       endIndex -= 1;
       lastRowIndex -= 1;
     }
@@ -43,7 +50,7 @@ function isLazyLoadingDisabled({
     return true;
   }
 
-  if (rowsLoadingMode !== GridFeatureModeConstant.server) {
+  if (rowsLoadingMode !== 'server') {
     return true;
   }
 
@@ -107,9 +114,13 @@ export const useGridLazyLoader = (apiRef, props) => {
     }
 
     if (sortModel.length === 0 && filterModel.items.length === 0) {
-      const skeletonRowsSection = findSkeletonRowsSection(visibleRows.rows, {
-        firstRowIndex: params.firstRowToRender,
-        lastRowIndex: params.lastRowToRender
+      const skeletonRowsSection = findSkeletonRowsSection({
+        apiRef,
+        visibleRows: visibleRows.rows,
+        range: {
+          firstRowIndex: params.firstRowToRender,
+          lastRowIndex: params.lastRowToRender
+        }
       });
 
       if (!skeletonRowsSection) {

package/hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 import { GridApiPro } from '../../../models/gridApiPro';
+import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 export declare const GRID_SKELETON_ROW_ROOT_ID = "auto-generated-skeleton-row-root";
 export declare const useGridLazyLoaderPreProcessors: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'rowCount' | 'rowsLoadingMode' | 'experimentalFeatures'>) => void;

package/hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
-import { GridFeatureModeConstant } from '@mui/x-data-grid';
+import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
 export const GRID_SKELETON_ROW_ROOT_ID = 'auto-generated-skeleton-row-root';
 
 const getSkeletonRowId = index => `${GRID_SKELETON_ROW_ROOT_ID}-${index}`;
@@ -13,19 +13,33 @@ export const useGridLazyLoaderPreProcessors = (apiRef, props) => {
     lazyLoading
   } = (_props$experimentalFe = props.experimentalFeatures) != null ? _props$experimentalFe : {};
   const addSkeletonRows = React.useCallback(groupingParams => {
-    if (!lazyLoading || props.rowsLoadingMode !== GridFeatureModeConstant.server || !props.rowCount || groupingParams.ids.length >= props.rowCount) {
+    const tree = _extends({}, groupingParams.tree);
+
+    const rootGroup = tree[GRID_ROOT_GROUP_ID];
+
+    if (!lazyLoading || props.rowsLoadingMode !== 'server' || !props.rowCount || rootGroup.children.length >= props.rowCount) {
       return groupingParams;
     }
 
-    const newRowsIds = [...groupingParams.ids];
+    const rootGroupChildren = [...rootGroup.children];
 
-    for (let i = 0; i < props.rowCount - groupingParams.ids.length; i += 1) {
+    for (let i = 0; i < props.rowCount - rootGroup.children.length; i += 1) {
       const skeletonId = getSkeletonRowId(i);
-      newRowsIds.push(skeletonId);
+      rootGroupChildren.push(skeletonId);
+      const skeletonRowNode = {
+        type: 'skeletonRow',
+        id: skeletonId,
+        parent: GRID_ROOT_GROUP_ID,
+        depth: 0
+      };
+      tree[skeletonId] = skeletonRowNode;
     }
 
+    tree[GRID_ROOT_GROUP_ID] = _extends({}, rootGroup, {
+      children: rootGroupChildren
+    });
     return _extends({}, groupingParams, {
-      ids: newRowsIds
+      tree
     });
   }, [props.rowCount, props.rowsLoadingMode, lazyLoading]);
   useGridRegisterPipeProcessor(apiRef, 'hydrateRows', addSkeletonRows);

package/hooks/features/rowPinning/gridRowPinningInterface.d.ts

@@ -1,4 +1,4 @@
-import { GridRowId, GridRowsLookup, GridRowsProp, GridValidRowModel } from '@mui/x-data-grid';
+import { GridRowId, GridRowIdToModelLookup, GridRowsProp, GridValidRowModel } from '@mui/x-data-grid';
 export interface GridPinnedRowsProp<R extends GridValidRowModel = GridValidRowModel> {
     top?: GridRowsProp<R>;
     bottom?: GridRowsProp<R>;
@@ -13,5 +13,5 @@ export interface GridRowPinningApi {
 export interface GridRowPinningInternalCache {
     topIds: GridRowId[];
     bottomIds: GridRowId[];
-    idLookup: GridRowsLookup;
+    idLookup: GridRowIdToModelLookup;
 }

package/hooks/features/rowPinning/useGridRowPinningPreProcessors.d.ts

@@ -1,34 +1,34 @@
 import * as React from 'react';
 import { GridHydrateRowsValue } from '@mui/x-data-grid/internals';
-import { GridRowEntry, GridRowId, GridRowModel } from '@mui/x-data-grid';
+import { GridRowId, GridRowModel } from '@mui/x-data-grid';
 import { GridApiPro } from '../../../models/gridApiPro';
 import { GridPinnedRowsProp } from './gridRowPinningInterface';
 declare type GridPinnedRowPosition = keyof GridPinnedRowsProp;
-export declare function addPinnedRow({ groupingParams, rowModel, rowId, position, apiRef, }: {
+export declare function addPinnedRow({ groupingParams, rowModel, rowId, position, apiRef, isAutoGenerated, }: {
     groupingParams: GridHydrateRowsValue;
-    rowModel: GridRowModel;
+    rowModel: GridRowModel | undefined;
     rowId: GridRowId;
     position: GridPinnedRowPosition;
     apiRef: React.MutableRefObject<GridApiPro>;
+    isAutoGenerated: boolean;
 }): {
-    idRowsLookup: {
+    dataRowIdToModelLookup: {
         [x: string]: import("@mui/x-data-grid").GridValidRowModel;
-        [x: number]: import("@mui/x-data-grid").GridValidRowModel;
+    };
+    dataRowIdToIdLookup: {
+        [x: string]: GridRowId;
     };
     tree: {
-        [x: string]: import("@mui/x-data-grid").GridRowTreeNodeConfig;
-        [x: number]: import("@mui/x-data-grid").GridRowTreeNodeConfig;
+        [x: string]: import("@mui/x-data-grid").GridTreeNode;
+        [x: number]: import("@mui/x-data-grid").GridTreeNode;
     };
-    additionalRowGroups: {
-        pinnedRows: {
-            top?: GridRowEntry<import("@mui/x-data-grid").GridValidRowModel>[] | undefined;
-            bottom?: GridRowEntry<import("@mui/x-data-grid").GridValidRowModel>[] | undefined;
-        };
+    treeDepths: {
+        [x: number]: number;
     };
-    groupingName: string;
-    treeDepth: number;
-    ids: GridRowId[];
-    idToIdLookup: Record<string, GridRowId>;
+    dataRowIds: GridRowId[];
+    additionalRowGroups?: {
+        pinnedRows?: import("@mui/x-data-grid/internals").GridPinnedRowsState | undefined;
+    } | undefined;
 };
 export declare const useGridRowPinningPreProcessors: (apiRef: React.MutableRefObject<GridApiPro>) => void;
 export {};