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

package/CHANGELOG.md

@@ -3,6 +3,193 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.8.0
+<!-- generated comparing v5.7.0..master -->
+_Apr 4, 2022_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Expose new methods to save and restore the grid state (#4028) @flaviendelangle
+
+  The different methods to save and restore the data-grid state are now [documented](mui.com/components/data-grid/state/#save-and-restore-the-state)
+
+- ⌚️ Move date and time picker components from the lab (#3451) @flaviendelangle
+
+  Date and time picker components have been moved to the MUI-X repo.
+  They are now accessible in their own packages: `@mui/x-date-pickers` and `@mui/x-date-pickers-pro`.
+  For more information, you can read the [blog article](https://mui.com/blog/lab-pickers-to-mui-x) and the [migration guide](https://mui.com/x/react-date-pickers/migration-lab)
+
+- 📝 Add `onProcessRowUpdateError` prop to simplify error management in edit mode (#4267) @m4theushw
+- ✨ Add generic typing to `GridColDef` and derived interfaces (#4064) @flaviendelangle
+
+  You can now strongly type all the objects related to the row and the cell values.
+  Here is an example, you can find out more in the description of #4064.
+  
+  ```tsx
+  const rows: Movie[] = [];
+
+  return (
+    <DataGrid 
+      rows={rows}
+      columns={[{ 
+        // typeof params.row => Movie (R)
+        valueGetter: params => params.row.year, 
+      }]}
+    />
+  );
+  ```
+
+### `@mui/x-data-grid@v5.8.0` / `@mui/x-data-grid-pro@v5.8.0`
+
+#### Changes
+
+- [DataGrid] Add `onProcessRowUpdateError` prop (#4267) @m4theushw
+- [DataGrid] Add generic typing to `GridColDef` and derived interfaces (#4064) @flaviendelangle
+- [DataGrid] Add missing classes on `gridClasses` and `gridPanelClasses` (#4273) @flaviendelangle
+- [DataGrid] Add `onPreferencePanelClose`/`onPreferencePanelOpen` props (#4265) @kyeongsoosoo
+- [DataGrid] Add slot for filter icon button (#4276) @m4theushw
+- [DataGrid] Add the documentation of the portable state (#4028) @flaviendelangle
+- [DataGrid] Allow to use keyboard navigation even with no rows (#4302) @alexfauquette
+- [DataGrid] Fix inconsistency in the border of the last column (#4224) @alexfauquette
+- [DataGrid] Fix overlay blocking scrollbar when rows is empty (#4281) @m4theushw
+- [DataGrid] Improve selection with keyboard (#4157) @flaviendelangle
+- [DataGrid] Scroll to the top of the page when changing page (#4272) @flaviendelangle
+- [l10n] Improve Danish (da-DK) locale (#4271) @simplenotezy
+
+### `@mui/x-date-pickers@v5.0.0-alpha.0` / `@mui/x-date-pickers-pro@v5.0.0-alpha.0`
+
+#### Changes
+
+- [DatePicker] Import date-picker components from the lab (#3451) @flaviendelangle
+
+### Docs
+
+- [docs] Create an home page for "Advanced Components" (#4298) @flaviendelangle
+- [docs] Update installation docs (#4259) @cherniavskii
+- [docs] New page for the migration of date and time pickers from the lab (#4327) @flaviendelangle
+
+### Core
+
+- [core] Fix typo in issue template @oliviertassinari
+- [core] Move last variables outside of the models folder (#4303) @flaviendelangle
+- [core] Remove dead code (#4283) @oliviertassinari
+- [core] Rename the "pre-processing" concept "pipe-processing" (#4261) @flaviendelangle
+- [core] Reuse previous state when updating the columns prop (#4229) @m4theushw
+- [core] Fix Argos flakyness for pickers tests (#4312) @flaviendelangle
+
+## 5.7.0
+
+_Mar 24, 2022_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- ✏ Add a new editing API with better support for server-side persistence and validation (#3963, #4060) @m4theushw
+
+  The new API is stable, but to avoid any breaking changes or conflicts with the old API, you must add the following flag to access it:
+
+  ```tsx
+  <DataGrid experimentalFeatures={{ newEditingApi: true }} />
+  ```
+
+  ⚠ Users relying on the old API (legacy) don't need to worry as it will continue to work until v6.
+
+  The new API also features brand new documentation with more useful demos and guides explaining how to create custom edit components.
+  Visit the new [documentation](https://mui.com/components/data-grid/editing/) for more information.
+
+- 📚 Documentation improvements
+- 🐞 Bug and typo fixes
+
+### `@mui/x-data-grid@v5.7.0` / `@mui/x-data-grid-pro@v5.7.0`
+
+#### Changes
+
+- [DataGrid] Add column order and dimensions to the portable state (#3816) @flaviendelangle
+- [DataGrid] Add new editing API (#3963) @m4theushw
+- [DataGrid] Allow to customize `ColumnsPanel` with `componentsProps` prop (#4207) @alexfauquette
+- [DataGrid] Do not unselect row when <kbd>Shift</kbd> + click on the last selected row of a range (#4196) @flaviendelangle
+- [DataGrid] Fix `showCellRightBorder` not working in the last row (#4140) @cherniavskii
+- [DataGrid] Fix error overlay not visible when `autoHeight` is enabled (#4110) @cherniavskii
+- [DataGrid] Fix white blank when scrolling (#4158) @alexfauquette
+- [DataGrid] Adjust type of the `description` prop in `GridColumnHeaderTitle` (#4247) @baahrens
+- [DataGrid] Fix focus after stopping row edit mode (#4252) @m4theushw
+- [DataGridPro] Fix pinned columns edge overflow with custom `borderRadius` (#4188) @socramm9
+- [DataGridPro] Fix tab switching order with pinned columns and `editMode="row"` (#4198) @cherniavskii
+- [l10n] Improve Persian (fa-IR) locale (#4227) @SaeedZhiany
+- [l10n] Improve Polish (pl-PL) locale (#4153) @pbmchc
+- [l10n] Improve Arabic (ar-SD) locale (#4212) @shadigaafar
+- [l10n] Improve Korean (ko-KR) locale (#4245) @kyeongsoosoo
+
+### Docs
+
+- [docs] Clean demo (#4073) @alexfauquette
+- [docs] Delete restore state demos (#4220) @flaviendelangle
+- [docs] Document Print export `X-Frame-Options` limitation (#4222) @DanailH
+- [docs] Add docs for the new editing API (#4060) @m4theushw
+- [docs] Explain how to use `printOptions.pageStyle` (#4138) @alexfauquette
+- [docs] Fix 301 links (#4165) @oliviertassinari
+- [docs] Fix 404 API links (#4164) @oliviertassinari
+- [docs] Fix broken anchor links (#4162) @alexfauquette
+- [docs] Remove useless `apiRef` from demos (#4221) @flaviendelangle
+- [docs] Sync the headers with core (#4195) @oliviertassinari
+
+### Core
+
+- [core] Add CLI to decode license key (#4126) @flaviendelangle
+- [core] Fix Lerna package change detection (#4202) @oliviertassinari
+- [core] Implement strategy pattern for pre-processors (#4030) @flaviendelangle
+- [core] Keep same reference to the column visibility model if no column has changed (#4154) @m4theushw
+- [core] Prepare `@mui/x-license-pro` for date pickers (#4123) @flaviendelangle
+- [core] Remove datagen from `@mui/x-data-grid-generator` bundle (#4163) @m4theushw
+- [core] Remove lodash `isDeepEqual` (#4159) @flaviendelangle
+- [core] Use a pipe processor for `GridPreferencePanel` children (#4216) @flaviendelangle
+- [core] Add markdown documentation for contributors (#3447) @alexfauquette
+- [test] Add regression test for `showCellRightBorder` (#4191) @cherniavskii
+- [test] Mock `getComputedStyle` to speed up unit tests (#4142) @m4theushw
+- [test] Upgrade CircleCI convenience image (#4143) @m4theushw
+
+## 5.6.1
+
+_Mar 10, 2022_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Allow to add margins or borders between rows (#3848) @m4theushw
+
+  ```tsx
+  <DataGrid getRowSpacing={() => ({ top: 10, bottom: 10 })} />
+  ```
+
+  Check the [documentation](https://mui.com/components/data-grid/rows/#row-spacing) for more information.
+
+### `@mui/x-data-grid@v5.6.1` / `@mui/x-data-grid-pro@v5.6.1`
+
+#### Changes
+
+- [DataGrid] Display column's filter icon if a filter is applied (#4120) @DanailH
+- [DataGrid] Do not loop through rows to compute top level rows count when the tree is flat (#4081) @flaviendelangle
+- [DataGrid] Rename API method (#4148) @m4theushw
+- [DataGrid] Support extending built-in column types (#4114) @cherniavskii
+- [DataGridPro] Re-export the components removed by mistake during bundle split (#4134) @flaviendelangle
+
+### Docs
+
+- [docs] Fix links to prevent duplicate search result (#4130) @siriwatknp
+- [docs] Fix outdated links to `localeTextConstants.ts` (#4080) @patilvishal755
+- [docs] Neglect e2e tests related to search (#4118) @siriwatknp
+- [docs] Use regex instead of specific url in e2e-website-tests (#4121) @siriwatknp
+
+### Core
+
+- [core] Enforce `noImplicitAny` (#4084) @cherniavskii
+- [core] Improve the Pro support issue template (#4082) @oliviertassinari
+- [core] Initialize remaining states before feature hooks (#4036) @m4theushw
+- [core] Merge `page` and `pageSize` state initializer into a single `pagination` state initializer (#4087) @flaviendelangle
+- [core] Prepare `yarn docs:api:build` scripts for multi packages support (#4111) @flaviendelangle
+- [core] Upgrade `@mui/monorepo` (#4149) @cherniavskii
+- [core] Use `buildWarning` and `wrapWithWarningOnCall` for deprecated methods and wrong usages (#4056) @flaviendelangle
+- [test] Make focus state out-of-sync warning opt-in (#4129) @m4theushw
+- [test] Only test custom input keyboard event in edit mode (#4075) @alexfauquette
+
 ## 5.6.0
 
 _Mar 4, 2022_

package/DataGridPro/DataGridPro.d.ts

@@ -1,3 +1,9 @@
 import * as React from 'react';
+import { GridValidRowModel } from '@mui/x-data-grid';
 import { DataGridProProps } from '../models';
-export declare const DataGridPro: React.MemoExoticComponent<React.ForwardRefExoticComponent<DataGridProProps & React.RefAttributes<HTMLDivElement>>>;
+interface DataGridProComponent {
+    <R extends GridValidRowModel = any>(props: DataGridProProps<R> & React.RefAttributes<HTMLDivElement>): JSX.Element;
+    propTypes?: any;
+}
+export declare const DataGridPro: DataGridProComponent;
+export {};

package/DataGridPro/DataGridPro.js

@@ -1,28 +1,20 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { LicenseInfo } from '@mui/x-license-pro';
-import { chainPropTypes, ponyfillGlobal } from '@mui/utils';
+import { useLicenseVerifier, Watermark } from '@mui/x-license-pro';
+import { chainPropTypes } from '@mui/utils';
 import { GridBody, GridErrorHandler, GridFooterPlaceholder, GridHeaderPlaceholder, GridRoot, GridContextProvider } from '@mui/x-data-grid';
 import { useDataGridProComponent } from './useDataGridProComponent';
-import { Watermark } from '../components/Watermark';
 import { useDataGridProProps } from './useDataGridProProps';
 import { DataGridProVirtualScroller } from '../components/DataGridProVirtualScroller';
-import { DataGridProColumnHeaders } from '../components/DataGridProColumnHeaders'; // This is the package release date. Each package version should update this const
-// automatically when a new version is published on npm.
-
+import { DataGridProColumnHeaders } from '../components/DataGridProColumnHeaders';
+import { getReleaseInfo } from '../utils/releaseInfo';
 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
-
-if (process.env.NODE_ENV !== 'production' && RELEASE_INFO === '__RELEASE' + '_INFO__') {
-  // eslint-disable-next-line no-underscore-dangle
-  RELEASE_INFO = ponyfillGlobal.__MUI_RELEASE_INFO__;
-}
-
-LicenseInfo.setReleaseInfo(RELEASE_INFO);
+const releaseInfo = getReleaseInfo();
 const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProps, ref) {
   const props = useDataGridProProps(inProps);
   const apiRef = useDataGridProComponent(props.apiRef, props);
+  useLicenseVerifier('x-data-grid-pro', releaseInfo);
   return /*#__PURE__*/_jsx(GridContextProvider, {
     apiRef: apiRef,
     props: props,
@@ -35,7 +27,10 @@ const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProp
         children: [/*#__PURE__*/_jsx(GridHeaderPlaceholder, {}), /*#__PURE__*/_jsx(GridBody, {
           ColumnHeadersComponent: DataGridProColumnHeaders,
           VirtualScrollerComponent: DataGridProVirtualScroller,
-          children: /*#__PURE__*/_jsx(Watermark, {})
+          children: /*#__PURE__*/_jsx(Watermark, {
+            packageName: "x-data-grid-pro",
+            releaseInfo: releaseInfo
+          })
         }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
       })
     })
@@ -274,8 +269,10 @@ DataGridProRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: PropTypes.shape({
+    newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
-    rowGrouping: PropTypes.bool
+    rowGrouping: PropTypes.bool,
+    warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
 
   /**
@@ -328,7 +325,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,11 +342,19 @@ 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"].
    * Note that all paths must contain at least one element.
-   * @param {GridRowModel} row The row from which we want the path.
+   * @template R
+   * @param {R} row The row from which we want the path.
    * @returns {string[]} The path to the row.
    */
   getTreeDataPath: PropTypes.func,
@@ -432,7 +437,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,
 
@@ -660,6 +665,28 @@ DataGridProRaw.propTypes = {
    */
   onPinnedColumnsChange: PropTypes.func,
 
+  /**
+   * Callback fired when the preferences panel is closed.
+   * @param {GridPreferencePanelParams} params With all properties from [[GridPreferencePanelParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onPreferencePanelClose: PropTypes.func,
+
+  /**
+   * Callback fired when the preferences panel is opened.
+   * @param {GridPreferencePanelParams} params With all properties from [[GridPreferencePanelParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onPreferencePanelOpen: PropTypes.func,
+
+  /**
+   * Callback called when `processRowUpdate` throws an error or rejects.
+   * @param {any} error The error thrown.
+   */
+  onProcessRowUpdateError: PropTypes.func,
+
   /**
    * Callback fired when the grid is resized.
    * @param {ElementSize} containerSize With all properties from [[ElementSize]].
@@ -779,6 +806,16 @@ DataGridProRaw.propTypes = {
     right: PropTypes.arrayOf(PropTypes.string)
   }),
 
+  /**
+   * Callback called before updating a row with new values in the row and cell editing.
+   * Only applied if `props.experimentalFeatures.newEditingApi: true`.
+   * @template R
+   * @param {R} newRow Row object with the new values.
+   * @param {R} oldRow Row object with the old values.
+   * @returns {Promise<R> | R} The final values to update the row.
+   */
+  processRowUpdate: PropTypes.func,
+
   /**
    * Number of extra rows to be rendered before/after the visible slice.
    * @default 3
@@ -812,7 +849,13 @@ DataGridProRaw.propTypes = {
   /**
    * Set of rows of type [[GridRowsProp]].
    */
-  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
+  rows: PropTypes.array.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.

package/DataGridPro/useDataGridProComponent.js

@@ -1,18 +1,20 @@
-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, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing_new, useGridEditing_old, editingStateInitializer_old, editingStateInitializer_new, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, 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) => {
+  var _props$experimentalFe, _props$experimentalFe2;
+
   const apiRef = useGridInitialization(inputApiRef, props);
   /**
    * Register all pre-processors called during state initialization here.
@@ -21,25 +23,35 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridSelectionPreProcessors(apiRef, props);
   useGridRowGroupingPreProcessors(apiRef, props);
   useGridTreeDataPreProcessors(apiRef, props);
-  useGridDetailPanelPreProcessors(apiRef, props);
-  useGridColumnPinningPreProcessors(apiRef, props); // Must be the last because it changes the order of the columns.
+  useGridDetailPanelPreProcessors(apiRef, props); // The column pinning `hydrateColumns` pre-processor must be after every other `hydrateColumns` pre-processors
+  // Because it changes the order of the columns.
 
+  useGridColumnPinningPreProcessors(apiRef, props);
+  useGridRowsPreProcessors(apiRef);
   /**
    * Register all state initializers here.
    */
 
-  useGridInitializeState(filterStateInitializer, apiRef, props);
-  useGridInitializeState(pageSizeStateInitializer, apiRef, props);
-  useGridInitializeState(pageStateInitializer, apiRef, props);
-  useGridInitializeState(sortingStateInitializer, apiRef, props);
-  useGridInitializeState(columnPinningStateInitializer, apiRef, props);
   useGridInitializeState(rowGroupingStateInitializer, apiRef, props);
+  useGridInitializeState(selectionStateInitializer, apiRef, props);
+  useGridInitializeState(detailPanelStateInitializer, apiRef, props);
+  useGridInitializeState(columnPinningStateInitializer, apiRef, props);
   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((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.newEditingApi ? editingStateInitializer_new : editingStateInitializer_old, 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);
+  useGridRowGrouping(apiRef, props);
+  useGridTreeData(apiRef);
+  useGridKeyboardNavigation(apiRef, props);
   useGridSelection(apiRef, props);
   useGridDetailPanel(apiRef, props);
   useGridColumnPinning(apiRef, props);
@@ -47,10 +59,11 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridRows(apiRef, props);
   useGridParamsApi(apiRef);
   useGridDetailPanelCache(apiRef, props);
+  const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
   useGridSorting(apiRef, props);
-  useGridPreferencesPanel(apiRef, props);
+  useGridPreferencesPanel(apiRef);
   useGridFilter(apiRef, props);
   useGridDensity(apiRef, props);
   useGridColumnReorder(apiRef, props);
@@ -60,8 +73,6 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridScroll(apiRef, props);
   useGridInfiniteLoader(apiRef, props);
   useGridColumnMenu(apiRef);
-  useGridKeyboard(apiRef);
-  useGridKeyboardNavigation(apiRef, props);
   useGridCsvExport(apiRef);
   useGridPrintExport(apiRef, props);
   useGridClipboard(apiRef);

package/DataGridPro/useDataGridProProps.d.ts

@@ -1,6 +1,7 @@
+import { GridValidRowModel } from '@mui/x-data-grid';
 import { DataGridProProps, DataGridProProcessedProps, DataGridProPropsWithDefaultValue } from '../models/dataGridProProps';
 /**
  * The default values of `DataGridProPropsWithDefaultValue` to inject in the props of DataGridPro.
  */
 export declare const DATA_GRID_PRO_PROPS_DEFAULT_VALUES: DataGridProPropsWithDefaultValue;
-export declare const useDataGridProProps: (inProps: DataGridProProps) => DataGridProProcessedProps;
+export declare const useDataGridProProps: <R extends GridValidRowModel>(inProps: DataGridProProps<R>) => DataGridProProcessedProps<R>;

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

@@ -136,7 +136,15 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
       }, {
         disableReorder: true
       })
-    }), rightRenderContext && /*#__PURE__*/_jsx(GridColumnHeadersPinnedColumnHeaders, {
+    }), /*#__PURE__*/_jsx(GridColumnHeadersInner, _extends({
+      isDragging: isDragging
+    }, getInnerProps(), {
+      children: getColumns({
+        renderContext,
+        minFirstColumn: leftPinnedColumns.length,
+        maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
+      })
+    })), rightRenderContext && /*#__PURE__*/_jsx(GridColumnHeadersPinnedColumnHeaders, {
       ownerState: {
         side: GridPinnedPosition.right
       },
@@ -152,14 +160,6 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
         disableReorder: true,
         separatorSide: GridColumnHeaderSeparatorSides.Left
       })
-    }), /*#__PURE__*/_jsx(GridColumnHeadersInner, _extends({
-      isDragging: isDragging
-    }, getInnerProps(), {
-      children: getColumns({
-        renderContext,
-        minFirstColumn: leftPinnedColumns.length,
-        maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
-      })
-    }))]
+    })]
   }));
 });

package/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';
@@ -115,7 +115,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);
@@ -191,18 +190,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 = [];
@@ -218,12 +205,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 == null ? void 0 : sizes.spacingTop) || 0;
+        const top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(id) + spacingTop;
         panels.push( /*#__PURE__*/_jsx(VirtualScrollerDetailPanel, {
           style: {
             top,
@@ -254,7 +243,11 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           maxLastColumn: leftRenderContext.lastColumnIndex,
           availableSpace: 0
         })
-      }), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
+      }), /*#__PURE__*/_jsx(GridVirtualScrollerRenderZone, _extends({}, getRenderZoneProps(), {
+        children: getRows({
+          renderContext
+        })
+      })), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         ref: rightColumns,
         ownerState: {
           side: GridPinnedPosition.right
@@ -267,11 +260,7 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           maxLastColumn: rightRenderContext.lastColumnIndex,
           availableSpace: 0
         })
-      }), /*#__PURE__*/_jsx(GridVirtualScrollerRenderZone, _extends({}, getRenderZoneProps(), {
-        children: getRows({
-          renderContext
-        })
-      })), detailPanels.length > 0 && /*#__PURE__*/_jsx(VirtualScrollerDetailPanels, {
+      }), detailPanels.length > 0 && /*#__PURE__*/_jsx(VirtualScrollerDetailPanels, {
         className: classes.detailPanels,
         children: detailPanels
       })]

package/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.
@@ -81,7 +82,7 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
    * Get the cell value of a row and field.
    * @param {GridRowId} id The row id.
    * @param {string} field The field.
-   * @returns {GridCellValue} The cell value.
+   * @returns {any} The cell value.
    * @deprecated Use `params.row` to directly access the fields you want instead.
    */
   getValue: PropTypes.func.isRequired,
@@ -104,7 +105,7 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.any.isRequired,
+  row: PropTypes.object.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/components/GridGroupingCriteriaCell.d.ts

@@ -3,8 +3,5 @@ import { GridRenderCellParams } from '@mui/x-data-grid';
 interface GridGroupingCriteriaCellProps extends GridRenderCellParams {
     hideDescendantCount?: boolean;
 }
-declare const GridGroupingCriteriaCell: {
-    (props: GridGroupingCriteriaCellProps): JSX.Element;
-    propTypes: any;
-};
-export { GridGroupingCriteriaCell };
+export declare const GridGroupingCriteriaCell: (props: GridGroupingCriteriaCellProps) => JSX.Element;
+export {};