@mui/x-data-grid 9.0.0-alpha.0 → 9.0.0-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,123 @@
 # Changelog
 
+## 9.0.0-alpha.1
+
+_Feb 26, 2026_
+
+We'd like to extend a big thank you to the 18 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡️ Improved dynamic data support and cache invalidation in lazy loading for Data Grid Pro
+- ⌨️ Keyboard support for selecting day, month, and year in Date Pickers
+- 📊 Axis tooltip sorting and control improvements in Charts
+- 🐞 Bugfixes and internal improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@EllGree, @lion1963
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @brijeshb42, @cherniavskii, @dav-is, @flaviendelangle, @Janpot, @JCQuintas, @mapache-salvaje, @MBilalShafi, @michelengelen, @noraleonte, @rita-codes, @sai6855, @siriwatknp, @ZeeshanTamboli
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.0.0-alpha.1`
+
+- [DataGrid] Forward rest props in `GridFilterInputMultipleValue` (#21407) @siriwatknp
+- [DataGrid] Preserve key input during row edit when using `rowModesModel` (#20759) @michelengelen
+- [DataGrid] Remove double rtl inversion logic for columns pinning (#21371) @siriwatknp
+
+#### `@mui/x-data-grid-pro@9.0.0-alpha.1` [![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@9.0.0-alpha.1`, plus:
+
+- [DataGridPro] Fix number input visibility in header filters (#21328) @michelengelen
+- [DataGridPro] Improve dynamic data support and cache invalidation in lazy loading (#21282) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@9.0.0-alpha.1` [![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@9.0.0-alpha.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.0.0-alpha.1`
+
+- [DatePicker] Add keyboard support for selecting day, month, and year (#20859) @michelengelen
+
+#### `@mui/x-date-pickers-pro@9.0.0-alpha.1` [![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@9.0.0-alpha.1`, plus:
+
+- [DateRangePicker] Fix timezone update issue leading to `invalidRange` error (#20863) @michelengelen
+
+### Charts
+
+#### `@mui/x-charts@9.0.0-alpha.1`
+
+- [charts] Add `sort` props to the axis tooltip (#21293) @alexfauquette
+- [charts] Controll axis tooltip (#21351) @alexfauquette
+- [charts] De duplicate keyboard focus handler function (#21267) @sai6855
+- [charts] Make `type` optional in identifiers (#21311) @alexfauquette
+- [charts] Move ref to the root component (#21396) @alexfauquette
+- [charts] Refactor loading and no data overlays to use a shared OverlayText component (#21414) @sai6855
+- [charts] Require series ids to be unique (#21330) @alexfauquette
+- [charts] Set `showMark` as `false` by default (#21373) @alexfauquette
+- [charts] Use `createGetNextIndexFocusedItem()` util in Funnel and RangeBar charts (#21390) @sai6855
+- [charts] Remove unnecessary string concatenation (#21418) @sai6855
+
+#### `@mui/x-charts-pro@9.0.0-alpha.1` [![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@9.0.0-alpha.1`.
+
+#### `@mui/x-charts-premium@9.0.0-alpha.1` [![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@9.0.0-alpha.1`.
+
+### Tree View
+
+#### `@mui/x-tree-view@9.0.0-alpha.1`
+
+- [tree view] Focus item sibling on unmount instead of the 1st item (#21254) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@9.0.0-alpha.1` [![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@9.0.0-alpha.1`.
+
+### Codemod
+
+#### `@mui/x-codemod@9.0.0-alpha.1`
+
+Internal changes.
+
+### Docs
+
+- [docs] Fix external 301s (#21377) @Janpot
+- [docs] Show premium in the overview (#21343) @alexfauquette
+- [docs][charts] Revise the useLegend hook doc (#21352) @mapache-salvaje
+- [docs][charts] Revise the axis hooks doc (#21317) @mapache-salvaje
+- [docs][charts] Revise the scale hooks doc (#21316) @mapache-salvaje
+- [docs][charts] Revise the series hooks doc (#21353) @mapache-salvaje
+- [docs][charts] Revise the useDataset doc (#21336) @mapache-salvaje
+- [docs][charts] Revise the useDrawingArea doc (#21333) @mapache-salvaje
+
+### Core
+
+- [core] Update docs deploy script to the `docs-next` branch (#21341) @siriwatknp
+- [code-infra] Cleanup unused babel plugins (#21453) @brijeshb42
+- [code-infra] Do not append `x` to the last version for the compare API (#21408) @arminmeh
+- [code-infra] Upgrade react-docgen to v8 X (#21155) @JCQuintas
+- [code-infra] Modernize codemod (#21096) @JCQuintas
+- [docs-infra] Fix current version detection logic (#21417) @cherniavskii
+- [docs-infra] Reapply Cookie Banner (#21281) @dav-is
+- [internal] Headless filtering plugin (#21302) @arminmeh
+- [internal] Headless pagination plugin (#21183) @arminmeh
+- [internal] Headless virtualization followups (#21327) @cherniavskii
+- [internal] Keep cached data for disabled pipe processors (#21348) @arminmeh
+- [internal] Remove autoprefixer package (#21440) @ZeeshanTamboli
+
+### Miscellaneous
+
+- [l10n] Fix Czech (csCZ) locale: sort/filter labels are swapped (#21400) @EllGree
+- [l10n] Improve Ukrainian (uk-UA) locale (#21366) @lion1963
+
 ## 9.0.0-alpha.0
 
 _Feb 16, 2026_

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/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -1,27 +1,30 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridFilterInputMultipleValue = GridFilterInputMultipleValue;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps"];
 function GridFilterInputMultipleValue(props) {
   const {
-    item,
-    applyValue,
-    type,
-    apiRef,
-    focusElementRef,
-    slotProps
-  } = props;
+      item,
+      applyValue,
+      type,
+      apiRef,
+      focusElementRef,
+      slotProps
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const id = (0, _useId.default)();
   const [options, setOptions] = React.useState([]);
   const [filterValueState, setFilterValueState] = React.useState(item.value || []);
@@ -60,7 +63,7 @@ function GridFilterInputMultipleValue(props) {
         inputRef: focusElementRef
       }
     }
-  }, slotProps?.root));
+  }, other, slotProps?.root));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputMultipleValue.propTypes = {
   // ----------------------------- Warning --------------------------------

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/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -1,6 +1,8 @@
 'use client';
 
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useId from '@mui/utils/useId';
@@ -8,13 +10,14 @@ import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridFilterInputMultipleValue(props) {
   const {
-    item,
-    applyValue,
-    type,
-    apiRef,
-    focusElementRef,
-    slotProps
-  } = props;
+      item,
+      applyValue,
+      type,
+      apiRef,
+      focusElementRef,
+      slotProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
   const [options, setOptions] = React.useState([]);
   const [filterValueState, setFilterValueState] = React.useState(item.value || []);
@@ -53,7 +56,7 @@ function GridFilterInputMultipleValue(props) {
         inputRef: focusElementRef
       }
     }
-  }, slotProps?.root));
+  }, other, slotProps?.root));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputMultipleValue.propTypes = {
   // ----------------------------- Warning --------------------------------

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/columns/gridColumnsSelector.js

@@ -1,6 +1,5 @@
 import { createSelector, createSelectorMemoized, createRootSelector } from "../../../utils/createSelector.js";
 import { EMPTY_PINNED_COLUMN_FIELDS } from "./gridColumnsInterfaces.js";
-import { gridIsRtlSelector } from "../../core/gridCoreSelector.js";
 import { gridListColumnSelector, gridListViewSelector } from "../listView/index.js";
 
 /**
@@ -65,24 +64,24 @@ export const gridPinnedColumnsSelector = createRootSelector(state => state.pinne
  * @category Pinned Columns
  * @ignore - Do not document
  */
-export const gridExistingPinnedColumnSelector = createSelectorMemoized(gridPinnedColumnsSelector, gridColumnFieldsSelector, gridIsRtlSelector, (model, orderedFields, isRtl) => filterMissingColumns(model, orderedFields, isRtl));
+export const gridExistingPinnedColumnSelector = createSelectorMemoized(gridPinnedColumnsSelector, gridColumnFieldsSelector, (model, orderedFields) => filterMissingColumns(model, orderedFields));
 
 /**
  * Get the visible pinned columns.
  * @category Visible Columns
  */
-export const gridVisiblePinnedColumnDefinitionsSelector = createSelectorMemoized(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, gridIsRtlSelector, gridListViewSelector, (columnsState, model, visibleColumnFields, isRtl, listView) => {
+export const gridVisiblePinnedColumnDefinitionsSelector = createSelectorMemoized(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, gridListViewSelector, (columnsState, model, visibleColumnFields, listView) => {
   if (listView) {
     return EMPTY_PINNED_COLUMN_FIELDS;
   }
-  const visiblePinnedFields = filterMissingColumns(model, visibleColumnFields, isRtl);
+  const visiblePinnedFields = filterMissingColumns(model, visibleColumnFields);
   const visiblePinnedColumns = {
     left: visiblePinnedFields.left.map(field => columnsState.lookup[field]),
     right: visiblePinnedFields.right.map(field => columnsState.lookup[field])
   };
   return visiblePinnedColumns;
 });
-function filterMissingColumns(pinnedColumns, columns, invert) {
+function filterMissingColumns(pinnedColumns, columns) {
   if (!Array.isArray(pinnedColumns.left) && !Array.isArray(pinnedColumns.right)) {
     return EMPTY_PINNED_COLUMN_FIELDS;
   }
@@ -96,16 +95,8 @@ function filterMissingColumns(pinnedColumns, columns, invert) {
     return newPinnedColumns.filter(field => remainingColumns.includes(field));
   };
   const leftPinnedColumns = filter(pinnedColumns.left, columns);
-  const columnsWithoutLeftPinnedColumns = columns.filter(
-  // Filter out from the remaining columns those columns already pinned to the left
-  field => !leftPinnedColumns.includes(field));
+  const columnsWithoutLeftPinnedColumns = columns.filter(field => !leftPinnedColumns.includes(field));
   const rightPinnedColumns = filter(pinnedColumns.right, columnsWithoutLeftPinnedColumns);
-  if (invert) {
-    return {
-      left: rightPinnedColumns,
-      right: leftPinnedColumns
-    };
-  }
   return {
     left: leftPinnedColumns,
     right: rightPinnedColumns

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,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
       return undefined;
     }
     if (props.dataSource) {
+      stopPolling();
       apiRef.current.setRows([]);
       apiRef.current.dataSource.cache.clear();
       apiRef.current.dataSource.fetchRows();
@@ -211,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
@@ -223,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 v9.0.0-alpha.0
+ * @mui/x-data-grid v9.0.0-alpha.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/locales/csCZ.js

@@ -125,7 +125,7 @@ const csCZGrid = {
   columnMenuManageColumns: 'Spravovat sloupce',
   columnMenuFilter: 'Filtr',
   columnMenuHideColumn: 'Skrýt',
-  columnMenuUnsort: 'Zrušit filtry',
+  columnMenuUnsort: 'Zrušit řazení',
   columnMenuSortAsc: 'Seřadit vzestupně',
   columnMenuSortDesc: 'Seřadit sestupně',
   // columnMenuManagePivot: 'Manage pivot',
@@ -142,7 +142,7 @@ const csCZGrid = {
     return `${count} ${pluralForm}`;
   },
   columnHeaderFiltersLabel: 'Zobrazit filtry',
-  columnHeaderSortIconLabel: 'Filtrovat',
+  columnHeaderSortIconLabel: 'Řadit',
   // Rows selected footer text
   footerRowSelected: count => {
     let pluralForm = 'vybraných záznamů';

package/esm/locales/ukUA.js

@@ -188,19 +188,19 @@ const ukUAGrid = {
   collapseDetailPanel: 'Приховати',
   // Pagination
   paginationRowsPerPage: 'Рядків на сторінці:',
-  // paginationDisplayedRows: ({
-  //   from,
-  //   to,
-  //   count,
-  //   estimated
-  // }) => {
-  //   const unknownRowCount = count == null || count === -1;
-  //   if (!estimated) {
-  //     return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`;
-  //   }
-  //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`;
-  // },
+  paginationDisplayedRows: ({
+    from,
+    to,
+    count,
+    estimated
+  }) => {
+    const unknownRowCount = count == null || count === -1;
+    if (!estimated) {
+      return `${from}–${to} з ${!unknownRowCount ? count : `більше ніж ${to}`}`;
+    }
+    const estimatedLabel = estimated && estimated > to ? `близько ${estimated}` : `більше ніж ${to}`;
+    return `${from}–${to} з ${!unknownRowCount ? count : estimatedLabel}`;
+  },
   paginationItemAriaLabel: type => {
     if (type === 'first') {
       return 'Перейти на першу сторінку';

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/esm/utils/utils.d.ts

@@ -4,8 +4,8 @@ export declare function isObject<TObject = Record<PropertyKey, any>>(value: unkn
 export declare function localStorageAvailable(): boolean;
 export declare function escapeRegExp(value: string): string;
 /**
- * Follows the CSS specification behavior for min and max
- * If min > max, then the min have priority
+ * Follows the CSS specification behavior for min and max.
+ * If min > max, then min has priority.
  */
 export declare const clamp: (value: number, min: number, max: number) => number;
 /**

package/esm/utils/utils.js

@@ -25,8 +25,8 @@ export function escapeRegExp(value) {
 }
 
 /**
- * Follows the CSS specification behavior for min and max
- * If min > max, then the min have priority
+ * Follows the CSS specification behavior for min and max.
+ * If min > max, then min has priority.
  */
 export const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
 

package/hooks/features/columns/gridColumnsSelector.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisibleColumnFieldsSelector = exports.gridVisibleColumnDefinitionsSelector = exports.gridPinnedColumnsSelector = exports.gridInitialColumnVisibilityModelSelector = exports.gridHasColSpanSelector = exports.gridFilterableColumnLookupSelector = exports.gridFilterableColumnDefinitionsSelector = exports.gridExistingPinnedColumnSelector = exports.gridColumnsStateSelector = exports.gridColumnVisibilityModelSelector = exports.gridColumnPositionsSelector = exports.gridColumnLookupSelector = exports.gridColumnFieldsSelector = exports.gridColumnDefinitionsSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 var _gridColumnsInterfaces = require("./gridColumnsInterfaces");
-var _gridCoreSelector = require("../../core/gridCoreSelector");
 var _listView = require("../listView");
 /**
  * Get the columns state
@@ -70,24 +69,24 @@ const gridPinnedColumnsSelector = exports.gridPinnedColumnsSelector = (0, _creat
  * @category Pinned Columns
  * @ignore - Do not document
  */
-const gridExistingPinnedColumnSelector = exports.gridExistingPinnedColumnSelector = (0, _createSelector.createSelectorMemoized)(gridPinnedColumnsSelector, gridColumnFieldsSelector, _gridCoreSelector.gridIsRtlSelector, (model, orderedFields, isRtl) => filterMissingColumns(model, orderedFields, isRtl));
+const gridExistingPinnedColumnSelector = exports.gridExistingPinnedColumnSelector = (0, _createSelector.createSelectorMemoized)(gridPinnedColumnsSelector, gridColumnFieldsSelector, (model, orderedFields) => filterMissingColumns(model, orderedFields));
 
 /**
  * Get the visible pinned columns.
  * @category Visible Columns
  */
-const gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisiblePinnedColumnDefinitionsSelector = (0, _createSelector.createSelectorMemoized)(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, _gridCoreSelector.gridIsRtlSelector, _listView.gridListViewSelector, (columnsState, model, visibleColumnFields, isRtl, listView) => {
+const gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisiblePinnedColumnDefinitionsSelector = (0, _createSelector.createSelectorMemoized)(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, _listView.gridListViewSelector, (columnsState, model, visibleColumnFields, listView) => {
   if (listView) {
     return _gridColumnsInterfaces.EMPTY_PINNED_COLUMN_FIELDS;
   }
-  const visiblePinnedFields = filterMissingColumns(model, visibleColumnFields, isRtl);
+  const visiblePinnedFields = filterMissingColumns(model, visibleColumnFields);
   const visiblePinnedColumns = {
     left: visiblePinnedFields.left.map(field => columnsState.lookup[field]),
     right: visiblePinnedFields.right.map(field => columnsState.lookup[field])
   };
   return visiblePinnedColumns;
 });
-function filterMissingColumns(pinnedColumns, columns, invert) {
+function filterMissingColumns(pinnedColumns, columns) {
   if (!Array.isArray(pinnedColumns.left) && !Array.isArray(pinnedColumns.right)) {
     return _gridColumnsInterfaces.EMPTY_PINNED_COLUMN_FIELDS;
   }
@@ -101,16 +100,8 @@ function filterMissingColumns(pinnedColumns, columns, invert) {
     return newPinnedColumns.filter(field => remainingColumns.includes(field));
   };
   const leftPinnedColumns = filter(pinnedColumns.left, columns);
-  const columnsWithoutLeftPinnedColumns = columns.filter(
-  // Filter out from the remaining columns those columns already pinned to the left
-  field => !leftPinnedColumns.includes(field));
+  const columnsWithoutLeftPinnedColumns = columns.filter(field => !leftPinnedColumns.includes(field));
   const rightPinnedColumns = filter(pinnedColumns.right, columnsWithoutLeftPinnedColumns);
-  if (invert) {
-    return {
-      left: rightPinnedColumns,
-      right: leftPinnedColumns
-    };
-  }
   return {
     left: leftPinnedColumns,
     right: rightPinnedColumns

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,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
       return undefined;
     }
     if (props.dataSource) {
+      stopPolling();
       apiRef.current.setRows([]);
       apiRef.current.dataSource.cache.clear();
       apiRef.current.dataSource.fetchRows();
@@ -218,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
@@ -230,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 v9.0.0-alpha.0
+ * @mui/x-data-grid v9.0.0-alpha.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/locales/csCZ.js

@@ -131,7 +131,7 @@ const csCZGrid = {
   columnMenuManageColumns: 'Spravovat sloupce',
   columnMenuFilter: 'Filtr',
   columnMenuHideColumn: 'Skrýt',
-  columnMenuUnsort: 'Zrušit filtry',
+  columnMenuUnsort: 'Zrušit řazení',
   columnMenuSortAsc: 'Seřadit vzestupně',
   columnMenuSortDesc: 'Seřadit sestupně',
   // columnMenuManagePivot: 'Manage pivot',
@@ -148,7 +148,7 @@ const csCZGrid = {
     return `${count} ${pluralForm}`;
   },
   columnHeaderFiltersLabel: 'Zobrazit filtry',
-  columnHeaderSortIconLabel: 'Filtrovat',
+  columnHeaderSortIconLabel: 'Řadit',
   // Rows selected footer text
   footerRowSelected: count => {
     let pluralForm = 'vybraných záznamů';

package/locales/ukUA.js

@@ -194,19 +194,19 @@ const ukUAGrid = {
   collapseDetailPanel: 'Приховати',
   // Pagination
   paginationRowsPerPage: 'Рядків на сторінці:',
-  // paginationDisplayedRows: ({
-  //   from,
-  //   to,
-  //   count,
-  //   estimated
-  // }) => {
-  //   const unknownRowCount = count == null || count === -1;
-  //   if (!estimated) {
-  //     return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`;
-  //   }
-  //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`;
-  // },
+  paginationDisplayedRows: ({
+    from,
+    to,
+    count,
+    estimated
+  }) => {
+    const unknownRowCount = count == null || count === -1;
+    if (!estimated) {
+      return `${from}–${to} з ${!unknownRowCount ? count : `більше ніж ${to}`}`;
+    }
+    const estimatedLabel = estimated && estimated > to ? `близько ${estimated}` : `більше ніж ${to}`;
+    return `${from}–${to} з ${!unknownRowCount ? count : estimatedLabel}`;
+  },
   paginationItemAriaLabel: type => {
     if (type === 'first') {
       return 'Перейти на першу сторінку';

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": "9.0.0-alpha.0",
+  "version": "9.0.0-alpha.1",
   "author": "MUI Team",
   "description": "The Community plan edition of the MUI X Data Grid components.",
   "license": "MIT",
@@ -65,11 +65,13 @@
     "node": ">=14.0.0"
   },
   "type": "commonjs",
-  "main": "./index.js",
-  "types": "./index.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
+      "import": {
+        "types": "./esm/index.d.ts",
+        "default": "./esm/index.js"
+      },
       "require": {
         "types": "./index.d.ts",
         "default": "./index.js"
@@ -80,6 +82,10 @@
       }
     },
     "./*": {
+      "import": {
+        "types": "./esm/*/index.d.ts",
+        "default": "./esm/*/index.js"
+      },
       "require": {
         "types": "./*/index.d.ts",
         "default": "./*/index.js"
@@ -90,5 +96,7 @@
       }
     },
     "./esm": null
-  }
+  },
+  "main": "./index.js",
+  "types": "./index.d.ts"
 }

package/utils/utils.d.ts

@@ -4,8 +4,8 @@ export declare function isObject<TObject = Record<PropertyKey, any>>(value: unkn
 export declare function localStorageAvailable(): boolean;
 export declare function escapeRegExp(value: string): string;
 /**
- * Follows the CSS specification behavior for min and max
- * If min > max, then the min have priority
+ * Follows the CSS specification behavior for min and max.
+ * If min > max, then min has priority.
  */
 export declare const clamp: (value: number, min: number, max: number) => number;
 /**

package/utils/utils.js

@@ -41,8 +41,8 @@ function escapeRegExp(value) {
 }
 
 /**
- * Follows the CSS specification behavior for min and max
- * If min > max, then the min have priority
+ * Follows the CSS specification behavior for min and max.
+ * If min > max, then min has priority.
  */
 const clamp = (value, min, max) => Math.max(min, Math.min(max, value));