@mui/x-data-grid 8.27.0 → 8.27.3

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.0
+ * @mui/x-data-grid v8.27.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/index.d.ts

@@ -29,6 +29,7 @@ export { gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector }
 export type { GridSlotsComponentsProps } from "../models/gridSlotsComponentsProps.js";
 export type { GridFilterInputValueProps } from "../models/gridFilterInputComponent.js";
 export { useGridColumnMenu, columnMenuStateInitializer } from "../hooks/features/columnMenu/useGridColumnMenu.js";
+export type { GridColumnMenuComponent } from "../components/menu/columnMenu/GridColumnMenuProps.js";
 export { useGridColumns, columnsStateInitializer } from "../hooks/features/columns/useGridColumns.js";
 export * from "../hooks/features/columns/gridColumnsUtils.js";
 export { useGridColumnSpanning } from "../hooks/features/columns/useGridColumnSpanning.js";

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/columnMenu/getColumnMenuItemKeys.d.ts

@@ -0,0 +1,17 @@
+import type { RefObject } from '@mui/x-internals/types';
+import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import type { GridColDef } from "../../../models/colDef/gridColDef.js";
+import type { GridColumnMenuSlotProps } from "./columnMenuInterfaces.js";
+export interface GetColumnMenuItemKeysParams {
+  apiRef: RefObject<GridPrivateApiCommunity>;
+  colDef: GridColDef;
+  defaultSlots: Record<string, any>;
+  defaultSlotProps: Record<string, GridColumnMenuSlotProps>;
+  slots?: Record<string, any>;
+  slotProps?: Record<string, GridColumnMenuSlotProps>;
+}
+/**
+ * Returns the list of column menu item keys (sorted by `displayOrder`) that should be rendered for a given column.
+ * This is shared between the column header (to know if menu is empty) and the menu itself (to render items).
+ */
+export declare function getColumnMenuItemKeys(params: GetColumnMenuItemKeysParams): string[];

package/hooks/features/columnMenu/getColumnMenuItemKeys.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getColumnMenuItemKeys = getColumnMenuItemKeys;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+/**
+ * Returns the list of column menu item keys (sorted by `displayOrder`) that should be rendered for a given column.
+ * This is shared between the column header (to know if menu is empty) and the menu itself (to render items).
+ */
+function getColumnMenuItemKeys(params) {
+  const {
+    apiRef,
+    colDef,
+    defaultSlots,
+    defaultSlotProps,
+    slots = {},
+    slotProps = {}
+  } = params;
+  const processedComponents = (0, _extends2.default)({}, defaultSlots, slots);
+  let processedSlotProps = defaultSlotProps;
+  if (slotProps && Object.keys(slotProps).length > 0) {
+    const mergedProps = (0, _extends2.default)({}, slotProps);
+    Object.entries(defaultSlotProps).forEach(([key, currentSlotProps]) => {
+      mergedProps[key] = (0, _extends2.default)({}, currentSlotProps, slotProps[key] || {});
+    });
+    processedSlotProps = mergedProps;
+  }
+  const defaultItems = apiRef.current.unstable_applyPipeProcessors('columnMenu', [], colDef);
+  const defaultComponentKeys = Object.keys(defaultSlots);
+  const userItems = Object.keys(slots).filter(key => !defaultComponentKeys.includes(key));
+  const uniqueItems = Array.from(new Set([...defaultItems, ...userItems]));
+  const cleansedItems = uniqueItems.filter(key => processedComponents[key] != null);
+  return cleansedItems.sort((a, b) => {
+    const leftItemProps = processedSlotProps[a];
+    const rightItemProps = processedSlotProps[b];
+    const leftDisplayOrder = Number.isFinite(leftItemProps?.displayOrder) ? leftItemProps.displayOrder : 100;
+    const rightDisplayOrder = Number.isFinite(rightItemProps?.displayOrder) ? rightItemProps.displayOrder : 100;
+    return leftDisplayOrder - rightDisplayOrder;
+  });
+}

package/hooks/features/columnMenu/useGridColumnMenuSlots.js

@@ -11,6 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useGridRootProps = require("../../utils/useGridRootProps");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
+var _getColumnMenuItemKeys = require("./getColumnMenuItemKeys");
 const _excluded = ["displayOrder"];
 const useGridColumnMenuSlots = props => {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
@@ -35,22 +36,16 @@ const useGridColumnMenuSlots = props => {
     });
     return mergedProps;
   }, [defaultSlotProps, slotProps]);
-  const defaultItems = apiRef.current.unstable_applyPipeProcessors('columnMenu', [], props.colDef);
-  const userItems = React.useMemo(() => {
-    const defaultComponentKeys = Object.keys(defaultSlots);
-    return Object.keys(slots).filter(key => !defaultComponentKeys.includes(key));
-  }, [slots, defaultSlots]);
   return React.useMemo(() => {
-    const uniqueItems = Array.from(new Set([...defaultItems, ...userItems]));
-    const cleansedItems = uniqueItems.filter(key => processedComponents[key] != null);
-    const sorted = cleansedItems.sort((a, b) => {
-      const leftItemProps = processedSlotProps[a];
-      const rightItemProps = processedSlotProps[b];
-      const leftDisplayOrder = Number.isFinite(leftItemProps?.displayOrder) ? leftItemProps.displayOrder : 100;
-      const rightDisplayOrder = Number.isFinite(rightItemProps?.displayOrder) ? rightItemProps.displayOrder : 100;
-      return leftDisplayOrder - rightDisplayOrder;
+    const sortedKeys = (0, _getColumnMenuItemKeys.getColumnMenuItemKeys)({
+      apiRef,
+      colDef,
+      defaultSlots,
+      defaultSlotProps,
+      slots,
+      slotProps
     });
-    return sorted.reduce((acc, key, index) => {
+    return sortedKeys.reduce((acc, key, index) => {
       let itemProps = {
         colDef,
         onClick: hideMenu
@@ -60,8 +55,8 @@ const useGridColumnMenuSlots = props => {
         const customProps = (0, _objectWithoutPropertiesLoose2.default)(processedComponentProps, _excluded);
         itemProps = (0, _extends2.default)({}, itemProps, customProps);
       }
-      return addDividers && index !== sorted.length - 1 ? [...acc, [processedComponents[key], itemProps], [rootProps.slots.baseDivider, {}]] : [...acc, [processedComponents[key], itemProps]];
+      return addDividers && index !== sortedKeys.length - 1 ? [...acc, [processedComponents[key], itemProps], [rootProps.slots.baseDivider, {}]] : [...acc, [processedComponents[key], itemProps]];
     }, []);
-  }, [addDividers, colDef, defaultItems, hideMenu, processedComponents, processedSlotProps, userItems, rootProps.slots.baseDivider]);
+  }, [addDividers, apiRef, colDef, defaultSlotProps, defaultSlots, hideMenu, processedComponents, processedSlotProps, slotProps, slots, rootProps.slots.baseDivider]);
 };
 exports.useGridColumnMenuSlots = useGridColumnMenuSlots;

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.0
+ * @mui/x-data-grid v8.27.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/index.d.ts

@@ -29,6 +29,7 @@ export { gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector }
 export type { GridSlotsComponentsProps } from "../models/gridSlotsComponentsProps.js";
 export type { GridFilterInputValueProps } from "../models/gridFilterInputComponent.js";
 export { useGridColumnMenu, columnMenuStateInitializer } from "../hooks/features/columnMenu/useGridColumnMenu.js";
+export type { GridColumnMenuComponent } from "../components/menu/columnMenu/GridColumnMenuProps.js";
 export { useGridColumns, columnsStateInitializer } from "../hooks/features/columns/useGridColumns.js";
 export * from "../hooks/features/columns/gridColumnsUtils.js";
 export { useGridColumnSpanning } from "../hooks/features/columns/useGridColumnSpanning.js";

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;
 }