@mui/x-data-grid 5.6.1 → 5.9.0

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

@@ -8,10 +8,7 @@ export interface GridSortingInitialState {
     sortModel?: GridSortModel;
 }
 export declare type GridSortingModelApplier = (rowList: GridRowTreeNodeConfig[]) => GridRowId[];
-export interface GridSortingParams {
+export interface GridSortingMethodParams {
     sortRowList: GridSortingModelApplier | null;
 }
-export declare type GridSortingMethod = (params: GridSortingParams) => GridRowId[];
-export declare type GridSortingMethodCollection = {
-    [methodName: string]: GridSortingMethod;
-};
+export declare type GridSortingMethodValue = GridRowId[];

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

@@ -8,11 +8,11 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnLookupSelector } from '../columns/gridColumnsSelector';
 import { gridSortedRowEntriesSelector, gridSortedRowIdsSelector, gridSortModelSelector } from './gridSortingSelector';
-import { gridRowIdsSelector, gridRowGroupingNameSelector, gridRowTreeSelector } from '../rows';
+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 { useGridRegisterSortingMethod } from './useGridRegisterSortingMethod';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 export const sortingStateInitializer = (state, props) => {
   var _ref, _props$sortModel, _props$initialState, _props$initialState$s;
 
@@ -31,8 +31,6 @@ export const sortingStateInitializer = (state, props) => {
 
 export const useGridSorting = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridSorting');
-  const sortingMethodCollectionRef = React.useRef({});
-  const lastSortingMethodApplied = React.useRef(null);
   apiRef.current.unstable_updateControlState({
     stateId: 'sortModel',
     propModel: props.sortModel,
@@ -82,27 +80,19 @@ export const useGridSorting = (apiRef, props) => {
    */
 
   const applySorting = React.useCallback(() => {
-    if (props.sortingMode === GridFeatureModeConstant.server) {
-      logger.debug('Skipping sorting rows as sortingMode = server');
-      apiRef.current.setState(state => _extends({}, state, {
-        sorting: _extends({}, state.sorting, {
-          sortedRows: gridRowIdsSelector(state, apiRef.current.instanceId)
-        })
-      }));
-      return;
-    }
-
     apiRef.current.setState(state => {
-      const rowGroupingName = gridRowGroupingNameSelector(state, apiRef.current.instanceId);
-      const sortingMethod = sortingMethodCollectionRef.current[rowGroupingName];
-
-      if (!sortingMethod) {
-        throw new Error('MUI: Invalid sorting method.');
+      if (props.sortingMode === GridFeatureModeConstant.server) {
+        logger.debug('Skipping sorting rows as sortingMode = server');
+        return _extends({}, state, {
+          sorting: _extends({}, state.sorting, {
+            sortedRows: gridRowIdsSelector(state, apiRef.current.instanceId)
+          })
+        });
       }
 
       const sortModel = gridSortModelSelector(state, apiRef.current.instanceId);
       const sortRowList = buildAggregatedSortingApplier(sortModel, apiRef);
-      const sortedRows = sortingMethod({
+      const sortedRows = apiRef.current.unstable_applyStrategyProcessor('sorting', {
         sortRowList
       });
       return _extends({}, state, {
@@ -111,6 +101,7 @@ export const useGridSorting = (apiRef, props) => {
         })
       });
     });
+    apiRef.current.publishEvent(GridEvents.sortedRowsSet);
     apiRef.current.forceUpdate();
   }, [apiRef, logger, props.sortingMode]);
   const setSortModel = React.useCallback(model => {
@@ -197,9 +188,9 @@ export const useGridSorting = (apiRef, props) => {
     const rowTree = gridRowTreeSelector(apiRef);
     return params.sortRowList(Object.values(rowTree));
   }, [apiRef]);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
-  useGridRegisterSortingMethod(apiRef, 'none', flatSortingMethod);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterStrategyProcessor(apiRef, GRID_DEFAULT_STRATEGY, 'sorting', flatSortingMethod);
   /**
    * EVENTS
    */
@@ -231,15 +222,8 @@ export const useGridSorting = (apiRef, props) => {
       }
     }
   }, [apiRef]);
-  const handlePreProcessorRegister = React.useCallback(name => {
-    if (name !== 'sortingMethod') {
-      return;
-    }
-
-    sortingMethodCollectionRef.current = apiRef.current.unstable_applyPreProcessors('sortingMethod', {});
-    const rowGroupingName = gridRowGroupingNameSelector(apiRef);
-
-    if (lastSortingMethodApplied.current !== sortingMethodCollectionRef.current[rowGroupingName]) {
+  const handleStrategyProcessorChange = React.useCallback(methodName => {
+    if (methodName === 'sorting') {
       apiRef.current.applySorting();
     }
   }, [apiRef]);
@@ -247,15 +231,12 @@ export const useGridSorting = (apiRef, props) => {
   useGridApiEventHandler(apiRef, GridEvents.columnHeaderKeyDown, handleColumnHeaderKeyDown);
   useGridApiEventHandler(apiRef, GridEvents.rowsSet, apiRef.current.applySorting);
   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 `flatSortingMethod`
-    // Otherwise on the 1st render there would be no sorting method registered
-    sortingMethodCollectionRef.current = apiRef.current.unstable_applyPreProcessors('sortingMethod', {});
     apiRef.current.applySorting();
   });
   /**

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/features/virtualization/useGridVirtualScroller.d.ts

@@ -2,6 +2,13 @@ import * as React from 'react';
 import { GridRenderContext } from '../../../models';
 import { GridRowId, GridRowModel } from '../../../models/gridRows';
 export declare function getIndexFromScroll(offset: number, positions: number[], sliceStart?: number, sliceEnd?: number): number;
+export declare const getRenderableIndexes: ({ firstIndex, lastIndex, buffer, minFirstIndex, maxLastIndex, }: {
+    firstIndex: number;
+    lastIndex: number;
+    buffer: number;
+    minFirstIndex: number;
+    maxLastIndex: number;
+}) => number[];
 interface UseGridVirtualScrollerProps {
     ref: React.Ref<HTMLDivElement>;
     disableVirtualization?: boolean;

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -2,6 +2,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["style"];
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import { useForkRef } from '@mui/material/utils';
 import { useGridApiContext } from '../../utils/useGridApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
@@ -16,8 +17,9 @@ import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { clamp } from '../../../utils/utils';
 import { selectedIdsLookupSelector } from '../selection/gridSelectionSelector';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
+import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils'; // Uses binary search to avoid looping through all possible positions
+
 import { jsx as _jsx } from "react/jsx-runtime";
-// Uses binary search to avoid looping through all possible positions
 export function getIndexFromScroll(offset, positions, sliceStart = 0, sliceEnd = positions.length) {
   if (positions.length <= 0) {
     return -1;
@@ -31,9 +33,16 @@ export function getIndexFromScroll(offset, positions, sliceStart = 0, sliceEnd =
   const itemOffset = positions[pivot];
   return offset <= itemOffset ? getIndexFromScroll(offset, positions, sliceStart, pivot) : getIndexFromScroll(offset, positions, pivot + 1, sliceEnd);
 }
+export const getRenderableIndexes = ({
+  firstIndex,
+  lastIndex,
+  buffer,
+  minFirstIndex,
+  maxLastIndex
+}) => {
+  return [clamp(firstIndex - buffer, minFirstIndex, maxLastIndex), clamp(lastIndex + buffer, minFirstIndex, maxLastIndex)];
+};
 export const useGridVirtualScroller = props => {
-  var _currentPage$range2;
-
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
@@ -108,34 +117,28 @@ export const useGridVirtualScroller = props => {
     }
   }, []);
   useGridApiEventHandler(apiRef, GridEvents.resize, handleResize);
-
-  const getRenderableIndexes = ({
-    firstIndex,
-    lastIndex,
-    buffer,
-    minFirstIndex,
-    maxLastIndex
-  }) => {
-    return [clamp(firstIndex - buffer, minFirstIndex, maxLastIndex), clamp(lastIndex + buffer, minFirstIndex, maxLastIndex)];
-  };
-
   const updateRenderZonePosition = React.useCallback(nextRenderContext => {
-    var _currentPage$range;
-
-    const [firstRowToRender] = getRenderableIndexes({
+    const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
       firstIndex: nextRenderContext.firstRowIndex,
       lastIndex: nextRenderContext.lastRowIndex,
       minFirstIndex: 0,
-      maxLastIndex: ((_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.lastRowIndex) || 0,
+      maxLastIndex: currentPage.rows.length,
       buffer: rootProps.rowBuffer
     });
-    const [firstColumnToRender] = getRenderableIndexes({
+    const [initialFirstColumnToRender] = getRenderableIndexes({
       firstIndex: nextRenderContext.firstColumnIndex,
       lastIndex: nextRenderContext.lastColumnIndex,
       minFirstIndex: renderZoneMinColumnIndex,
       maxLastIndex: renderZoneMaxColumnIndex,
       buffer: rootProps.columnBuffer
     });
+    const firstColumnToRender = getFirstNonSpannedColumnToRender({
+      firstColumnToRender: initialFirstColumnToRender,
+      apiRef,
+      firstRowToRender,
+      lastRowToRender,
+      visibleRows: currentPage.rows
+    });
     const top = gridRowsMetaSelector(apiRef.current.state).positions[firstRowToRender];
     const left = gridColumnPositionsSelector(apiRef)[firstColumnToRender]; // Call directly the selector because it might be outdated when this method is called
 
@@ -147,19 +150,22 @@ export const useGridVirtualScroller = props => {
         left
       });
     }
-  }, [apiRef, (_currentPage$range2 = currentPage.range) == null ? void 0 : _currentPage$range2.lastRowIndex, onRenderZonePositioning, renderZoneMaxColumnIndex, renderZoneMinColumnIndex, rootProps.columnBuffer, rootProps.rowBuffer]);
+  }, [apiRef, currentPage.rows, onRenderZonePositioning, renderZoneMinColumnIndex, renderZoneMaxColumnIndex, rootProps.columnBuffer, rootProps.rowBuffer]);
+  React.useLayoutEffect(() => {
+    if (renderContext) {
+      updateRenderZonePosition(renderContext);
+    }
+  }, [renderContext, updateRenderZonePosition]);
   const updateRenderContext = React.useCallback(nextRenderContext => {
     setRenderContext(nextRenderContext);
-    updateRenderZonePosition(nextRenderContext);
     prevRenderContext.current = nextRenderContext;
-  }, [setRenderContext, prevRenderContext, updateRenderZonePosition]);
+  }, [setRenderContext, prevRenderContext]);
   React.useEffect(() => {
     if (containerWidth == null) {
       return;
     }
 
     const initialRenderContext = computeRenderContext();
-    prevRenderContext.current = initialRenderContext;
     updateRenderContext(initialRenderContext);
     const {
       top,
@@ -187,18 +193,23 @@ export const useGridVirtualScroller = props => {
 
 
     const nextRenderContext = disableVirtualization ? prevRenderContext.current : computeRenderContext();
-    const rowsScrolledSincePreviousRender = Math.abs(nextRenderContext.firstRowIndex - prevRenderContext.current.firstRowIndex);
-    const columnsScrolledSincePreviousRender = Math.abs(nextRenderContext.firstColumnIndex - prevRenderContext.current.firstColumnIndex);
-    const shouldSetState = rowsScrolledSincePreviousRender >= rootProps.rowThreshold || columnsScrolledSincePreviousRender >= rootProps.columnThreshold || prevTotalWidth.current !== columnsTotalWidth; // TODO v6: rename event to a wider name, it's not only fired for row scrolling
+    const topRowsScrolledSincePreviousRender = Math.abs(nextRenderContext.firstRowIndex - prevRenderContext.current.firstRowIndex);
+    const bottomRowsScrolledSincePreviousRender = Math.abs(nextRenderContext.lastRowIndex - prevRenderContext.current.lastRowIndex);
+    const topColumnsScrolledSincePreviousRender = Math.abs(nextRenderContext.firstColumnIndex - prevRenderContext.current.firstColumnIndex);
+    const bottomColumnsScrolledSincePreviousRender = Math.abs(nextRenderContext.lastColumnIndex - prevRenderContext.current.lastColumnIndex);
+    const shouldSetState = topRowsScrolledSincePreviousRender >= rootProps.rowThreshold || bottomRowsScrolledSincePreviousRender >= rootProps.rowThreshold || topColumnsScrolledSincePreviousRender >= rootProps.columnThreshold || bottomColumnsScrolledSincePreviousRender >= rootProps.columnThreshold || prevTotalWidth.current !== columnsTotalWidth; // TODO v6: rename event to a wider name, it's not only fired for row scrolling
 
     apiRef.current.publishEvent(GridEvents.rowsScroll, {
       top: scrollTop,
       left: scrollLeft,
       renderContext: shouldSetState ? nextRenderContext : prevRenderContext.current
-    });
+    }, event);
 
     if (shouldSetState) {
-      updateRenderContext(nextRenderContext);
+      // Prevents batching render context changes
+      ReactDOM.flushSync(() => {
+        updateRenderContext(nextRenderContext);
+      });
       prevTotalWidth.current = columnsTotalWidth;
     }
   };
@@ -226,14 +237,32 @@ export const useGridVirtualScroller = props => {
       maxLastIndex: currentPage.rows.length,
       buffer: rowBuffer
     });
-    const [firstColumnToRender, lastColumnToRender] = getRenderableIndexes({
+    const renderedRows = [];
+
+    for (let i = firstRowToRender; i < lastRowToRender; i += 1) {
+      const row = currentPage.rows[i];
+      renderedRows.push(row);
+      apiRef.current.unstable_calculateColSpan({
+        rowId: row.id,
+        minFirstColumn,
+        maxLastColumn
+      });
+    }
+
+    const [initialFirstColumnToRender, lastColumnToRender] = getRenderableIndexes({
       firstIndex: nextRenderContext.firstColumnIndex,
       lastIndex: nextRenderContext.lastColumnIndex,
       minFirstIndex: minFirstColumn,
       maxLastIndex: maxLastColumn,
       buffer: columnBuffer
     });
-    const renderedRows = currentPage.rows.slice(firstRowToRender, lastRowToRender);
+    const firstColumnToRender = getFirstNonSpannedColumnToRender({
+      firstColumnToRender: initialFirstColumnToRender,
+      apiRef,
+      firstRowToRender,
+      lastRowToRender,
+      visibleRows: currentPage.rows
+    });
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     const rows = [];
 

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.6.1
+/** @license MUI v5.9.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/internals/index.d.ts

@@ -3,35 +3,37 @@ 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 type { GridRowGroupingPreProcessing, GridRowGroupParams, GridRowGroupingResult, } from '../hooks/core/rowGroupsPreProcessing';
+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';
 export { useGridClipboard } from '../hooks/features/clipboard/useGridClipboard';
 export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
 export { useGridColumnMenu, columnMenuStateInitializer, } from '../hooks/features/columnMenu/useGridColumnMenu';
 export { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
-export type { GridColumnRawLookup, GridColumnsRawState, } from '../hooks/features/columns/gridColumnsInterfaces';
+export { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
+export type { GridColumnRawLookup, GridColumnsRawState, GridHydrateColumnsValue, } from '../hooks/features/columns/gridColumnsInterfaces';
 export { useGridDensity, densityStateInitializer } from '../hooks/features/density/useGridDensity';
 export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 export { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
 export { useGridFilter, filterStateInitializer } from '../hooks/features/filter/useGridFilter';
-export { useGridRegisterFilteringMethod } from '../hooks/features/filter/useGridRegisterFilteringMethod';
-export type { GridFilteringMethod, GridAggregatedFilterItemApplier, } from '../hooks/features/filter/gridFilterState';
+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, editingStateInitializer } from '../hooks/features/editRows/useGridEditing';
+export { useGridEditing as useGridEditing_new, editingStateInitializer as editingStateInitializer_new, } from '../hooks/features/editRows/useGridEditing.new';
+export { useGridEditing as useGridEditing_old, editingStateInitializer as editingStateInitializer_old, } from '../hooks/features/editRows/useGridEditing.old';
 export { useGridRows, rowsStateInitializer } from '../hooks/features/rows/useGridRows';
+export { useGridRowsPreProcessors } from '../hooks/features/rows/useGridRowsPreProcessors';
+export type { GridRowTreeCreationParams, GridRowTreeCreationValue, } from '../hooks/features/rows/gridRowsState';
 export { useGridRowsMeta, rowsMetaStateInitializer } from '../hooks/features/rows/useGridRowsMeta';
 export { useGridParamsApi } from '../hooks/features/rows/useGridParamsApi';
 export { useGridSelection, selectionStateInitializer, } from '../hooks/features/selection/useGridSelection';
 export { useGridSelectionPreProcessors } from '../hooks/features/selection/useGridSelectionPreProcessors';
 export { useGridSorting, sortingStateInitializer } from '../hooks/features/sorting/useGridSorting';
-export { useGridRegisterSortingMethod } from '../hooks/features/sorting/useGridRegisterSortingMethod';
-export type { GridSortingMethod, GridSortingModelApplier, } from '../hooks/features/sorting/gridSortingState';
+export type { GridSortingModelApplier } from '../hooks/features/sorting/gridSortingState';
 export { useGridScroll } from '../hooks/features/scroll/useGridScroll';
 export { useGridEvents } from '../hooks/features/events/useGridEvents';
 export { useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
@@ -41,10 +43,9 @@ 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';
 export { isNavigationKey } from '../utils/keyboardUtils';
 export { clamp, isDeepEqual } from '../utils/utils';
+export type { GridApiCommunity } from '../models/api/gridApiCommunity';

package/internals/index.js

@@ -3,30 +3,31 @@ 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';
 export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
 export { useGridColumnMenu, columnMenuStateInitializer } from '../hooks/features/columnMenu/useGridColumnMenu';
 export { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
+export { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
 export { useGridDensity, densityStateInitializer } from '../hooks/features/density/useGridDensity';
 export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 export { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
 export { useGridFilter, filterStateInitializer } from '../hooks/features/filter/useGridFilter';
-export { useGridRegisterFilteringMethod } from '../hooks/features/filter/useGridRegisterFilteringMethod';
 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, editingStateInitializer } from '../hooks/features/editRows/useGridEditing';
+export { useGridEditing as useGridEditing_new, editingStateInitializer as editingStateInitializer_new } from '../hooks/features/editRows/useGridEditing.new';
+export { useGridEditing as useGridEditing_old, editingStateInitializer as editingStateInitializer_old } from '../hooks/features/editRows/useGridEditing.old';
 export { useGridRows, rowsStateInitializer } from '../hooks/features/rows/useGridRows';
+export { useGridRowsPreProcessors } from '../hooks/features/rows/useGridRowsPreProcessors';
 export { useGridRowsMeta, rowsMetaStateInitializer } from '../hooks/features/rows/useGridRowsMeta';
 export { useGridParamsApi } from '../hooks/features/rows/useGridParamsApi';
 export { useGridSelection, selectionStateInitializer } from '../hooks/features/selection/useGridSelection';
 export { useGridSelectionPreProcessors } from '../hooks/features/selection/useGridSelectionPreProcessors';
 export { useGridSorting, sortingStateInitializer } from '../hooks/features/sorting/useGridSorting';
-export { useGridRegisterSortingMethod } from '../hooks/features/sorting/useGridRegisterSortingMethod';
 export { useGridScroll } from '../hooks/features/scroll/useGridScroll';
 export { useGridEvents } from '../hooks/features/events/useGridEvents';
 export { useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';

package/legacy/DataGrid/DataGrid.js

@@ -185,6 +185,7 @@ DataGridRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: PropTypes.shape({
+    newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
@@ -459,7 +460,7 @@ DataGridRaw.propTypes = {
    * @param {GridEditCellPropsParams} params With all properties from [[GridEditCellPropsParams]].
    * @param {MuiEvent<React.SyntheticEvent>} event The event that caused this prop to be called.
    * @param {GridCallbackDetails} details Additional details for this callback.
-   * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/api/data-grid/grid-col-def/)
+   * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/x/api/data-grid/grid-col-def/)
    */
   onEditCellPropsChange: PropTypes.func,
 
@@ -499,6 +500,28 @@ DataGridRaw.propTypes = {
    */
   onPageSizeChange: PropTypes.func,
 
+  /**
+   * Callback fired when the preferences panel is closed.
+   * @param {GridPreferencePanelParams} params With all properties from [[GridPreferencePanelParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onPreferencePanelClose: PropTypes.func,
+
+  /**
+   * Callback fired when the preferences panel is opened.
+   * @param {GridPreferencePanelParams} params With all properties from [[GridPreferencePanelParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onPreferencePanelOpen: PropTypes.func,
+
+  /**
+   * Callback called when `processRowUpdate` throws an error or rejects.
+   * @param {any} error The error thrown.
+   */
+  onProcessRowUpdateError: PropTypes.func,
+
   /**
    * Callback fired when the grid is resized.
    * @param {ElementSize} containerSize With all properties from [[ElementSize]].
@@ -602,6 +625,16 @@ DataGridRaw.propTypes = {
    */
   paginationMode: PropTypes.oneOf(['client', 'server']),
 
+  /**
+   * Callback called before updating a row with new values in the row and cell editing.
+   * Only applied if `props.experimentalFeatures.newEditingApi: true`.
+   * @template R
+   * @param {R} newRow Row object with the new values.
+   * @param {R} oldRow Row object with the old values.
+   * @returns {Promise<R> | R} The final values to update the row.
+   */
+  processRowUpdate: PropTypes.func,
+
   /**
    * Number of extra rows to be rendered before/after the visible slice.
    * @default 3
@@ -623,7 +656,7 @@ DataGridRaw.propTypes = {
   /**
    * Set of rows of type [[GridRowsProp]].
    */
-  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
+  rows: PropTypes.array.isRequired,
 
   /**
    * Sets the type of space between rows added by `getRowSpacing`.

package/legacy/DataGrid/useDataGridComponent.js

@@ -8,12 +8,13 @@ import { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 import { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
 import { useGridFilter, filterStateInitializer } from '../hooks/features/filter/useGridFilter';
 import { focusStateInitializer, useGridFocus } from '../hooks/features/focus/useGridFocus';
-import { useGridKeyboard } from '../hooks/features/keyboard/useGridKeyboard';
-import { useGridKeyboardNavigation } from '../hooks/features/keyboard/useGridKeyboardNavigation';
+import { useGridKeyboardNavigation } from '../hooks/features/keyboardNavigation/useGridKeyboardNavigation';
 import { useGridPagination, paginationStateInitializer } from '../hooks/features/pagination/useGridPagination';
 import { useGridPreferencesPanel, preferencePanelStateInitializer } from '../hooks/features/preferencesPanel/useGridPreferencesPanel';
-import { useGridEditing, editingStateInitializer } from '../hooks/features/editRows/useGridEditing';
+import { useGridEditing as useGridEditing_old, editingStateInitializer as editingStateInitializer_old } from '../hooks/features/editRows/useGridEditing.old';
+import { useGridEditing as useGridEditing_new, editingStateInitializer as editingStateInitializer_new } from '../hooks/features/editRows/useGridEditing.new';
 import { useGridRows, rowsStateInitializer } from '../hooks/features/rows/useGridRows';
+import { useGridRowsPreProcessors } from '../hooks/features/rows/useGridRowsPreProcessors';
 import { useGridParamsApi } from '../hooks/features/rows/useGridParamsApi';
 import { selectionStateInitializer, useGridSelection } from '../hooks/features/selection/useGridSelection';
 import { useGridSelectionPreProcessors } from '../hooks/features/selection/useGridSelectionPreProcessors';
@@ -23,13 +24,17 @@ import { useGridEvents } from '../hooks/features/events/useGridEvents';
 import { useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
 import { rowsMetaStateInitializer, useGridRowsMeta } from '../hooks/features/rows/useGridRowsMeta';
 import { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
+import { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
 export var useDataGridComponent = function useDataGridComponent(props) {
+  var _props$experimentalFe, _props$experimentalFe2;
+
   var apiRef = useGridInitialization(undefined, props);
   /**
    * Register all pre-processors called during state initialization here.
    */
 
   useGridSelectionPreProcessors(apiRef, props);
+  useGridRowsPreProcessors(apiRef);
   /**
    * Register all state initializers here.
    */
@@ -37,7 +42,7 @@ export var useDataGridComponent = function useDataGridComponent(props) {
   useGridInitializeState(selectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
-  useGridInitializeState(editingStateInitializer, apiRef, props);
+  useGridInitializeState((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.newEditingApi ? editingStateInitializer_new : editingStateInitializer_old, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
   useGridInitializeState(sortingStateInitializer, apiRef, props);
   useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
@@ -46,22 +51,23 @@ export var useDataGridComponent = function useDataGridComponent(props) {
   useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
+  useGridKeyboardNavigation(apiRef, props);
   useGridSelection(apiRef, props);
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
   useGridParamsApi(apiRef);
+  useGridColumnSpanning(apiRef);
+  var useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
-  useGridSorting(apiRef, props);
   useGridPreferencesPanel(apiRef);
   useGridFilter(apiRef, props);
+  useGridSorting(apiRef, props);
   useGridDensity(apiRef, props);
   useGridPagination(apiRef, props);
   useGridRowsMeta(apiRef, props);
   useGridScroll(apiRef, props);
   useGridColumnMenu(apiRef);
-  useGridKeyboard(apiRef);
-  useGridKeyboardNavigation(apiRef, props);
   useGridCsvExport(apiRef);
   useGridPrintExport(apiRef, props);
   useGridClipboard(apiRef);

package/legacy/colDef/gridDateColDef.js

@@ -10,7 +10,7 @@ export function gridDateFormatter(_ref) {
     return value.toLocaleDateString();
   }
 
-  return value;
+  return value != null ? value : '';
 }
 export function gridDateTimeFormatter(_ref2) {
   var value = _ref2.value;
@@ -19,7 +19,7 @@ export function gridDateTimeFormatter(_ref2) {
     return value.toLocaleString();
   }
 
-  return value;
+  return value != null ? value : '';
 }
 export var GRID_DATE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'date',