@mui/x-data-grid 8.27.1 → 8.27.3

package/CHANGELOG.md

@@ -5,6 +5,111 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.27.3
+
+_Feb 25, 2026_
+
+We'd like to extend a big thank you to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- ⚡️ Improved dynamic data support and cache invalidation in lazy loading for Data Grid Pro
+
+The following team members contributed to this release:
+@cherniavskii, @michelengelen, @MBilalShafi, @arminmeh
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.27.3`
+
+- [DataGrid] Preserve key input during row edit when using `rowModesModel` (#21457) @michelengelen
+
+#### `@mui/x-data-grid-pro@8.27.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.27.3`, plus:
+
+- [DataGridPro] Improve dynamic data support and cache invalidation in lazy loading (#21465) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.27.3` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.27.3`.
+
+### Core
+
+- [code-infra] Do not append `x` to the last version for the compare API (#21422) @arminmeh
+- [docs-infra] Fix current version detection logic (#21415) @cherniavskii
+
+## 8.27.2
+
+_Feb 20, 2026_
+
+We'd like to extend a big thank you to the 3 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.27.2`
+
+Internal changes.
+
+#### `@mui/x-data-grid-pro@8.27.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.27.2`, plus:
+
+- [DataGridPro] Fix number input visibility in header filters (#21345) @michelengelen
+
+#### `@mui/x-data-grid-premium@8.27.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.27.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.27.2`
+
+- [DatePicker] Add keyboard support for selecting day, month, and year (#21399) @michelengelen
+
+#### `@mui/x-date-pickers-pro@8.27.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.27.2`, plus:
+
+- [DateRangePicker] Fix timezone update issue leading to `invalidRange` error (#21382) @michelengelen
+
+### Charts
+
+#### `@mui/x-charts@8.27.2`
+
+Internal changes.
+
+#### `@mui/x-charts-pro@8.27.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.27.2`, plus:
+
+- [charts-pro] Handle edge case in export image (#21206) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.27.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.27.2`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.27.2`
+
+- [tree view] Focus item sibling on unmount instead of the 1st item (#21386) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.27.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.27.2`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.27.2`
+
+Internal changes.
+
+### Core
+
+- [code-infra] Only ignore `renovate[bot]` in changelog generation script (#21188) @bernardobelchior
+
 ## v8.27.1
 
 <!-- generated comparing v8.27.0..v8.x -->

package/DataGrid/DataGrid.js

@@ -180,6 +180,13 @@ DataGridRaw.propTypes = {
     get: _propTypes.default.func.isRequired,
     set: _propTypes.default.func.isRequired
   }),
+  /**
+   * If positive, the Data Grid will periodically revalidate data source rows by
+   * re-fetching them from the server when the cache entry has expired.
+   * Set to `0` to disable polling.
+   * @default 0
+   */
+  dataSourceRevalidateMs: _propTypes.default.number,
   /**
    * Set the density of the Data Grid.
    * @default "standard"

package/constants/dataGridPropsDefaultValues.js

@@ -30,6 +30,7 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
   disableMultipleColumnsFiltering: false,
   disableMultipleColumnsSorting: false,
   disableMultipleRowSelection: false,
+  dataSourceRevalidateMs: 0,
   disableRowSelectionOnClick: false,
   disableRowSelectionExcludeModel: false,
   disableVirtualization: false,

package/esm/DataGrid/DataGrid.js

@@ -173,6 +173,13 @@ DataGridRaw.propTypes = {
     get: PropTypes.func.isRequired,
     set: PropTypes.func.isRequired
   }),
+  /**
+   * If positive, the Data Grid will periodically revalidate data source rows by
+   * re-fetching them from the server when the cache entry has expired.
+   * Set to `0` to disable polling.
+   * @default 0
+   */
+  dataSourceRevalidateMs: PropTypes.number,
   /**
    * Set the density of the Data Grid.
    * @default "standard"

package/esm/constants/dataGridPropsDefaultValues.js

@@ -24,6 +24,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   disableMultipleColumnsFiltering: false,
   disableMultipleColumnsSorting: false,
   disableMultipleRowSelection: false,
+  dataSourceRevalidateMs: 0,
   disableRowSelectionOnClick: false,
   disableRowSelectionExcludeModel: false,
   disableVirtualization: false,

package/esm/hooks/features/dataSource/models.d.ts

@@ -5,6 +5,9 @@ import type { GridDataSourceCacheDefaultConfig } from "./cache.js";
  * The parameters for the `fetchRows` method.
  */
 export type GridDataSourceFetchRowsParams<T> = Partial<T> & GridGetRowsOptions;
+export interface GridDataSourceFetchRowChildrenOptions {
+  showChildrenLoading?: boolean;
+}
 export interface GridDataSourceApi {
   /**
    * The data source API.
@@ -38,7 +41,7 @@ export interface GridDataSourceApiBase {
 }
 export interface GridDataSourceBaseOptions {
   cacheOptions?: GridDataSourceCacheDefaultConfig;
-  fetchRowChildren?: (parents: GridRowId[]) => void;
+  fetchRowChildren?: (parents: GridRowId[], options?: GridDataSourceFetchRowChildrenOptions) => void;
   clearDataSourceState?: () => void;
   handleEditRow?: (params: GridUpdateRowParams, updatedRow: GridRowModel) => void;
 }

package/esm/hooks/features/dataSource/useGridDataSourceBase.d.ts

@@ -6,17 +6,20 @@ import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommuni
 import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 import type { GridStrategyProcessor } from "../../core/strategyProcessing/index.js";
 import type { GridEventListener } from "../../../models/events/index.js";
-export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity>(apiRef: RefObject<Api>, props: Pick<DataGridProcessedProps, "dataSource" | "dataSourceCache" | "onDataSourceError" | "pageSizeOptions" | "pagination" | "signature">, options?: GridDataSourceBaseOptions) => {
+import type { GridRowId } from "../../../models/gridRows.js";
+export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity>(apiRef: RefObject<Api>, props: Pick<DataGridProcessedProps, "dataSource" | "dataSourceCache" | "onDataSourceError" | "pageSizeOptions" | "pagination" | "signature" | "dataSourceRevalidateMs">, options?: GridDataSourceBaseOptions) => {
   api: {
     public: GridDataSourceApi;
   };
-  debouncedFetchRows: ((parentId?: import("@mui/x-data-grid").GridRowId, params?: import("./models.js").GridDataSourceFetchRowsParams<import("@mui/x-data-grid").GridGetRowsParams>) => Promise<void>) & import("@mui/utils/debounce").Cancelable;
+  debouncedFetchRows: ((parentId?: GridRowId, params?: import("./models.js").GridDataSourceFetchRowsParams<import("@mui/x-data-grid").GridGetRowsParams>) => Promise<void>) & import("@mui/utils/debounce").Cancelable;
   strategyProcessor: {
     strategyName: DataSourceRowsUpdateStrategy;
     group: "dataSourceRowsUpdate";
     processor: GridStrategyProcessor<"dataSourceRowsUpdate">;
   };
   setStrategyAvailability: () => void;
+  startPolling: () => void;
+  stopPolling: () => void;
   cacheChunkManager: CacheChunkManager;
   cache: GridDataSourceCache;
   events: {

package/esm/hooks/features/dataSource/useGridDataSourceBase.js

@@ -5,6 +5,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["skipCache", "keepChildrenExpanded"];
 import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
+import useEventCallback from '@mui/utils/useEventCallback';
 import debounce from '@mui/utils/debounce';
 import { warnOnce } from '@mui/x-internals/warning';
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
@@ -12,7 +13,8 @@ import { GRID_ROOT_GROUP_ID } from "../rows/gridRowsUtils.js";
 import { runIf } from "../../../utils/utils.js";
 import { GridStrategyGroup } from "../../core/strategyProcessing/index.js";
 import { useGridSelector } from "../../utils/useGridSelector.js";
-import { gridPaginationModelSelector } from "../pagination/gridPaginationSelector.js";
+import { gridPaginationModelSelector, gridVisibleRowsSelector } from "../pagination/gridPaginationSelector.js";
+import { gridRowTreeSelector } from "../rows/gridRowsSelector.js";
 import { gridGetRowsParamsSelector } from "./gridDataSourceSelector.js";
 import { CacheChunkManager, DataSourceRowsUpdateStrategy } from "./utils.js";
 import { GridDataSourceCacheDefault } from "./cache.js";
@@ -38,7 +40,9 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
   }, [currentStrategy]);
   const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
   const lastRequestId = React.useRef(0);
+  const pollingIntervalRef = React.useRef(null);
   const onDataSourceErrorProp = props.onDataSourceError;
+  const revalidateMs = props.dataSourceRevalidateMs;
   const cacheChunkManager = useLazyRef(() => {
     if (!props.pagination) {
       return new CacheChunkManager(paginationModel.pageSize);
@@ -128,6 +132,69 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
   const handleStrategyActivityChange = React.useCallback(() => {
     setCurrentStrategy(apiRef.current.getActiveStrategy(GridStrategyGroup.DataSource));
   }, [apiRef]);
+  const fetchRowChildrenOption = options.fetchRowChildren;
+  const revalidate = useEventCallback(async () => {
+    const getRows = props.dataSource?.getRows;
+    if (!getRows || !standardRowsUpdateStrategyActive) {
+      return;
+    }
+    const revalidateExpandedGroups = () => {
+      if (currentStrategy !== DataSourceRowsUpdateStrategy.GroupedData || !fetchRowChildrenOption) {
+        return;
+      }
+      const rowTree = gridRowTreeSelector(apiRef);
+      const visibleRows = gridVisibleRowsSelector(apiRef).rows;
+      const expandedGroupIds = visibleRows.reduce((acc, row) => {
+        const node = rowTree[row.id];
+        if (node.type === 'group' && node.id !== GRID_ROOT_GROUP_ID && node.childrenExpanded === true) {
+          acc.push(row.id);
+        }
+        return acc;
+      }, []);
+      if (expandedGroupIds.length > 0) {
+        fetchRowChildrenOption(expandedGroupIds, {
+          showChildrenLoading: false
+        });
+      }
+    };
+    const fetchParams = _extends({}, gridGetRowsParamsSelector(apiRef), apiRef.current.unstable_applyPipeProcessors('getRowsParams', {}));
+    const cacheKeys = cacheChunkManager.getCacheKeys(fetchParams);
+    const responses = cacheKeys.map(cacheKey => cache.get(cacheKey));
+    if (responses.every(response => response !== undefined)) {
+      revalidateExpandedGroups();
+      return;
+    }
+    try {
+      const response = await getRows(fetchParams);
+      const currentParams = _extends({}, gridGetRowsParamsSelector(apiRef), apiRef.current.unstable_applyPipeProcessors('getRowsParams', {}));
+      if (!isDeepEqual(fetchParams, currentParams)) {
+        return;
+      }
+      const cacheResponses = cacheChunkManager.splitResponse(fetchParams, response);
+      cacheResponses.forEach((cacheResponse, key) => cache.set(key, cacheResponse));
+      apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
+        response,
+        fetchParams,
+        options: {}
+      });
+      revalidateExpandedGroups();
+    } catch {
+      // Ignore background revalidation errors.
+    }
+  });
+  const stopPolling = React.useCallback(() => {
+    if (pollingIntervalRef.current !== null) {
+      clearInterval(pollingIntervalRef.current);
+      pollingIntervalRef.current = null;
+    }
+  }, []);
+  const startPolling = useEventCallback(() => {
+    stopPolling();
+    if (revalidateMs <= 0 || !standardRowsUpdateStrategyActive) {
+      return;
+    }
+    pollingIntervalRef.current = setInterval(revalidate, revalidateMs);
+  });
   const handleDataUpdate = React.useCallback(params => {
     if ('error' in params) {
       apiRef.current.setRows([]);
@@ -144,7 +211,8 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
       params: params.fetchParams,
       response
     }, true);
-  }, [apiRef]);
+    startPolling();
+  }, [apiRef, startPolling]);
   const dataSourceUpdateRow = props.dataSource?.updateRow;
   const handleEditRowOption = options.handleEditRow;
   const editRow = React.useCallback(async params => {
@@ -184,6 +252,10 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
     }
   };
   const debouncedFetchRows = React.useMemo(() => debounce(fetchRows, 0), [fetchRows]);
+  const handleFetchRowsOnParamsChange = React.useCallback(() => {
+    stopPolling();
+    debouncedFetchRows();
+  }, [stopPolling, debouncedFetchRows]);
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {
@@ -196,6 +268,17 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
     const newCache = getCache(props.dataSourceCache, options.cacheOptions);
     setCache(prevCache => prevCache !== newCache ? newCache : prevCache);
   }, [props.dataSourceCache, options.cacheOptions]);
+  React.useEffect(() => {
+    if (!standardRowsUpdateStrategyActive) {
+      stopPolling();
+    }
+  }, [standardRowsUpdateStrategyActive, stopPolling]);
+  React.useEffect(() => {
+    if (revalidateMs <= 0) {
+      stopPolling();
+    }
+  }, [revalidateMs, stopPolling]);
+  React.useEffect(() => stopPolling, [stopPolling]);
   React.useEffect(() => {
     // Return early if the proper strategy isn't set yet
     // Context: https://github.com/mui/mui-x/issues/19650
@@ -203,6 +286,8 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
       return undefined;
     }
     if (props.dataSource) {
+      stopPolling();
+      apiRef.current.setRows([]);
       apiRef.current.dataSource.cache.clear();
       apiRef.current.dataSource.fetchRows();
     }
@@ -210,7 +295,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
       // ignore the current request on unmount
       lastRequestId.current += 1;
     };
-  }, [apiRef, props.dataSource, currentStrategy]);
+  }, [apiRef, props.dataSource, currentStrategy, stopPolling]);
   return {
     api: {
       public: dataSourceApi
@@ -222,13 +307,15 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
       processor: handleDataUpdate
     },
     setStrategyAvailability,
+    startPolling,
+    stopPolling,
     cacheChunkManager,
     cache,
     events: {
       strategyAvailabilityChange: handleStrategyActivityChange,
-      sortModelChange: runIf(standardRowsUpdateStrategyActive, () => debouncedFetchRows()),
-      filterModelChange: runIf(standardRowsUpdateStrategyActive, () => debouncedFetchRows()),
-      paginationModelChange: runIf(standardRowsUpdateStrategyActive, () => debouncedFetchRows())
+      sortModelChange: runIf(standardRowsUpdateStrategyActive, handleFetchRowsOnParamsChange),
+      filterModelChange: runIf(standardRowsUpdateStrategyActive, handleFetchRowsOnParamsChange),
+      paginationModelChange: runIf(standardRowsUpdateStrategyActive, handleFetchRowsOnParamsChange)
     }
   };
 };

package/esm/hooks/features/editing/useGridRowEditing.js

@@ -184,12 +184,15 @@ export const useGridRowEditing = (apiRef, props) => {
         const rowParams = apiRef.current.getRowParams(params.id);
         const newParams = _extends({}, rowParams, {
           field: params.field,
-          reason
+          reason,
+          // Only pass the pressed key when the row editing is controlled via `rowModesModel`.
+          // In uncontrolled mode, the default editor already inserts the character and passing it here would duplicate it.
+          key: rowModesModelProp && isPrintableKey(event) ? event.key : undefined
         });
         apiRef.current.publishEvent('rowEditStart', newParams, event);
       }
     }
-  }, [apiRef, hasFieldsWithErrors]);
+  }, [apiRef, hasFieldsWithErrors, rowModesModelProp]);
   const handleRowEditStart = React.useCallback(params => {
     const {
       id,
@@ -201,10 +204,17 @@ export const useGridRowEditing = (apiRef, props) => {
       fieldToFocus: field
     };
     if (reason === GridRowEditStartReasons.printableKeyDown || reason === GridRowEditStartReasons.deleteKeyDown) {
-      startRowEditModeParams.deleteValue = !!field;
+      // If the user typed a printable key, initialize the value with that key
+      // to avoid losing the first character when the component is controlled.
+      if (rowModesModelProp && reason === GridRowEditStartReasons.printableKeyDown && params.key && field) {
+        startRowEditModeParams.initialValue = params.key;
+      } else {
+        // For Delete / Backspace or for uncontrolled row editing we clear the value
+        startRowEditModeParams.deleteValue = !!field;
+      }
     }
     apiRef.current.startRowEditMode(startRowEditModeParams);
-  }, [apiRef]);
+  }, [apiRef, rowModesModelProp]);
   const handleRowEditStop = React.useCallback(params => {
     const {
       id,

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.27.1
+ * @mui/x-data-grid v8.27.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/models/api/gridEditingApi.d.ts

@@ -123,7 +123,6 @@ export interface GridStartRowEditModeParams {
   /**
    * The initial value for the given `fieldToFocus`.
    * If `deleteValue` is also true, this value is not used.
-   * @deprecated No longer needed.
    */
   initialValue?: string;
 }

package/esm/models/params/gridRowParams.d.ts

@@ -73,7 +73,6 @@ export interface GridRowEditStartParams<R extends GridValidRowModel = any> exten
   reason?: GridRowEditStartReasons;
   /**
    * If the reason is related to a keyboard event, it contains which key was pressed.
-   * @deprecated No longer needed.
    */
   key?: string;
 }

package/esm/models/props/DataGridProps.d.ts

@@ -325,6 +325,13 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
    * @default 0
    */
   throttleRowsMs: number;
+  /**
+   * If positive, the Data Grid will periodically revalidate data source rows by re-fetching them from the server when the cache entry has expired.
+   * If the refetched rows are different from the current rows, the grid will update the rows.
+   * Set to `0` to disable polling.
+   * @default 0
+   */
+  dataSourceRevalidateMs: number;
   /**
    * If `true`, reordering columns is disabled.
    * @default false

package/hooks/features/dataSource/models.d.ts

@@ -5,6 +5,9 @@ import type { GridDataSourceCacheDefaultConfig } from "./cache.js";
  * The parameters for the `fetchRows` method.
  */
 export type GridDataSourceFetchRowsParams<T> = Partial<T> & GridGetRowsOptions;
+export interface GridDataSourceFetchRowChildrenOptions {
+  showChildrenLoading?: boolean;
+}
 export interface GridDataSourceApi {
   /**
    * The data source API.
@@ -38,7 +41,7 @@ export interface GridDataSourceApiBase {
 }
 export interface GridDataSourceBaseOptions {
   cacheOptions?: GridDataSourceCacheDefaultConfig;
-  fetchRowChildren?: (parents: GridRowId[]) => void;
+  fetchRowChildren?: (parents: GridRowId[], options?: GridDataSourceFetchRowChildrenOptions) => void;
   clearDataSourceState?: () => void;
   handleEditRow?: (params: GridUpdateRowParams, updatedRow: GridRowModel) => void;
 }

package/hooks/features/dataSource/useGridDataSourceBase.d.ts

@@ -6,17 +6,20 @@ import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommuni
 import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 import type { GridStrategyProcessor } from "../../core/strategyProcessing/index.js";
 import type { GridEventListener } from "../../../models/events/index.js";
-export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity>(apiRef: RefObject<Api>, props: Pick<DataGridProcessedProps, "dataSource" | "dataSourceCache" | "onDataSourceError" | "pageSizeOptions" | "pagination" | "signature">, options?: GridDataSourceBaseOptions) => {
+import type { GridRowId } from "../../../models/gridRows.js";
+export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity>(apiRef: RefObject<Api>, props: Pick<DataGridProcessedProps, "dataSource" | "dataSourceCache" | "onDataSourceError" | "pageSizeOptions" | "pagination" | "signature" | "dataSourceRevalidateMs">, options?: GridDataSourceBaseOptions) => {
   api: {
     public: GridDataSourceApi;
   };
-  debouncedFetchRows: ((parentId?: import("@mui/x-data-grid").GridRowId, params?: import("./models.js").GridDataSourceFetchRowsParams<import("@mui/x-data-grid").GridGetRowsParams>) => Promise<void>) & import("@mui/utils/debounce").Cancelable;
+  debouncedFetchRows: ((parentId?: GridRowId, params?: import("./models.js").GridDataSourceFetchRowsParams<import("@mui/x-data-grid").GridGetRowsParams>) => Promise<void>) & import("@mui/utils/debounce").Cancelable;
   strategyProcessor: {
     strategyName: DataSourceRowsUpdateStrategy;
     group: "dataSourceRowsUpdate";
     processor: GridStrategyProcessor<"dataSourceRowsUpdate">;
   };
   setStrategyAvailability: () => void;
+  startPolling: () => void;
+  stopPolling: () => void;
   cacheChunkManager: CacheChunkManager;
   cache: GridDataSourceCache;
   events: {

package/hooks/features/dataSource/useGridDataSourceBase.js

@@ -11,6 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _debounce = _interopRequireDefault(require("@mui/utils/debounce"));
 var _warning = require("@mui/x-internals/warning");
 var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
@@ -19,6 +20,7 @@ var _utils = require("../../../utils/utils");
 var _strategyProcessing = require("../../core/strategyProcessing");
 var _useGridSelector = require("../../utils/useGridSelector");
 var _gridPaginationSelector = require("../pagination/gridPaginationSelector");
+var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _gridDataSourceSelector = require("./gridDataSourceSelector");
 var _utils2 = require("./utils");
 var _cache = require("./cache");
@@ -45,7 +47,9 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
   }, [currentStrategy]);
   const paginationModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationModelSelector);
   const lastRequestId = React.useRef(0);
+  const pollingIntervalRef = React.useRef(null);
   const onDataSourceErrorProp = props.onDataSourceError;
+  const revalidateMs = props.dataSourceRevalidateMs;
   const cacheChunkManager = (0, _useLazyRef.default)(() => {
     if (!props.pagination) {
       return new _utils2.CacheChunkManager(paginationModel.pageSize);
@@ -135,6 +139,69 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
   const handleStrategyActivityChange = React.useCallback(() => {
     setCurrentStrategy(apiRef.current.getActiveStrategy(_strategyProcessing.GridStrategyGroup.DataSource));
   }, [apiRef]);
+  const fetchRowChildrenOption = options.fetchRowChildren;
+  const revalidate = (0, _useEventCallback.default)(async () => {
+    const getRows = props.dataSource?.getRows;
+    if (!getRows || !standardRowsUpdateStrategyActive) {
+      return;
+    }
+    const revalidateExpandedGroups = () => {
+      if (currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.GroupedData || !fetchRowChildrenOption) {
+        return;
+      }
+      const rowTree = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef);
+      const visibleRows = (0, _gridPaginationSelector.gridVisibleRowsSelector)(apiRef).rows;
+      const expandedGroupIds = visibleRows.reduce((acc, row) => {
+        const node = rowTree[row.id];
+        if (node.type === 'group' && node.id !== _gridRowsUtils.GRID_ROOT_GROUP_ID && node.childrenExpanded === true) {
+          acc.push(row.id);
+        }
+        return acc;
+      }, []);
+      if (expandedGroupIds.length > 0) {
+        fetchRowChildrenOption(expandedGroupIds, {
+          showChildrenLoading: false
+        });
+      }
+    };
+    const fetchParams = (0, _extends2.default)({}, (0, _gridDataSourceSelector.gridGetRowsParamsSelector)(apiRef), apiRef.current.unstable_applyPipeProcessors('getRowsParams', {}));
+    const cacheKeys = cacheChunkManager.getCacheKeys(fetchParams);
+    const responses = cacheKeys.map(cacheKey => cache.get(cacheKey));
+    if (responses.every(response => response !== undefined)) {
+      revalidateExpandedGroups();
+      return;
+    }
+    try {
+      const response = await getRows(fetchParams);
+      const currentParams = (0, _extends2.default)({}, (0, _gridDataSourceSelector.gridGetRowsParamsSelector)(apiRef), apiRef.current.unstable_applyPipeProcessors('getRowsParams', {}));
+      if (!(0, _isDeepEqual.isDeepEqual)(fetchParams, currentParams)) {
+        return;
+      }
+      const cacheResponses = cacheChunkManager.splitResponse(fetchParams, response);
+      cacheResponses.forEach((cacheResponse, key) => cache.set(key, cacheResponse));
+      apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
+        response,
+        fetchParams,
+        options: {}
+      });
+      revalidateExpandedGroups();
+    } catch {
+      // Ignore background revalidation errors.
+    }
+  });
+  const stopPolling = React.useCallback(() => {
+    if (pollingIntervalRef.current !== null) {
+      clearInterval(pollingIntervalRef.current);
+      pollingIntervalRef.current = null;
+    }
+  }, []);
+  const startPolling = (0, _useEventCallback.default)(() => {
+    stopPolling();
+    if (revalidateMs <= 0 || !standardRowsUpdateStrategyActive) {
+      return;
+    }
+    pollingIntervalRef.current = setInterval(revalidate, revalidateMs);
+  });
   const handleDataUpdate = React.useCallback(params => {
     if ('error' in params) {
       apiRef.current.setRows([]);
@@ -151,7 +218,8 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
       params: params.fetchParams,
       response
     }, true);
-  }, [apiRef]);
+    startPolling();
+  }, [apiRef, startPolling]);
   const dataSourceUpdateRow = props.dataSource?.updateRow;
   const handleEditRowOption = options.handleEditRow;
   const editRow = React.useCallback(async params => {
@@ -191,6 +259,10 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     }
   };
   const debouncedFetchRows = React.useMemo(() => (0, _debounce.default)(fetchRows, 0), [fetchRows]);
+  const handleFetchRowsOnParamsChange = React.useCallback(() => {
+    stopPolling();
+    debouncedFetchRows();
+  }, [stopPolling, debouncedFetchRows]);
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {
@@ -203,6 +275,17 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     const newCache = getCache(props.dataSourceCache, options.cacheOptions);
     setCache(prevCache => prevCache !== newCache ? newCache : prevCache);
   }, [props.dataSourceCache, options.cacheOptions]);
+  React.useEffect(() => {
+    if (!standardRowsUpdateStrategyActive) {
+      stopPolling();
+    }
+  }, [standardRowsUpdateStrategyActive, stopPolling]);
+  React.useEffect(() => {
+    if (revalidateMs <= 0) {
+      stopPolling();
+    }
+  }, [revalidateMs, stopPolling]);
+  React.useEffect(() => stopPolling, [stopPolling]);
   React.useEffect(() => {
     // Return early if the proper strategy isn't set yet
     // Context: https://github.com/mui/mui-x/issues/19650
@@ -210,6 +293,8 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
       return undefined;
     }
     if (props.dataSource) {
+      stopPolling();
+      apiRef.current.setRows([]);
       apiRef.current.dataSource.cache.clear();
       apiRef.current.dataSource.fetchRows();
     }
@@ -217,7 +302,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
       // ignore the current request on unmount
       lastRequestId.current += 1;
     };
-  }, [apiRef, props.dataSource, currentStrategy]);
+  }, [apiRef, props.dataSource, currentStrategy, stopPolling]);
   return {
     api: {
       public: dataSourceApi
@@ -229,13 +314,15 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
       processor: handleDataUpdate
     },
     setStrategyAvailability,
+    startPolling,
+    stopPolling,
     cacheChunkManager,
     cache,
     events: {
       strategyAvailabilityChange: handleStrategyActivityChange,
-      sortModelChange: (0, _utils.runIf)(standardRowsUpdateStrategyActive, () => debouncedFetchRows()),
-      filterModelChange: (0, _utils.runIf)(standardRowsUpdateStrategyActive, () => debouncedFetchRows()),
-      paginationModelChange: (0, _utils.runIf)(standardRowsUpdateStrategyActive, () => debouncedFetchRows())
+      sortModelChange: (0, _utils.runIf)(standardRowsUpdateStrategyActive, handleFetchRowsOnParamsChange),
+      filterModelChange: (0, _utils.runIf)(standardRowsUpdateStrategyActive, handleFetchRowsOnParamsChange),
+      paginationModelChange: (0, _utils.runIf)(standardRowsUpdateStrategyActive, handleFetchRowsOnParamsChange)
     }
   };
 };

package/hooks/features/editing/useGridRowEditing.js

@@ -191,12 +191,15 @@ const useGridRowEditing = (apiRef, props) => {
         const rowParams = apiRef.current.getRowParams(params.id);
         const newParams = (0, _extends2.default)({}, rowParams, {
           field: params.field,
-          reason
+          reason,
+          // Only pass the pressed key when the row editing is controlled via `rowModesModel`.
+          // In uncontrolled mode, the default editor already inserts the character and passing it here would duplicate it.
+          key: rowModesModelProp && (0, _keyboardUtils.isPrintableKey)(event) ? event.key : undefined
         });
         apiRef.current.publishEvent('rowEditStart', newParams, event);
       }
     }
-  }, [apiRef, hasFieldsWithErrors]);
+  }, [apiRef, hasFieldsWithErrors, rowModesModelProp]);
   const handleRowEditStart = React.useCallback(params => {
     const {
       id,
@@ -208,10 +211,17 @@ const useGridRowEditing = (apiRef, props) => {
       fieldToFocus: field
     };
     if (reason === _gridRowParams.GridRowEditStartReasons.printableKeyDown || reason === _gridRowParams.GridRowEditStartReasons.deleteKeyDown) {
-      startRowEditModeParams.deleteValue = !!field;
+      // If the user typed a printable key, initialize the value with that key
+      // to avoid losing the first character when the component is controlled.
+      if (rowModesModelProp && reason === _gridRowParams.GridRowEditStartReasons.printableKeyDown && params.key && field) {
+        startRowEditModeParams.initialValue = params.key;
+      } else {
+        // For Delete / Backspace or for uncontrolled row editing we clear the value
+        startRowEditModeParams.deleteValue = !!field;
+      }
     }
     apiRef.current.startRowEditMode(startRowEditModeParams);
-  }, [apiRef]);
+  }, [apiRef, rowModesModelProp]);
   const handleRowEditStop = React.useCallback(params => {
     const {
       id,

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.27.1
+ * @mui/x-data-grid v8.27.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/models/api/gridEditingApi.d.ts

@@ -123,7 +123,6 @@ export interface GridStartRowEditModeParams {
   /**
    * The initial value for the given `fieldToFocus`.
    * If `deleteValue` is also true, this value is not used.
-   * @deprecated No longer needed.
    */
   initialValue?: string;
 }

package/models/params/gridRowParams.d.ts

@@ -73,7 +73,6 @@ export interface GridRowEditStartParams<R extends GridValidRowModel = any> exten
   reason?: GridRowEditStartReasons;
   /**
    * If the reason is related to a keyboard event, it contains which key was pressed.
-   * @deprecated No longer needed.
    */
   key?: string;
 }

package/models/props/DataGridProps.d.ts

@@ -325,6 +325,13 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
    * @default 0
    */
   throttleRowsMs: number;
+  /**
+   * If positive, the Data Grid will periodically revalidate data source rows by re-fetching them from the server when the cache entry has expired.
+   * If the refetched rows are different from the current rows, the grid will update the rows.
+   * Set to `0` to disable polling.
+   * @default 0
+   */
+  dataSourceRevalidateMs: number;
   /**
    * If `true`, reordering columns is disabled.
    * @default false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "8.27.1",
+  "version": "8.27.3",
   "author": "MUI Team",
   "description": "The Community plan edition of the MUI X Data Grid components.",
   "license": "MIT",