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

package/CHANGELOG.md

@@ -3,6 +3,80 @@
 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_

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

@@ -353,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,
@@ -664,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]].
@@ -786,9 +809,10 @@ DataGridProRaw.propTypes = {
   /**
    * Callback called before updating a row with new values in the row and cell editing.
    * Only applied if `props.experimentalFeatures.newEditingApi: true`.
-   * @param {GridRowModel} newRow Row object with the new values.
-   * @param {GridRowModel} oldRow Row object with the old values.
-   * @returns {Promise<GridRowModel> | GridRowModel} The final values to update the row.
+   * @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,
 
@@ -825,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/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_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';
+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, columnReorderStateInitializer } from '../hooks/features/columnReorder/useGridColumnReorder';
@@ -51,6 +51,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridRowGrouping(apiRef, props);
   useGridTreeData(apiRef);
+  useGridKeyboardNavigation(apiRef, props);
   useGridSelection(apiRef, props);
   useGridDetailPanel(apiRef, props);
   useGridColumnPinning(apiRef, props);
@@ -72,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/components/GridDetailPanelToggleCell.js

@@ -82,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,
@@ -105,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 {};

package/components/GridGroupingCriteriaCell.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
@@ -20,7 +19,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-const GridGroupingCriteriaCell = props => {
+export const GridGroupingCriteriaCell = props => {
   var _filteredDescendantCo;
 
   const {
@@ -76,75 +75,4 @@ const GridGroupingCriteriaCell = props => {
       children: [formattedValue === undefined ? rowNode.groupingKey : formattedValue, !hideDescendantCount && filteredDescendantCount > 0 ? ` (${filteredDescendantCount})` : '']
     })]
   });
-};
-
-process.env.NODE_ENV !== "production" ? GridGroupingCriteriaCell.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-
-  /**
-   * GridApi that let you manipulate the grid.
-   */
-  api: PropTypes.any.isRequired,
-
-  /**
-   * The mode of the cell.
-   */
-  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
-
-  /**
-   * The column of the row that the current cell belongs to.
-   */
-  colDef: PropTypes.object.isRequired,
-
-  /**
-   * The column field of the cell that triggered the event.
-   */
-  field: PropTypes.string.isRequired,
-
-  /**
-   * The cell value formatted with the column valueFormatter.
-   */
-  formattedValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool]),
-
-  /**
-   * 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.
-   */
-  getValue: PropTypes.func.isRequired,
-
-  /**
-   * If true, the cell is the active element.
-   */
-  hasFocus: PropTypes.bool.isRequired,
-
-  /**
-   * The grid row id.
-   */
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-
-  /**
-   * If true, the cell is editable.
-   */
-  isEditable: PropTypes.bool,
-
-  /**
-   * The row model of the row that the current cell belongs to.
-   */
-  row: PropTypes.object.isRequired,
-
-  /**
-   * the tabIndex value.
-   */
-  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
-
-  /**
-   * The cell value, but if the column has valueGetter, use getValue.
-   */
-  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool])
-} : void 0;
-export { GridGroupingCriteriaCell };
+};

package/components/GridTreeDataGroupingCell.js

@@ -116,7 +116,7 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.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,
@@ -140,7 +140,7 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.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/hooks/features/columnPinning/useGridColumnPinning.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import MuiDivider from '@mui/material/Divider';
 import { useGridSelector, gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gridColumnPositionsSelector, gridVisibleColumnFieldsSelector, gridClasses, GridEvents, useGridApiMethod, useGridApiEventHandler } from '@mui/x-data-grid';
-import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GridColumnPinningMenuItems } from '../../../components/GridColumnPinningMenuItems';
 import { GridPinnedPosition } from './gridColumnPinningInterface';
 import { gridPinnedColumnsSelector } from './gridColumnPinningSelector';
@@ -181,11 +181,11 @@ export const useGridColumnPinning = (apiRef, props) => {
 
     return params;
   }, [apiRef]);
-  useGridRegisterPreProcessor(apiRef, 'scrollToIndexes', calculateScrollLeft);
-  useGridRegisterPreProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
-  useGridRegisterPreProcessor(apiRef, 'canBeReordered', checkIfCanBeReordered);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'scrollToIndexes', calculateScrollLeft);
+  useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
+  useGridRegisterPipeProcessor(apiRef, 'canBeReordered', checkIfCanBeReordered);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   apiRef.current.unstable_updateControlState({
     stateId: 'pinnedColumns',
     propModel: props.pinnedColumns,

package/hooks/features/columnPinning/useGridColumnPinningPreProcessors.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { gridPinnedColumnsSelector } from './gridColumnPinningSelector';
 import { columnPinningStateInitializer } from './useGridColumnPinning';
 import { filterColumns } from '../../../components/DataGridProVirtualScroller';
@@ -41,5 +41,5 @@ export const useGridColumnPinningPreProcessors = (apiRef, props) => {
       all: [...leftPinnedColumns, ...centerColumns, ...rightPinnedColumns]
     });
   }, [disableColumnPinning, pinnedColumns]);
-  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', reorderPinnedColumns);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', reorderPinnedColumns);
 };

package/hooks/features/columnReorder/useGridColumnReorder.js

@@ -116,7 +116,7 @@ export const useGridColumnReorder = (apiRef, props) => {
           canBeReordered = targetColIndex < visibleColumns.length - 1 && !visibleColumns[targetColIndex + 1].disableReorder;
         }
 
-        const canBeReorderedProcessed = apiRef.current.unstable_applyPreProcessors('canBeReordered', canBeReordered, {
+        const canBeReorderedProcessed = apiRef.current.unstable_applyPipeProcessors('canBeReordered', canBeReordered, {
           targetIndex: targetColVisibleIndex
         });
 

package/hooks/features/detailPanel/useGridDetailPanel.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { GridEvents, useGridSelector, useGridApiEventHandler, useGridApiMethod } from '@mui/x-data-grid';
-import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from './gridDetailPanelToggleColDef';
 import { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector } from './gridDetailPanelSelector';
 export const detailPanelStateInitializer = (state, props) => {
@@ -58,7 +58,7 @@ export const useGridDetailPanel = (apiRef, props) => {
 
     });
   }, [apiRef, expandedRowIds]);
-  useGridRegisterPreProcessor(apiRef, 'rowHeight', addDetailHeight);
+  useGridRegisterPipeProcessor(apiRef, 'rowHeight', addDetailHeight);
   apiRef.current.unstable_updateControlState({
     stateId: 'detailPanels',
     propModel: props.detailPanelExpandedRowIds,

package/hooks/features/detailPanel/useGridDetailPanelPreProcessors.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_DETAIL_PANEL_TOGGLE_COL_DEF } from './gridDetailPanelToggleColDef';
 export const useGridDetailPanelPreProcessors = (apiRef, props) => {
   const addToggleColumn = React.useCallback(columnsState => {
@@ -24,5 +24,5 @@ export const useGridDetailPanelPreProcessors = (apiRef, props) => {
     columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = GRID_DETAIL_PANEL_TOGGLE_COL_DEF;
     return columnsState;
   }, [props.getDetailPanelContent]);
-  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', addToggleColumn);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', addToggleColumn);
 };

package/hooks/features/rowGrouping/gridRowGroupingUtils.d.ts

@@ -21,7 +21,7 @@ interface FilterRowTreeFromTreeDataParams {
  * - It is passing the filter
  */
 export declare const filterRowTreeFromGroupingColumns: (params: FilterRowTreeFromTreeDataParams) => Omit<GridFilterState, 'filterModel'>;
-export declare const getColDefOverrides: (groupingColDefProp: DataGridProProcessedProps['groupingColDef'], fields: string[]) => import("../../..").GridGroupingColDefOverride | null | undefined;
+export declare const getColDefOverrides: (groupingColDefProp: DataGridProProcessedProps['groupingColDef'], fields: string[]) => import("../../..").GridGroupingColDefOverride<any> | null | undefined;
 export declare const mergeStateWithRowGroupingModel: (rowGroupingModel: GridRowGroupingModel) => (state: GridStatePro) => GridStatePro;
 export declare const setStrategyAvailability: (apiRef: React.MutableRefObject<GridApiPro>, disableRowGrouping: boolean) => void;
 export {};

package/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import Divider from '@mui/material/Divider';
 import { GridEvents, useGridApiEventHandler, useGridApiMethod, gridFilteredDescendantCountLookupSelector } from '@mui/x-data-grid';
-import { useGridRegisterPreProcessor, isDeepEqual } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor, isDeepEqual } from '@mui/x-data-grid/internals';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector, gridRowGroupingStateSelector } from './gridRowGroupingSelector';
 import { getRowGroupingFieldFromGroupingCriteria, ROW_GROUPING_STRATEGY, isGroupingColumn, mergeStateWithRowGroupingModel, setStrategyAvailability } from './gridRowGroupingUtils';
 import { GridRowGroupableColumnMenuItems } from '../../../components/GridRowGroupableColumnMenuItems';
@@ -143,9 +143,9 @@ export const useGridRowGrouping = (apiRef, props) => {
 
     return params;
   }, [apiRef, props.disableRowGrouping]);
-  useGridRegisterPreProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   /**
    * EVENTS
    */

package/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { gridColumnLookupSelector, gridRowIdsSelector, gridRowTreeSelector, useFirstRender } from '@mui/x-data-grid';
-import { useGridRegisterPreProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
 import { createGroupingColDefForAllGroupingCriteria, createGroupingColDefForOneGroupingCriteria } from './createGroupingColDef';
 import { filterRowTreeFromGroupingColumns, getColDefOverrides, ROW_GROUPING_STRATEGY, isGroupingColumn, setStrategyAvailability } from './gridRowGroupingUtils';
@@ -177,7 +177,7 @@ export const useGridRowGroupingPreProcessors = (apiRef, props) => {
       disableChildrenSorting: false
     });
   }, [apiRef]);
-  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', updateGroupingColumn);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', updateGroupingColumn);
   useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'rowTreeCreation', createRowTree);
   useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'filtering', filterRows);
   useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'sorting', sortRows);

package/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["hideDescendantCount"];
 import * as React from 'react';
 import { gridRowIdsSelector, gridRowTreeSelector, useFirstRender } from '@mui/x-data-grid';
-import { useGridRegisterPreProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
+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 { filterRowTreeFromTreeData, TREE_DATA_STRATEGY } from './gridTreeDataUtils';
 import { GridTreeDataGroupingCell } from '../../../components';
@@ -112,7 +112,7 @@ export const useGridTreeDataPreProcessors = (apiRef, props) => {
       disableChildrenSorting: props.disableChildrenSorting
     });
   }, [apiRef, props.disableChildrenSorting]);
-  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', updateGroupingColumn);
+  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);

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.7.0
+/** @license MUI v5.8.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

@@ -353,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,
@@ -664,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]].
@@ -786,9 +809,10 @@ DataGridProRaw.propTypes = {
   /**
    * Callback called before updating a row with new values in the row and cell editing.
    * Only applied if `props.experimentalFeatures.newEditingApi: true`.
-   * @param {GridRowModel} newRow Row object with the new values.
-   * @param {GridRowModel} oldRow Row object with the old values.
-   * @returns {Promise<GridRowModel> | GridRowModel} The final values to update the row.
+   * @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,
 
@@ -825,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_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';
+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, columnReorderStateInitializer } from '../hooks/features/columnReorder/useGridColumnReorder';
@@ -51,6 +51,7 @@ export var useDataGridProComponent = function useDataGridProComponent(inputApiRe
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridRowGrouping(apiRef, props);
   useGridTreeData(apiRef);
+  useGridKeyboardNavigation(apiRef, props);
   useGridSelection(apiRef, props);
   useGridDetailPanel(apiRef, props);
   useGridColumnPinning(apiRef, props);
@@ -72,8 +73,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/GridDetailPanelToggleCell.js

@@ -78,7 +78,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,
@@ -101,7 +101,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.