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

package/hooks/features/treeData/useGridTreeData.js

@@ -1,100 +1,19 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridApiEventHandler, GridEvents, gridRowIdsSelector, gridRowTreeSelector, gridFilteredDescendantCountLookupSelector, useFirstRender } from '@mui/x-data-grid';
-import { useGridRegisterSortingMethod, useGridRegisterFilteringMethod } from '@mui/x-data-grid/internals';
-import { buildRowTree } from '../../../utils/tree/buildRowTree';
-import { sortRowTree } from '../../../utils/tree/sortRowTree';
-import { filterRowTreeFromTreeData } from './gridTreeDataUtils';
-export const TREE_DATA_GROUPING_NAME = 'tree-data';
+import { useGridApiEventHandler, GridEvents, gridFilteredDescendantCountLookupSelector } from '@mui/x-data-grid';
+
 /**
  * Only available in DataGridPro
- * @requires useGridPreProcessing (method)
- * @requires useGridRowGroupsPreProcessing (method)
  */
-
-export const useGridTreeData = (apiRef, props) => {
-  /**
-   * ROW GROUPING
-   */
-  const updateRowGrouping = React.useCallback(() => {
-    if (!props.treeData) {
-      return apiRef.current.unstable_registerRowGroupsBuilder('treeData', null);
-    }
-
-    const groupRows = params => {
-      if (!props.getTreeDataPath) {
-        throw new Error('MUI: No getTreeDataPath given.');
-      }
-
-      const rows = params.ids.map(rowId => ({
-        id: rowId,
-        path: props.getTreeDataPath(params.idRowsLookup[rowId]).map(key => ({
-          key,
-          field: null
-        }))
-      })).sort((a, b) => a.path.length - b.path.length);
-      return buildRowTree(_extends({
-        rows
-      }, params, {
-        defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
-        isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-        groupingName: TREE_DATA_GROUPING_NAME,
-        onDuplicatePath: (firstId, secondId, path) => {
-          throw new Error(['MUI: The path returned by `getTreeDataPath` should be unique.', `The rows with id #${firstId} and #${secondId} have the same.`, `Path: ${JSON.stringify(path.map(step => step.key))}.`].join('\n'));
-        }
-      }));
-    };
-
-    return apiRef.current.unstable_registerRowGroupsBuilder('treeData', groupRows);
-  }, [apiRef, props.getTreeDataPath, props.treeData, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
-  useFirstRender(() => {
-    updateRowGrouping();
-  });
-  const isFirstRender = React.useRef(true);
-  React.useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-      return;
-    }
-
-    updateRowGrouping();
-  }, [updateRowGrouping]);
-  /**
-   * PRE-PROCESSING
-   */
-
-  const filteringMethod = React.useCallback(params => {
-    const rowTree = gridRowTreeSelector(apiRef);
-    return filterRowTreeFromTreeData({
-      rowTree,
-      isRowMatchingFilters: params.isRowMatchingFilters,
-      disableChildrenFiltering: props.disableChildrenFiltering
-    });
-  }, [apiRef, props.disableChildrenFiltering]);
-  const sortingMethod = React.useCallback(params => {
-    const rowTree = gridRowTreeSelector(apiRef);
-    const rowIds = gridRowIdsSelector(apiRef);
-    return sortRowTree({
-      rowTree,
-      rowIds,
-      sortRowList: params.sortRowList,
-      disableChildrenSorting: props.disableChildrenSorting
-    });
-  }, [apiRef, props.disableChildrenSorting]);
-  useGridRegisterFilteringMethod(apiRef, TREE_DATA_GROUPING_NAME, filteringMethod);
-  useGridRegisterSortingMethod(apiRef, TREE_DATA_GROUPING_NAME, sortingMethod);
+export const useGridTreeData = apiRef => {
   /**
    * EVENTS
    */
-
   const handleCellKeyDown = React.useCallback((params, event) => {
     const cellParams = apiRef.current.getCellParams(params.id, params.field);
 
     if (cellParams.colDef.type === 'treeDataGroup' && event.key === ' ' && !event.shiftKey) {
       var _gridFilteredDescenda;
 
-      event.stopPropagation();
-      event.preventDefault();
       const filteredDescendantCount = (_gridFilteredDescenda = gridFilteredDescendantCountLookupSelector(apiRef)[params.id]) != null ? _gridFilteredDescenda : 0;
 
       if (filteredDescendantCount === 0) {

package/hooks/features/treeData/useGridTreeDataPreProcessors.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 import { GridApiPro } from '../../../models/gridApiPro';
-export declare const useGridTreeDataPreProcessors: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'treeData' | 'groupingColDef'>) => void;
+export declare const useGridTreeDataPreProcessors: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'treeData' | 'groupingColDef' | 'getTreeDataPath' | 'disableChildrenSorting' | 'disableChildrenFiltering' | 'defaultGroupingExpansionDepth' | 'isGroupExpandedByDefault'>) => void;

package/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -2,12 +2,18 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["hideDescendantCount"];
 import * as React from 'react';
-import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { gridRowIdsSelector, gridRowTreeSelector, useFirstRender } from '@mui/x-data-grid';
+import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
 import { GRID_TREE_DATA_GROUPING_COL_DEF, GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES } from './gridTreeDataGroupColDef';
-import { TREE_DATA_GROUPING_NAME } from './useGridTreeData';
+import { filterRowTreeFromTreeData, TREE_DATA_STRATEGY } from './gridTreeDataUtils';
 import { GridTreeDataGroupingCell } from '../../../components';
+import { buildRowTree } from '../../../utils/tree/buildRowTree';
+import { sortRowTree } from '../../../utils/tree/sortRowTree';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const useGridTreeDataPreProcessors = (apiRef, props) => {
+  const setStrategyAvailability = React.useCallback(() => {
+    apiRef.current.unstable_setStrategyAvailability('rowTree', TREE_DATA_STRATEGY, props.treeData ? () => true : () => false);
+  }, [apiRef, props.treeData]);
   const getGroupingColDef = React.useCallback(() => {
     var _colDefOverride;
 
@@ -16,7 +22,7 @@ export const useGridTreeDataPreProcessors = (apiRef, props) => {
 
     if (typeof groupingColDefProp === 'function') {
       const params = {
-        groupingName: TREE_DATA_GROUPING_NAME,
+        groupingName: TREE_DATA_STRATEGY,
         fields: []
       };
       colDefOverride = groupingColDefProp(params);
@@ -65,5 +71,68 @@ export const useGridTreeDataPreProcessors = (apiRef, props) => {
 
     return columnsState;
   }, [props.treeData, getGroupingColDef]);
-  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', updateGroupingColumn);
+  const createRowTree = React.useCallback(params => {
+    if (!props.getTreeDataPath) {
+      throw new Error('MUI: No getTreeDataPath given.');
+    }
+
+    const rows = params.ids.map(rowId => ({
+      id: rowId,
+      path: props.getTreeDataPath(params.idRowsLookup[rowId]).map(key => ({
+        key,
+        field: null
+      }))
+    })).sort((a, b) => a.path.length - b.path.length);
+    return buildRowTree(_extends({
+      rows
+    }, params, {
+      defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
+      isGroupExpandedByDefault: props.isGroupExpandedByDefault,
+      groupingName: TREE_DATA_STRATEGY,
+      onDuplicatePath: (firstId, secondId, path) => {
+        throw new Error(['MUI: The path returned by `getTreeDataPath` should be unique.', `The rows with id #${firstId} and #${secondId} have the same.`, `Path: ${JSON.stringify(path.map(step => step.key))}.`].join('\n'));
+      }
+    }));
+  }, [props.getTreeDataPath, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
+  const filterRows = React.useCallback(params => {
+    const rowTree = gridRowTreeSelector(apiRef);
+    return filterRowTreeFromTreeData({
+      rowTree,
+      isRowMatchingFilters: params.isRowMatchingFilters,
+      disableChildrenFiltering: props.disableChildrenFiltering
+    });
+  }, [apiRef, props.disableChildrenFiltering]);
+  const sortRows = React.useCallback(params => {
+    const rowTree = gridRowTreeSelector(apiRef);
+    const rowIds = gridRowIdsSelector(apiRef);
+    return sortRowTree({
+      rowTree,
+      rowIds,
+      sortRowList: params.sortRowList,
+      disableChildrenSorting: props.disableChildrenSorting
+    });
+  }, [apiRef, props.disableChildrenSorting]);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', updateGroupingColumn);
+  useGridRegisterStrategyProcessor(apiRef, TREE_DATA_STRATEGY, 'rowTreeCreation', createRowTree);
+  useGridRegisterStrategyProcessor(apiRef, TREE_DATA_STRATEGY, 'filtering', filterRows);
+  useGridRegisterStrategyProcessor(apiRef, TREE_DATA_STRATEGY, 'sorting', sortRows);
+  /**
+   * 1ST RENDER
+   */
+
+  useFirstRender(() => {
+    setStrategyAvailability();
+  });
+  /**
+   * EFFECTS
+   */
+
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (!isFirstRender.current) {
+      setStrategyAvailability();
+    } else {
+      isFirstRender.current = false;
+    }
+  }, [setStrategyAvailability]);
 };

package/index.d.ts

@@ -6,8 +6,8 @@ export * from '@mui/x-data-grid/hooks';
 export * from '@mui/x-data-grid/locales';
 export * from '@mui/x-data-grid/models';
 export * from '@mui/x-data-grid/context';
-export * from '@mui/x-data-grid/colDef';
 export * from '@mui/x-data-grid/utils';
+export * from '@mui/x-data-grid/colDef';
 export * from './DataGridPro';
 export * from './hooks';
 export * from './models';

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.1
+/** @license MUI v5.9.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -11,8 +11,8 @@ export * from '@mui/x-data-grid/hooks';
 export * from '@mui/x-data-grid/locales';
 export * from '@mui/x-data-grid/models';
 export * from '@mui/x-data-grid/context';
-export * from '@mui/x-data-grid/colDef';
 export * from '@mui/x-data-grid/utils';
+export * from '@mui/x-data-grid/colDef';
 export * from './DataGridPro';
 export * from './hooks';
 export * from './models';

package/legacy/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";
-var 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
-  RELEASE_INFO = ponyfillGlobal.__MUI_RELEASE_INFO__;
-}
-
-LicenseInfo.setReleaseInfo(RELEASE_INFO);
+var releaseInfo = getReleaseInfo();
 var DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProps, ref) {
   var props = useDataGridProProps(inProps);
   var apiRef = useDataGridProComponent(props.apiRef, props);
+  useLicenseVerifier('x-data-grid-pro', releaseInfo);
   return /*#__PURE__*/_jsx(GridContextProvider, {
     apiRef: apiRef,
     props: props,
@@ -35,7 +27,10 @@ var DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProps,
         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,6 +269,7 @@ 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,
     warnIfFocusStateIsNotSynced: PropTypes.bool
@@ -357,7 +353,8 @@ DataGridProRaw.propTypes = {
    * 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,
@@ -621,7 +618,7 @@ DataGridProRaw.propTypes = {
    * @param {GridEditCellPropsParams} params With all properties from [[GridEditCellPropsParams]].
    * @param {MuiEvent<React.SyntheticEvent>} event The event that caused this prop to be called.
    * @param {GridCallbackDetails} details Additional details for this callback.
-   * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/api/data-grid/grid-col-def/)
+   * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/x/api/data-grid/grid-col-def/)
    */
   onEditCellPropsChange: PropTypes.func,
 
@@ -668,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]].
@@ -787,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
@@ -820,7 +849,7 @@ 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`.

package/legacy/DataGridPro/useDataGridProComponent.js

@@ -1,4 +1,4 @@
-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';
+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, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer } from '@mui/x-data-grid/internals';
 // Pro-only features
 import { useGridInfiniteLoader } from '../hooks/features/infiniteLoader/useGridInfiniteLoader';
 import { useGridColumnReorder, columnReorderStateInitializer } from '../hooks/features/columnReorder/useGridColumnReorder';
@@ -13,6 +13,8 @@ import { useGridDetailPanel, detailPanelStateInitializer } from '../hooks/featur
 import { useGridDetailPanelCache } from '../hooks/features/detailPanel/useGridDetailPanelCache';
 import { useGridDetailPanelPreProcessors } from '../hooks/features/detailPanel/useGridDetailPanelPreProcessors';
 export var useDataGridProComponent = function useDataGridProComponent(inputApiRef, props) {
+  var _props$experimentalFe, _props$experimentalFe2;
+
   var apiRef = useGridInitialization(inputApiRef, props);
   /**
    * Register all pre-processors called during state initialization here.
@@ -21,25 +23,22 @@ export var useDataGridProComponent = function useDataGridProComponent(inputApiRe
   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(rowGroupingStateInitializer, apiRef, props);
   useGridInitializeState(selectionStateInitializer, apiRef, props);
   useGridInitializeState(detailPanelStateInitializer, apiRef, props);
   useGridInitializeState(columnPinningStateInitializer, 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((_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);
@@ -50,18 +49,23 @@ export var useDataGridProComponent = function useDataGridProComponent(inputApiRe
   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);
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
   useGridParamsApi(apiRef);
+  useGridColumnSpanning(apiRef);
   useGridDetailPanelCache(apiRef, props);
+  var useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
-  useGridSorting(apiRef, props);
   useGridPreferencesPanel(apiRef);
   useGridFilter(apiRef, props);
+  useGridSorting(apiRef, props);
   useGridDensity(apiRef, props);
   useGridColumnReorder(apiRef, props);
   useGridColumnResize(apiRef, props);
@@ -70,8 +74,6 @@ export var useDataGridProComponent = function useDataGridProComponent(inputApiRe
   useGridScroll(apiRef, props);
   useGridInfiniteLoader(apiRef, props);
   useGridColumnMenu(apiRef);
-  useGridKeyboard(apiRef);
-  useGridKeyboardNavigation(apiRef, props);
   useGridCsvExport(apiRef);
   useGridPrintExport(apiRef, props);
   useGridClipboard(apiRef);

package/legacy/components/DataGridProColumnHeaders.js

@@ -104,7 +104,6 @@ export var DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function Dat
   }),
       isDragging = _useGridColumnHeaders.isDragging,
       renderContext = _useGridColumnHeaders.renderContext,
-      updateInnerPosition = _useGridColumnHeaders.updateInnerPosition,
       getRootProps = _useGridColumnHeaders.getRootProps,
       getInnerProps = _useGridColumnHeaders.getInnerProps,
       getColumns = _useGridColumnHeaders.getColumns;
@@ -115,11 +114,6 @@ export var DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function Dat
     classes: rootProps.classes
   };
   var classes = useUtilityClasses(ownerState);
-  React.useEffect(function () {
-    if (renderContext) {
-      updateInnerPosition(renderContext);
-    }
-  }, [renderContext, updateInnerPosition]);
   var leftRenderContext = renderContext && leftPinnedColumns.length ? _extends({}, renderContext, {
     firstColumnIndex: 0,
     lastColumnIndex: leftPinnedColumns.length
@@ -144,7 +138,15 @@ export var DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function Dat
       }, {
         disableReorder: true
       })
-    }), rightRenderContext && /*#__PURE__*/_jsx(GridColumnHeadersPinnedColumnHeaders, {
+    }), /*#__PURE__*/_jsx(GridColumnHeadersInner, _extends({
+      isDragging: isDragging
+    }, getInnerProps(), {
+      children: getColumns({
+        renderContext: renderContext,
+        minFirstColumn: leftPinnedColumns.length,
+        maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
+      })
+    })), rightRenderContext && /*#__PURE__*/_jsx(GridColumnHeadersPinnedColumnHeaders, {
       ownerState: {
         side: GridPinnedPosition.right
       },
@@ -160,14 +162,6 @@ export var DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function Dat
         disableReorder: true,
         separatorSide: GridColumnHeaderSeparatorSides.Left
       })
-    }), /*#__PURE__*/_jsx(GridColumnHeadersInner, _extends({
-      isDragging: isDragging
-    }, getInnerProps(), {
-      children: getColumns({
-        renderContext: renderContext,
-        minFirstColumn: leftPinnedColumns.length,
-        maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
-      })
-    }))]
+    })]
   }));
 });

package/legacy/components/DataGridProVirtualScroller.js

@@ -192,9 +192,6 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
   }, [renderContext, updateRenderZonePosition]);
   useGridApiEventHandler(apiRef, GridEvents.columnWidthChange, refreshRenderZonePosition);
   useGridApiEventHandler(apiRef, GridEvents.columnOrderChange, refreshRenderZonePosition);
-  React.useEffect(function () {
-    refreshRenderZonePosition();
-  }, [refreshRenderZonePosition]);
   var leftRenderContext = renderContext && leftPinnedColumns.length > 0 ? _extends({}, renderContext, {
     firstColumnIndex: 0,
     lastColumnIndex: leftPinnedColumns.length
@@ -260,7 +257,11 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
           maxLastColumn: leftRenderContext.lastColumnIndex,
           availableSpace: 0
         })
-      }), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
+      }), /*#__PURE__*/_jsx(GridVirtualScrollerRenderZone, _extends({}, getRenderZoneProps(), {
+        children: getRows({
+          renderContext: renderContext
+        })
+      })), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         ref: rightColumns,
         ownerState: {
           side: GridPinnedPosition.right
@@ -273,11 +274,7 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
           maxLastColumn: rightRenderContext.lastColumnIndex,
           availableSpace: 0
         })
-      }), /*#__PURE__*/_jsx(GridVirtualScrollerRenderZone, _extends({}, getRenderZoneProps(), {
-        children: getRows({
-          renderContext: renderContext
-        })
-      })), detailPanels.length > 0 && /*#__PURE__*/_jsx(VirtualScrollerDetailPanels, {
+      }), detailPanels.length > 0 && /*#__PURE__*/_jsx(VirtualScrollerDetailPanels, {
         className: classes.detailPanels,
         children: detailPanels
       })]

package/legacy/components/GridDetailPanelToggleCell.js

@@ -69,16 +69,27 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
    */
   field: PropTypes.string.isRequired,
 
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the element that should receive focus.
+   * @ignore - do not document.
+   */
+  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focus: PropTypes.func.isRequired
+    })
+  })]),
+
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: PropTypes.any.isRequired,
+  formattedValue: PropTypes.any,
 
   /**
    * 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,
@@ -101,7 +112,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.
@@ -116,6 +127,6 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
   /**
    * The cell value, but if the column has valueGetter, use getValue.
    */
-  value: PropTypes.any.isRequired
+  value: PropTypes.any
 } : void 0;
 export { GridDetailPanelToggleCell };