@mui/x-data-grid 5.7.0 → 5.8.0

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/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

@@ -2,7 +2,7 @@ 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 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/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.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;
@@ -91,9 +91,9 @@ export const useGridRows = (apiRef, props) => {
 
   const currentPage = useGridVisibleRows(apiRef, props);
   const getRow = React.useCallback(id => {
-    var _gridRowsLookupSelect;
+    var _ref;
 
-    return (_gridRowsLookupSelect = gridRowsLookupSelector(apiRef)[id]) != null ? _gridRowsLookupSelect : null;
+    return (_ref = gridRowsLookupSelector(apiRef)[id]) != null ? _ref : null;
   }, [apiRef]);
   const lookup = React.useMemo(() => currentPage.rows.reduce((acc, {
     id

package/hooks/features/rows/useGridRowsMeta.js

@@ -74,7 +74,7 @@ export const useGridRowsMeta = (apiRef, props) => {
           initialHeights.spacingBottom = (_spacing$bottom = spacing.bottom) != null ? _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,
@@ -120,14 +120,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/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,13 +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, () => {
-    var _apiRef$current, _apiRef$current$rende, _apiRef$current$rende2;
-
-    return (_apiRef$current = apiRef.current) == null ? void 0 : (_apiRef$current$rende = _apiRef$current.renderingZoneRef) == null ? void 0 : (_apiRef$current$rende2 = _apiRef$current$rende.current) == null ? void 0 : _apiRef$current$rende2.parentElement;
-  }, 'scroll', preventScroll);
 };

package/hooks/features/selection/gridSelectionSelector.d.ts

@@ -2,7 +2,5 @@ import { GridStateCommunity } from '../../../models/gridStateCommunity';
 import { GridRowId } from '../../../models/gridRows';
 export declare const gridSelectionStateSelector: (state: GridStateCommunity) => import("../../..").GridSelectionModel;
 export declare const selectedGridRowsCountSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
-export declare const selectedGridRowsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Map<GridRowId, {
-    [key: string]: any;
-}>>;
+export declare const selectedGridRowsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Map<GridRowId, any>>;
 export declare const selectedIdsLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Record<GridRowId, GridRowId>>;

package/hooks/features/selection/useGridSelection.d.ts

@@ -4,7 +4,9 @@ import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
 export declare const selectionStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'selectionModel'>>;
 /**
- * @requires useGridRows (state, method)
- * @requires useGridParamsApi (method)
+ * @requires useGridRows (state, method) - can be after
+ * @requires useGridParamsApi (method) - can be after
+ * @requires useGridFocus (state) - can be after
+ * @requires useGridKeyboardNavigation (`cellKeyDown` event must first be consumed by it)
  */
 export declare const useGridSelection: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'checkboxSelection' | 'selectionModel' | 'onSelectionModelChange' | 'disableMultipleSelection' | 'disableSelectionOnClick' | 'isRowSelectable' | 'checkboxSelectionVisibleOnly' | 'pagination' | 'paginationMode' | 'classes'>) => void;

package/hooks/features/selection/useGridSelection.js

@@ -5,14 +5,14 @@ import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridRowsLookupSelector } from '../rows/gridRowsSelector';
-import { isGridCellRoot } from '../../../utils/domUtils';
 import { gridSelectionStateSelector, selectedGridRowsSelector, selectedIdsLookupSelector } from './gridSelectionSelector';
 import { gridPaginatedVisibleSortedGridRowIdsSelector } from '../pagination';
+import { gridFocusCellSelector } from '../focus/gridFocusStateSelector';
 import { gridVisibleSortedRowIdsSelector } from '../filter/gridFilterSelector';
 import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from '../../../colDef';
 import { GridCellModes } from '../../../models/gridEditRowModel';
-import { isKeyboardEvent } from '../../../utils/keyboardUtils';
-import { getVisibleRows } from '../../utils/useGridVisibleRows';
+import { isKeyboardEvent, isNavigationKey } from '../../../utils/keyboardUtils';
+import { getVisibleRows, useGridVisibleRows } from '../../utils/useGridVisibleRows';
 
 const getSelectionModelPropValue = (selectionModelProp, prevSelectionModel) => {
   if (selectionModelProp == null) {
@@ -38,8 +38,10 @@ export const selectionStateInitializer = (state, props) => {
   });
 };
 /**
- * @requires useGridRows (state, method)
- * @requires useGridParamsApi (method)
+ * @requires useGridRows (state, method) - can be after
+ * @requires useGridParamsApi (method) - can be after
+ * @requires useGridFocus (state) - can be after
+ * @requires useGridKeyboardNavigation (`cellKeyDown` event must first be consumed by it)
  */
 
 export const useGridSelection = (apiRef, props) => {
@@ -64,7 +66,8 @@ export const useGridSelection = (apiRef, props) => {
     paginationMode
   } = props;
   const canHaveMultipleSelection = !disableMultipleSelection || checkboxSelection;
-  const expandRowRangeSelection = React.useCallback(id => {
+  const visibleRows = useGridVisibleRows(apiRef, props);
+  const expandMouseRowRangeSelection = React.useCallback(id => {
     var _lastRowToggled$curre;
 
     let endId = id;
@@ -171,12 +174,13 @@ export const useGridSelection = (apiRef, props) => {
       return;
     }
 
-    logger.debug(`Expanding selection from row ${startId} to row ${endId}`);
-    const visibleRowIds = gridVisibleSortedRowIdsSelector(apiRef);
-    const startIndex = visibleRowIds.indexOf(startId);
-    const endIndex = visibleRowIds.indexOf(endId);
+    logger.debug(`Expanding selection from row ${startId} to row ${endId}`); // Using rows from all pages allow to select a range across several pages
+
+    const allPagesRowIds = gridVisibleSortedRowIdsSelector(apiRef);
+    const startIndex = allPagesRowIds.indexOf(startId);
+    const endIndex = allPagesRowIds.indexOf(endId);
     const [start, end] = startIndex > endIndex ? [endIndex, startIndex] : [startIndex, endIndex];
-    const rowsBetweenStartAndEnd = visibleRowIds.slice(start, end + 1);
+    const rowsBetweenStartAndEnd = allPagesRowIds.slice(start, end + 1);
     apiRef.current.selectRows(rowsBetweenStartAndEnd, isSelected, resetSelection);
   }, [apiRef, logger]);
   const selectionApi = {
@@ -250,11 +254,11 @@ export const useGridSelection = (apiRef, props) => {
     }
 
     if (event.shiftKey && (canHaveMultipleSelection || checkboxSelection)) {
-      expandRowRangeSelection(params.id);
+      expandMouseRowRangeSelection(params.id);
     } else {
       handleSingleRowSelection(params.id, event);
     }
-  }, [disableSelectionOnClick, canHaveMultipleSelection, checkboxSelection, apiRef, expandRowRangeSelection, handleSingleRowSelection]);
+  }, [disableSelectionOnClick, canHaveMultipleSelection, checkboxSelection, apiRef, expandMouseRowRangeSelection, handleSingleRowSelection]);
   const preventSelectionOnShift = React.useCallback((params, event) => {
     if (canHaveMultipleSelection && event.shiftKey) {
       var _window$getSelection;
@@ -264,35 +268,78 @@ export const useGridSelection = (apiRef, props) => {
   }, [canHaveMultipleSelection]);
   const handleRowSelectionCheckboxChange = React.useCallback((params, event) => {
     if (event.nativeEvent.shiftKey) {
-      expandRowRangeSelection(params.id);
+      expandMouseRowRangeSelection(params.id);
     } else {
       apiRef.current.selectRow(params.id, params.value);
     }
-  }, [apiRef, expandRowRangeSelection]);
+  }, [apiRef, expandMouseRowRangeSelection]);
   const handleHeaderSelectionCheckboxChange = React.useCallback(params => {
     const shouldLimitSelectionToCurrentPage = props.checkboxSelectionVisibleOnly && props.pagination;
     const rowsToBeSelected = shouldLimitSelectionToCurrentPage ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef) : gridVisibleSortedRowIdsSelector(apiRef);
     apiRef.current.selectRows(rowsToBeSelected, params.value);
   }, [apiRef, props.checkboxSelectionVisibleOnly, props.pagination]);
   const handleCellKeyDown = React.useCallback((params, event) => {
-    // Ignore portal
+    // Get the most recent cell mode because it may have been changed by another listener
+    if (apiRef.current.getCellMode(params.id, params.field) === GridCellModes.Edit) {
+      return;
+    } // Ignore portal
     // Do not apply shortcuts if the focus is not on the cell root component
-    // TODO replace with !event.currentTarget.contains(event.target as Element)
-    if (!isGridCellRoot(event.target)) {
+
+
+    if (!event.currentTarget.contains(event.target)) {
       return;
-    } // Get the most recent params because the cell mode may have changed by another listener
+    }
 
+    if (isNavigationKey(event.key) && event.shiftKey) {
+      // The cell that has focus after the keyboard navigation
+      const focusCell = gridFocusCellSelector(apiRef);
 
-    const cellParams = apiRef.current.getCellParams(params.id, params.field);
-    const isEditMode = cellParams.cellMode === GridCellModes.Edit;
+      if (focusCell && focusCell.id !== params.id) {
+        event.preventDefault();
+        const isNextRowSelected = apiRef.current.isRowSelected(focusCell.id);
 
-    if (isEditMode) {
-      return;
+        if (!canHaveMultipleSelection) {
+          apiRef.current.selectRow(focusCell.id, !isNextRowSelected, true);
+          return;
+        }
+
+        const newRowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(focusCell.id);
+        const previousRowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(params.id);
+        let start;
+        let end;
+
+        if (newRowIndex > previousRowIndex) {
+          if (isNextRowSelected) {
+            // We are navigating to the bottom of the page and adding selected rows
+            start = previousRowIndex;
+            end = newRowIndex - 1;
+          } else {
+            // We are navigating to the bottom of the page and removing selected rows
+            start = previousRowIndex;
+            end = newRowIndex;
+          }
+        } else {
+          // eslint-disable-next-line no-lonely-if
+          if (isNextRowSelected) {
+            // We are navigating to the top of the page and removing selected rows
+            start = newRowIndex + 1;
+            end = previousRowIndex;
+          } else {
+            // We are navigating to the top of the page and adding selected rows
+            start = newRowIndex;
+            end = previousRowIndex;
+          }
+        }
+
+        const rowsBetweenStartAndEnd = visibleRows.rows.slice(start, end + 1).map(row => row.id);
+        apiRef.current.selectRows(rowsBetweenStartAndEnd, !isNextRowSelected);
+        return;
+      }
     }
 
     if (event.key === ' ' && event.shiftKey) {
       event.preventDefault();
-      handleSingleRowSelection(cellParams.id, event);
+      handleSingleRowSelection(params.id, event);
       return;
     }
 
@@ -300,7 +347,7 @@ export const useGridSelection = (apiRef, props) => {
       event.preventDefault();
       selectRows(apiRef.current.getAllRowIds(), true);
     }
-  }, [apiRef, handleSingleRowSelection, selectRows]);
+  }, [apiRef, handleSingleRowSelection, selectRows, visibleRows.rows, canHaveMultipleSelection]);
   useGridApiEventHandler(apiRef, GridEvents.visibleRowsSet, removeOutdatedSelection);
   useGridApiEventHandler(apiRef, GridEvents.cellClick, handleCellClick);
   useGridApiEventHandler(apiRef, GridEvents.rowSelectionCheckboxChange, handleRowSelectionCheckboxChange);

package/hooks/features/selection/useGridSelectionPreProcessors.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { getDataGridUtilityClass } from '../../../constants';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../colDef';
 
@@ -43,5 +43,5 @@ export const useGridSelectionPreProcessors = (apiRef, props) => {
 
     return columnsState;
   }, [apiRef, classes, props.checkboxSelection]);
-  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', updateSelectionColumn);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', updateSelectionColumn);
 };

package/hooks/features/sorting/gridSortingSelector.d.ts

@@ -16,9 +16,7 @@ export declare const gridSortedRowIdsSelector: import("../../../utils/createSele
  */
 export declare const gridSortedRowEntriesSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, {
     id: import("../../..").GridRowId;
-    model: {
-        [key: string]: any;
-    };
+    model: any;
 }[]>;
 /**
  * Get the current sorting model.

package/hooks/features/sorting/gridSortingUtils.d.ts

@@ -1,5 +1,4 @@
 import { GridSortingModelApplier } from './gridSortingState';
-import type { GridCellValue } from '../../../models';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
 import { GridComparatorFn, GridSortDirection, GridSortModel } from '../../../models/gridSortModel';
@@ -15,4 +14,4 @@ export declare const buildAggregatedSortingApplier: (sortModel: GridSortModel, a
 export declare const getNextGridSortDirection: (sortingOrder: GridSortDirection[], current?: GridSortDirection) => GridSortDirection;
 export declare const gridStringOrNumberComparator: GridComparatorFn;
 export declare const gridNumberComparator: GridComparatorFn;
-export declare const gridDateComparator: (value1: GridCellValue, value2: GridCellValue) => number;
+export declare const gridDateComparator: GridComparatorFn;

package/hooks/features/sorting/useGridSorting.js

@@ -12,7 +12,7 @@ import { gridRowIdsSelector, gridRowTreeSelector } from '../rows';
 import { useFirstRender } from '../../utils/useFirstRender';
 import { useGridRegisterStrategyProcessor, GRID_DEFAULT_STRATEGY } from '../../core/strategyProcessing';
 import { buildAggregatedSortingApplier, mergeStateWithSortModel, getNextGridSortDirection, sanitizeSortModel } from './gridSortingUtils';
-import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 export const sortingStateInitializer = (state, props) => {
   var _ref, _props$sortModel, _props$initialState, _props$initialState$s;
 
@@ -188,8 +188,8 @@ export const useGridSorting = (apiRef, props) => {
     const rowTree = gridRowTreeSelector(apiRef);
     return params.sortRowList(Object.values(rowTree));
   }, [apiRef]);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   useGridRegisterStrategyProcessor(apiRef, GRID_DEFAULT_STRATEGY, 'sorting', flatSortingMethod);
   /**
    * EVENTS

package/hooks/features/statePersistence/useGridStatePersistence.js

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { useGridApiMethod } from '../../utils';
 export const useGridStatePersistence = apiRef => {
   const exportState = React.useCallback(() => {
-    const stateToExport = apiRef.current.unstable_applyPreProcessors('exportState', {});
+    const stateToExport = apiRef.current.unstable_applyPipeProcessors('exportState', {});
     return stateToExport;
   }, [apiRef]);
   const restoreState = React.useCallback(stateToRestore => {
-    const response = apiRef.current.unstable_applyPreProcessors('restoreState', {
+    const response = apiRef.current.unstable_applyPipeProcessors('restoreState', {
       callbacks: []
     }, {
       stateToRestore

package/hooks/utils/useGridRootProps.d.ts

@@ -1,2 +1,2 @@
 import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
-export declare const useGridRootProps: () => DataGridProcessedProps;
+export declare const useGridRootProps: () => DataGridProcessedProps<any>;

package/hooks/utils/useGridVisibleRows.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import type { GridApiCommon, GridRowEntry } from '../../models';
 export declare const getVisibleRows: <Api extends GridApiCommon>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>) => {
-    rows: GridRowEntry[];
+    rows: GridRowEntry<any>[];
     range: {
         firstRowIndex: number;
         lastRowIndex: number;
@@ -16,7 +16,7 @@ export declare const getVisibleRows: <Api extends GridApiCommon>(apiRef: React.M
  * - If the row tree is flat, it only contains up to `state.pageSize` rows.
  */
 export declare const useGridVisibleRows: <Api extends GridApiCommon>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>) => {
-    rows: GridRowEntry[];
+    rows: GridRowEntry<any>[];
     range: {
         firstRowIndex: number;
         lastRowIndex: number;

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.

package/internals/index.d.ts

@@ -3,8 +3,8 @@ export { GridVirtualScrollerContent } from '../components/virtualization/GridVir
 export { GridVirtualScrollerRenderZone } from '../components/virtualization/GridVirtualScrollerRenderZone';
 export { GridColumnHeaders } from '../components/columnHeaders/GridColumnHeaders';
 export { GridColumnHeadersInner } from '../components/columnHeaders/GridColumnHeadersInner';
-export { useGridRegisterPreProcessor } from '../hooks/core/preProcessing';
-export type { GridPreProcessor } from '../hooks/core/preProcessing';
+export { useGridRegisterPipeProcessor } from '../hooks/core/pipeProcessing';
+export type { GridPipeProcessor } from '../hooks/core/pipeProcessing';
 export { useGridRegisterStrategyProcessor } from '../hooks/core/strategyProcessing';
 export type { GridStrategyProcessor } from '../hooks/core/strategyProcessing';
 export { useGridInitialization } from '../hooks/core/useGridInitialization';
@@ -19,8 +19,7 @@ export { useGridPrintExport } from '../hooks/features/export/useGridPrintExport'
 export { useGridFilter, filterStateInitializer } from '../hooks/features/filter/useGridFilter';
 export type { GridAggregatedFilterItemApplier } from '../hooks/features/filter/gridFilterState';
 export { useGridFocus, focusStateInitializer } from '../hooks/features/focus/useGridFocus';
-export { useGridKeyboard } from '../hooks/features/keyboard/useGridKeyboard';
-export { useGridKeyboardNavigation } from '../hooks/features/keyboard/useGridKeyboardNavigation';
+export { useGridKeyboardNavigation } from '../hooks/features/keyboardNavigation/useGridKeyboardNavigation';
 export { useGridPagination, paginationStateInitializer, } from '../hooks/features/pagination/useGridPagination';
 export { useGridPreferencesPanel, preferencePanelStateInitializer, } from '../hooks/features/preferencesPanel/useGridPreferencesPanel';
 export { useGridEditing as useGridEditing_new, editingStateInitializer as editingStateInitializer_new, } from '../hooks/features/editRows/useGridEditing.new';
@@ -43,8 +42,6 @@ export { useGridVirtualScroller } from '../hooks/features/virtualization/useGrid
 export { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export type { GridStateInitializer } from '../hooks/utils/useGridInitializeState';
-export type { GridComparatorFn, GridSortCellParams } from '../models/gridSortModel';
-export type { GridSortModelParams } from '../models/params/gridSortModelParams';
 export type { GridExperimentalFeatures, DataGridPropsWithoutDefaultValue, DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithComplexDefaultValueBeforeProcessing, } from '../models/props/DataGridProps';
 export { createSelector } from '../utils/createSelector';
 export { findParentElementFromClassName } from '../utils/domUtils';

package/internals/index.js

@@ -3,7 +3,7 @@ export { GridVirtualScrollerContent } from '../components/virtualization/GridVir
 export { GridVirtualScrollerRenderZone } from '../components/virtualization/GridVirtualScrollerRenderZone';
 export { GridColumnHeaders } from '../components/columnHeaders/GridColumnHeaders';
 export { GridColumnHeadersInner } from '../components/columnHeaders/GridColumnHeadersInner';
-export { useGridRegisterPreProcessor } from '../hooks/core/preProcessing';
+export { useGridRegisterPipeProcessor } from '../hooks/core/pipeProcessing';
 export { useGridRegisterStrategyProcessor } from '../hooks/core/strategyProcessing';
 export { useGridInitialization } from '../hooks/core/useGridInitialization';
 export { useGridClipboard } from '../hooks/features/clipboard/useGridClipboard';
@@ -15,8 +15,7 @@ export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 export { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
 export { useGridFilter, filterStateInitializer } from '../hooks/features/filter/useGridFilter';
 export { useGridFocus, focusStateInitializer } from '../hooks/features/focus/useGridFocus';
-export { useGridKeyboard } from '../hooks/features/keyboard/useGridKeyboard';
-export { useGridKeyboardNavigation } from '../hooks/features/keyboard/useGridKeyboardNavigation';
+export { useGridKeyboardNavigation } from '../hooks/features/keyboardNavigation/useGridKeyboardNavigation';
 export { useGridPagination, paginationStateInitializer } from '../hooks/features/pagination/useGridPagination';
 export { useGridPreferencesPanel, preferencePanelStateInitializer } from '../hooks/features/preferencesPanel/useGridPreferencesPanel';
 export { useGridEditing as useGridEditing_new, editingStateInitializer as editingStateInitializer_new } from '../hooks/features/editRows/useGridEditing.new';