@mui/x-data-grid 5.7.0 → 5.10.0

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;
 
@@ -80,17 +80,16 @@ 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 => {
+      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 = apiRef.current.unstable_applyStrategyProcessor('sorting', {
@@ -102,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 => {
@@ -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/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;
@@ -27,6 +34,8 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
     }) => {
         ref: React.Ref<HTMLDivElement>;
         onScroll: (event: React.UIEvent) => void;
+        onWheel: (event: React.WheelEvent) => void;
+        onTouchMove: (event: React.TouchEvent) => void;
         style: {
             accentColor?: import("csstype").Property.AccentColor | undefined;
             alignContent?: import("csstype").Property.AlignContent | undefined;

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,
@@ -197,14 +203,25 @@ export const useGridVirtualScroller = props => {
       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;
     }
   };
 
+  const handleWheel = event => {
+    apiRef.current.publishEvent(GridEvents.virtualScrollerWheel, {}, event);
+  };
+
+  const handleTouchMove = event => {
+    apiRef.current.publishEvent(GridEvents.virtualScrollerTouchMove, {}, event);
+  };
+
   const getRows = (params = {
     renderContext
   }) => {
@@ -228,14 +245,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 = [];
 
@@ -337,6 +372,8 @@ export const useGridVirtualScroller = props => {
       return _extends({
         ref: handleRef,
         onScroll: handleScroll,
+        onWheel: handleWheel,
+        onTouchMove: handleTouchMove,
         style: _extends({}, style, rootStyle)
       }, other);
     },

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.10.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';
@@ -12,6 +12,7 @@ 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 type { GridColumnRawLookup, GridColumnsRawState, GridHydrateColumnsValue, } from '../hooks/features/columns/gridColumnsInterfaces';
 export { useGridDensity, densityStateInitializer } from '../hooks/features/density/useGridDensity';
 export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
@@ -19,8 +20,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 +43,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,20 +3,20 @@ 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 { 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';

package/legacy/DataGrid/DataGrid.js

@@ -460,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,
 
@@ -500,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]].
@@ -606,9 +628,10 @@ DataGridRaw.propTypes = {
   /**
    * Callback called before updating a row with new values in the row and cell editing.
    * Only applied if `props.experimentalFeatures.newEditingApi: true`.
-   * @param {GridRowModel} newRow Row object with the new values.
-   * @param {GridRowModel} oldRow Row object with the old values.
-   * @returns {Promise<GridRowModel> | GridRowModel} The final values to update the row.
+   * @template R
+   * @param {R} newRow Row object with the new values.
+   * @param {R} oldRow Row object with the old values.
+   * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: PropTypes.func,
 
@@ -633,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,8 +8,7 @@ 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 as useGridEditing_old, editingStateInitializer as editingStateInitializer_old } from '../hooks/features/editRows/useGridEditing.old';
@@ -25,6 +24,7 @@ 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;
 
@@ -51,23 +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',

package/legacy/{models/colDef → colDef}/gridDefaultColumnTypes.js

@@ -1,10 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { GRID_STRING_COL_DEF } from '../../colDef/gridStringColDef';
-import { GRID_NUMERIC_COL_DEF } from '../../colDef/gridNumericColDef';
-import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from '../../colDef/gridDateColDef';
-import { GRID_BOOLEAN_COL_DEF } from '../../colDef/gridBooleanColDef';
-import { GRID_SINGLE_SELECT_COL_DEF } from '../../colDef/gridSingleSelectColDef';
-import { GRID_ACTIONS_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from '../../colDef/gridActionsColDef';
+import { GRID_STRING_COL_DEF } from './gridStringColDef';
+import { GRID_NUMERIC_COL_DEF } from './gridNumericColDef';
+import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from './gridDateColDef';
+import { GRID_BOOLEAN_COL_DEF } from './gridBooleanColDef';
+import { GRID_SINGLE_SELECT_COL_DEF } from './gridSingleSelectColDef';
+import { GRID_ACTIONS_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from './gridActionsColDef';
 export var DEFAULT_GRID_COL_TYPE_KEY = '__default__';
 export var getGridDefaultColumnTypes = function getGridDefaultColumnTypes() {
   var _nativeColumnTypes;

package/legacy/colDef/index.js

@@ -9,4 +9,5 @@ export * from './gridBooleanOperators';
 export * from './gridDateOperators';
 export * from './gridNumericOperators';
 export * from './gridSingleSelectOperators';
-export * from './gridStringOperators';
+export * from './gridStringOperators';
+export * from './gridDefaultColumnTypes';