@mui/x-data-grid 5.7.0 → 5.8.0

package/modern/hooks/features/columns/useGridColumns.js

@@ -5,7 +5,7 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnFieldsSelector, gridColumnDefinitionsSelector, gridColumnLookupSelector, gridColumnsMetaSelector, gridColumnsSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from './gridColumnsSelector';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
-import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { hydrateColumnsWidth, computeColumnTypes, createColumnsState, mergeColumnsState, COLUMNS_DIMENSION_PROPERTIES } from './gridColumnsUtils';
 import { GridPreferencePanelsValue } from '../preferencesPanel';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -14,7 +14,7 @@ export const columnsStateInitializer = (state, props, apiRef) => {
   const columnsTypes = computeColumnTypes(props.columnTypes);
   const columnsState = createColumnsState({
     apiRef,
-    columnsTypes,
+    columnTypes: columnsTypes,
     columnsToUpsert: props.columns,
     initialState: props.initialState?.columns,
     shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
@@ -33,13 +33,15 @@ export const columnsStateInitializer = (state, props, apiRef) => {
 
 export function useGridColumns(apiRef, props) {
   const logger = useGridLogger(apiRef, 'useGridColumns');
-  const columnsTypes = React.useMemo(() => computeColumnTypes(props.columnTypes), [props.columnTypes]);
+  const columnTypes = React.useMemo(() => computeColumnTypes(props.columnTypes), [props.columnTypes]);
+  const previousColumnsProp = React.useRef(props.columns);
+  const previousColumnTypesProp = React.useRef(columnTypes);
   /**
    * If `initialState.columns.columnVisibilityModel` or `columnVisibilityModel` was defined during the 1st render, we are directly updating the model
    * If not, we keep the old behavior and update the `GridColDef.hide` option (which will update the state model through the `GridColDef.hide` => `columnVisibilityModel` sync in `createColumnsState`
    */
 
-  const isUsingColumnVisibilityModel = React.useRef(!!props.columnVisibilityModel || !!props.initialState?.columns?.columnVisibilityModel).current;
+  const isUsingColumnVisibilityModel = React.useRef(!!props.columnVisibilityModel || !!props.initialState?.columns?.columnVisibilityModel);
   apiRef.current.unstable_updateControlState({
     stateId: 'visibleColumns',
     propModel: props.columnVisibilityModel,
@@ -76,7 +78,7 @@ export function useGridColumns(apiRef, props) {
       apiRef.current.setState(state => _extends({}, state, {
         columns: createColumnsState({
           apiRef,
-          columnsTypes,
+          columnTypes,
           columnsToUpsert: [],
           initialState: undefined,
           shouldRegenColumnVisibilityModelFromColumns: false,
@@ -86,24 +88,24 @@ export function useGridColumns(apiRef, props) {
       }));
       apiRef.current.forceUpdate();
     }
-  }, [apiRef, columnsTypes]);
+  }, [apiRef, columnTypes]);
   const updateColumns = React.useCallback(columns => {
     const columnsState = createColumnsState({
       apiRef,
-      columnsTypes,
+      columnTypes,
       columnsToUpsert: columns,
       initialState: undefined,
       shouldRegenColumnVisibilityModelFromColumns: true,
       keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
-  }, [apiRef, setGridColumnsState, columnsTypes]);
+  }, [apiRef, setGridColumnsState, columnTypes]);
   const updateColumn = React.useCallback(column => apiRef.current.updateColumns([column]), [apiRef]);
   const setColumnVisibility = React.useCallback((field, isVisible) => {
     // We keep updating the `hide` option of `GridColDef` when not controlling the model to avoid any breaking change.
     // `updateColumns` take care of updating the model itself if needs be.
     // TODO v6: stop using the `hide` field even when the model is not defined
-    if (isUsingColumnVisibilityModel) {
+    if (isUsingColumnVisibilityModel.current) {
       const columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
       const isCurrentlyVisible = columnVisibilityModel[field] ?? true;
 
@@ -129,7 +131,7 @@ export function useGridColumns(apiRef, props) {
       };
       apiRef.current.publishEvent(GridEvents.columnVisibilityChange, params);
     }
-  }, [apiRef, isUsingColumnVisibilityModel]);
+  }, [apiRef]);
   const setColumnIndex = React.useCallback((field, targetIndexPosition) => {
     const allColumns = gridColumnFieldsSelector(apiRef);
     const oldIndexPosition = allColumns.findIndex(col => col === field);
@@ -190,7 +192,7 @@ export function useGridColumns(apiRef, props) {
   const stateExportPreProcessing = React.useCallback(prevState => {
     const columnsStateToExport = {};
 
-    if (isUsingColumnVisibilityModel) {
+    if (isUsingColumnVisibilityModel.current) {
       const columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
       const hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(value => value === false);
 
@@ -219,9 +221,9 @@ export function useGridColumns(apiRef, props) {
     return _extends({}, prevState, {
       columns: columnsStateToExport
     });
-  }, [apiRef, isUsingColumnVisibilityModel]);
+  }, [apiRef]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
-    const columnVisibilityModelToImport = isUsingColumnVisibilityModel ? context.stateToRestore.columns?.columnVisibilityModel : undefined;
+    const columnVisibilityModelToImport = isUsingColumnVisibilityModel.current ? context.stateToRestore.columns?.columnVisibilityModel : undefined;
     const initialState = context.stateToRestore.columns;
 
     if (columnVisibilityModelToImport == null && initialState == null) {
@@ -230,10 +232,10 @@ export function useGridColumns(apiRef, props) {
 
     const columnsState = createColumnsState({
       apiRef,
-      columnsTypes,
+      columnTypes,
       columnsToUpsert: [],
       initialState,
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
+      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
       currentColumnVisibilityModel: columnVisibilityModelToImport,
       keepOnlyColumnsToUpsert: false
     });
@@ -244,7 +246,7 @@ export function useGridColumns(apiRef, props) {
     }
 
     return params;
-  }, [apiRef, isUsingColumnVisibilityModel, columnsTypes]);
+  }, [apiRef, columnTypes]);
   const preferencePanelPreProcessing = React.useCallback((initialValue, value) => {
     if (value === GridPreferencePanelsValue.columns) {
       const ColumnsPanel = props.components.ColumnsPanel;
@@ -253,14 +255,14 @@ export function useGridColumns(apiRef, props) {
 
     return initialValue;
   }, [props.components.ColumnsPanel, props.componentsProps?.columnsPanel]);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'preferencePanel', preferencePanelPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'preferencePanel', preferencePanelPreProcessing);
   /**
    * EVENTS
    */
 
-  const handlePreProcessorRegister = React.useCallback(name => {
+  const handlepipeProcessorRegister = React.useCallback(name => {
     if (name !== 'hydrateColumns') {
       return;
     }
@@ -268,14 +270,14 @@ export function useGridColumns(apiRef, props) {
     logger.info(`Columns pre-processing have changed, regenerating the columns`);
     const columnsState = createColumnsState({
       apiRef,
-      columnsTypes,
+      columnTypes,
       columnsToUpsert: [],
       initialState: undefined,
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
+      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
       keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
-  }, [apiRef, logger, setGridColumnsState, columnsTypes, isUsingColumnVisibilityModel]);
+  }, [apiRef, logger, setGridColumnsState, columnTypes]);
   const prevInnerWidth = React.useRef(null);
 
   const handleGridSizeChange = viewportInnerSize => {
@@ -285,7 +287,7 @@ export function useGridColumns(apiRef, props) {
     }
   };
 
-  useGridApiEventHandler(apiRef, GridEvents.preProcessorRegister, handlePreProcessorRegister);
+  useGridApiEventHandler(apiRef, GridEvents.pipeProcessorRegister, handlepipeProcessorRegister);
   useGridApiEventHandler(apiRef, GridEvents.viewportInnerSizeChange, handleGridSizeChange);
   useGridApiOptionHandler(apiRef, GridEvents.columnVisibilityChange, props.onColumnVisibilityChange);
   /**
@@ -302,17 +304,24 @@ export function useGridColumns(apiRef, props) {
     }
 
     logger.info(`GridColumns have changed, new length ${props.columns.length}`);
+
+    if (previousColumnsProp.current === props.columns && previousColumnTypesProp.current === columnTypes) {
+      return;
+    }
+
     const columnsState = createColumnsState({
       apiRef,
-      columnsTypes,
+      columnTypes,
       initialState: undefined,
       // If the user provides a model, we don't want to set it in the state here because it has it's dedicated `useEffect` which calls `setColumnVisibilityModel`
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
+      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
       columnsToUpsert: props.columns,
       keepOnlyColumnsToUpsert: true
     });
+    previousColumnsProp.current = props.columns;
+    previousColumnTypesProp.current = columnTypes;
     setGridColumnsState(columnsState);
-  }, [logger, apiRef, setGridColumnsState, props.columns, columnsTypes, isUsingColumnVisibilityModel]);
+  }, [logger, apiRef, setGridColumnsState, props.columns, columnTypes]);
   React.useEffect(() => {
     if (props.columnVisibilityModel !== undefined) {
       apiRef.current.setColumnVisibilityModel(props.columnVisibilityModel);

package/modern/hooks/features/dimensions/useGridDimensions.js

@@ -132,7 +132,8 @@ export function useGridDimensions(apiRef, props) {
   const dimensionsApi = {
     resize,
     getRootDimensions,
-    unstable_getViewportPageSize: getViewportPageSize
+    unstable_getViewportPageSize: getViewportPageSize,
+    unstable_updateGridDimensionsRef: updateGridDimensionsRef
   };
   useGridApiMethod(apiRef, dimensionsApi, 'GridDimensionsApi');
   const debounceResize = React.useMemo(() => debounce(resize, 60), [resize]);

package/modern/hooks/features/editRows/useGridCellEditing.new.js

@@ -6,10 +6,13 @@ import { GridEditModes, GridCellModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridEditRowsStateSelector } from './gridEditRowsSelector';
 import { isPrintableKey } from '../../../utils/keyboardUtils';
+import { buildWarning } from '../../../utils/warning';
 import { GridCellEditStartReasons, GridCellEditStopReasons } from '../../../models/params/gridEditCellParams';
+const missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#persistence.'], 'error');
 export const useGridCellEditing = (apiRef, props) => {
   const {
-    processRowUpdate
+    processRowUpdate,
+    onProcessRowUpdateError
   } = props;
 
   const runIfEditModeIsCell = callback => (...args) => {
@@ -240,17 +243,29 @@ export const useGridCellEditing = (apiRef, props) => {
     });
 
     if (processRowUpdate) {
-      Promise.resolve(processRowUpdate(rowUpdate, row)).then(finalRowUpdate => {
-        apiRef.current.updateRows([finalRowUpdate]);
-        updateFocusedCellIfNeeded();
-        updateOrDeleteFieldState(id, field, null);
-      });
+      const handleError = errorThrown => {
+        if (onProcessRowUpdateError) {
+          onProcessRowUpdateError(errorThrown);
+        } else {
+          missingOnProcessRowUpdateErrorWarning();
+        }
+      };
+
+      try {
+        Promise.resolve(processRowUpdate(rowUpdate, row)).then(finalRowUpdate => {
+          apiRef.current.updateRows([finalRowUpdate]);
+          updateFocusedCellIfNeeded();
+          updateOrDeleteFieldState(id, field, null);
+        }).catch(handleError);
+      } catch (errorThrown) {
+        handleError(errorThrown);
+      }
     } else {
       apiRef.current.updateRows([rowUpdate]);
       updateFocusedCellIfNeeded();
       updateOrDeleteFieldState(id, field, null);
     }
-  }, [apiRef, processRowUpdate, throwIfNotInMode, updateOrDeleteFieldState]);
+  }, [apiRef, onProcessRowUpdateError, processRowUpdate, throwIfNotInMode, updateOrDeleteFieldState]);
   const setCellEditingEditCellValue = React.useCallback(async params => {
     const {
       id,

package/modern/hooks/features/editRows/useGridRowEditing.new.js

@@ -9,12 +9,15 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridEditRowsStateSelector } from './gridEditRowsSelector';
 import { isPrintableKey } from '../../../utils/keyboardUtils';
 import { gridColumnFieldsSelector } from '../columns/gridColumnsSelector';
+import { buildWarning } from '../../../utils/warning';
 import { GridRowEditStopReasons, GridRowEditStartReasons } from '../../../models/params/gridRowParams';
+const missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#persistence.'], 'error');
 export const useGridRowEditing = (apiRef, props) => {
   const focusTimeout = React.useRef(null);
   const nextFocusedCell = React.useRef(null);
   const {
-    processRowUpdate
+    processRowUpdate,
+    onProcessRowUpdateError
   } = props;
 
   const runIfEditModeIsRow = callback => (...args) => {
@@ -347,17 +350,29 @@ export const useGridRowEditing = (apiRef, props) => {
     });
 
     if (processRowUpdate) {
-      Promise.resolve(processRowUpdate(rowUpdate, row)).then(finalRowUpdate => {
-        apiRef.current.updateRows([finalRowUpdate]);
-        updateFocusedCellIfNeeded();
-        updateOrDeleteRowState(id, null);
-      });
+      const handleError = errorThrown => {
+        if (onProcessRowUpdateError) {
+          onProcessRowUpdateError(errorThrown);
+        } else {
+          missingOnProcessRowUpdateErrorWarning();
+        }
+      };
+
+      try {
+        Promise.resolve(processRowUpdate(rowUpdate, row)).then(finalRowUpdate => {
+          apiRef.current.updateRows([finalRowUpdate]);
+          updateFocusedCellIfNeeded();
+          updateOrDeleteRowState(id, null);
+        }).catch(handleError);
+      } catch (errorThrown) {
+        handleError(errorThrown);
+      }
     } else {
       apiRef.current.updateRows([rowUpdate]);
       updateFocusedCellIfNeeded();
       updateOrDeleteRowState(id, null);
     }
-  }, [apiRef, processRowUpdate, throwIfNotInMode, updateOrDeleteRowState]);
+  }, [apiRef, onProcessRowUpdateError, processRowUpdate, throwIfNotInMode, updateOrDeleteRowState]);
   const setRowEditingEditCellValue = React.useCallback(params => {
     const {
       id,

package/modern/hooks/features/events/useGridEvents.js

@@ -17,6 +17,8 @@ export function useGridEvents(apiRef, props) {
   useGridApiOptionHandler(apiRef, GridEvents.cellDoubleClick, props.onCellDoubleClick);
   useGridApiOptionHandler(apiRef, GridEvents.cellKeyDown, props.onCellKeyDown);
   useGridApiOptionHandler(apiRef, GridEvents.cellFocusOut, props.onCellFocusOut);
+  useGridApiOptionHandler(apiRef, GridEvents.preferencePanelClose, props.onPreferencePanelClose);
+  useGridApiOptionHandler(apiRef, GridEvents.preferencePanelOpen, props.onPreferencePanelOpen);
   useGridApiOptionHandler(apiRef, GridEvents.rowDoubleClick, props.onRowDoubleClick);
   useGridApiOptionHandler(apiRef, GridEvents.rowClick, props.onRowClick);
   useGridApiOptionHandler(apiRef, GridEvents.componentError, props.onError);

package/modern/hooks/features/filter/useGridFilter.js

@@ -11,7 +11,7 @@ import { getDefaultGridFilterModel } from './gridFilterState';
 import { gridFilterModelSelector, gridVisibleSortedRowEntriesSelector } from './gridFilterSelector';
 import { useFirstRender } from '../../utils/useFirstRender';
 import { gridRowIdsSelector } from '../rows';
-import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+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";
@@ -213,9 +213,9 @@ export const useGridFilter = (apiRef, props) => {
       filteredDescendantCountLookup: {}
     };
   }, [apiRef, props.filterMode]);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'preferencePanel', preferencePanelPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'preferencePanel', preferencePanelPreProcessing);
   useGridRegisterStrategyProcessor(apiRef, GRID_DEFAULT_STRATEGY, 'filtering', flatFilteringMethod);
   /**
    * EVENTS

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

@@ -7,13 +7,12 @@ 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';
 /**
- * @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
@@ -111,8 +110,16 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
           break;
         }
 
-      case 'PageDown':
       case ' ':
+        {
+          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));
@@ -265,6 +272,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/modern/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) {
@@ -85,8 +85,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
    */
@@ -104,7 +104,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/modern/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, {
@@ -78,8 +78,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/modern/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) => _extends({}, state, {
   preferencePanel: props.initialState?.preferencePanel ?? {
     open: false
@@ -15,6 +17,7 @@ export const preferencePanelStateInitializer = (state, props) => _extends({}, st
 
 export const useGridPreferencesPanel = apiRef => {
   const logger = useGridLogger(apiRef, 'useGridPreferencesPanel');
+  const preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   const hideTimeout = React.useRef();
   const immediateTimeout = React.useRef();
   /**
@@ -23,13 +26,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(() => {
@@ -49,8 +59,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
@@ -81,8 +94,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/modern/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/modern/hooks/features/rows/index.js

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

package/modern/hooks/features/rows/useGridRows.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { GridEvents } from '../../../models/events';
-import { checkGridRowIdIsValid } from '../../../models/gridRows';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowIdsSelector, gridRowGroupingNameSelector } from './gridRowsSelector';
 import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
+import { checkGridRowIdIsValid } from './gridRowsUtils';
 
 function getGridRowId(rowModel, getRowId, detailErrorMessage) {
   const id = getRowId ? getRowId(rowModel) : rowModel.id;

package/modern/hooks/features/rows/useGridRowsMeta.js

@@ -70,7 +70,7 @@ export const useGridRowsMeta = (apiRef, props) => {
           initialHeights.spacingBottom = spacing.bottom ?? 0;
         }
 
-        const sizes = apiRef.current.unstable_applyPreProcessors('rowHeight', initialHeights, row);
+        const sizes = apiRef.current.unstable_applyPipeProcessors('rowHeight', initialHeights, row);
         const finalRowHeight = Object.values(sizes).reduce((acc2, value) => acc2 + value, 0);
         rowsHeightLookup.current[row.id] = {
           value: baseRowHeight,
@@ -108,14 +108,14 @@ export const useGridRowsMeta = (apiRef, props) => {
   React.useEffect(() => {
     hydrateRowsMeta();
   }, [rowHeight, filterState, paginationState, sortingState, hydrateRowsMeta]);
-  const handlePreProcessorRegister = React.useCallback(name => {
+  const handlepipeProcessorRegister = React.useCallback(name => {
     if (name !== 'rowHeight') {
       return;
     }
 
     hydrateRowsMeta();
   }, [hydrateRowsMeta]);
-  useGridApiEventHandler(apiRef, GridEvents.preProcessorRegister, handlePreProcessorRegister);
+  useGridApiEventHandler(apiRef, GridEvents.pipeProcessorRegister, handlepipeProcessorRegister);
   const rowsMetaApi = {
     unstable_getRowHeight: getTargetRowHeight,
     unstable_getRowInternalSizes: getRowInternalSizes,

package/modern/hooks/features/scroll/useGridScroll.js

@@ -4,8 +4,7 @@ import { gridColumnPositionsSelector, gridVisibleColumnDefinitionsSelector } fro
 import { gridPageSelector, gridPageSizeSelector } from '../pagination/gridPaginationSelector';
 import { gridRowCountSelector } from '../rows/gridRowsSelector';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { useGridNativeEventListener } from '../../utils/useGridNativeEventListener'; // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
+import { useGridApiMethod } from '../../utils/useGridApiMethod'; // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
 // Similar to https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
 
 function scrollIntoView(dimensions) {
@@ -42,8 +41,9 @@ export const useGridScroll = (apiRef, props) => {
   const scrollToIndexes = React.useCallback(params => {
     const totalRowCount = gridRowCountSelector(apiRef);
     const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+    const scrollToHeader = params.rowIndex == null;
 
-    if (totalRowCount === 0 || visibleColumns.length === 0) {
+    if (!scrollToHeader && totalRowCount === 0 || visibleColumns.length === 0) {
       return false;
     }
 
@@ -74,7 +74,7 @@ export const useGridScroll = (apiRef, props) => {
       });
     }
 
-    scrollCoordinates = apiRef.current.unstable_applyPreProcessors('scrollToIndexes', scrollCoordinates, params);
+    scrollCoordinates = apiRef.current.unstable_applyPipeProcessors('scrollToIndexes', scrollCoordinates, params);
 
     if (typeof scrollCoordinates.left !== undefined || typeof scrollCoordinates.top !== undefined) {
       apiRef.current.scroll(scrollCoordinates);
@@ -116,9 +116,4 @@ export const useGridScroll = (apiRef, props) => {
     getScrollPosition
   };
   useGridApiMethod(apiRef, scrollApi, 'GridScrollApi');
-  const preventScroll = React.useCallback(event => {
-    event.target.scrollLeft = 0;
-    event.target.scrollTop = 0;
-  }, []);
-  useGridNativeEventListener(apiRef, () => apiRef.current?.renderingZoneRef?.current?.parentElement, 'scroll', preventScroll);
 };