@mui/x-data-grid 5.17.6 → 5.17.8

package/CHANGELOG.md

@@ -3,6 +3,51 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.17.8
+
+_Oct 20, 2022_
+
+We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 🌍 Improve Turkish (tr-TR) locale on the data grid and pickers (#6573) @ramazansancar
+
+### `@mui/x-data-grid@v5.17.8` / `@mui/x-data-grid-pro@v5.17.8` / `@mui/x-data-grid-premium@v5.17.8`
+
+#### Changes
+
+- [DataGrid] Add `searchPredicate` prop to `GridColumnsPanel` component (#6572) @cherniavskii
+- [DataGrid] Fix grid not updating state on `rowCount` prop change (#6474) @cherniavskii
+- [DataGridPro] Fix row order being reset after updating the row (#6544) @cherniavskii
+- [l10n] Improve Turkish (tr-TR) locale on the data grid and pickers (#6542) (#6573) @ramazansancar
+
+### `@mui/x-date-pickers@v5.0.5` / `@mui/x-date-pickers-pro@v5.0.5`
+
+#### Changes
+
+- [CalendarPicker] Don't move to closest enabled date when `props.date` contains a disabled date (#6537) @flaviendelangle
+- [DateRangePicker] Fix calendar day outside of month layout shifting on hover (pick #6448) (#6538) @alexfauquette
+- [pickers] Fix typescript issues (#6510) @flaviendelangle
+
+### Docs
+
+- [docs] Fix 301 link to the sx prop page @oliviertassinari
+
+## 5.17.7
+
+_Oct 13, 2022_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.7` / `@mui/x-data-grid-pro@v5.17.7` / `@mui/x-data-grid-premium@v5.17.7`
+
+#### Changes
+
+- [DataGrid] Fix error when using column grouping with all columns hidden (#6425) @alexfauquette
+- [DataGrid] Fix start edit mode with printable character in React 18 (#6478) @m4theushw
+
 ## 5.17.6
 
 _Oct 6, 2022_

package/components/panel/GridColumnsPanel.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import { GridPanelWrapperProps } from './GridPanelWrapper';
+import { GridStateColDef } from '../../models/colDef/gridColDef';
 export interface GridColumnsPanelProps extends GridPanelWrapperProps {
     sort?: 'asc' | 'desc';
+    searchPredicate?: (column: GridStateColDef, searchValue: string) => boolean;
 }
 declare function GridColumnsPanel(props: GridColumnsPanelProps): JSX.Element;
 declare namespace GridColumnsPanel {

package/components/panel/GridColumnsPanel.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["sort"];
+const _excluded = ["sort", "searchPredicate"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -59,6 +59,10 @@ const GridIconButtonRoot = styled(IconButton)({
 });
 const collator = new Intl.Collator();
 
+const defaultSearchPredicate = (column, searchValue) => {
+  return (column.headerName || column.field).toLowerCase().indexOf(searchValue) > -1;
+};
+
 function GridColumnsPanel(props) {
   var _rootProps$components, _rootProps$components3, _rootProps$components4;
 
@@ -74,7 +78,8 @@ function GridColumnsPanel(props) {
   const classes = useUtilityClasses(ownerState);
 
   const {
-    sort
+    sort,
+    searchPredicate = defaultSearchPredicate
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -128,8 +133,8 @@ function GridColumnsPanel(props) {
     }
 
     const searchValueToCheck = searchValue.toLowerCase();
-    return sortedColumns.filter(column => (column.headerName || column.field).toLowerCase().indexOf(searchValueToCheck) > -1);
-  }, [sortedColumns, searchValue]);
+    return sortedColumns.filter(column => searchPredicate(column, searchValueToCheck));
+  }, [sortedColumns, searchValue, searchPredicate]);
   React.useEffect(() => {
     searchInputRef.current.focus();
   }, []);
@@ -191,6 +196,7 @@ process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  searchPredicate: PropTypes.func,
   sort: PropTypes.oneOf(['asc', 'desc'])
 } : void 0;
 export { GridColumnsPanel };

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -238,7 +238,7 @@ export const useGridColumnHeaders = props => {
 
     const columnsToRender = getColumnsToRender(params);
 
-    if (columnsToRender == null) {
+    if (columnsToRender == null || columnsToRender.renderedColumns.length === 0) {
       return null;
     }
 

package/hooks/features/editRows/useGridCellEditing.new.js

@@ -121,7 +121,8 @@ export const useGridCellEditing = (apiRef, props) => {
 
       if (reason) {
         const newParams = _extends({}, params, {
-          reason
+          reason,
+          key: event.key
         });
 
         apiRef.current.publishEvent('cellEditStart', newParams, event);
@@ -132,14 +133,21 @@ export const useGridCellEditing = (apiRef, props) => {
     const {
       id,
       field,
-      reason
+      reason,
+      key
     } = params;
     const startCellEditModeParams = {
       id,
       field
     };
 
-    if (reason === GridCellEditStartReasons.deleteKeyDown || reason === GridCellEditStartReasons.printableKeyDown) {
+    if (reason === GridCellEditStartReasons.printableKeyDown) {
+      if (React.version.startsWith('18')) {
+        startCellEditModeParams.initialValue = key; // In React 17, cleaning the input is enough
+      } else {
+        startCellEditModeParams.deleteValue = true;
+      }
+    } else if (reason === GridCellEditStartReasons.deleteKeyDown) {
       startCellEditModeParams.deleteValue = true;
     }
 
@@ -270,10 +278,17 @@ export const useGridCellEditing = (apiRef, props) => {
     const {
       id,
       field,
-      deleteValue
+      deleteValue,
+      initialValue
     } = params;
+    let newValue = apiRef.current.getCellValue(id, field);
+
+    if (deleteValue || initialValue) {
+      newValue = deleteValue ? '' : initialValue;
+    }
+
     const newProps = {
-      value: deleteValue ? '' : apiRef.current.getCellValue(id, field),
+      value: newValue,
       error: false,
       isProcessingProps: false
     };

package/hooks/features/editRows/useGridRowEditing.new.js

@@ -181,6 +181,7 @@ export const useGridRowEditing = (apiRef, props) => {
 
         const newParams = _extends({}, rowParams, {
           field: params.field,
+          key: event.key,
           reason
         });
 
@@ -192,14 +193,21 @@ export const useGridRowEditing = (apiRef, props) => {
     const {
       id,
       field,
-      reason
+      reason,
+      key
     } = params;
     const startRowEditModeParams = {
       id,
       fieldToFocus: field
     };
 
-    if (reason === GridRowEditStartReasons.deleteKeyDown || reason === GridRowEditStartReasons.printableKeyDown) {
+    if (reason === GridRowEditStartReasons.printableKeyDown) {
+      if (React.version.startsWith('18')) {
+        startRowEditModeParams.initialValue = key; // In React 17, cleaning the input is enough
+      } else {
+        startRowEditModeParams.deleteValue = !!field;
+      }
+    } else if (reason === GridRowEditStartReasons.deleteKeyDown) {
       startRowEditModeParams.deleteValue = !!field;
     }
 
@@ -339,7 +347,8 @@ export const useGridRowEditing = (apiRef, props) => {
     const {
       id,
       fieldToFocus,
-      deleteValue
+      deleteValue,
+      initialValue
     } = params;
     const columnFields = gridColumnFieldsSelector(apiRef);
     const newProps = columnFields.reduce((acc, field) => {
@@ -349,9 +358,14 @@ export const useGridRowEditing = (apiRef, props) => {
         return acc;
       }
 
-      const shouldDeleteValue = deleteValue && fieldToFocus === field;
+      let newValue = apiRef.current.getCellValue(id, field);
+
+      if (fieldToFocus === field && (deleteValue || initialValue)) {
+        newValue = deleteValue ? '' : initialValue;
+      }
+
       acc[field] = {
-        value: shouldDeleteValue ? '' : apiRef.current.getCellValue(id, field),
+        value: newValue,
         error: false,
         isProcessingProps: false
       };

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

@@ -31,6 +31,7 @@ export interface GridRowsInternalCache extends Omit<GridRowTreeCreationParams, '
      * The value of the `loading` prop since the last time that the rows state was updated.
      */
     loadingPropBeforePartialUpdates: DataGridProcessedProps['loading'];
+    rowCountPropBeforePartialUpdates: DataGridProcessedProps['rowCount'];
 }
 export interface GridRowsState extends GridRowTreeCreationValue {
     /**

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

@@ -11,7 +11,7 @@ import { GridRowsInternalCache, GridRowsState } from './gridRowsState';
  */
 export declare function checkGridRowIdIsValid(id: GridRowId, row: GridRowModel | Partial<GridRowModel>, detailErrorMessage?: string): void;
 export declare const getRowIdFromRowModel: (rowModel: GridRowModel, getRowId?: GridRowIdGetter, detailErrorMessage?: string) => GridRowId;
-export declare const createRowsInternalCache: ({ rows, getRowId, loading, }: Pick<DataGridProcessedProps, 'rows' | 'getRowId' | 'loading'>) => GridRowsInternalCache;
+export declare const createRowsInternalCache: ({ rows, getRowId, loading, rowCount, }: Pick<DataGridProcessedProps, 'rows' | 'getRowId' | 'loading' | 'rowCount'>) => GridRowsInternalCache;
 export declare const getRowsStateFromCache: ({ apiRef, previousTree, rowCountProp, loadingProp, }: {
     apiRef: React.MutableRefObject<GridApiCommunity>;
     previousTree: GridRowTreeConfig | null;

package/hooks/features/rows/gridRowsUtils.js

@@ -22,11 +22,13 @@ export const getRowIdFromRowModel = (rowModel, getRowId, detailErrorMessage) =>
 export const createRowsInternalCache = ({
   rows,
   getRowId,
-  loading
+  loading,
+  rowCount
 }) => {
   const cache = {
     rowsBeforePartialUpdates: rows,
     loadingPropBeforePartialUpdates: loading,
+    rowCountPropBeforePartialUpdates: rowCount,
     idRowsLookup: {},
     idToIdLookup: {},
     ids: []

package/hooks/features/rows/useGridRows.js

@@ -13,7 +13,8 @@ export const rowsStateInitializer = (state, props, apiRef) => {
   apiRef.current.unstable_caches.rows = createRowsInternalCache({
     rows: props.rows,
     getRowId: props.getRowId,
-    loading: props.loading
+    loading: props.loading,
+    rowCount: props.rowCount
   });
   return _extends({}, state, {
     rows: getRowsStateFromCache({
@@ -94,9 +95,10 @@ export const useGridRows = (apiRef, props) => {
     throttledRowsChange(createRowsInternalCache({
       rows,
       getRowId: props.getRowId,
-      loading: props.loading
+      loading: props.loading,
+      rowCount: props.rowCount
     }), true);
-  }, [logger, props.getRowId, props.loading, throttledRowsChange]);
+  }, [logger, props.getRowId, props.loading, props.rowCount, throttledRowsChange]);
   const updateRows = React.useCallback(updates => {
     if (props.signature === GridSignature.DataGrid && updates.length > 1) {
       // TODO: Add test with direct call to `apiRef.current.updateRows` in DataGrid after enabling the `apiRef` on the free plan.
@@ -119,6 +121,7 @@ export const useGridRows = (apiRef, props) => {
     const newCache = {
       rowsBeforePartialUpdates: prevCache.rowsBeforePartialUpdates,
       loadingPropBeforePartialUpdates: prevCache.loadingPropBeforePartialUpdates,
+      rowCountPropBeforePartialUpdates: prevCache.rowCountPropBeforePartialUpdates,
       idRowsLookup: _extends({}, prevCache.idRowsLookup),
       idToIdLookup: _extends({}, prevCache.idToIdLookup),
       ids: [...prevCache.ids]
@@ -241,6 +244,7 @@ export const useGridRows = (apiRef, props) => {
         ids: updatedRows
       })
     }));
+    apiRef.current.unstable_caches.rows.ids = updatedRows;
     apiRef.current.publishEvent('rowsSet');
   }, [apiRef, logger]);
   const replaceRows = React.useCallback((firstRowToRender, newRows) => {
@@ -332,12 +336,13 @@ export const useGridRows = (apiRef, props) => {
       cache = createRowsInternalCache({
         rows: props.rows,
         getRowId: props.getRowId,
-        loading: props.loading
+        loading: props.loading,
+        rowCount: props.rowCount
       });
     }
 
     throttledRowsChange(cache, false);
-  }, [logger, apiRef, props.rows, props.getRowId, props.loading, throttledRowsChange]);
+  }, [logger, apiRef, props.rows, props.getRowId, props.loading, props.rowCount, throttledRowsChange]);
   const handleStrategyProcessorChange = React.useCallback(methodName => {
     if (methodName === 'rowTreeCreation') {
       groupRows();
@@ -386,7 +391,8 @@ export const useGridRows = (apiRef, props) => {
     }
 
     const areNewRowsAlreadyInState = apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows;
-    const isNewLoadingAlreadyInState = apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates === props.loading; // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
+    const isNewLoadingAlreadyInState = apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates === props.loading;
+    const isNewRowCountAlreadyInState = apiRef.current.unstable_caches.rows.rowCountPropBeforePartialUpdates === props.rowCount; // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
 
     if (areNewRowsAlreadyInState) {
       // If the loading prop has changed, we need to update its value in the state because it won't be done by `throttledRowsChange`
@@ -400,6 +406,17 @@ export const useGridRows = (apiRef, props) => {
         apiRef.current.forceUpdate();
       }
 
+      if (!isNewRowCountAlreadyInState) {
+        apiRef.current.setState(state => _extends({}, state, {
+          rows: _extends({}, state.rows, {
+            totalRowCount: Math.max(props.rowCount || 0, state.rows.totalRowCount),
+            totalTopLevelRowCount: Math.max(props.rowCount || 0, state.rows.totalTopLevelRowCount)
+          })
+        }));
+        apiRef.current.unstable_caches.rows.rowCountPropBeforePartialUpdates = props.rowCount;
+        apiRef.current.forceUpdate();
+      }
+
       return;
     }
 
@@ -407,7 +424,8 @@ export const useGridRows = (apiRef, props) => {
     throttledRowsChange(createRowsInternalCache({
       rows: props.rows,
       getRowId: props.getRowId,
-      loading: props.loading
+      loading: props.loading,
+      rowCount: props.rowCount
     }), false);
   }, [props.rows, props.rowCount, props.getRowId, props.loading, logger, throttledRowsChange, apiRef]);
 };

package/index.js

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

package/legacy/components/panel/GridColumnsPanel.js

@@ -3,7 +3,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["sort"];
+var _excluded = ["sort", "searchPredicate"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -66,6 +66,10 @@ var GridIconButtonRoot = styled(IconButton)({
 });
 var collator = new Intl.Collator();
 
+var defaultSearchPredicate = function defaultSearchPredicate(column, searchValue) {
+  return (column.headerName || column.field).toLowerCase().indexOf(searchValue) > -1;
+};
+
 function GridColumnsPanel(props) {
   var _rootProps$components, _rootProps$components3, _rootProps$components4;
 
@@ -86,6 +90,8 @@ function GridColumnsPanel(props) {
   var classes = useUtilityClasses(ownerState);
 
   var sort = props.sort,
+      _props$searchPredicat = props.searchPredicate,
+      searchPredicate = _props$searchPredicat === void 0 ? defaultSearchPredicate : _props$searchPredicat,
       other = _objectWithoutProperties(props, _excluded);
 
   var sortedColumns = React.useMemo(function () {
@@ -146,9 +152,9 @@ function GridColumnsPanel(props) {
 
     var searchValueToCheck = searchValue.toLowerCase();
     return sortedColumns.filter(function (column) {
-      return (column.headerName || column.field).toLowerCase().indexOf(searchValueToCheck) > -1;
+      return searchPredicate(column, searchValueToCheck);
     });
-  }, [sortedColumns, searchValue]);
+  }, [sortedColumns, searchValue, searchPredicate]);
   React.useEffect(function () {
     searchInputRef.current.focus();
   }, []);
@@ -214,6 +220,7 @@ process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  searchPredicate: PropTypes.func,
   sort: PropTypes.oneOf(['asc', 'desc'])
 } : void 0;
 export { GridColumnsPanel };

package/legacy/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -283,7 +283,7 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
 
     var columnsToRender = getColumnsToRender(params);
 
-    if (columnsToRender == null) {
+    if (columnsToRender == null || columnsToRender.renderedColumns.length === 0) {
       return null;
     }
 

package/legacy/hooks/features/editRows/useGridCellEditing.new.js

@@ -129,7 +129,8 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
 
       if (_reason) {
         var _newParams = _extends({}, params, {
-          reason: _reason
+          reason: _reason,
+          key: event.key
         });
 
         apiRef.current.publishEvent('cellEditStart', _newParams, event);
@@ -139,13 +140,20 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
   var handleCellEditStart = React.useCallback(function (params) {
     var id = params.id,
         field = params.field,
-        reason = params.reason;
+        reason = params.reason,
+        key = params.key;
     var startCellEditModeParams = {
       id: id,
       field: field
     };
 
-    if (reason === GridCellEditStartReasons.deleteKeyDown || reason === GridCellEditStartReasons.printableKeyDown) {
+    if (reason === GridCellEditStartReasons.printableKeyDown) {
+      if (React.version.startsWith('18')) {
+        startCellEditModeParams.initialValue = key; // In React 17, cleaning the input is enough
+      } else {
+        startCellEditModeParams.deleteValue = true;
+      }
+    } else if (reason === GridCellEditStartReasons.deleteKeyDown) {
       startCellEditModeParams.deleteValue = true;
     }
 
@@ -268,9 +276,16 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
   var updateStateToStartCellEditMode = useEventCallback(function (params) {
     var id = params.id,
         field = params.field,
-        deleteValue = params.deleteValue;
+        deleteValue = params.deleteValue,
+        initialValue = params.initialValue;
+    var newValue = apiRef.current.getCellValue(id, field);
+
+    if (deleteValue || initialValue) {
+      newValue = deleteValue ? '' : initialValue;
+    }
+
     var newProps = {
-      value: deleteValue ? '' : apiRef.current.getCellValue(id, field),
+      value: newValue,
       error: false,
       isProcessingProps: false
     };

package/legacy/hooks/features/editRows/useGridRowEditing.new.js

@@ -189,6 +189,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
 
         var _newParams = _extends({}, _rowParams, {
           field: params.field,
+          key: event.key,
           reason: _reason
         });
 
@@ -199,13 +200,20 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
   var handleRowEditStart = React.useCallback(function (params) {
     var id = params.id,
         field = params.field,
-        reason = params.reason;
+        reason = params.reason,
+        key = params.key;
     var startRowEditModeParams = {
       id: id,
       fieldToFocus: field
     };
 
-    if (reason === GridRowEditStartReasons.deleteKeyDown || reason === GridRowEditStartReasons.printableKeyDown) {
+    if (reason === GridRowEditStartReasons.printableKeyDown) {
+      if (React.version.startsWith('18')) {
+        startRowEditModeParams.initialValue = key; // In React 17, cleaning the input is enough
+      } else {
+        startRowEditModeParams.deleteValue = !!field;
+      }
+    } else if (reason === GridRowEditStartReasons.deleteKeyDown) {
       startRowEditModeParams.deleteValue = !!field;
     }
 
@@ -338,7 +346,8 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
   var updateStateToStartRowEditMode = useEventCallback(function (params) {
     var id = params.id,
         fieldToFocus = params.fieldToFocus,
-        deleteValue = params.deleteValue;
+        deleteValue = params.deleteValue,
+        initialValue = params.initialValue;
     var columnFields = gridColumnFieldsSelector(apiRef);
     var newProps = columnFields.reduce(function (acc, field) {
       var cellParams = apiRef.current.getCellParams(id, field);
@@ -347,9 +356,14 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
         return acc;
       }
 
-      var shouldDeleteValue = deleteValue && fieldToFocus === field;
+      var newValue = apiRef.current.getCellValue(id, field);
+
+      if (fieldToFocus === field && (deleteValue || initialValue)) {
+        newValue = deleteValue ? '' : initialValue;
+      }
+
       acc[field] = {
-        value: shouldDeleteValue ? '' : apiRef.current.getCellValue(id, field),
+        value: newValue,
         error: false,
         isProcessingProps: false
       };

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

@@ -25,10 +25,12 @@ export var getRowIdFromRowModel = function getRowIdFromRowModel(rowModel, getRow
 export var createRowsInternalCache = function createRowsInternalCache(_ref) {
   var rows = _ref.rows,
       getRowId = _ref.getRowId,
-      loading = _ref.loading;
+      loading = _ref.loading,
+      rowCount = _ref.rowCount;
   var cache = {
     rowsBeforePartialUpdates: rows,
     loadingPropBeforePartialUpdates: loading,
+    rowCountPropBeforePartialUpdates: rowCount,
     idRowsLookup: {},
     idToIdLookup: {},
     ids: []

package/legacy/hooks/features/rows/useGridRows.js

@@ -16,7 +16,8 @@ export var rowsStateInitializer = function rowsStateInitializer(state, props, ap
   apiRef.current.unstable_caches.rows = createRowsInternalCache({
     rows: props.rows,
     getRowId: props.getRowId,
-    loading: props.loading
+    loading: props.loading,
+    rowCount: props.rowCount
   });
   return _extends({}, state, {
     rows: getRowsStateFromCache({
@@ -100,9 +101,10 @@ export var useGridRows = function useGridRows(apiRef, props) {
     throttledRowsChange(createRowsInternalCache({
       rows: rows,
       getRowId: props.getRowId,
-      loading: props.loading
+      loading: props.loading,
+      rowCount: props.rowCount
     }), true);
-  }, [logger, props.getRowId, props.loading, throttledRowsChange]);
+  }, [logger, props.getRowId, props.loading, props.rowCount, throttledRowsChange]);
   var updateRows = React.useCallback(function (updates) {
     if (props.signature === GridSignature.DataGrid && updates.length > 1) {
       // TODO: Add test with direct call to `apiRef.current.updateRows` in DataGrid after enabling the `apiRef` on the free plan.
@@ -125,6 +127,7 @@ export var useGridRows = function useGridRows(apiRef, props) {
     var newCache = {
       rowsBeforePartialUpdates: prevCache.rowsBeforePartialUpdates,
       loadingPropBeforePartialUpdates: prevCache.loadingPropBeforePartialUpdates,
+      rowCountPropBeforePartialUpdates: prevCache.rowCountPropBeforePartialUpdates,
       idRowsLookup: _extends({}, prevCache.idRowsLookup),
       idToIdLookup: _extends({}, prevCache.idToIdLookup),
       ids: _toConsumableArray(prevCache.ids)
@@ -265,6 +268,7 @@ export var useGridRows = function useGridRows(apiRef, props) {
         })
       });
     });
+    apiRef.current.unstable_caches.rows.ids = updatedRows;
     apiRef.current.publishEvent('rowsSet');
   }, [apiRef, logger]);
   var replaceRows = React.useCallback(function (firstRowToRender, newRows) {
@@ -363,12 +367,13 @@ export var useGridRows = function useGridRows(apiRef, props) {
       cache = createRowsInternalCache({
         rows: props.rows,
         getRowId: props.getRowId,
-        loading: props.loading
+        loading: props.loading,
+        rowCount: props.rowCount
       });
     }
 
     throttledRowsChange(cache, false);
-  }, [logger, apiRef, props.rows, props.getRowId, props.loading, throttledRowsChange]);
+  }, [logger, apiRef, props.rows, props.getRowId, props.loading, props.rowCount, throttledRowsChange]);
   var handleStrategyProcessorChange = React.useCallback(function (methodName) {
     if (methodName === 'rowTreeCreation') {
       groupRows();
@@ -419,7 +424,8 @@ export var useGridRows = function useGridRows(apiRef, props) {
     }
 
     var areNewRowsAlreadyInState = apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows;
-    var isNewLoadingAlreadyInState = apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates === props.loading; // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
+    var isNewLoadingAlreadyInState = apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates === props.loading;
+    var isNewRowCountAlreadyInState = apiRef.current.unstable_caches.rows.rowCountPropBeforePartialUpdates === props.rowCount; // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
 
     if (areNewRowsAlreadyInState) {
       // If the loading prop has changed, we need to update its value in the state because it won't be done by `throttledRowsChange`
@@ -435,6 +441,19 @@ export var useGridRows = function useGridRows(apiRef, props) {
         apiRef.current.forceUpdate();
       }
 
+      if (!isNewRowCountAlreadyInState) {
+        apiRef.current.setState(function (state) {
+          return _extends({}, state, {
+            rows: _extends({}, state.rows, {
+              totalRowCount: Math.max(props.rowCount || 0, state.rows.totalRowCount),
+              totalTopLevelRowCount: Math.max(props.rowCount || 0, state.rows.totalTopLevelRowCount)
+            })
+          });
+        });
+        apiRef.current.unstable_caches.rows.rowCountPropBeforePartialUpdates = props.rowCount;
+        apiRef.current.forceUpdate();
+      }
+
       return;
     }
 
@@ -442,7 +461,8 @@ export var useGridRows = function useGridRows(apiRef, props) {
     throttledRowsChange(createRowsInternalCache({
       rows: props.rows,
       getRowId: props.getRowId,
-      loading: props.loading
+      loading: props.loading,
+      rowCount: props.rowCount
     }), false);
   }, [props.rows, props.rowCount, props.getRowId, props.loading, logger, throttledRowsChange, apiRef]);
 };

package/legacy/index.js

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