@mui/x-data-grid 5.6.1 → 5.9.0

package/hooks/features/filter/useGridFilter.js

@@ -10,10 +10,11 @@ import { GridPreferencePanelsValue } from '../preferencesPanel/gridPreferencePan
 import { getDefaultGridFilterModel } from './gridFilterState';
 import { gridFilterModelSelector, gridVisibleSortedRowEntriesSelector } from './gridFilterSelector';
 import { useFirstRender } from '../../utils/useFirstRender';
-import { gridRowIdsSelector, gridRowGroupingNameSelector } from '../rows';
-import { useGridRegisterPreProcessor } from '../../core/preProcessing';
-import { useGridRegisterFilteringMethod } from './useGridRegisterFilteringMethod';
+import { gridRowIdsSelector } from '../rows';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../core/strategyProcessing';
 import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel } from './gridFilterUtils';
+import { jsx as _jsx } from "react/jsx-runtime";
 export const filterStateInitializer = (state, props, apiRef) => {
   var _ref, _props$filterModel, _props$initialState, _props$initialState$f;
 
@@ -33,9 +34,9 @@ export const filterStateInitializer = (state, props, apiRef) => {
  */
 
 export const useGridFilter = (apiRef, props) => {
+  var _props$componentsProp2;
+
   const logger = useGridLogger(apiRef, 'useGridFilter');
-  const filteringMethodCollectionRef = React.useRef({});
-  const lastFilteringMethodApplied = React.useRef(null);
   apiRef.current.unstable_updateControlState({
     stateId: 'filter',
     propModel: props.filterModel,
@@ -43,32 +44,27 @@ export const useGridFilter = (apiRef, props) => {
     stateSelector: gridFilterModelSelector,
     changeEvent: GridEvents.filterModelChange
   });
-  /**
-   * API METHODS
-   */
-
-  const applyFilters = React.useCallback(() => {
+  const updateFilteredRows = React.useCallback(() => {
     apiRef.current.setState(state => {
-      const rowGroupingName = gridRowGroupingNameSelector(state, apiRef.current.instanceId);
-      const filteringMethod = filteringMethodCollectionRef.current[rowGroupingName];
-
-      if (!filteringMethod) {
-        throw new Error('MUI: Invalid filtering method.');
-      }
-
       const filterModel = gridFilterModelSelector(state, apiRef.current.instanceId);
       const isRowMatchingFilters = props.filterMode === GridFeatureModeConstant.client ? buildAggregatedFilterApplier(filterModel, apiRef) : null;
-      lastFilteringMethodApplied.current = filteringMethod;
-      const filteringResult = filteringMethod({
+      const filteringResult = apiRef.current.unstable_applyStrategyProcessor('filtering', {
         isRowMatchingFilters
       });
       return _extends({}, state, {
         filter: _extends({}, state.filter, filteringResult)
       });
     });
-    apiRef.current.publishEvent(GridEvents.visibleRowsSet);
+    apiRef.current.publishEvent(GridEvents.filteredRowsSet);
+  }, [props.filterMode, apiRef]);
+  /**
+   * API METHODS
+   */
+
+  const applyFilters = React.useCallback(() => {
+    updateFilteredRows();
     apiRef.current.forceUpdate();
-  }, [apiRef, props.filterMode]);
+  }, [apiRef, updateFilteredRows]);
   const upsertFilterItem = React.useCallback(item => {
     const filterModel = gridFilterModelSelector(apiRef);
     const items = [...filterModel.items];
@@ -194,6 +190,16 @@ export const useGridFilter = (apiRef, props) => {
       callbacks: [...params.callbacks, apiRef.current.unstable_applyFilters]
     });
   }, [apiRef, props.disableMultipleColumnsFiltering]);
+  const preferencePanelPreProcessing = React.useCallback((initialValue, value) => {
+    if (value === GridPreferencePanelsValue.filters) {
+      var _props$componentsProp;
+
+      const FilterPanel = props.components.FilterPanel;
+      return /*#__PURE__*/_jsx(FilterPanel, _extends({}, (_props$componentsProp = props.componentsProps) == null ? void 0 : _props$componentsProp.filterPanel));
+    }
+
+    return initialValue;
+  }, [props.components.FilterPanel, (_props$componentsProp2 = props.componentsProps) == null ? void 0 : _props$componentsProp2.filterPanel]);
   const flatFilteringMethod = React.useCallback(params => {
     if (props.filterMode === GridFeatureModeConstant.client && params.isRowMatchingFilters) {
       const rowIds = gridRowIdsSelector(apiRef);
@@ -218,9 +224,10 @@ export const useGridFilter = (apiRef, props) => {
       filteredDescendantCountLookup: {}
     };
   }, [apiRef, props.filterMode]);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
-  useGridRegisterFilteringMethod(apiRef, 'none', flatFilteringMethod);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'preferencePanel', preferencePanelPreProcessing);
+  useGridRegisterStrategyProcessor(apiRef, GRID_DEFAULT_STRATEGY, 'filtering', flatFilteringMethod);
   /**
    * EVENTS
    */
@@ -237,30 +244,22 @@ export const useGridFilter = (apiRef, props) => {
       }));
     }
   }, [apiRef, logger]);
-  const handlePreProcessorRegister = React.useCallback(name => {
-    if (name !== 'filteringMethod') {
-      return;
-    }
-
-    filteringMethodCollectionRef.current = apiRef.current.unstable_applyPreProcessors('filteringMethod', {});
-    const rowGroupingName = gridRowGroupingNameSelector(apiRef);
-
-    if (lastFilteringMethodApplied.current !== filteringMethodCollectionRef.current[rowGroupingName]) {
+  const handleStrategyProcessorChange = React.useCallback(methodName => {
+    if (methodName === 'filtering') {
       apiRef.current.unstable_applyFilters();
     }
-  }, [apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.rowsSet, apiRef.current.unstable_applyFilters);
+  }, [apiRef]); // Do not call `apiRef.current.forceUpdate` to avoid re-render before updating the sorted rows.
+  // Otherwise, the state is not consistent during the render
+
+  useGridApiEventHandler(apiRef, GridEvents.rowsSet, updateFilteredRows);
   useGridApiEventHandler(apiRef, GridEvents.rowExpansionChange, apiRef.current.unstable_applyFilters);
   useGridApiEventHandler(apiRef, GridEvents.columnsChange, handleColumnsChange);
-  useGridApiEventHandler(apiRef, GridEvents.preProcessorRegister, handlePreProcessorRegister);
+  useGridApiEventHandler(apiRef, GridEvents.activeStrategyProcessorChange, handleStrategyProcessorChange);
   /**
    * 1ST RENDER
    */
 
   useFirstRender(() => {
-    // This line of pre-processor initialization should always come after the registration of `flatFilteringMethod`
-    // Otherwise on the 1st render there would be no filtering method registered
-    filteringMethodCollectionRef.current = apiRef.current.unstable_applyPreProcessors('filteringMethod', {});
     apiRef.current.unstable_applyFilters();
   });
   /**

package/hooks/features/focus/useGridFocus.d.ts

@@ -8,4 +8,4 @@ export declare const focusStateInitializer: GridStateInitializer;
  * @requires useGridRows (method)
  * @requires useGridEditing (event)
  */
-export declare const useGridFocus: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'rows'>) => void;
+export declare const useGridFocus: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'rows' | 'pagination' | 'paginationMode'>) => void;

package/hooks/features/focus/useGridFocus.js

@@ -7,6 +7,9 @@ import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { isNavigationKey } from '../../../utils/keyboardUtils';
 import { gridFocusCellSelector } from './gridFocusStateSelector';
+import { gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
+import { getVisibleRows } from '../../utils/useGridVisibleRows';
+import { clamp } from '../../../utils/utils';
 export const focusStateInitializer = state => _extends({}, state, {
   focus: {
     cell: null,
@@ -86,6 +89,48 @@ export const useGridFocus = (apiRef, props) => {
     });
     apiRef.current.forceUpdate();
   }, [apiRef, logger]);
+  const moveFocusToRelativeCell = React.useCallback((id, field, direction) => {
+    let columnIndexToFocus = apiRef.current.getColumnIndex(field);
+    let rowIndexToFocus = apiRef.current.getRowIndexRelativeToVisibleRows(id);
+    const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+
+    if (direction === 'right') {
+      columnIndexToFocus += 1;
+    } else if (direction === 'left') {
+      columnIndexToFocus -= 1;
+    } else {
+      rowIndexToFocus += 1;
+    }
+
+    const currentPage = getVisibleRows(apiRef, {
+      pagination: props.pagination,
+      paginationMode: props.paginationMode
+    });
+
+    if (columnIndexToFocus >= visibleColumns.length) {
+      // Go to next row if we are after the last column
+      rowIndexToFocus += 1;
+
+      if (rowIndexToFocus < currentPage.rows.length) {
+        // Go to first column of the next row if there's one more row
+        columnIndexToFocus = 0;
+      }
+    } else if (columnIndexToFocus < 0) {
+      // Go to previous row if we are before the first column
+      rowIndexToFocus -= 1;
+
+      if (rowIndexToFocus >= 0) {
+        // Go to last column of the previous if there's one more row
+        columnIndexToFocus = visibleColumns.length - 1;
+      }
+    }
+
+    rowIndexToFocus = clamp(rowIndexToFocus, 0, currentPage.rows.length - 1);
+    columnIndexToFocus = clamp(columnIndexToFocus, 0, visibleColumns.length - 1);
+    const rowToFocus = currentPage.rows[rowIndexToFocus];
+    const columnToFocus = visibleColumns[columnIndexToFocus];
+    apiRef.current.setCellFocus(rowToFocus.id, columnToFocus.field);
+  }, [apiRef, props.pagination, props.paginationMode]);
   const handleCellDoubleClick = React.useCallback(({
     id,
     field
@@ -178,7 +223,8 @@ export const useGridFocus = (apiRef, props) => {
   }, [apiRef]);
   useGridApiMethod(apiRef, {
     setCellFocus,
-    setColumnHeaderFocus
+    setColumnHeaderFocus,
+    unstable_moveFocusToRelativeCell: moveFocusToRelativeCell
   }, 'GridFocusApi');
   React.useEffect(() => {
     const cell = gridFocusCellSelector(apiRef);

package/hooks/features/{keyboard → keyboardNavigation}/useGridKeyboardNavigation.d.ts

@@ -2,14 +2,12 @@ import * as React from 'react';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 /**
- * @requires useGridPage (state)
- * @requires useGridPageSize (state)
- * @requires useGridFilter (state)
- * @requires useGridColumns (state, method)
- * @requires useGridRows (state, method)
  * @requires useGridSorting (method) - can be after
+ * @requires useGridFilter (state) - can be after
+ * @requires useGridColumns (state, method) - can be after
  * @requires useGridDimensions (method) - can be after
  * @requires useGridFocus (method) - can be after
  * @requires useGridScroll (method) - can be after
+ * @requires useGridColumnSpanning (method) - can be after
  */
 export declare const useGridKeyboardNavigation: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>) => void;

package/hooks/features/{keyboard → keyboardNavigation}/useGridKeyboardNavigation.js

@@ -7,31 +7,50 @@ import { gridVisibleSortedRowEntriesSelector } from '../filter/gridFilterSelecto
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../colDef/gridCheckboxSelectionColDef';
 import { gridClasses } from '../../../constants/gridClasses';
+import { GridCellModes } from '../../../models/gridEditRowModel';
+import { isNavigationKey } from '../../../utils/keyboardUtils';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
 /**
- * @requires useGridPage (state)
- * @requires useGridPageSize (state)
- * @requires useGridFilter (state)
- * @requires useGridColumns (state, method)
- * @requires useGridRows (state, method)
  * @requires useGridSorting (method) - can be after
+ * @requires useGridFilter (state) - can be after
+ * @requires useGridColumns (state, method) - can be after
  * @requires useGridDimensions (method) - can be after
  * @requires useGridFocus (method) - can be after
  * @requires useGridScroll (method) - can be after
+ * @requires useGridColumnSpanning (method) - can be after
  */
 
 export const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridKeyboardNavigation');
   const currentPage = useGridVisibleRows(apiRef, props);
-  const goToCell = React.useCallback((colIndex, rowIndex) => {
+  /**
+   * @param {number} colIndex Index of the column to focus
+   * @param {number} rowIndex index of the row to focus
+   * @param {string} closestColumnToUse Which closest column cell to use when the cell is spanned by `colSpan`.
+   */
+
+  const goToCell = React.useCallback((colIndex, rowIndex, closestColumnToUse = 'left') => {
+    var _visibleSortedRows$ro;
+
+    const visibleSortedRows = gridVisibleSortedRowEntriesSelector(apiRef);
+    const rowId = (_visibleSortedRows$ro = visibleSortedRows[rowIndex]) == null ? void 0 : _visibleSortedRows$ro.id;
+    const nextCellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, colIndex);
+
+    if (nextCellColSpanInfo && nextCellColSpanInfo.spannedByColSpan) {
+      if (closestColumnToUse === 'left') {
+        colIndex = nextCellColSpanInfo.leftVisibleCellIndex;
+      } else if (closestColumnToUse === 'right') {
+        colIndex = nextCellColSpanInfo.rightVisibleCellIndex;
+      }
+    }
+
     logger.debug(`Navigating to cell row ${rowIndex}, col ${colIndex}`);
     apiRef.current.scrollToIndexes({
       colIndex,
       rowIndex
     });
     const field = apiRef.current.getVisibleColumns()[colIndex].field;
-    const visibleSortedRows = gridVisibleSortedRowEntriesSelector(apiRef);
-    const node = visibleSortedRows[rowIndex];
-    apiRef.current.setCellFocus(node.id, field);
+    apiRef.current.setCellFocus(rowId, field);
   }, [apiRef, logger]);
   const goToHeader = React.useCallback((colIndex, event) => {
     logger.debug(`Navigating to header col ${colIndex}`);
@@ -84,7 +103,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       case 'ArrowRight':
         {
           if (colIndexBefore < lastColIndex) {
-            goToCell(colIndexBefore + 1, rowIndexBefore);
+            goToCell(colIndexBefore + 1, rowIndexBefore, 'right');
           }
 
           break;
@@ -103,16 +122,36 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
         {
           // "Tab" is only triggered by the row / cell editing feature
           if (event.shiftKey && colIndexBefore > firstColIndex) {
-            goToCell(colIndexBefore - 1, rowIndexBefore);
+            goToCell(colIndexBefore - 1, rowIndexBefore, 'left');
           } else if (!event.shiftKey && colIndexBefore < lastColIndex) {
-            goToCell(colIndexBefore + 1, rowIndexBefore);
+            goToCell(colIndexBefore + 1, rowIndexBefore, 'right');
           }
 
           break;
         }
 
-      case 'PageDown':
       case ' ':
+        {
+          const field = params.field;
+
+          if (field === GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+            break;
+          }
+
+          const colDef = params.colDef;
+
+          if (colDef && colDef.type === 'treeDataGroup') {
+            break;
+          }
+
+          if (!event.shiftKey && rowIndexBefore < lastRowIndexInPage) {
+            goToCell(colIndexBefore, Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage));
+          }
+
+          break;
+        }
+
+      case 'PageDown':
         {
           if (rowIndexBefore < lastRowIndexInPage) {
             goToCell(colIndexBefore, Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage));
@@ -267,6 +306,20 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       event.preventDefault();
     }
   }, [apiRef, currentPage, goToCell, goToHeader]);
+  const handleCellKeyDown = React.useCallback((params, event) => {
+    // Ignore portal
+    if (!event.currentTarget.contains(event.target)) {
+      return;
+    } // Get the most recent params because the cell mode may have changed by another listener
+
+
+    const cellParams = apiRef.current.getCellParams(params.id, params.field);
+
+    if (cellParams.cellMode !== GridCellModes.Edit && isNavigationKey(event.key)) {
+      apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, cellParams, event);
+    }
+  }, [apiRef]);
   useGridApiEventHandler(apiRef, GridEvents.cellNavigationKeyDown, handleCellNavigationKeyDown);
   useGridApiEventHandler(apiRef, GridEvents.columnHeaderKeyDown, handleColumnHeaderKeyDown);
+  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
 };

package/hooks/features/pagination/gridPaginationSelector.d.ts

@@ -33,9 +33,7 @@ export declare const gridPaginationRowRangeSelector: import("../../../utils/crea
  */
 export declare const gridPaginatedVisibleSortedGridRowEntriesSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, {
     id: import("../../..").GridRowId;
-    model: {
-        [key: string]: any;
-    };
+    model: any;
 }[]>;
 /**
  * Get the id of each row to include in the current page if the pagination is enabled.

package/hooks/features/pagination/useGridPage.js

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { useGridLogger, useGridSelector, useGridApiMethod, useGridApiEventHandler } from '../../utils';
 import { GridEvents } from '../../../models/events';
 import { gridVisibleTopLevelRowCountSelector } from '../filter';
-import { gridPageSelector } from './gridPaginationSelector';
-import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { gridPageSelector, gridPageSizeSelector } from './gridPaginationSelector';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { buildWarning } from '../../../utils/warning';
 export const getPageCount = (rowCount, pageSize) => {
   if (pageSize > 0 && rowCount > 0) {
@@ -91,8 +91,8 @@ export const useGridPage = (apiRef, props) => {
     apiRef.current.setState(mergeStateWithPage(page));
     return params;
   }, [apiRef]);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   /**
    * EVENTS
    */
@@ -110,7 +110,12 @@ export const useGridPage = (apiRef, props) => {
     apiRef.current.forceUpdate();
   };
 
+  const handlePageChange = () => apiRef.current.scrollToIndexes({
+    rowIndex: gridPageSelector(apiRef) * gridPageSizeSelector(apiRef)
+  });
+
   useGridApiEventHandler(apiRef, GridEvents.pageSizeChange, handlePageSizeChange);
+  useGridApiEventHandler(apiRef, GridEvents.pageChange, handlePageChange);
   /**
    * EFFECTS
    */

package/hooks/features/pagination/useGridPageSize.js

@@ -4,7 +4,7 @@ import { GridEvents } from '../../../models/events';
 import { useGridLogger, useGridApiMethod, useGridApiEventHandler, useGridSelector } from '../../utils';
 import { gridPageSizeSelector } from './gridPaginationSelector';
 import { gridDensityRowHeightSelector } from '../density';
-import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 export const defaultPageSize = autoPageSize => autoPageSize ? 0 : 100;
 
 const mergeStateWithPageSize = pageSize => state => _extends({}, state, {
@@ -84,8 +84,8 @@ export const useGridPageSize = (apiRef, props) => {
 
     return params;
   }, [apiRef]);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   /**
    * EVENTS
    */

package/hooks/features/preferencesPanel/gridPreferencePanelState.d.ts

@@ -1,6 +1,11 @@
 import { GridPreferencePanelsValue } from './gridPreferencePanelsValue';
 export interface GridPreferencePanelState {
     open: boolean;
+    /**
+     * Tab currently opened.
+     * @default GridPreferencePanelsValue.filter
+     * TODO v6: Remove the default behavior
+     */
     openedPanelValue?: GridPreferencePanelsValue;
 }
 export declare type GridPreferencePanelInitialState = GridPreferencePanelState;

package/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { GridEvents } from '../../../models/events';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
-import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { gridPreferencePanelStateSelector } from './gridPreferencePanelSelector';
+import { useGridSelector } from '../../utils/useGridSelector';
 export const preferencePanelStateInitializer = (state, props) => {
   var _props$initialState$p, _props$initialState;
 
@@ -19,6 +21,7 @@ export const preferencePanelStateInitializer = (state, props) => {
 
 export const useGridPreferencesPanel = apiRef => {
   const logger = useGridLogger(apiRef, 'useGridPreferencesPanel');
+  const preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   const hideTimeout = React.useRef();
   const immediateTimeout = React.useRef();
   /**
@@ -27,13 +30,20 @@ export const useGridPreferencesPanel = apiRef => {
 
   const hidePreferences = React.useCallback(() => {
     logger.debug('Hiding Preferences Panel');
+
+    if (preferencePanelState.openedPanelValue) {
+      apiRef.current.publishEvent(GridEvents.preferencePanelClose, {
+        openedPanelValue: preferencePanelState.openedPanelValue
+      });
+    }
+
     apiRef.current.setState(state => _extends({}, state, {
       preferencePanel: {
         open: false
       }
     }));
     apiRef.current.forceUpdate();
-  }, [apiRef, logger]); // This is to prevent the preferences from closing when you open a select box or another panel,
+  }, [apiRef, logger, preferencePanelState.openedPanelValue]); // This is to prevent the preferences from closing when you open a select box or another panel,
   // The issue is in MUI core V4 => Fixed in V5
 
   const doNotHidePanel = React.useCallback(() => {
@@ -53,8 +63,11 @@ export const useGridPreferencesPanel = apiRef => {
         openedPanelValue: newValue
       })
     }));
+    apiRef.current.publishEvent(GridEvents.preferencePanelOpen, {
+      openedPanelValue: newValue
+    });
     apiRef.current.forceUpdate();
-  }, [doNotHidePanel, apiRef, logger]);
+  }, [logger, doNotHidePanel, apiRef]);
   useGridApiMethod(apiRef, {
     showPreferences,
     hidePreferences: hidePreferencesDelayed
@@ -85,8 +98,8 @@ export const useGridPreferencesPanel = apiRef => {
 
     return params;
   }, [apiRef]);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   /**
    * EFFECTS
    */

package/hooks/features/rows/gridRowsSelector.d.ts

@@ -1,8 +1,9 @@
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
 export declare const gridRowsStateSelector: (state: GridStateCommunity) => import("./gridRowsState").GridRowsState;
 export declare const gridRowCountSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
+export declare const gridRowsLoadingSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, boolean | undefined>;
 export declare const gridTopLevelRowCountSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
-export declare const gridRowsLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridRowsLookup>;
+export declare const gridRowsLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridRowsLookup<any>>;
 export declare const gridRowTreeSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridRowTreeConfig>;
 export declare const gridRowGroupingNameSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string>;
 export declare const gridRowTreeDepthSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;

package/hooks/features/rows/gridRowsSelector.js

@@ -1,6 +1,7 @@
 import { createSelector } from '../../../utils/createSelector';
 export const gridRowsStateSelector = state => state.rows;
 export const gridRowCountSelector = createSelector(gridRowsStateSelector, rows => rows.totalRowCount);
+export const gridRowsLoadingSelector = createSelector(gridRowsStateSelector, rows => rows.loading);
 export const gridTopLevelRowCountSelector = createSelector(gridRowsStateSelector, rows => rows.totalTopLevelRowCount);
 export const gridRowsLookupSelector = createSelector(gridRowsStateSelector, rows => rows.idRowsLookup);
 export const gridRowTreeSelector = createSelector(gridRowsStateSelector, rows => rows.tree);

package/hooks/features/rows/gridRowsState.d.ts

@@ -1,7 +1,22 @@
 /// <reference types="node" />
-import type { GridRowGroupingResult, GridRowGroupParams } from '../../core/rowGroupsPreProcessing';
-import { GridRowsProp } from '../../../models/gridRows';
-export declare type GridRowInternalCacheValue = Omit<GridRowGroupParams, 'previousTree'>;
+import { GridRowId, GridRowsLookup, GridRowsProp, GridRowTreeConfig } from '../../../models/gridRows';
+export interface GridRowTreeCreationParams {
+    ids: GridRowId[];
+    idRowsLookup: GridRowsLookup;
+    previousTree: GridRowTreeConfig | null;
+}
+export interface GridRowTreeCreationValue {
+    /**
+     * Name of the algorithm used to group the rows
+     * It is useful to decide which filtering / sorting algorithm to apply, to avoid applying tree-data filtering on a grouping-by-column dataset for instance.
+     */
+    groupingName: string;
+    tree: GridRowTreeConfig;
+    treeDepth: number;
+    ids: GridRowId[];
+    idRowsLookup: GridRowsLookup;
+}
+export declare type GridRowInternalCacheValue = Omit<GridRowTreeCreationParams, 'previousTree'>;
 export interface GridRowsInternalCacheState {
     value: GridRowInternalCacheValue;
     /**
@@ -15,10 +30,14 @@ export interface GridRowsInternalCache {
     timeout: NodeJS.Timeout | null;
     lastUpdateMs: number;
 }
-export interface GridRowsState extends GridRowGroupingResult {
+export interface GridRowsState extends GridRowTreeCreationValue {
+    /**
+     * Matches the value of the `loading` prop.
+     */
+    loading?: boolean;
     /**
      * Amount of rows before applying the filtering.
-     * It also count the expanded and collapsed children rows.
+     * It also counts the expanded and collapsed children rows.
      */
     totalRowCount: number;
     /**

package/hooks/features/rows/gridRowsUtils.d.ts

@@ -0,0 +1,8 @@
+import { GridRowId, GridRowModel } from '../../../models';
+/**
+ * A helper function to check if the id provided is valid.
+ * @param {GridRowId} id Id as [[GridRowId]].
+ * @param {GridRowModel | Partial<GridRowModel>} row Row as [[GridRowModel]].
+ * @param {string} detailErrorMessage A custom error message to display for invalid IDs
+ */
+export declare function checkGridRowIdIsValid(id: GridRowId, row: GridRowModel | Partial<GridRowModel>, detailErrorMessage?: string): void;

package/hooks/features/rows/gridRowsUtils.js

@@ -0,0 +1,11 @@
+/**
+ * A helper function to check if the id provided is valid.
+ * @param {GridRowId} id Id as [[GridRowId]].
+ * @param {GridRowModel | Partial<GridRowModel>} row Row as [[GridRowModel]].
+ * @param {string} detailErrorMessage A custom error message to display for invalid IDs
+ */
+export function checkGridRowIdIsValid(id, row, detailErrorMessage = 'A row was provided without id in the rows prop:') {
+  if (id == null) {
+    throw new Error(['MUI: The data grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
+  }
+}

package/hooks/features/rows/index.d.ts

@@ -2,3 +2,4 @@ export * from './gridRowsMetaSelector';
 export * from './gridRowsMetaState';
 export * from './gridRowsSelector';
 export type { GridRowsState } from './gridRowsState';
+export { checkGridRowIdIsValid } from './gridRowsUtils';

package/hooks/features/rows/index.js

@@ -1,4 +1,4 @@
 export * from './gridRowsMetaSelector';
 export * from './gridRowsMetaState';
 export * from './gridRowsSelector';
-export {};
+export { checkGridRowIdIsValid } from './gridRowsUtils';

package/hooks/features/rows/useGridRows.d.ts

@@ -2,8 +2,5 @@ import * as React from 'react';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
-export declare const rowsStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'rows' | 'rowCount' | 'getRowId'>>;
-/**
- * @requires useGridRowGroupsPreProcessing (method)
- */
-export declare const useGridRows: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'rows' | 'getRowId' | 'rowCount' | 'throttleRowsMs' | 'signature' | 'pagination' | 'paginationMode'>) => void;
+export declare const rowsStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'rows' | 'rowCount' | 'getRowId' | 'loading'>>;
+export declare const useGridRows: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'rows' | 'getRowId' | 'rowCount' | 'throttleRowsMs' | 'signature' | 'pagination' | 'paginationMode' | 'loading'>) => void;