@mui/x-data-grid 5.13.0 → 5.15.0

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

@@ -8,4 +8,21 @@ export const gridRowsIdToIdLookupSelector = createSelector(gridRowsStateSelector
 export const gridRowTreeSelector = createSelector(gridRowsStateSelector, rows => rows.tree);
 export const gridRowGroupingNameSelector = createSelector(gridRowsStateSelector, rows => rows.groupingName);
 export const gridRowTreeDepthSelector = createSelector(gridRowsStateSelector, rows => rows.treeDepth);
-export const gridRowIdsSelector = createSelector(gridRowsStateSelector, rows => rows.ids);
+export const gridRowIdsSelector = createSelector(gridRowsStateSelector, rows => rows.ids);
+/**
+ * @ignore - do not document.
+ */
+
+export const gridAdditionalRowGroupsSelector = createSelector(gridRowsStateSelector, rows => rows?.additionalRowGroups);
+/**
+ * @ignore - do not document.
+ */
+
+export const gridPinnedRowsSelector = createSelector(gridAdditionalRowGroupsSelector, additionalRowGroups => additionalRowGroups?.pinnedRows);
+/**
+ * @ignore - do not document.
+ */
+
+export const gridPinnedRowsCountSelector = createSelector(gridPinnedRowsSelector, pinnedRows => {
+  return (pinnedRows?.top?.length || 0) + (pinnedRows?.bottom?.length || 0);
+});

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

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["rowsBeforePartialUpdates"];
-
+import { gridPinnedRowsSelector } from './gridRowsSelector';
 /**
  * A helper function to check if the id provided is valid.
  * @param {GridRowId} id Id as [[GridRowId]].
  * @param {GridRowModel | Partial<GridRowModel>} row Row as [[GridRowModel]].
  * @param {string} detailErrorMessage A custom error message to display for invalid IDs
  */
+
 export function checkGridRowIdIsValid(id, row, detailErrorMessage = 'A row was provided without id in the rows prop:') {
   if (id == null) {
     throw new Error(['MUI: The data grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
@@ -55,7 +56,7 @@ export const getRowsStateFromCache = ({
     previousTree
   }));
   const processedGroupingResponse = apiRef.current.unstable_applyPipeProcessors('hydrateRows', groupingResponse);
-  const dataTopLevelRowCount = processedGroupingResponse.treeDepth === 1 ? processedGroupingResponse.ids.length : Object.values(processedGroupingResponse.tree).filter(node => node.parent == null).length;
+  const dataTopLevelRowCount = processedGroupingResponse.treeDepth === 1 ? processedGroupingResponse.ids.length : Object.values(processedGroupingResponse.tree).filter(node => node.parent == null && !node.isPinned).length;
   return _extends({}, processedGroupingResponse, {
     groupingResponseBeforeRowHydration: groupingResponse,
     loading: loadingProp,
@@ -84,4 +85,19 @@ export const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) =>
   }
 
   return validDescendants;
-};
+};
+export function calculatePinnedRowsHeight(apiRef) {
+  const pinnedRows = gridPinnedRowsSelector(apiRef);
+  const topPinnedRowsHeight = pinnedRows?.top?.reduce((acc, value) => {
+    acc += apiRef.current.unstable_getRowHeight(value.id);
+    return acc;
+  }, 0) || 0;
+  const bottomPinnedRowsHeight = pinnedRows?.bottom?.reduce((acc, value) => {
+    acc += apiRef.current.unstable_getRowHeight(value.id);
+    return acc;
+  }, 0) || 0;
+  return {
+    top: topPinnedRowsHeight,
+    bottom: bottomPinnedRowsHeight
+  };
+}

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

@@ -1,4 +1,4 @@
 export * from './gridRowsMetaSelector';
 export * from './gridRowsMetaState';
-export * from './gridRowsSelector';
+export { gridRowsStateSelector, gridRowCountSelector, gridRowsLoadingSelector, gridTopLevelRowCountSelector, gridRowsLookupSelector, gridRowsIdToIdLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthSelector, gridRowIdsSelector } from './gridRowsSelector';
 export { checkGridRowIdIsValid } from './gridRowsUtils';

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

@@ -9,6 +9,7 @@ import { gridFilterStateSelector } from '../filter/gridFilterSelector';
 import { gridPaginationSelector } from '../pagination/gridPaginationSelector';
 import { gridSortingStateSelector } from '../sorting/gridSortingSelector';
 import { useGridRegisterPipeApplier } from '../../core/pipeProcessing';
+import { gridPinnedRowsSelector } from './gridRowsSelector';
 export const rowsMetaStateInitializer = state => _extends({}, state, {
   rowsMeta: {
     currentPageTotalHeight: 0,
@@ -35,13 +36,12 @@ export const useGridRowsMeta = (apiRef, props) => {
   const paginationState = useGridSelector(apiRef, gridPaginationSelector);
   const sortingState = useGridSelector(apiRef, gridSortingStateSelector);
   const currentPage = useGridVisibleRows(apiRef, props);
+  const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
   const hydrateRowsMeta = React.useCallback(() => {
     hasRowWithAutoHeight.current = false;
     const densityFactor = gridDensityFactorSelector(apiRef.current.state, apiRef.current.instanceId);
-    const positions = [];
-    const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
-      positions.push(acc);
 
+    const calculateRowProcessedSizes = row => {
       if (!rowsHeightLookup.current[row.id]) {
         rowsHeightLookup.current[row.id] = {
           sizes: {
@@ -111,9 +111,22 @@ export const useGridRowsMeta = (apiRef, props) => {
 
       const processedSizes = apiRef.current.unstable_applyPipeProcessors('rowHeight', initialHeights, row);
       rowsHeightLookup.current[row.id].sizes = processedSizes;
+      return processedSizes;
+    };
+
+    const positions = [];
+    const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
+      positions.push(acc);
+      const processedSizes = calculateRowProcessedSizes(row);
       const finalRowHeight = Object.values(processedSizes).reduce((acc2, value) => acc2 + value, 0);
       return acc + finalRowHeight;
     }, 0);
+    pinnedRows?.top?.forEach(row => {
+      calculateRowProcessedSizes(row);
+    });
+    pinnedRows?.bottom?.forEach(row => {
+      calculateRowProcessedSizes(row);
+    });
     apiRef.current.setState(state => {
       return _extends({}, state, {
         rowsMeta: {
@@ -129,7 +142,7 @@ export const useGridRowsMeta = (apiRef, props) => {
     }
 
     apiRef.current.forceUpdate();
-  }, [apiRef, currentPage.rows, rowHeightFromDensity, getRowHeightProp, getRowSpacing, getEstimatedRowHeight]);
+  }, [apiRef, currentPage.rows, rowHeightFromDensity, getRowHeightProp, getRowSpacing, getEstimatedRowHeight, pinnedRows]);
   const getRowHeight = React.useCallback(rowId => {
     const height = rowsHeightLookup.current[rowId];
     return height ? height.sizes.base : rowHeightFromDensity;

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

@@ -11,7 +11,8 @@ const flatRowTreeCreationMethod = ({
   for (let i = 0; i < ids.length; i += 1) {
     const rowId = ids[i];
 
-    if (previousTree && previousTree[rowId] && previousTree[rowId].depth === 0 && previousTree[rowId].parent == null) {
+    if (previousTree && previousTree[rowId] && previousTree[rowId].depth === 0 && previousTree[rowId].parent == null && // pinned row can be unpinned
+    !previousTree[rowId].isPinned) {
       tree[rowId] = previousTree[rowId];
     } else {
       tree[rowId] = {

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

@@ -6,7 +6,8 @@ import { gridPageSelector, gridPageSizeSelector } from '../pagination/gridPagina
 import { gridRowCountSelector } from '../rows/gridRowsSelector';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { gridVisibleSortedRowEntriesSelector } from '../filter/gridFilterSelector'; // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
+import { gridVisibleSortedRowEntriesSelector } from '../filter/gridFilterSelector';
+import { gridClasses } from '../../../constants/gridClasses'; // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
 // Similar to https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
 
 function scrollIntoView(dimensions) {
@@ -91,8 +92,10 @@ export const useGridScroll = (apiRef, props) => {
       const pageSize = gridPageSizeSelector(apiRef);
       const elementIndex = !props.pagination ? params.rowIndex : params.rowIndex - page * pageSize;
       const targetOffsetHeight = rowsMeta.positions[elementIndex + 1] ? rowsMeta.positions[elementIndex + 1] - rowsMeta.positions[elementIndex] : rowsMeta.currentPageTotalHeight - rowsMeta.positions[elementIndex];
+      const topPinnedRowsHeight = windowRef.current.querySelector(`.${gridClasses['pinnedRows--top']}`)?.clientHeight || 0;
+      const bottomPinnedRowsHeight = windowRef.current.querySelector(`.${gridClasses['pinnedRows--bottom']}`)?.clientHeight || 0;
       scrollCoordinates.top = scrollIntoView({
-        clientHeight: windowRef.current.clientHeight,
+        clientHeight: windowRef.current.clientHeight - topPinnedRowsHeight - bottomPinnedRowsHeight,
         scrollTop: windowRef.current.scrollTop,
         offsetHeight: targetOffsetHeight,
         offsetTop: rowsMeta.positions[elementIndex]

package/modern/hooks/features/selection/useGridSelection.js

@@ -57,9 +57,9 @@ export const useGridSelection = (apiRef, props) => {
     checkboxSelection,
     disableMultipleSelection,
     disableSelectionOnClick,
-    isRowSelectable,
     pagination,
-    paginationMode
+    paginationMode,
+    isRowSelectable: propIsRowSelectable
   } = props;
   const canHaveMultipleSelection = !disableMultipleSelection || checkboxSelection;
   const visibleRows = useGridVisibleRows(apiRef, props);
@@ -106,9 +106,22 @@ export const useGridSelection = (apiRef, props) => {
     }
   }, [apiRef, logger]);
   const isRowSelected = React.useCallback(id => gridSelectionStateSelector(apiRef.current.state).includes(id), [apiRef]);
+  const isRowSelectable = React.useCallback(id => {
+    if (propIsRowSelectable && !propIsRowSelectable(apiRef.current.getRowParams(id))) {
+      return false;
+    }
+
+    const rowNode = apiRef.current.getRowNode(id);
+
+    if (rowNode?.position === 'footer' || rowNode?.isPinned) {
+      return false;
+    }
+
+    return true;
+  }, [apiRef, propIsRowSelectable]);
   const getSelectedRows = React.useCallback(() => selectedGridRowsSelector(apiRef), [apiRef]);
   const selectRow = React.useCallback((id, isSelected = true, resetSelection = false) => {
-    if (isRowSelectable && !isRowSelectable(apiRef.current.getRowParams(id))) {
+    if (!apiRef.current.isRowSelectable(id)) {
       return;
     }
 
@@ -132,10 +145,10 @@ export const useGridSelection = (apiRef, props) => {
         apiRef.current.setSelectionModel(newSelection);
       }
     }
-  }, [apiRef, isRowSelectable, logger, canHaveMultipleSelection]);
+  }, [apiRef, logger, canHaveMultipleSelection]);
   const selectRows = React.useCallback((ids, isSelected = true, resetSelection = false) => {
     logger.debug(`Setting selection for several rows`);
-    const selectableIds = isRowSelectable ? ids.filter(id => isRowSelectable(apiRef.current.getRowParams(id))) : ids;
+    const selectableIds = ids.filter(id => apiRef.current.isRowSelectable(id));
     let newSelection;
 
     if (resetSelection) {
@@ -159,7 +172,7 @@ export const useGridSelection = (apiRef, props) => {
     if (isSelectionValid) {
       apiRef.current.setSelectionModel(newSelection);
     }
-  }, [apiRef, isRowSelectable, logger, canHaveMultipleSelection]);
+  }, [apiRef, logger, canHaveMultipleSelection]);
   const selectRowRange = React.useCallback(({
     startId,
     endId
@@ -183,7 +196,8 @@ export const useGridSelection = (apiRef, props) => {
     selectRowRange,
     setSelectionModel,
     getSelectedRows,
-    isRowSelected
+    isRowSelected,
+    isRowSelectable
   };
   useGridApiMethod(apiRef, selectionApi, 'GridSelectionApi');
   /**
@@ -251,6 +265,10 @@ export const useGridSelection = (apiRef, props) => {
       }
     }
 
+    if (params.rowNode.isPinned) {
+      return;
+    }
+
     if (event.shiftKey && (canHaveMultipleSelection || checkboxSelection)) {
       expandMouseRowRangeSelection(params.id);
     } else {
@@ -363,13 +381,13 @@ export const useGridSelection = (apiRef, props) => {
   React.useEffect(() => {
     if (isStateControlled) {
       return;
-    } // isRowSelectable changed
+    } // props.isRowSelectable changed
 
 
     const currentSelection = gridSelectionStateSelector(apiRef.current.state);
 
     if (isRowSelectable) {
-      const newSelection = currentSelection.filter(id => isRowSelectable(apiRef.current.getRowParams(id)));
+      const newSelection = currentSelection.filter(id => isRowSelectable(id));
 
       if (newSelection.length < currentSelection.length) {
         apiRef.current.setSelectionModel(newSelection);
@@ -396,7 +414,7 @@ export const useGridSelection = (apiRef, props) => {
         let isSelectable = true;
 
         if (isRowSelectable) {
-          isSelectable = isRowSelectable(apiRef.current.getRowParams(id));
+          isSelectable = isRowSelectable(id);
         }
 
         return isSelectable && currentPageRowsLookup[id]; // Check if the row is in the current page

package/modern/hooks/features/sorting/gridSortingUtils.js

@@ -46,25 +46,24 @@ const parseSortItem = (sortItem, apiRef) => {
     comparator
   };
 };
+
 /**
  * Compare two rows according to a list of valid sort items.
  * The `row1Params` and `row2Params` must have the same length as `parsedSortItems`,
  * and each of their index must contain the `GridSortCellParams` of the sort item with the same index.
  * @param {GridParsedSortItem[]} parsedSortItems All the sort items with which we want to compare the rows.
- * @param {GridSortCellParams} row1Params The params of the 1st row for each sort item.
- * @param {GridSortCellParams} row2Params The params of the 2nd row for each sort item.
+ * @param {GridRowAggregatedSortingParams} row1 The node and params of the 1st row for each sort item.
+ * @param {GridRowAggregatedSortingParams} row2 The node and params of the 2nd row for each sort item.
  */
-
-
-const compareRows = (parsedSortItems, row1Params, row2Params) => {
+const compareRows = (parsedSortItems, row1, row2) => {
   return parsedSortItems.reduce((res, item, index) => {
     if (res !== 0) {
       // return the results of the first comparator which distinguish the two rows
       return res;
     }
 
-    const sortCellParams1 = row1Params[index];
-    const sortCellParams2 = row2Params[index];
+    const sortCellParams1 = row1.params[index];
+    const sortCellParams2 = row2.params[index];
     res = item.comparator(sortCellParams1.value, sortCellParams2.value, sortCellParams1, sortCellParams2);
     return res;
   }, 0);
@@ -84,10 +83,10 @@ export const buildAggregatedSortingApplier = (sortModel, apiRef) => {
     return null;
   }
 
-  return rowList => rowList.map(value => ({
-    value,
-    params: comparatorList.map(el => el.getSortCellParams(value.id))
-  })).sort((a, b) => compareRows(comparatorList, a.params, b.params)).map(row => row.value.id);
+  return rowList => rowList.map(node => ({
+    node,
+    params: comparatorList.map(el => el.getSortCellParams(node.id))
+  })).sort((a, b) => compareRows(comparatorList, a, b)).map(row => row.node.id);
 };
 export const getNextGridSortDirection = (sortingOrder, current) => {
   const currentIdx = sortingOrder.indexOf(current);

package/modern/hooks/features/sorting/useGridSorting.js

@@ -146,10 +146,15 @@ export const useGridSorting = (apiRef, props) => {
    * PRE-PROCESSING
    */
 
-  const stateExportPreProcessing = React.useCallback(prevState => {
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
     const sortModelToExport = gridSortModelSelector(apiRef);
+    const shouldExportSortModel = // Always export if the `exportOnlyDirtyModels` property is activated
+    !context.exportOnlyDirtyModels || // Always export if the model is controlled
+    props.sortModel != null || // Always export if the model has been initialized
+    props.initialState?.sorting?.sortModel != null || // Export if the model is not empty
+    sortModelToExport.length > 0;
 
-    if (sortModelToExport.length === 0) {
+    if (!shouldExportSortModel) {
       return prevState;
     }
 
@@ -158,7 +163,7 @@ export const useGridSorting = (apiRef, props) => {
         sortModel: sortModelToExport
       }
     });
-  }, [apiRef]);
+  }, [apiRef, props.sortModel, props.initialState?.sorting?.sortModel]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     const sortModel = context.stateToRestore.sorting?.sortModel;
 
@@ -172,12 +177,39 @@ export const useGridSorting = (apiRef, props) => {
     });
   }, [apiRef, props.disableMultipleColumnsSorting]);
   const flatSortingMethod = React.useCallback(params => {
+    const rowTree = gridRowTreeSelector(apiRef);
+
     if (!params.sortRowList) {
-      return gridRowIdsSelector(apiRef);
+      const bodyRowIds = [];
+      const footerRowIds = [];
+      gridRowIdsSelector(apiRef).forEach(rowId => {
+        if (rowTree[rowId].isPinned) {
+          return;
+        }
+
+        if (rowTree[rowId].position === 'footer') {
+          footerRowIds.push(rowId);
+        } else {
+          bodyRowIds.push(rowId);
+        }
+      });
+      return [...bodyRowIds, ...footerRowIds];
     }
 
-    const rowTree = gridRowTreeSelector(apiRef);
-    return params.sortRowList(Object.values(rowTree));
+    const bodyRows = [];
+    const footerRowIds = [];
+    Object.values(rowTree).forEach(rowNode => {
+      if (rowNode.isPinned) {
+        return;
+      }
+
+      if (rowNode.position === 'footer') {
+        footerRowIds.push(rowNode.id);
+      } else {
+        bodyRows.push(rowNode);
+      }
+    });
+    return [...params.sortRowList(bodyRows), ...footerRowIds];
   }, [apiRef]);
   useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);

package/modern/hooks/features/statePersistence/useGridStatePersistence.js

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

package/modern/hooks/features/virtualization/useGridVirtualScroller.js

@@ -86,8 +86,15 @@ export const useGridVirtualScroller = props => {
   const [containerWidth, setContainerWidth] = React.useState(null);
   const prevTotalWidth = React.useRef(columnsTotalWidth);
   const getNearestIndexToRender = React.useCallback(offset => {
-    const lastMeasuredIndex = Math.max(0, apiRef.current.unstable_getLastMeasuredRowIndex());
-    const allRowsMeasured = lastMeasuredIndex === Infinity;
+    const lastMeasuredIndexRelativeToAllRows = apiRef.current.unstable_getLastMeasuredRowIndex();
+    const lastMeasuredIndexRelativeToCurrentPage = lastMeasuredIndexRelativeToAllRows - (currentPage.range?.firstRowIndex || 0);
+    const lastMeasuredIndex = Math.max(0, lastMeasuredIndexRelativeToCurrentPage);
+    let allRowsMeasured = lastMeasuredIndex === Infinity;
+
+    if (currentPage.range?.lastRowIndex && !allRowsMeasured) {
+      // Check if all rows in this page are already measured
+      allRowsMeasured = lastMeasuredIndex >= currentPage.range.lastRowIndex;
+    }
 
     if (allRowsMeasured || rowsMeta.positions[lastMeasuredIndex] >= offset) {
       // If all rows were measured (when no row has "auto" as height) or all rows before the offset
@@ -100,7 +107,7 @@ export const useGridVirtualScroller = props => {
 
 
     return exponentialSearch(offset, rowsMeta.positions, lastMeasuredIndex);
-  }, [apiRef, rowsMeta.positions]);
+  }, [apiRef, currentPage.range?.firstRowIndex, currentPage.range?.lastRowIndex, rowsMeta.positions]);
   const computeRenderContext = React.useCallback(() => {
     if (disableVirtualization) {
       return {
@@ -159,10 +166,8 @@ export const useGridVirtualScroller = props => {
   React.useEffect(() => {
     setContainerWidth(rootRef.current.clientWidth);
   }, [rowsMeta.currentPageTotalHeight]);
-  const handleResize = React.useCallback(() => {
-    if (rootRef.current) {
-      setContainerWidth(rootRef.current.clientWidth);
-    }
+  const handleResize = React.useCallback(params => {
+    setContainerWidth(params.width);
   }, []);
   useGridApiEventHandler(apiRef, 'resize', handleResize);
   const updateRenderZonePosition = React.useCallback(nextRenderContext => {
@@ -278,10 +283,11 @@ export const useGridVirtualScroller = props => {
       minFirstColumn = renderZoneMinColumnIndex,
       maxLastColumn = renderZoneMaxColumnIndex,
       availableSpace = containerWidth,
-      ignoreAutoHeight
+      ignoreAutoHeight,
+      rowIndexOffset = 0
     } = params;
 
-    if (!currentPage.range || !nextRenderContext || availableSpace == null) {
+    if (!nextRenderContext || availableSpace == null) {
       return null;
     }
 
@@ -296,14 +302,31 @@ export const useGridVirtualScroller = props => {
     });
     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
+    if (params.rows) {
+      params.rows.forEach(row => {
+        renderedRows.push(row);
+        apiRef.current.unstable_calculateColSpan({
+          rowId: row.id,
+          minFirstColumn,
+          maxLastColumn,
+          columns: visibleColumns
+        });
       });
+    } else {
+      if (!currentPage.range) {
+        return null;
+      }
+
+      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,
+          columns: visibleColumns
+        });
+      }
     }
 
     const [initialFirstColumnToRender, lastColumnToRender] = getRenderableIndexes({
@@ -334,10 +357,8 @@ export const useGridVirtualScroller = props => {
 
       if (selectedRowsLookup[id] == null) {
         isSelected = false;
-      } else if (typeof rootProps.isRowSelectable === 'function') {
-        isSelected = rootProps.isRowSelectable(apiRef.current.getRowParams(id));
       } else {
-        isSelected = true;
+        isSelected = apiRef.current.isRowSelectable(id);
       }
 
       rows.push( /*#__PURE__*/_jsx(rootProps.components.Row, _extends({
@@ -355,7 +376,7 @@ export const useGridVirtualScroller = props => {
         firstColumnToRender: firstColumnToRender,
         lastColumnToRender: lastColumnToRender,
         selected: isSelected,
-        index: currentPage.range.firstRowIndex + firstRowToRender + i,
+        index: rowIndexOffset + (currentPage?.range?.firstRowIndex || 0) + firstRowToRender + i,
         containerWidth: availableSpace,
         isLastVisible: lastVisibleRowIndex
       }, typeof getRowProps === 'function' ? getRowProps(id, model) : {}, rootProps.componentsProps?.row), id));

package/modern/hooks/utils/useGridNativeEventListener.js

@@ -20,7 +20,7 @@ export const useGridNativeEventListener = (apiRef, ref, eventName, handler, opti
       targetElement = ref && ref.current ? ref.current : null;
     }
 
-    if (targetElement && wrapHandler && eventName && !added) {
+    if (targetElement && eventName && !added) {
       logger.debug(`Binding native ${eventName} event`);
       targetElement.addEventListener(eventName, wrapHandler, options);
       const boundElem = targetElement;

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.13.0
+/** @license MUI v5.15.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/internals/index.js

@@ -4,7 +4,7 @@ export { GridVirtualScrollerRenderZone } from '../components/virtualization/Grid
 export { GridColumnHeaders } from '../components/columnHeaders/GridColumnHeaders';
 export { GridColumnHeadersInner } from '../components/columnHeaders/GridColumnHeadersInner';
 export { useGridRegisterPipeProcessor } from '../hooks/core/pipeProcessing';
-export { useGridRegisterStrategyProcessor } from '../hooks/core/strategyProcessing';
+export { useGridRegisterStrategyProcessor, GRID_DEFAULT_STRATEGY } from '../hooks/core/strategyProcessing';
 export { useGridInitialization } from '../hooks/core/useGridInitialization';
 export { useGridClipboard } from '../hooks/features/clipboard/useGridClipboard';
 export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
@@ -25,6 +25,9 @@ export { useGridRows, rowsStateInitializer } from '../hooks/features/rows/useGri
 export { useGridRowsPreProcessors } from '../hooks/features/rows/useGridRowsPreProcessors';
 export { useGridRowsMeta, rowsMetaStateInitializer } from '../hooks/features/rows/useGridRowsMeta';
 export { useGridParamsApi } from '../hooks/features/rows/useGridParamsApi';
+export { getRowIdFromRowModel } from '../hooks/features/rows/gridRowsUtils';
+export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector } from '../hooks/features/rows/gridRowsSelector';
+export { calculatePinnedRowsHeight } from '../hooks/features/rows/gridRowsUtils';
 export { useGridSelection, selectionStateInitializer } from '../hooks/features/selection/useGridSelection';
 export { useGridSelectionPreProcessors } from '../hooks/features/selection/useGridSelectionPreProcessors';
 export { useGridSorting, sortingStateInitializer } from '../hooks/features/sorting/useGridSorting';
@@ -39,6 +42,6 @@ export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/ex
 export { createSelector, unstable_resetCreateSelectorCache } from '../utils/createSelector';
 export { findParentElementFromClassName } from '../utils/domUtils';
 export { isNavigationKey } from '../utils/keyboardUtils';
-export { clamp, isDeepEqual } from '../utils/utils';
+export { clamp, isDeepEqual, isNumber, isFunction } from '../utils/utils';
 export { buildWarning } from '../utils/warning';
 export { exportAs } from '../utils/exportAs';

package/modern/locales/arSD.js

@@ -21,7 +21,7 @@ const arSDGrid = {
   toolbarFiltersTooltipShow: 'اظهر المرشِحات',
   toolbarFiltersTooltipActive: count => count !== 1 ? `${count} من المرشِحات النشطة` : `مرشِح نشط`,
   // Quick filter toolbar field
-  // toolbarQuickFilterPlaceholder: 'Search...',
+  // toolbarQuickFilterPlaceholder: 'Search…',
   // toolbarQuickFilterLabel: 'Search',
   // toolbarQuickFilterDeleteIconLabel: 'Clear',
   // Export selector toolbar button text
@@ -111,6 +111,13 @@ const arSDGrid = {
   expandDetailPanel: 'توسيع',
   collapseDetailPanel: 'طوي' // Row reordering text
   // rowReorderingHeaderName: 'Row reordering',
+  // Aggregation
+  // aggregationMenuItemHeader: 'Aggregation',
+  // aggregationFunctionLabelSum: 'sum',
+  // aggregationFunctionLabelAvg: 'avg',
+  // aggregationFunctionLabelMin: 'min',
+  // aggregationFunctionLabelMax: 'max',
+  // aggregationFunctionLabelSize: 'size',
 
 };
 export const arSD = getGridLocalization(arSDGrid, arSDCore);

package/modern/locales/bgBG.js

@@ -21,7 +21,7 @@ const bgBGGrid = {
   toolbarFiltersTooltipShow: 'Покажи Филтрите',
   toolbarFiltersTooltipActive: count => `${count} активни филтри`,
   // Quick filter toolbar field
-  // toolbarQuickFilterPlaceholder: 'Search...',
+  // toolbarQuickFilterPlaceholder: 'Search…',
   // toolbarQuickFilterLabel: 'Search',
   // toolbarQuickFilterDeleteIconLabel: 'Clear',
   // Export selector toolbar button text
@@ -111,6 +111,13 @@ const bgBGGrid = {
   expandDetailPanel: 'Разгъване',
   collapseDetailPanel: 'Свиване' // Row reordering text
   // rowReorderingHeaderName: 'Row reordering',
+  // Aggregation
+  // aggregationMenuItemHeader: 'Aggregation',
+  // aggregationFunctionLabelSum: 'sum',
+  // aggregationFunctionLabelAvg: 'avg',
+  // aggregationFunctionLabelMin: 'min',
+  // aggregationFunctionLabelMax: 'max',
+  // aggregationFunctionLabelSize: 'size',
 
 };
 export const bgBG = getGridLocalization(bgBGGrid, bgBGCore);

package/modern/locales/csCZ.js

@@ -31,7 +31,7 @@ const csCZGrid = {
     return `${count} ${pluralForm}`;
   },
   // Quick filter toolbar field
-  // toolbarQuickFilterPlaceholder: 'Search...',
+  // toolbarQuickFilterPlaceholder: 'Search…',
   // toolbarQuickFilterLabel: 'Search',
   // toolbarQuickFilterDeleteIconLabel: 'Clear',
   // Export selector toolbar button text
@@ -146,6 +146,13 @@ const csCZGrid = {
   // collapseDetailPanel: 'Collapse',
   // Row reordering text
   // rowReorderingHeaderName: 'Row reordering',
+  // Aggregation
+  // aggregationMenuItemHeader: 'Aggregation',
+  // aggregationFunctionLabelSum: 'sum',
+  // aggregationFunctionLabelAvg: 'avg',
+  // aggregationFunctionLabelMin: 'min',
+  // aggregationFunctionLabelMax: 'max',
+  // aggregationFunctionLabelSize: 'size',
 
 };
 export const csCZ = getGridLocalization(csCZGrid, csCZCore);

package/modern/locales/daDK.js

@@ -21,7 +21,7 @@ const daDKGrid = {
   toolbarFiltersTooltipShow: 'Vis filtre',
   toolbarFiltersTooltipActive: count => count !== 1 ? `${count} aktive filtre` : `${count} aktivt filter`,
   // Quick filter toolbar field
-  // toolbarQuickFilterPlaceholder: 'Search...',
+  // toolbarQuickFilterPlaceholder: 'Search…',
   // toolbarQuickFilterLabel: 'Search',
   // toolbarQuickFilterDeleteIconLabel: 'Clear',
   // Export selector toolbar button text
@@ -111,6 +111,13 @@ const daDKGrid = {
   expandDetailPanel: 'Udvid',
   collapseDetailPanel: 'Kollaps' // Row reordering text
   // rowReorderingHeaderName: 'Row reordering',
+  // Aggregation
+  // aggregationMenuItemHeader: 'Aggregation',
+  // aggregationFunctionLabelSum: 'sum',
+  // aggregationFunctionLabelAvg: 'avg',
+  // aggregationFunctionLabelMin: 'min',
+  // aggregationFunctionLabelMax: 'max',
+  // aggregationFunctionLabelSize: 'size',
 
 };
 export const daDK = getGridLocalization(daDKGrid, daDKCore);