@mui/x-data-grid-pro 5.17.5 → 6.0.0-alpha.1

package/CHANGELOG.md

@@ -3,37 +3,315 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## 5.17.5
+## 6.0.0-alpha.1
 
 _Sep 29, 2022_
 
-We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
 
-- 🎁 Add theme augmentation module to DataGridPremium (#6316) @cherniavskii
-- 👀 Fix blank space when changing page with dynamic row height (#6320) @m4theushw
-- 📚 Improve controlled editing demo to make easier to reuse it (#6306) @cherniavskii
+- 🚀 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@v5.17.5` / `@mui/x-data-grid-pro@v5.17.5` / `@mui/x-data-grid-premium@v5.17.5`
+### `@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_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add a `localeText` prop to all pickers to customize the translations (#6212) @flaviendelangle
+- 🌍 Add Finnish (fi-FI) locale to the pickers (#6219) @PetroSilenius
+- 🌍 Add Persian (fa-IR) locale to the pickers (#6181) @fakhamatia
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-alpha.0` / `@mui/x-data-grid-pro@v6.0.0-alpha.0` / `@mui/x-data-grid-premium@v6.0.0-alpha.0`
+
+#### Breaking changes
+
+- The deprecated `hide` column property has been removed in favor of the `columnVisibilityModel` prop and initial state.
+
+  ```diff
+  <DataGrid
+    columns={[
+      field: 'id,
+  -   hide: true,
+    ]}
+  +  initialState={{
+  +    columns: {
+  +      columnVisibilityModel: { id: false },
+  +    }
+  +  }}
+  />
+  ```
+
+  You can find more information about this new API on our [documentation](https://next.mui.com/x/react-data-grid/column-visibility/).
+
+- The `GridEvents` enum is now a TypeScript type.
+
+  ```diff
+  - apiRef.current.subscribeEvent(GridEvents.rowClick', handleRowClick)
+  + apiRef.current.subscribeEvent('rowClick', handleRowClick)
+  ```
 
 #### Changes
 
-- [DataGrid] Fix `GridPagination` props typing (#6295) @cherniavskii
-- [DataGrid] Fix `GridRow` not forwarding `ref` to the root element (#6303) @cherniavskii
-- [DataGrid] Fix `undefined` value being showed in filter button tooltip text (#6271) @cherniavskii
-- [DataGrid] Fix blank space when changing page with dynamic row height (#6320) @m4theushw
-- [DataGrid] Revert cell/row mode if `processRowUpdate` fails (#6319) @m4theushw
-- [DataGridPremium] Add missing `themeAugmentation` module (#6316) @cherniavskii
+- [DataGrid] Do not publish `cellFocusOut` event if the row was removed (#6251) @cherniavskii
+- [DataGrid] Fix scroll anchoring with master details (#6054) @oliviertassinari
+- [DataGrid] Improve Polish (pl-PL) locale on the data grid (#6245) @grzegorz-bach
+- [DataGrid] Remove the `GridEvents` enum (#6003) @flaviendelangle
+- [DataGrid] Remove the deprecated `hide` column property (#5999) @flaviendelangle
+
+### `@mui/x-date-pickers@v6.0.0-alpha.0` / `@mui/x-date-pickers-pro@v6.0.0-alpha.0`
+
+#### Breaking changes
+
+- All the deprecated props that allowed you to set the text displayed in the pickers have been removed.
+
+  You can now use the `localText` prop available on all picker components:
+
+  | Removed prop                 | Property in the new `localText` prop                                              |
+  |------------------------------|-----------------------------------------------------------------------------------|
+  | `endText`                    | `end`                                                                             |
+  | `getClockLabelText`          | `clockLabelText`                                                                  |
+  | `getHoursClockNumberText`    | `hoursClockNumberText`                                                            |
+  | `getMinutesClockNumberText`  | `minutesClockNumberText`                                                          |
+  | `getSecondsClockNumberText`  | `secondsClockNumberText`                                                          |
+  | `getViewSwitchingButtonText` | `calendarViewSwitchingButtonAriaLabel`                                            |
+  | `leftArrowButtonText`        | `openPreviousView` (or `previousMonth` when the button changes the visible month) |
+  | `rightArrowButtonText`       | `openNextView` (or `nextMonth` when the button changes the visible month)         |
+  | `startText`                  | `start`                                                                           |
+
+  For instance if you want to replace the `startText` / `endText`
+
+  ```diff
+  <DateRangePicker
+  -  startText="From"
+  -  endText="To"
+  +  localeText={{
+  +    start: 'From',
+  +    end: 'To',
+  +  }}
+  />
+  ```
+
+You can find more information about the new api, including how to set those translations on all your components at once in the [documentation](https://next.mui.com/x/react-date-pickers/localization/)
+
+- The component slots `LeftArrowButton` and `RightArrowButton` have been renamed `PreviousIconButton` and `NextIconButton` to better describe there usage:
+
+  ```diff
+  <DatePicker 
+    components={{
+  -   LeftArrowButton: CustomButton,  
+  +   PreviousIconButton: CustomButton,
+
+  -   RightArrowButton: CustomButton,
+  +   NextIconButton: CustomButton,
+    }}
+
+    componentsProps={{
+  -   leftArrowButton: {},  
+  +   previousIconButton: {},
+
+  -   rightArrowButton: {},
+  +   nextIconButton: {},
+    }}
+  />
+  ```
+
+- The `date` prop has been renamed `value` on  `MonthPicker` / `YearPicker`, `ClockPicker` and `CalendarPicker`.
+
+  ```diff
+  - <MonthPicker date={dayjs()} onChange={handleMonthChange} />
+  + <MonthPicker value={dayjs()} onChange={handleMonthChange} />
+
+  - <YearPicker date={dayjs()} onChange={handleYearChange} />
+  + <YearPicker value={dayjs()} onChange={handleYearChange} />
+
+  - <ClockPicker date={dayjs()} onChange={handleTimeChange} />
+  + <ClockPicker value={dayjs()} onChange={handleTimeChange} />
+
+  - <CalendarPicker date={dayjs()} onChange={handleDateChange} />
+  + <CalendarPicker value={dayjs()} onChange={handleDateChange} />
+  ```
+
+#### Changes
+
+- [CalendarPicker] Don't move to closest enabled date when `props.date` contains a disabled date (#6146) @flaviendelangle
+- [DateRangePicker] Switch to new month when changing the value from the outside (#6166) @flaviendelangle
+- [pickers] Add a `localeText` prop to all pickers to customize the translations (#6212) @flaviendelangle
+- [pickers] Add Finnish (fi-FI) locale to the pickers (#6219) (#6230) @PetroSilenius
+- [pickers] Add Persian (fa-IR) locale to the pickers (#6181) @fakhamatia
+- [pickers] Allow nested `LocalizationProvider` (#6011) @flaviendelangle
+- [pickers] Clean slots on `PickersArrowSwitcher` component (#5890) @flaviendelangle
+- [pickers] Fix invalid date error when decreasing `DateField` day (#6071) @alexfauquette
+- [pickers] Fix mobile section selection (#6207) @oliviertassinari
+- [pickers] Fix usage with Typescript 4.8 (#6229) @flaviendelangle
+- [pickers] Improve error message when no adapter context is found (#6211) @flaviendelangle
+- [pickers] Remove `valueStr` from the field state (#6142) @flaviendelangle
+- [pickers] Remove remaining deprecated locale props (#6233) @flaviendelangle
+- [pickers] Rename the `date` prop `value` on `MonthPicker` / `YearPicker`, `ClockPicker` and `CalendarPicker` (#6128) @flaviendelangle
+- [pickers] Rename the `onClose` prop of  `PickersPopper` `onDismiss` to simplify typing (#6155) @flaviendelangle
+- [pickers] Support the `sx` prop on all public component with a root HTML elements (#5944) @flaviendelangle
+- [pickers] Unify `PickersMonth` and `PickersYear` behaviors (#6034) @flaviendelangle
+- [pickers] Use `shouldDisableMonth` and `shouldDisableYear` for date validation (#6066) @flaviendelangle
+- [YearPicker] Scroll to the current year even with `autoFocus=false` (#6224) @alexfauquette
 
 ### Docs
 
-- [docs] Pass model change callbacks in controlled grid editing demos (#6306) @cherniavskii
+- [docs] Add automatic vale check (#5429) @alexfauquette
+- [docs] Add Pro logo in "column ordering" link (#6127) @alexfauquette
+- [docs] Fix 301 link (#6239) @oliviertassinari
+- [docs] Fix broken link (#6163) @alexfauquette
+- [docs] Fix broken links (#6101) @alexfauquette
+- [docs] Fix demonstration date to avoid hydration errors (#6032) @alexfauquette
+- [docs] Fix hidden popper in restore state example (#6191) @heyfirst
+- [docs] Fix invalid links causing 404 & 301 errors (#6105) @oliviertassinari
+- [docs] Fix npm repository url in the pickers `package.json` (#6172) @oliviertassinari
+- [docs] Fix typo in linked issue (#6162) @flaviendelangle
+- [docs] Import `generateUtilityClass` from `@mui/utils` (#6216) @michaldudak
+- [docs] Improve Upgrade plan docs (#6018) @oliviertassinari
+- [docs] Link the OpenSSF Best Practices card (#6171) @oliviertassinari
 
 ### Core
 
-- [core] Reduce the amount of updated screenshots reported by Argos (#6310) @cherniavskii
+- [core] Add `v5.17.3` changelog to next branch (#6250) @flaviendelangle
+- [core] Add link to the security page on the `README` (#6073) @oliviertassinari
+- [core] Fix scroll restoration in the docs (#5938) @oliviertassinari
+- [core] Remove the Storybook (#6099) @flaviendelangle
+- [core] Tag release as `next` in NPM (#6256) @m4theushw
+- [core] Update monorepo (#6180) @flaviendelangle
+- [core] Use the `next` branch for Prettier (#6097) @flaviendelangle
+- [core] Use the official repository for `@mui/monorepo` instead of a fork (#6189) @oliviertassinari
+- [test] Fix logic to skip column pinning tests (#6133) @m4theushw
+- [test] Hide the date on the print regression test (#6120) @flaviendelangle
+- [test] Skip tests for column pinning and dynamic row height (#5997) @m4theushw
+- [website] Improve security header @oliviertassinari
 
-## 5.17.4
+## v5.17.4
 
 _Sep 22, 2022_
 
@@ -165,7 +443,7 @@ We'd like to offer a big thanks to the 3 contributors who made this release poss
 
 _Sep 2, 2022_
 
-🎉 We are excited to finally introduce a stable release (v5.0.0) for the `@mui/x-date-pickers` and `@mui/x-date-pickers-pro` packages!
+🎉 We are excited to finally introduce a stable release (v5.0.0) for the `@mui/x-date-pickers` and  `@mui/x-date-pickers-pro` packages!
 
 If you are still using picker components from the `lab`, take a look at the [migration guide](https://mui.com/x/react-date-pickers/migration-lab/).
 
@@ -1470,7 +1748,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 - [DataGrid] Stop checkbox ripple on blur (#3835) @m4theushw
 - [DataGrid] Stop calling `onRowClick` when clicking in cells with interactive elements (#3929) @m4theushw
 - [DataGrid] Use only `headerName` when available to search column (#3959) @pkratz
-- [DataGrid] Use the bundling scripts as the packages published by the [https://github.com/mui/material-ui](material-ui) repository (#3965) @flaviendelangle
+- [DataGrid] Use the bundling scripts as the packages published by the [material-ui](https://github.com/mui/material-ui) repository (#3965) @flaviendelangle
 - [DataGridPro] Add `unstable_setRowHeight` method to `apiRef` (#3751) @cherniavskii
 - [DataGridPro] Always export the `pageSize` and `page` when it has been initialized or is being controlled (#3908) @flaviendelangle
 - [DataGridPro] Disable export for detail panel column (#4057) @gustavhagland
@@ -4115,7 +4393,7 @@ Big thanks to the 7 contributors who made this release possible. Here are some h
 
 - 💄 Release the cell editing feature (#1287) @dtassone
 
-  This is the first release of the Cell editing feature. You can find the documentation [following this link](https://mui.com/x/react-data-grid/editing/#cell-editing). We have spent the last three months working on it.
+  This is the first release of the Cell editing feature. You can find the documentation [following this link](https://mui.com/x/react-data-grid/editing/). We have spent the last three months working on it.
 
   ![cell edit](https://user-images.githubusercontent.com/3165635/115632215-87994700-a307-11eb-91d9-9f5537df0911.gif)
 
@@ -4725,7 +5003,7 @@ _Dec 9, 2020_
 
 Big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
 
-- 🔍 Add a new data grid [density selector](https://mui.com/x/react-data-grid/rendering/#density) feature (#606) @DanailH.
+- 🔍 Add a new data grid [density selector](https://mui.com/x/react-data-grid/accessibility/#density) feature (#606) @DanailH.
 - 💄 A first iteration on the data grid's toolbar.
 - 🧪 Continue the iteration on the data grid filtering feature, soon to be released @dtassone.
 

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,
@@ -615,16 +615,6 @@ DataGridProRaw.propTypes = {
    */
   onColumnResize: PropTypes.func,
 
-  /**
-   * Callback fired when a column visibility changes.
-   * Only works when no `columnVisibilityModel` is provided and if we change the visibility of a single column at a time.
-   * @param {GridColumnVisibilityChangeParams} params With all properties from [[GridColumnVisibilityChangeParams]].
-   * @param {MuiEvent<{}>} event The event object.
-   * @param {GridCallbackDetails} details Additional details for this callback.
-   * @deprecated Use `onColumnVisibilityModelChange` instead.
-   */
-  onColumnVisibilityChange: PropTypes.func,
-
   /**
    * Callback fired when the column visibility model changes.
    * @param {GridColumnVisibilityModel} model The new model.
@@ -876,8 +866,8 @@ DataGridProRaw.propTypes = {
    * Rows data to pin on top or bottom.
    */
   pinnedRows: PropTypes.shape({
-    bottom: PropTypes.array,
-    top: PropTypes.array
+    bottom: PropTypes.arrayOf(PropTypes.object),
+    top: PropTypes.arrayOf(PropTypes.object)
   }),
 
   /**
@@ -922,7 +912,7 @@ DataGridProRaw.propTypes = {
   /**
    * Set of rows of type [[GridRowsProp]].
    */
-  rows: PropTypes.array.isRequired,
+  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
 
   /**
    * Loading rows can be processed on the server or client-side.

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

@@ -116,7 +116,7 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

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/components/GridTreeDataGroupingCell.js

@@ -151,7 +151,7 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

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;