@mui/x-data-grid 5.15.2 → 5.17.0

package/hooks/features/filter/gridFilterUtils.js

@@ -69,74 +69,74 @@ export const sanitizeFilterModel = (model, disableMultipleColumnsFiltering, apiR
 export const mergeStateWithFilterModel = (filterModel, disableMultipleColumnsFiltering, apiRef) => filteringState => _extends({}, filteringState, {
   filterModel: sanitizeFilterModel(filterModel, disableMultipleColumnsFiltering, apiRef)
 });
-/**
- * Generates a method to easily check if a row is matching the current filter model.
- * @param {GridFilterModel} filterModel The model with which we want to filter the rows.
- * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
- * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
- */
 
-export const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
-  const {
-    items
-  } = filterModel;
-
-  const getFilterCallbackFromItem = filterItem => {
-    if (!filterItem.columnField || !filterItem.operatorValue) {
-      return null;
-    }
+const getFilterCallbackFromItem = (filterItem, apiRef) => {
+  if (!filterItem.columnField || !filterItem.operatorValue) {
+    return null;
+  }
 
-    const column = apiRef.current.getColumn(filterItem.columnField);
+  const column = apiRef.current.getColumn(filterItem.columnField);
 
-    if (!column) {
-      return null;
-    }
+  if (!column) {
+    return null;
+  }
 
-    let parsedValue;
+  let parsedValue;
 
-    if (column.valueParser) {
-      var _filterItem$value;
+  if (column.valueParser) {
+    var _filterItem$value;
 
-      const parser = column.valueParser;
-      parsedValue = Array.isArray(filterItem.value) ? (_filterItem$value = filterItem.value) == null ? void 0 : _filterItem$value.map(x => parser(x)) : parser(filterItem.value);
-    } else {
-      parsedValue = filterItem.value;
-    }
+    const parser = column.valueParser;
+    parsedValue = Array.isArray(filterItem.value) ? (_filterItem$value = filterItem.value) == null ? void 0 : _filterItem$value.map(x => parser(x)) : parser(filterItem.value);
+  } else {
+    parsedValue = filterItem.value;
+  }
 
-    const newFilterItem = _extends({}, filterItem, {
-      value: parsedValue
-    });
+  const newFilterItem = _extends({}, filterItem, {
+    value: parsedValue
+  });
 
-    const filterOperators = column.filterOperators;
+  const filterOperators = column.filterOperators;
 
-    if (!(filterOperators != null && filterOperators.length)) {
-      throw new Error(`MUI: No filter operators found for column '${column.field}'.`);
-    }
+  if (!(filterOperators != null && filterOperators.length)) {
+    throw new Error(`MUI: No filter operators found for column '${column.field}'.`);
+  }
 
-    const filterOperator = filterOperators.find(operator => operator.value === newFilterItem.operatorValue);
+  const filterOperator = filterOperators.find(operator => operator.value === newFilterItem.operatorValue);
 
-    if (!filterOperator) {
-      throw new Error(`MUI: No filter operator found for column '${column.field}' and operator value '${newFilterItem.operatorValue}'.`);
-    }
+  if (!filterOperator) {
+    throw new Error(`MUI: No filter operator found for column '${column.field}' and operator value '${newFilterItem.operatorValue}'.`);
+  }
 
-    const applyFilterOnRow = filterOperator.getApplyFilterFn(newFilterItem, column);
+  const applyFilterOnRow = filterOperator.getApplyFilterFn(newFilterItem, column);
 
-    if (typeof applyFilterOnRow !== 'function') {
-      return null;
-    }
+  if (typeof applyFilterOnRow !== 'function') {
+    return null;
+  }
 
-    const fn = rowId => {
-      const cellParams = apiRef.current.getCellParams(rowId, newFilterItem.columnField);
-      return applyFilterOnRow(cellParams);
-    };
+  const fn = rowId => {
+    const cellParams = apiRef.current.getCellParams(rowId, newFilterItem.columnField);
+    return applyFilterOnRow(cellParams);
+  };
 
-    return {
-      fn,
-      item: newFilterItem
-    };
+  return {
+    fn,
+    item: newFilterItem
   };
+};
+/**
+ * Generates a method to easily check if a row is matching the current filter model.
+ * @param {GridFilterModel} filterModel The model with which we want to filter the rows.
+ * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
+ */
 
-  const appliers = items.map(getFilterCallbackFromItem).filter(callback => !!callback);
+
+export const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
+  const {
+    items
+  } = filterModel;
+  const appliers = items.map(item => getFilterCallbackFromItem(item, apiRef)).filter(callback => !!callback);
 
   if (appliers.length === 0) {
     return null;
@@ -219,9 +219,10 @@ export const buildAggregatedFilterApplier = (filterModel, apiRef) => {
     passingQuickFilterValues: isRowMatchingQuickFilter && isRowMatchingQuickFilter(rowId, shouldApplyFilter)
   });
 };
-export const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterModel) => {
+export const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterModel, apiRef) => {
   var _filterModel$quickFil, _filterModel$linkOper;
 
+  const cleanedFilterItems = filterModel.items.filter(item => getFilterCallbackFromItem(item, apiRef) !== null);
   const cleanedAllFilterItemResults = allFilterItemResults.filter(result => result != null);
   const cleanedAllQuickFilterResults = allQuickFilterResults.filter(result => result != null); // Defaultize operators
 
@@ -235,13 +236,13 @@ export const passFilterLogic = (allFilterItemResults, allQuickFilterResults, fil
     };
 
     if (linkOperator === GridLinkOperator.And) {
-      const passesAllFilters = filterModel.items.every(filterItemPredicate);
+      const passesAllFilters = cleanedFilterItems.every(filterItemPredicate);
 
       if (!passesAllFilters) {
         return false;
       }
     } else {
-      const passesSomeFilters = filterModel.items.some(filterItemPredicate);
+      const passesSomeFilters = cleanedFilterItems.some(filterItemPredicate);
 
       if (!passesSomeFilters) {
         return false;

package/hooks/features/filter/useGridFilter.js

@@ -271,7 +271,7 @@ export const useGridFilter = (apiRef, props) => {
             passingFilterItems,
             passingQuickFilterValues
           } = params.isRowMatchingFilters(rowId);
-          isRowPassing = passFilterLogic([passingFilterItems], [passingQuickFilterValues], params.filterModel);
+          isRowPassing = passFilterLogic([passingFilterItems], [passingQuickFilterValues], params.filterModel, apiRef);
         }
 
         filteredRowsLookup[rowId] = isRowPassing;

package/hooks/features/index.d.ts

@@ -1,5 +1,6 @@
 export * from './columnMenu';
 export * from './columns';
+export * from './columnGrouping';
 export * from './density';
 export * from './editRows';
 export * from './filter';

package/hooks/features/index.js

@@ -1,6 +1,7 @@
 // Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-pro`
 export * from './columnMenu';
 export * from './columns';
+export * from './columnGrouping';
 export * from './density';
 export * from './editRows';
 export * from './filter';

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

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

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

@@ -3,7 +3,7 @@ export declare const gridRowsStateSelector: (state: GridStateCommunity) => impor
 export declare const gridRowCountSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
 export declare const gridRowsLoadingSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, boolean | undefined>;
 export declare const gridTopLevelRowCountSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
-export declare const gridRowsLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridRowsLookup<any>>;
+export declare const gridRowsLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridRowsLookup<import("../../..").GridValidRowModel>>;
 export declare const gridRowsIdToIdLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Record<string, import("../../..").GridRowId>>;
 export declare const gridRowTreeSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridRowTreeConfig>;
 export declare const gridRowGroupingNameSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string>;

package/hooks/features/rows/useGridParamsApi.js

@@ -105,7 +105,7 @@ export function useGridParamsApi(apiRef) {
       formattedValue: value
     };
 
-    if (colDef.valueFormatter) {
+    if (colDef && colDef.valueFormatter) {
       params.formattedValue = colDef.valueFormatter({
         id,
         field: params.field,

package/hooks/features/rows/useGridRows.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
-import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowIdsSelector, gridRowGroupingNameSelector } from './gridRowsSelector';
+import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowIdsSelector, gridRowGroupingNameSelector, gridRowsIdToIdLookupSelector } from './gridRowsSelector';
 import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridSortedRowIdsSelector } from '../sorting/gridSortingSelector';
@@ -104,14 +104,14 @@ export const useGridRows = (apiRef, props) => {
     } // we remove duplicate updates. A server can batch updates, and send several updates for the same row in one fn call.
 
 
-    const uniqUpdates = new Map();
+    const uniqueUpdates = new Map();
     updates.forEach(update => {
       const id = getRowIdFromRowModel(update, props.getRowId, 'A row was provided without id when calling updateRows():');
 
-      if (uniqUpdates.has(id)) {
-        uniqUpdates.set(id, _extends({}, uniqUpdates.get(id), update));
+      if (uniqueUpdates.has(id)) {
+        uniqueUpdates.set(id, _extends({}, uniqueUpdates.get(id), update));
       } else {
-        uniqUpdates.set(id, update);
+        uniqueUpdates.set(id, update);
       }
     });
     const deletedRowIds = [];
@@ -123,7 +123,7 @@ export const useGridRows = (apiRef, props) => {
       idToIdLookup: _extends({}, prevCache.idToIdLookup),
       ids: [...prevCache.ids]
     };
-    uniqUpdates.forEach((partialRow, id) => {
+    uniqueUpdates.forEach((partialRow, id) => {
       // eslint-disable-next-line no-underscore-dangle
       if (partialRow._action === 'delete') {
         delete newCache.idRowsLookup[id];
@@ -241,8 +241,64 @@ export const useGridRows = (apiRef, props) => {
         ids: updatedRows
       })
     }));
-    apiRef.current.applySorting();
+    apiRef.current.publishEvent('rowsSet');
   }, [apiRef, logger]);
+  const replaceRows = React.useCallback((firstRowToRender, newRows) => {
+    if (props.signature === GridSignature.DataGrid && newRows.length > 1) {
+      throw new Error(["MUI: You can't replace rows using `apiRef.current.unstable_replaceRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
+    }
+
+    if (newRows.length === 0) {
+      return;
+    }
+
+    const allRows = gridRowIdsSelector(apiRef);
+    const updatedRows = [...allRows];
+    const idRowsLookup = gridRowsLookupSelector(apiRef);
+    const idToIdLookup = gridRowsIdToIdLookupSelector(apiRef);
+    const tree = gridRowTreeSelector(apiRef);
+
+    const updatedIdRowsLookup = _extends({}, idRowsLookup);
+
+    const updatedIdToIdLookup = _extends({}, idToIdLookup);
+
+    const updatedTree = _extends({}, tree);
+
+    const newRowEntries = newRows.map(newRowModel => {
+      const rowId = getRowIdFromRowModel(newRowModel, props.getRowId, 'A row was provided without id when calling replaceRows().');
+      return {
+        id: rowId,
+        model: newRowModel
+      };
+    });
+    newRowEntries.forEach((row, index) => {
+      const [replacedRowId] = updatedRows.splice(firstRowToRender + index, 1, row.id);
+      delete updatedIdRowsLookup[replacedRowId];
+      delete updatedIdToIdLookup[replacedRowId];
+      delete updatedTree[replacedRowId];
+    });
+    newRowEntries.forEach(row => {
+      const rowTreeNodeConfig = {
+        id: row.id,
+        parent: null,
+        depth: 0,
+        groupingKey: null,
+        groupingField: null
+      };
+      updatedIdRowsLookup[row.id] = row.model;
+      updatedIdToIdLookup[row.id] = row.id;
+      updatedTree[row.id] = rowTreeNodeConfig;
+    });
+    apiRef.current.setState(state => _extends({}, state, {
+      rows: _extends({}, state.rows, {
+        idRowsLookup: updatedIdRowsLookup,
+        idToIdLookup: updatedIdToIdLookup,
+        tree: updatedTree,
+        ids: updatedRows
+      })
+    }));
+    apiRef.current.publishEvent('rowsSet');
+  }, [apiRef, props.signature, props.getRowId]);
   const rowApi = {
     getRow,
     getRowModels,
@@ -254,7 +310,8 @@ export const useGridRows = (apiRef, props) => {
     setRowChildrenExpansion,
     getRowNode,
     getRowIndexRelativeToVisibleRows,
-    getRowGroupChildren
+    getRowGroupChildren,
+    unstable_replaceRows: replaceRows
   };
   /**
    * EVENTS

package/hooks/features/rows/useGridRowsMeta.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { debounce } from '@mui/material/utils';
+import { debounce, capitalize } from '@mui/material/utils';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridSelector } from '../../utils/useGridSelector';
@@ -47,7 +47,7 @@ export const useGridRowsMeta = (apiRef, props) => {
       if (!rowsHeightLookup.current[row.id]) {
         rowsHeightLookup.current[row.id] = {
           sizes: {
-            base: rowHeightFromDensity
+            baseCenter: rowHeightFromDensity
           },
           isResized: false,
           autoHeight: false,
@@ -62,7 +62,7 @@ export const useGridRowsMeta = (apiRef, props) => {
         sizes
       } = rowsHeightLookup.current[row.id];
       let baseRowHeight = rowHeightFromDensity;
-      const existingBaseRowHeight = sizes.base;
+      const existingBaseRowHeight = sizes.baseCenter;
 
       if (isResized) {
         // Do not recalculate resized row height and use the value from the lookup
@@ -93,12 +93,19 @@ export const useGridRowsMeta = (apiRef, props) => {
         }
       } else {
         rowsHeightLookup.current[row.id].needsFirstMeasurement = false;
-      } // We use an object to make simple to check if a height is already added or not
+      }
 
+      const existingBaseSizes = Object.entries(sizes).reduce((acc, [key, size]) => {
+        if (/^base[A-Z]/.test(key)) {
+          acc[key] = size;
+        }
 
-      const initialHeights = {
-        base: baseRowHeight
-      };
+        return acc;
+      }, {}); // We use an object to make simple to check if a height is already added or not
+
+      const initialHeights = _extends({}, existingBaseSizes, {
+        baseCenter: baseRowHeight
+      });
 
       if (getRowSpacing) {
         var _spacing$top, _spacing$bottom;
@@ -121,9 +128,17 @@ export const useGridRowsMeta = (apiRef, props) => {
     const positions = [];
     const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
       positions.push(acc);
+      let maximumBaseSize = 0;
+      let otherSizes = 0;
       const processedSizes = calculateRowProcessedSizes(row);
-      const finalRowHeight = Object.values(processedSizes).reduce((acc2, value) => acc2 + value, 0);
-      return acc + finalRowHeight;
+      Object.entries(processedSizes).forEach(([size, value]) => {
+        if (/^base[A-Z]/.test(size)) {
+          maximumBaseSize = value > maximumBaseSize ? value : maximumBaseSize;
+        } else {
+          otherSizes += value;
+        }
+      });
+      return acc + maximumBaseSize + otherSizes;
     }, 0);
     pinnedRows == null ? void 0 : (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.forEach(row => {
       calculateRowProcessedSizes(row);
@@ -149,7 +164,7 @@ export const useGridRowsMeta = (apiRef, props) => {
   }, [apiRef, currentPage.rows, rowHeightFromDensity, getRowHeightProp, getRowSpacing, getEstimatedRowHeight, pinnedRows]);
   const getRowHeight = React.useCallback(rowId => {
     const height = rowsHeightLookup.current[rowId];
-    return height ? height.sizes.base : rowHeightFromDensity;
+    return height ? height.sizes.baseCenter : rowHeightFromDensity;
   }, [rowHeightFromDensity]);
 
   const getRowInternalSizes = rowId => {
@@ -159,21 +174,21 @@ export const useGridRowsMeta = (apiRef, props) => {
   };
 
   const setRowHeight = React.useCallback((id, height) => {
-    rowsHeightLookup.current[id].sizes.base = height;
+    rowsHeightLookup.current[id].sizes.baseCenter = height;
     rowsHeightLookup.current[id].isResized = true;
     rowsHeightLookup.current[id].needsFirstMeasurement = false;
     hydrateRowsMeta();
   }, [hydrateRowsMeta]);
   const debouncedHydrateRowsMeta = React.useMemo(() => debounce(hydrateRowsMeta), [hydrateRowsMeta]);
-  const storeMeasuredRowHeight = React.useCallback((id, height) => {
+  const storeMeasuredRowHeight = React.useCallback((id, height, position) => {
     if (!rowsHeightLookup.current[id] || !rowsHeightLookup.current[id].autoHeight) {
       return;
     } // Only trigger hydration if the value is different, otherwise we trigger a loop
 
 
-    const needsHydration = rowsHeightLookup.current[id].sizes.base !== height;
+    const needsHydration = rowsHeightLookup.current[id].sizes[`base${capitalize(position)}`] !== height;
     rowsHeightLookup.current[id].needsFirstMeasurement = false;
-    rowsHeightLookup.current[id].sizes.base = height;
+    rowsHeightLookup.current[id].sizes[`base${capitalize(position)}`] = height;
 
     if (needsHydration) {
       debouncedHydrateRowsMeta();
@@ -191,7 +206,11 @@ export const useGridRowsMeta = (apiRef, props) => {
     if (hasRowWithAutoHeight.current && index > lastMeasuredRowIndex.current) {
       lastMeasuredRowIndex.current = index;
     }
-  }, []); // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
+  }, []);
+  const resetRowHeights = React.useCallback(() => {
+    rowsHeightLookup.current = {};
+    hydrateRowsMeta();
+  }, [hydrateRowsMeta]); // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
   // Because of variable row height this is needed for the virtualization
 
   React.useEffect(() => {
@@ -205,7 +224,8 @@ export const useGridRowsMeta = (apiRef, props) => {
     unstable_getRowHeight: getRowHeight,
     unstable_getRowInternalSizes: getRowInternalSizes,
     unstable_setRowHeight: setRowHeight,
-    unstable_storeRowHeightMeasurement: storeMeasuredRowHeight
+    unstable_storeRowHeightMeasurement: storeMeasuredRowHeight,
+    resetRowHeights
   };
   useGridApiMethod(apiRef, rowsMetaApi, 'GridRowsMetaApi');
 };

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

@@ -2,5 +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, any>>;
+export declare const selectedGridRowsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Map<GridRowId, import("../../../models/gridRows").GridValidRowModel>>;
 export declare const selectedIdsLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Record<GridRowId, GridRowId>>;

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

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

package/hooks/features/virtualization/useGridVirtualScroller.d.ts

@@ -25,11 +25,11 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
     updateRenderZonePosition: (nextRenderContext: GridRenderContext) => void;
     getRows: (params?: {
         renderContext: GridRenderContext | null;
+        position?: string | undefined;
         minFirstColumn?: number | undefined;
         maxLastColumn?: number | undefined;
         availableSpace?: number | null | undefined;
-        ignoreAutoHeight?: boolean | undefined;
-        rows?: GridRowEntry<any>[] | undefined;
+        rows?: GridRowEntry<import("../../../models").GridValidRowModel>[] | undefined;
         rowIndexOffset?: number | undefined;
     }) => JSX.Element[] | null;
     getRootProps: ({ style, ...other }?: {

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -215,8 +215,19 @@ export const useGridVirtualScroller = props => {
   }, [renderContext, updateRenderZonePosition]);
   const updateRenderContext = React.useCallback(nextRenderContext => {
     setRenderContext(nextRenderContext);
+    const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
+      firstIndex: nextRenderContext.firstRowIndex,
+      lastIndex: nextRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: currentPage.rows.length,
+      buffer: rootProps.rowBuffer
+    });
+    apiRef.current.publishEvent('renderedRowsIntervalChange', {
+      firstRowToRender,
+      lastRowToRender
+    });
     prevRenderContext.current = nextRenderContext;
-  }, [setRenderContext, prevRenderContext]);
+  }, [apiRef, setRenderContext, prevRenderContext, currentPage.rows.length, rootProps.rowBuffer]);
   React.useEffect(() => {
     if (containerWidth == null) {
       return;
@@ -287,8 +298,8 @@ export const useGridVirtualScroller = props => {
       minFirstColumn = renderZoneMinColumnIndex,
       maxLastColumn = renderZoneMaxColumnIndex,
       availableSpace = containerWidth,
-      ignoreAutoHeight,
-      rowIndexOffset = 0
+      rowIndexOffset = 0,
+      position = 'center'
     } = params;
 
     if (!nextRenderContext || availableSpace == null) {
@@ -358,7 +369,7 @@ export const useGridVirtualScroller = props => {
         model
       } = renderedRows[i];
       const lastVisibleRowIndex = firstRowToRender + i === currentPage.rows.length - 1;
-      const baseRowHeight = !apiRef.current.unstable_rowHasAutoHeight(id) || ignoreAutoHeight ? apiRef.current.unstable_getRowHeight(id) : 'auto';
+      const baseRowHeight = !apiRef.current.unstable_rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto';
       let isSelected;
 
       if (selectedRowsLookup[id] == null) {
@@ -384,7 +395,8 @@ export const useGridVirtualScroller = props => {
         selected: isSelected,
         index: rowIndexOffset + ((currentPage == null ? void 0 : (_currentPage$range5 = currentPage.range) == null ? void 0 : _currentPage$range5.firstRowIndex) || 0) + firstRowToRender + i,
         containerWidth: availableSpace,
-        isLastVisible: lastVisibleRowIndex
+        isLastVisible: lastVisibleRowIndex,
+        position: position
       }, typeof getRowProps === 'function' ? getRowProps(id, model) : {}, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.row), id));
     }
 

package/hooks/utils/useGridNativeEventListener.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { GridApiCommon } from '../../models';
-export declare const useGridNativeEventListener: <Api extends GridApiCommon, E extends Event>(apiRef: React.MutableRefObject<Api>, ref: React.MutableRefObject<HTMLDivElement | null> | (() => Element | undefined | null), eventName: string, handler?: ((event: E) => any) | undefined, options?: AddEventListenerOptions) => void;
+export declare const useGridNativeEventListener: <Api extends GridApiCommon, K extends keyof HTMLElementEventMap>(apiRef: React.MutableRefObject<Api>, ref: React.MutableRefObject<HTMLDivElement | null> | (() => HTMLElement | undefined | null), eventName: K, handler?: ((event: HTMLElementEventMap[K]) => any) | undefined, options?: AddEventListenerOptions) => void;

package/hooks/utils/useGridNativeEventListener.js

@@ -5,8 +5,8 @@ export const useGridNativeEventListener = (apiRef, ref, eventName, handler, opti
   const logger = useGridLogger(apiRef, 'useNativeEventListener');
   const [added, setAdded] = React.useState(false);
   const handlerRef = React.useRef(handler);
-  const wrapHandler = React.useCallback(args => {
-    return handlerRef.current && handlerRef.current(args);
+  const wrapHandler = React.useCallback(event => {
+    return handlerRef.current && handlerRef.current(event);
   }, []);
   React.useEffect(() => {
     handlerRef.current = handler;

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<any>[];
+    rows: GridRowEntry<import("../../models").GridValidRowModel>[];
     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<any>[];
+    rows: GridRowEntry<import("../../models").GridValidRowModel>[];
     range: {
         firstRowIndex: number;
         lastRowIndex: number;

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.15.2
+/** @license MUI v5.17.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

@@ -13,6 +13,8 @@ export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridCol
 export { useGridColumnMenu, columnMenuStateInitializer, } from '../hooks/features/columnMenu/useGridColumnMenu';
 export { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
 export { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
+export { useGridColumnGrouping, columnGroupsStateInitializer, } from '../hooks/features/columnGrouping/useGridColumnGrouping';
+export { useGridColumnGroupingPreProcessors } from '../hooks/features/columnGrouping/useGridColumnGroupingPreProcessors';
 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';

package/internals/index.js

@@ -11,6 +11,8 @@ export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridCol
 export { useGridColumnMenu, columnMenuStateInitializer } from '../hooks/features/columnMenu/useGridColumnMenu';
 export { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
 export { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
+export { useGridColumnGrouping, columnGroupsStateInitializer } from '../hooks/features/columnGrouping/useGridColumnGrouping';
+export { useGridColumnGroupingPreProcessors } from '../hooks/features/columnGrouping/useGridColumnGroupingPreProcessors';
 export { useGridDensity, densityStateInitializer } from '../hooks/features/density/useGridDensity';
 export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 export { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';

package/legacy/DataGrid/DataGrid.js

@@ -79,6 +79,7 @@ DataGridRaw.propTypes = {
    * @default 3
    */
   columnBuffer: PropTypes.number,
+  columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
 
   /**
    * Set of columns of type [[GridColumns]].
@@ -196,6 +197,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({
+    columnGrouping: PropTypes.bool,
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
@@ -349,7 +351,7 @@ DataGridRaw.propTypes = {
 
   /**
    * Allows to pass the logging level or false to turn off logging.
-   * @default "debug"
+   * @default "error" ("warn" in dev mode)
    */
   logLevel: PropTypes.oneOf(['debug', 'error', 'info', 'warn', false]),