@mui/x-data-grid 7.0.0-beta.5 → 7.0.0-beta.6

package/hooks/core/pipeProcessing/useGridPipeProcessing.js

@@ -32,7 +32,7 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
  *   * `apiRef.current.requestPipeProcessorsApplication` is called for the given group.
  */
 export const useGridPipeProcessing = apiRef => {
-  const processorsCache = React.useRef({});
+  const cache = React.useRef({});
   const isRunning = React.useRef(false);
   const runAppliers = React.useCallback(groupCache => {
     if (isRunning.current || !groupCache) {
@@ -45,52 +45,54 @@ export const useGridPipeProcessing = apiRef => {
     isRunning.current = false;
   }, []);
   const registerPipeProcessor = React.useCallback((group, id, processor) => {
-    if (!processorsCache.current[group]) {
-      processorsCache.current[group] = {
+    if (!cache.current[group]) {
+      cache.current[group] = {
         processors: new Map(),
+        processorsAsArray: [],
         appliers: {}
       };
     }
-    const groupCache = processorsCache.current[group];
+    const groupCache = cache.current[group];
     const oldProcessor = groupCache.processors.get(id);
     if (oldProcessor !== processor) {
       groupCache.processors.set(id, processor);
+      groupCache.processorsAsArray = Array.from(cache.current[group].processors.values());
       runAppliers(groupCache);
     }
     return () => {
-      processorsCache.current[group].processors.set(id, null);
+      cache.current[group].processors.delete(id);
+      cache.current[group].processorsAsArray = Array.from(cache.current[group].processors.values());
     };
   }, [runAppliers]);
   const registerPipeApplier = React.useCallback((group, id, applier) => {
-    if (!processorsCache.current[group]) {
-      processorsCache.current[group] = {
+    if (!cache.current[group]) {
+      cache.current[group] = {
         processors: new Map(),
+        processorsAsArray: [],
         appliers: {}
       };
     }
-    processorsCache.current[group].appliers[id] = applier;
+    cache.current[group].appliers[id] = applier;
     return () => {
-      const _appliers = processorsCache.current[group].appliers,
+      const _appliers = cache.current[group].appliers,
         otherAppliers = _objectWithoutPropertiesLoose(_appliers, [id].map(_toPropertyKey));
-      processorsCache.current[group].appliers = otherAppliers;
+      cache.current[group].appliers = otherAppliers;
     };
   }, []);
   const requestPipeProcessorsApplication = React.useCallback(group => {
-    const groupCache = processorsCache.current[group];
-    runAppliers(groupCache);
+    runAppliers(cache.current[group]);
   }, [runAppliers]);
   const applyPipeProcessors = React.useCallback((...args) => {
     const [group, value, context] = args;
-    if (!processorsCache.current[group]) {
+    if (!cache.current[group]) {
       return value;
     }
-    const preProcessors = Array.from(processorsCache.current[group].processors.values());
-    return preProcessors.reduce((acc, preProcessor) => {
-      if (!preProcessor) {
-        return acc;
-      }
-      return preProcessor(acc, context);
-    }, value);
+    const processors = cache.current[group].processorsAsArray;
+    let result = value;
+    for (let i = 0; i < processors.length; i += 1) {
+      result = processors[i](result, context);
+    }
+    return result;
   }, []);
   const preProcessingPrivateApi = {
     registerPipeProcessor,

package/hooks/features/dimensions/useGridDimensions.js

@@ -229,6 +229,7 @@ export function useGridDimensions(apiRef, props) {
     set('--DataGrid-headersTotalHeight', `${dimensions.headersTotalHeight}px`);
     set('--DataGrid-topContainerHeight', `${dimensions.topContainerHeight}px`);
     set('--DataGrid-bottomContainerHeight', `${dimensions.bottomContainerHeight}px`);
+    set('--height', `${dimensions.rowHeight}px`);
   }, [root, dimensions]);
   const isFirstSizing = React.useRef(true);
   const handleResize = React.useCallback(size => {

package/hooks/features/rows/useGridParamsApi.js

@@ -31,12 +31,13 @@ export function useGridParamsApi(apiRef) {
   }, [apiRef]);
   const getCellParams = React.useCallback((id, field) => {
     const colDef = apiRef.current.getColumn(field);
-    const value = apiRef.current.getCellValue(id, field);
     const row = apiRef.current.getRow(id);
     const rowNode = apiRef.current.getRowNode(id);
     if (!row || !rowNode) {
       throw new MissingRowIdError(`No row with id #${id} found`);
     }
+    const rawValue = row[field];
+    const value = colDef != null && colDef.valueGetter ? colDef.valueGetter(rawValue, row, colDef, apiRef) : rawValue;
     const cellFocus = gridFocusCellSelector(apiRef);
     const cellTabIndex = gridTabIndexCellSelector(apiRef);
     const params = {
@@ -60,19 +61,14 @@ export function useGridParamsApi(apiRef) {
   }, [apiRef]);
   const getCellValue = React.useCallback((id, field) => {
     const colDef = apiRef.current.getColumn(field);
-    if (!colDef || !colDef.valueGetter) {
-      const rowModel = apiRef.current.getRow(id);
-      if (!rowModel) {
-        throw new MissingRowIdError(`No row with id #${id} found`);
-      }
-      return rowModel[field];
-    }
     const row = apiRef.current.getRow(id);
     if (!row) {
       throw new MissingRowIdError(`No row with id #${id} found`);
     }
-    const value = row[colDef.field];
-    return colDef.valueGetter(value, row, colDef, apiRef);
+    if (!colDef || !colDef.valueGetter) {
+      return row[field];
+    }
+    return colDef.valueGetter(row[colDef.field], row, colDef, apiRef);
   }, [apiRef]);
   const getRowValue = React.useCallback((row, colDef) => {
     const field = colDef.field;

package/hooks/features/sorting/useGridSorting.js

@@ -42,7 +42,7 @@ export const useGridSorting = (apiRef, props) => {
     const existingIdx = sortModel.findIndex(c => c.field === field);
     let newSortModel = [...sortModel];
     if (existingIdx > -1) {
-      if (!sortItem) {
+      if ((sortItem == null ? void 0 : sortItem.sort) == null) {
         newSortModel.splice(existingIdx, 1);
       } else {
         newSortModel.splice(existingIdx, 1, sortItem);
@@ -120,7 +120,7 @@ export const useGridSorting = (apiRef, props) => {
     const sortItem = createSortItem(column, direction);
     let sortModel;
     if (!allowMultipleSorting || props.disableMultipleColumnsSorting) {
-      sortModel = !sortItem ? [] : [sortItem];
+      sortModel = (sortItem == null ? void 0 : sortItem.sort) == null ? [] : [sortItem];
     } else {
       sortModel = upsertSortModel(column.field, sortItem);
     }

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -274,6 +274,12 @@ export const useGridVirtualScroller = () => {
       if (panel) {
         rows.push(panel);
       }
+      if (isLastVisible) {
+        var _apiRef$current$getIn, _apiRef$current;
+        rows.push((_apiRef$current$getIn = (_apiRef$current = apiRef.current).getInfiniteLoadingTriggerElement) == null ? void 0 : _apiRef$current$getIn.call(_apiRef$current, {
+          lastRowId: id
+        }));
+      }
     });
     return rows;
   };

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.0.0-beta.5
+ * @mui/x-data-grid v7.0.0-beta.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/index.d.ts

@@ -68,7 +68,7 @@ export type { GridStateInitializer } from '../hooks/utils/useGridInitializeState
 export type { GridExperimentalFeatures, DataGridPropsWithoutDefaultValue, DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithComplexDefaultValueBeforeProcessing, } from '../models/props/DataGridProps';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
 export * from '../utils/createControllablePromise';
-export { createSelector, createSelectorMemoized, unstable_resetCreateSelectorCache, } from '../utils/createSelector';
+export { createSelector, createSelectorMemoized } from '../utils/createSelector';
 export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal, } from '../utils/domUtils';
 export { isNavigationKey, isPasteShortcut } from '../utils/keyboardUtils';
 export * from '../utils/utils';

package/internals/index.js

@@ -54,7 +54,7 @@ export { useGridVisibleRows, getVisibleRows } from '../hooks/utils/useGridVisibl
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
 export * from '../utils/createControllablePromise';
-export { createSelector, createSelectorMemoized, unstable_resetCreateSelectorCache } from '../utils/createSelector';
+export { createSelector, createSelectorMemoized } from '../utils/createSelector';
 export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal } from '../utils/domUtils';
 export { isNavigationKey, isPasteShortcut } from '../utils/keyboardUtils';
 export * from '../utils/utils';

package/models/api/gridApiCommon.d.ts

@@ -28,9 +28,10 @@ import { GridColumnGroupingApi } from './gridColumnGroupingApi';
 import type { GridInitialStateCommunity, GridStateCommunity } from '../gridStateCommunity';
 import { GridHeaderFilteringApi, GridHeaderFilteringPrivateApi } from './gridHeaderFilteringApi';
 import type { DataGridProcessedProps } from '../props/DataGridProps';
+import type { GridInfiniteLoaderPrivateApi } from './gridInfiniteLoaderApi';
 export interface GridApiCommon<GridState extends GridStateCommunity = any, GridInitialState extends GridInitialStateCommunity = any> extends GridCoreApi, GridPipeProcessingApi, GridDensityApi, GridDimensionsApi, GridRowApi, GridRowsMetaApi, GridEditingApi, GridParamsApi, GridColumnApi, GridRowSelectionApi, GridSortApi, GridPaginationApi, GridCsvExportApi, GridFocusApi, GridFilterApi, GridColumnMenuApi, GridPreferencesPanelApi, GridPrintExportApi, GridVirtualizationApi, GridLocaleTextApi, GridScrollApi, GridColumnSpanningApi, GridStateApi<GridState>, GridStatePersistenceApi<GridInitialState>, GridColumnGroupingApi, GridHeaderFilteringApi {
 }
-export interface GridPrivateOnlyApiCommon<Api extends GridApiCommon, PrivateApi extends GridPrivateApiCommon, Props extends DataGridProcessedProps> extends GridCorePrivateApi<Api, PrivateApi, Props>, GridStatePrivateApi<PrivateApi['state']>, GridPipeProcessingPrivateApi, GridStrategyProcessingApi, GridColumnSpanningPrivateApi, GridRowsMetaPrivateApi, GridDimensionsPrivateApi, GridEditingPrivateApi, GridLoggerApi, GridFocusPrivateApi, GridHeaderFilteringPrivateApi, GridVirtualizationPrivateApi {
+export interface GridPrivateOnlyApiCommon<Api extends GridApiCommon, PrivateApi extends GridPrivateApiCommon, Props extends DataGridProcessedProps> extends GridCorePrivateApi<Api, PrivateApi, Props>, GridStatePrivateApi<PrivateApi['state']>, GridPipeProcessingPrivateApi, GridStrategyProcessingApi, GridColumnSpanningPrivateApi, GridRowsMetaPrivateApi, GridDimensionsPrivateApi, GridEditingPrivateApi, GridLoggerApi, GridFocusPrivateApi, GridHeaderFilteringPrivateApi, GridVirtualizationPrivateApi, GridInfiniteLoaderPrivateApi {
 }
 export interface GridPrivateApiCommon extends GridApiCommon, GridPrivateOnlyApiCommon<GridApiCommon, GridPrivateApiCommon, DataGridProcessedProps> {
 }

package/models/api/gridInfiniteLoaderApi.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface GridInfiniteLoaderPrivateApi {
+    getInfiniteLoadingTriggerElement?: ({ lastRowId, }: {
+        lastRowId: string | number;
+    }) => React.ReactNode;
+}

package/models/api/gridInfiniteLoaderApi.js

@@ -0,0 +1 @@
+export {};

package/modern/components/GridRow.js

@@ -215,7 +215,8 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     const rowStyle = _extends({}, styleProp, {
       maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
       // max-height doesn't support "auto"
-      minHeight
+      minHeight,
+      '--height': typeof rowHeight === 'number' ? `${rowHeight}px` : rowHeight
     });
     if (sizes?.spacingTop) {
       const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
@@ -287,20 +288,17 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       column: column,
       width: width,
       rowId: rowId,
-      height: rowHeight,
       align: column.align || 'left',
       colIndex: indexRelativeToAllColumns,
       colSpan: colSpan,
       disableDragEvents: disableDragEvents,
       editCellState: editCellState,
-      isNotVisible: cellIsNotVisible
-    }, slotProps?.cell, {
+      isNotVisible: cellIsNotVisible,
       pinnedOffset: pinnedOffset,
       pinnedPosition: pinnedPosition,
       sectionIndex: indexInSection,
-      sectionLength: sectionLength,
-      gridHasScrollX: dimensions.hasScrollX
-    }), column.field);
+      sectionLength: sectionLength
+    }, slotProps?.cell), column.field);
   };
 
   /* Start of rendering */

package/modern/components/cell/GridCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "style", "gridHasScrollX", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "gridHasScrollX", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -74,7 +74,6 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       editCellState,
       align,
       colIndex,
-      height,
       width,
       className,
       style: styleProp,
@@ -203,8 +202,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       };
     }
     const cellStyle = _extends({
-      '--width': `${width}px`,
-      '--height': typeof height === 'number' ? `${height}px` : height
+      '--width': `${width}px`
     }, styleProp);
     if (pinnedPosition === PinnedPosition.LEFT) {
       cellStyle.left = pinnedOffset;
@@ -213,7 +211,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       cellStyle.right = pinnedOffset;
     }
     return cellStyle;
-  }, [width, height, isNotVisible, styleProp, pinnedOffset, pinnedPosition]);
+  }, [width, isNotVisible, styleProp, pinnedOffset, pinnedPosition]);
   React.useEffect(() => {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
       return;
@@ -323,8 +321,6 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
     isValidating: PropTypes.bool,
     value: PropTypes.any
   }),
-  gridHasScrollX: PropTypes.bool.isRequired,
-  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
   isNotVisible: PropTypes.bool.isRequired,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,

package/modern/components/containers/GridRootStyles.js

@@ -441,8 +441,6 @@ export const GridRootStyles = styled('div', {
       lineHeight: 'calc(var(--height) - 1px)',
       // -1px for the border
 
-      '--width': '0px',
-      '--height': '0px',
       boxSizing: 'border-box',
       borderTop: `1px solid var(--rowBorderColor)`,
       overflow: 'hidden',

package/modern/components/virtualization/GridVirtualScroller.js

@@ -59,8 +59,10 @@ function GridVirtualScroller(props) {
     getContentProps,
     getRenderZoneProps,
     getScrollbarVerticalProps,
-    getScrollbarHorizontalProps
+    getScrollbarHorizontalProps,
+    getRows
   } = virtualScroller;
+  const rows = getRows();
   return /*#__PURE__*/_jsxs(Container, _extends({
     className: classes.root
   }, getContainerProps(), {
@@ -75,11 +77,11 @@ function GridVirtualScroller(props) {
         })]
       }), /*#__PURE__*/_jsx(GridOverlays, {}), /*#__PURE__*/_jsx(Content, _extends({}, getContentProps(), {
         children: /*#__PURE__*/_jsxs(RenderZone, _extends({}, getRenderZoneProps(), {
-          children: [virtualScroller.getRows(), /*#__PURE__*/_jsx(rootProps.slots.detailPanels, {
+          children: [rows, /*#__PURE__*/_jsx(rootProps.slots.detailPanels, {
             virtualScroller: virtualScroller
           })]
         }))
-      })), /*#__PURE__*/_jsx(SpaceFiller, {}), /*#__PURE__*/_jsx(BottomContainer, {
+      })), rows.length > 0 && /*#__PURE__*/_jsx(SpaceFiller, {}), /*#__PURE__*/_jsx(BottomContainer, {
         children: /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
           position: "bottom",
           virtualScroller: virtualScroller

package/modern/hooks/core/pipeProcessing/useGridPipeProcessing.js

@@ -32,7 +32,7 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
  *   * `apiRef.current.requestPipeProcessorsApplication` is called for the given group.
  */
 export const useGridPipeProcessing = apiRef => {
-  const processorsCache = React.useRef({});
+  const cache = React.useRef({});
   const isRunning = React.useRef(false);
   const runAppliers = React.useCallback(groupCache => {
     if (isRunning.current || !groupCache) {
@@ -45,52 +45,54 @@ export const useGridPipeProcessing = apiRef => {
     isRunning.current = false;
   }, []);
   const registerPipeProcessor = React.useCallback((group, id, processor) => {
-    if (!processorsCache.current[group]) {
-      processorsCache.current[group] = {
+    if (!cache.current[group]) {
+      cache.current[group] = {
         processors: new Map(),
+        processorsAsArray: [],
         appliers: {}
       };
     }
-    const groupCache = processorsCache.current[group];
+    const groupCache = cache.current[group];
     const oldProcessor = groupCache.processors.get(id);
     if (oldProcessor !== processor) {
       groupCache.processors.set(id, processor);
+      groupCache.processorsAsArray = Array.from(cache.current[group].processors.values());
       runAppliers(groupCache);
     }
     return () => {
-      processorsCache.current[group].processors.set(id, null);
+      cache.current[group].processors.delete(id);
+      cache.current[group].processorsAsArray = Array.from(cache.current[group].processors.values());
     };
   }, [runAppliers]);
   const registerPipeApplier = React.useCallback((group, id, applier) => {
-    if (!processorsCache.current[group]) {
-      processorsCache.current[group] = {
+    if (!cache.current[group]) {
+      cache.current[group] = {
         processors: new Map(),
+        processorsAsArray: [],
         appliers: {}
       };
     }
-    processorsCache.current[group].appliers[id] = applier;
+    cache.current[group].appliers[id] = applier;
     return () => {
-      const _appliers = processorsCache.current[group].appliers,
+      const _appliers = cache.current[group].appliers,
         otherAppliers = _objectWithoutPropertiesLoose(_appliers, [id].map(_toPropertyKey));
-      processorsCache.current[group].appliers = otherAppliers;
+      cache.current[group].appliers = otherAppliers;
     };
   }, []);
   const requestPipeProcessorsApplication = React.useCallback(group => {
-    const groupCache = processorsCache.current[group];
-    runAppliers(groupCache);
+    runAppliers(cache.current[group]);
   }, [runAppliers]);
   const applyPipeProcessors = React.useCallback((...args) => {
     const [group, value, context] = args;
-    if (!processorsCache.current[group]) {
+    if (!cache.current[group]) {
       return value;
     }
-    const preProcessors = Array.from(processorsCache.current[group].processors.values());
-    return preProcessors.reduce((acc, preProcessor) => {
-      if (!preProcessor) {
-        return acc;
-      }
-      return preProcessor(acc, context);
-    }, value);
+    const processors = cache.current[group].processorsAsArray;
+    let result = value;
+    for (let i = 0; i < processors.length; i += 1) {
+      result = processors[i](result, context);
+    }
+    return result;
   }, []);
   const preProcessingPrivateApi = {
     registerPipeProcessor,

package/modern/hooks/features/dimensions/useGridDimensions.js

@@ -227,6 +227,7 @@ export function useGridDimensions(apiRef, props) {
     set('--DataGrid-headersTotalHeight', `${dimensions.headersTotalHeight}px`);
     set('--DataGrid-topContainerHeight', `${dimensions.topContainerHeight}px`);
     set('--DataGrid-bottomContainerHeight', `${dimensions.bottomContainerHeight}px`);
+    set('--height', `${dimensions.rowHeight}px`);
   }, [root, dimensions]);
   const isFirstSizing = React.useRef(true);
   const handleResize = React.useCallback(size => {

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

@@ -31,12 +31,13 @@ export function useGridParamsApi(apiRef) {
   }, [apiRef]);
   const getCellParams = React.useCallback((id, field) => {
     const colDef = apiRef.current.getColumn(field);
-    const value = apiRef.current.getCellValue(id, field);
     const row = apiRef.current.getRow(id);
     const rowNode = apiRef.current.getRowNode(id);
     if (!row || !rowNode) {
       throw new MissingRowIdError(`No row with id #${id} found`);
     }
+    const rawValue = row[field];
+    const value = colDef?.valueGetter ? colDef.valueGetter(rawValue, row, colDef, apiRef) : rawValue;
     const cellFocus = gridFocusCellSelector(apiRef);
     const cellTabIndex = gridTabIndexCellSelector(apiRef);
     const params = {
@@ -60,19 +61,14 @@ export function useGridParamsApi(apiRef) {
   }, [apiRef]);
   const getCellValue = React.useCallback((id, field) => {
     const colDef = apiRef.current.getColumn(field);
-    if (!colDef || !colDef.valueGetter) {
-      const rowModel = apiRef.current.getRow(id);
-      if (!rowModel) {
-        throw new MissingRowIdError(`No row with id #${id} found`);
-      }
-      return rowModel[field];
-    }
     const row = apiRef.current.getRow(id);
     if (!row) {
       throw new MissingRowIdError(`No row with id #${id} found`);
     }
-    const value = row[colDef.field];
-    return colDef.valueGetter(value, row, colDef, apiRef);
+    if (!colDef || !colDef.valueGetter) {
+      return row[field];
+    }
+    return colDef.valueGetter(row[colDef.field], row, colDef, apiRef);
   }, [apiRef]);
   const getRowValue = React.useCallback((row, colDef) => {
     const field = colDef.field;

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

@@ -40,7 +40,7 @@ export const useGridSorting = (apiRef, props) => {
     const existingIdx = sortModel.findIndex(c => c.field === field);
     let newSortModel = [...sortModel];
     if (existingIdx > -1) {
-      if (!sortItem) {
+      if (sortItem?.sort == null) {
         newSortModel.splice(existingIdx, 1);
       } else {
         newSortModel.splice(existingIdx, 1, sortItem);
@@ -116,7 +116,7 @@ export const useGridSorting = (apiRef, props) => {
     const sortItem = createSortItem(column, direction);
     let sortModel;
     if (!allowMultipleSorting || props.disableMultipleColumnsSorting) {
-      sortModel = !sortItem ? [] : [sortItem];
+      sortModel = sortItem?.sort == null ? [] : [sortItem];
     } else {
       sortModel = upsertSortModel(column.field, sortItem);
     }

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

@@ -272,6 +272,11 @@ export const useGridVirtualScroller = () => {
       if (panel) {
         rows.push(panel);
       }
+      if (isLastVisible) {
+        rows.push(apiRef.current.getInfiniteLoadingTriggerElement?.({
+          lastRowId: id
+        }));
+      }
     });
     return rows;
   };

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.0.0-beta.5
+ * @mui/x-data-grid v7.0.0-beta.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/index.js

@@ -54,7 +54,7 @@ export { useGridVisibleRows, getVisibleRows } from '../hooks/utils/useGridVisibl
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
 export * from '../utils/createControllablePromise';
-export { createSelector, createSelectorMemoized, unstable_resetCreateSelectorCache } from '../utils/createSelector';
+export { createSelector, createSelectorMemoized } from '../utils/createSelector';
 export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal } from '../utils/domUtils';
 export { isNavigationKey, isPasteShortcut } from '../utils/keyboardUtils';
 export * from '../utils/utils';

package/modern/models/api/gridInfiniteLoaderApi.js

@@ -0,0 +1 @@
+export {};

package/modern/utils/createSelector.js

@@ -1,8 +1,6 @@
 import { createSelector as reselectCreateSelector } from 'reselect';
 import { buildWarning } from './warning';
-const cacheContainer = {
-  cache: new WeakMap()
-};
+const cache = new WeakMap();
 const missingInstanceIdWarning = buildWarning(['MUI X: A selector was called without passing the instance ID, which may impact the performance of the grid.', 'To fix, call it with `apiRef`, e.g. `mySelector(apiRef)`, or pass the instance ID explicitly, e.g. `mySelector(state, apiRef.current.instanceId)`.']);
 function checkIsAPIRef(value) {
   return 'current' in value && 'instanceId' in value.current;
@@ -75,8 +73,7 @@ export const createSelector = (a, b, c, d, e, f, ...rest) => {
   return selector;
 };
 export const createSelectorMemoized = (...args) => {
-  const selector = (...selectorArgs) => {
-    const [stateOrApiRef, instanceId] = selectorArgs;
+  const selector = (stateOrApiRef, instanceId) => {
     const isAPIRef = checkIsAPIRef(stateOrApiRef);
     const cacheKey = isAPIRef ? stateOrApiRef.current.instanceId : instanceId ?? DEFAULT_INSTANCE_ID;
     const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
@@ -85,29 +82,24 @@ export const createSelectorMemoized = (...args) => {
         missingInstanceIdWarning();
       }
     }
-    const {
-      cache
-    } = cacheContainer;
-    if (cache.get(cacheKey) && cache.get(cacheKey)?.get(args)) {
+    const cacheArgsInit = cache.get(cacheKey);
+    const cacheArgs = cacheArgsInit ?? new Map();
+    const cacheFn = cacheArgs?.get(args);
+    if (cacheArgs && cacheFn) {
       // We pass the cache key because the called selector might have as
       // dependency another selector created with this `createSelector`.
-      return cache.get(cacheKey)?.get(args)(state, cacheKey);
+      return cacheFn(state, cacheKey);
     }
-    const newSelector = reselectCreateSelector(...args);
-    if (!cache.get(cacheKey)) {
-      cache.set(cacheKey, new Map());
+    const fn = reselectCreateSelector(...args);
+    if (!cacheArgsInit) {
+      cache.set(cacheKey, cacheArgs);
     }
-    cache.get(cacheKey)?.set(args, newSelector);
-    return newSelector(state, cacheKey);
+    cacheArgs.set(args, fn);
+    return fn(state, cacheKey);
   };
 
   // We use this property to detect if the selector was created with createSelector
   // or it's only a simple function the receives the state and returns part of it.
   selector.acceptsApiRef = true;
   return selector;
-};
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const unstable_resetCreateSelectorCache = () => {
-  cacheContainer.cache = new WeakMap();
 };

package/node/components/GridRow.js

@@ -223,7 +223,8 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     const rowStyle = (0, _extends2.default)({}, styleProp, {
       maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
       // max-height doesn't support "auto"
-      minHeight
+      minHeight,
+      '--height': typeof rowHeight === 'number' ? `${rowHeight}px` : rowHeight
     });
     if (sizes?.spacingTop) {
       const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
@@ -295,20 +296,17 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       column: column,
       width: width,
       rowId: rowId,
-      height: rowHeight,
       align: column.align || 'left',
       colIndex: indexRelativeToAllColumns,
       colSpan: colSpan,
       disableDragEvents: disableDragEvents,
       editCellState: editCellState,
-      isNotVisible: cellIsNotVisible
-    }, slotProps?.cell, {
+      isNotVisible: cellIsNotVisible,
       pinnedOffset: pinnedOffset,
       pinnedPosition: pinnedPosition,
       sectionIndex: indexInSection,
-      sectionLength: sectionLength,
-      gridHasScrollX: dimensions.hasScrollX
-    }), column.field);
+      sectionLength: sectionLength
+    }, slotProps?.cell), column.field);
   };
 
   /* Start of rendering */