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

package/CHANGELOG.md

@@ -1,13 +1,212 @@
 # Changelog
 
-> For full v8 changelog, please refer to the [v.8x branch](https://github.com/mui/mui-x/blob/v8.x/CHANGELOG.md).
+## 9.0.0-alpha.0
 
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+_Feb 16, 2026_
 
-## v8.27.1
+We'd like to extend a big thank you to the 21 contributors who made this release possible. Here are some highlights ✨:
+
+- Add support for virtualized items on `<RichTreeViewPro />`:
+
+  ```tsx
+  <RichTreeViewPro items={ITEMS} virtualization itemHeight={48} />
+  ```
+
+- Add Thai (`thTH`) locale on the Data Grid and the Date and Time Pickers (#21116) @siriwatknp
+- Add a new `AdapterDayjsBuddhist` adapter for Date and Time Pickers (#20984) @siriwatknp
+- Add support for virtualization in the rich tree view (#20780) @flaviendelangle
+- Add WebGL renderer to Heatmap (#20756) @bernardobelchior
+
+Special thanks go out to these community members for their valuable contributions:
+@jhe-iqbis
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @brijeshb42, @cherniavskii, @dav-is, @flaviendelangle, @Janpot, @JCQuintas, @mapache-salvaje, @MBilalShafi, @michelengelen, @mj12albert, @noraleonte, @oliviertassinari, @rita-codes, @romgrk, @sai6855, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.0.0-alpha.0`
+
+- [DataGrid] Update default `logicOperator` behavior in filtering docs (#21098) @michelengelen
+- [DataGrid] Add `thTH` locale (#21116) @siriwatknp
+- [DataGrid] Fix initial filter value state in CustomMultiValueOperator demo (#21217) @sai6855
+
+#### `@mui/x-data-grid-pro@9.0.0-alpha.0` [![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.0`, plus:
+
+- [DataGridPro] Cleanup outdated rows on `dataSource` reference update (#21138) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@9.0.0-alpha.0` [![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.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.0.0-alpha.0`
+
+- [pickers] Add `AdapterDayjsBuddhist` adapter (#20984) @siriwatknp
+- [pickers] Add `thTH` locale (#21116) @siriwatknp
+
+#### `@mui/x-date-pickers-pro@9.0.0-alpha.0` [![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.0`.
+
+### Charts
+
+#### `@mui/x-charts@9.0.0-alpha.0`
+
+- [charts] Add Legend actions (#20404) @JCQuintas
+- [charts] Add `Chart` suffix to MUI Classes (#21042) @JCQuintas
+- [charts] Add `axesGap` props to put space between axes (#20904) @alexfauquette
+- [charts] Add `cleanIdentifier` function to charts series instance (#20832) @JCQuintas
+- [charts] Add `initialHiddenItems` prop to set initial state (#20894) @JCQuintas
+- [charts] Add `useXAxisCoordinates` and `useYAxisCoordinates` hooks (#20972) @bernardobelchior
+- [charts] Add axis slots and expose axis ticks hooks (#20935) @bernardobelchior
+- [charts] Change `line` legend marker to be a line (#21059) @JCQuintas
+- [charts] Codemod test pattern with function (#21111) @JCQuintas
+- [charts] Control the item tooltip (#20617) @alexfauquette
+- [charts] Enable keyboard navigation in radar chart (#20765) @alexfauquette
+- [charts] Export `CartesianChartSeriesType` and `StackableChartSeriesType` (#21012) @bernardobelchior
+- [charts] Export plugins from premium (#20866) @JCQuintas
+- [charts] Filter hidden series from axis tooltip (#21273) @Copilot
+- [charts] Filter hidden series from axis tooltip (#21273) @Copilot
+- [charts] Fix rename `getSVGPoint` to `getChartPoint` (#21335) @bernardobelchior
+- [charts] Fix cleanup function in useChartInteractionListener to correctly remove event listeners with options (#21218) @sai6855
+- [charts] Fix import rename in codemod (#21112) @JCQuintas
+- [charts] Fix multiple exports of `HighlightScope` (#21270) @bernardobelchior
+- [charts] Fix test inconsistency in charts (#20907) @JCQuintas
+- [charts] Fix tooltip position for stacked line series (#20901) @alexfauquette
+- [charts] Make Highlight scope a generic (#21189) @alexfauquette
+- [charts] Make `LegendItemParams.type` required (#21003) @alexfauquette
+- [charts] Make `seriesId` a string only (#20997) @alexfauquette
+- [charts] Make the `useChartRootRef` support typing parameter (#21023) @alexfauquette
+- [charts] Memoize HeatmapItem to avoid re-render when fading/highlighting (#20865) @bernardobelchior
+- [charts] Move axis id to `data-axis-id` attribute instead of class (#21037) @JCQuintas
+- [charts] Move `cleanIdentifier` and `serializeIdentifier` instance methods to `useChartSeriesConfig` plugin (#21025) @JCQuintas
+- [charts] Move `seriesConfig` to `useChartSeriesConfig` plugin (#21004) @JCQuintas
+- [charts] Move element refs to `useChartElementRef` plugin (#21099) @JCQuintas
+- [charts] Move types related to `seriesConfig` into the `useChartSeriesConfig` plugin folder (#21026) @JCQuintas
+- [charts] Remove `data-has-focused-item` from `ChartsSurface` (#21255) @bernardobelchior
+- [charts] Remove default generic of item identifiers (#21182) @alexfauquette
+- [charts] Remove deprecated `id` from `LegendItemParams` (#21055) @alexfauquette
+- [charts] Remove deprecated `ChartApi` export from `ChartContainer` (#20975) @JCQuintas
+- [charts] Remove deprecated `useAxisTooltip` in favor of `useAxesTooltip` (#20962) @Copilot
+- [charts] Remove deprecated series type helpers and functions (#20998) @alexfauquette
+- [charts] Rename `ChartContainer` to `ChartsContainer` (#21173) @JCQuintas
+- [charts] Rename `getSVGPoint` to `getChartPoint` (#21322) @bernardobelchior
+- [charts] Rename `TickItemType` to `TickItem` (#21008) @bernardobelchior
+- [charts] Replace props `id` by `seriesId` when necessary (#21057) @alexfauquette
+- [charts] Revert `touch-action: pan-y` removal when zoom is disabled (#20852) @bernardobelchior
+- [charts] The `useXxxSeries([])` return empty array (#21001) @alexfauquette
+- [charts] Use `NumberValue` in domain limit function (#21054) @JCQuintas
+
+#### `@mui/x-charts-pro@9.0.0-alpha.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 
-<!-- generated comparing v8.27.0..v8.x -->
+Same changes as in `@mui/x-charts@9.0.0-alpha.0`, plus:
+
+- [charts-pro] Add border radius to heatmap (#20931) @bernardobelchior
+- [charts-pro] Add keyboard navigation to funnel (#20766) @alexfauquette
+- [charts-pro] Add keyboard navigation to heatmap (#20786) @alexfauquette
+- [charts-pro] Add keyboard navigation to sankey (#20777) @alexfauquette
+- [charts-pro] Fix Heatmap's `onItemClick` not triggering (#21016) @bernardobelchior
+- [charts-pro] Fix crash when two same-direction axes have a zoom preview (#20916) @bernardobelchior
+- [charts-pro] Handle edge case in export image (#21190) @bernardobelchior
+- [charts-pro] Prefer global pointer interaction tracker in Heatmap (#20697) @bernardobelchior
+- [charts-pro] Support composition for Sankey (#20604) @alexfauquette
+- [charts-pro] Update Heatmap identifier (#21124) @alexfauquette
+- [charts-pro] Update default value of `hideLegend` prop in `Heatmap` (#20961) @Copilot
+
+#### `@mui/x-charts-premium@9.0.0-alpha.0` [![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.0`, plus:
+
+- [charts-premium] Add WebGL renderer to Heatmap (#20756) @bernardobelchior
+- [charts-premium] Add `ChartContainerPremium` (#20910) @bernardobelchior
+- [charts-premium] Add `HeatmapPremium` (#20930) @bernardobelchior
+- [charts-premium] Add keyboard navigation to range-bar (#21272) @alexfauquette
+- [charts-premium] Extract `HeatmapSVGPlot` from `HeatmapPlot` component (#21015) @bernardobelchior
+- [charts-premium] Fix `ChartDataProviderPremium` tests (#20868) @bernardobelchior
+- [charts-premium] Fix links in comments for chart containers and data providers (#21105) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@9.0.0-alpha.0`
+
+_No changes._
+
+#### `@mui/x-tree-view-pro@9.0.0-alpha.0` [![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.0`, plus:
+
+- [RichTreeViewPro] Add support for virtualization (#20780) @flaviendelangle
+
+### Codemod
+
+#### `@mui/x-codemod@9.0.0-alpha.0`
+
+- [codemod] Document and Clean the codemod utils (#21014) @alexfauquette
+
+### Docs
+
+- [docs] Add focus highlight in composition snipets (#20614) @alexfauquette
+- [docs] Add simple candlestick chart demo (#20912) @bernardobelchior
+- [docs] Fix Waterfall Chart documentation badge from Pro to Premium (#20888) @Copilot
+- [docs] Fix broken links on Data Grid Editing sub-pages (#20911) @arminmeh
+- [docs] Fix docs API for HeatmapPremium (#21137) @alexfauquette
+- [docs] Fix horizontal overflow in heatmap docs (#20968) @bernardobelchior
+- [docs] Move Range Bar Chart to existing charts (#21120) @bernardobelchior
+- [docs] Prepare the scheduler doc for the alpha (#21268) @flaviendelangle
+- [docs] Rewording of the heatmap item click (#20987) @alexfauquette
+- [scheduler][docs] Create the Quickstart page (#20913) @flaviendelangle
+- [charts][docs] Revise the Charts CSP doc (#20906) @mapache-salvaje
+- [charts][docs] Revise the Charts Composition doc (#20032) @mapache-salvaje
+- [charts][docs] Revise the Charts Hooks Overview doc (#20921) @mapache-salvaje
+- [charts][docs] Revise the Charts Legend doc (#20821) @mapache-salvaje
+- [charts][docs] Revise the Charts Localization doc (#20800) @mapache-salvaje
+- [charts][docs] Revise the Charts Plugins doc (#20933) @mapache-salvaje
+- [charts][docs] Revise the Charts Stacking doc (#20830) @mapache-salvaje
+- [charts][docs] Revise the Charts Styling doc (#20835) @mapache-salvaje
+- [charts][docs] Revise the Charts Toolbar doc (#20867) @mapache-salvaje
+- [charts][docs] Revise the Charts Tooltip doc (#20869) @mapache-salvaje
+- [charts][docs] Revise the Charts Zoom and Pan doc (#20893) @mapache-salvaje
+- [DataGrid][docs] Add a recipe for handling long text cell (#20754) @siriwatknp
+- [DataGrid][docs] Add high-level competitor comparison to Overview doc (DX-117) (#20870) @mapache-salvaje
+- [DataGrid][docs] Remove Bundling section from quickstart (#21177) @MBilalShafi
+
+### Core
+
+- [code-infra] Add `MUI_TEST_ENV` global (#21187) @Janpot
+- [code-infra] Fix `material-ui/disallow-react-api-in-server-components` (#20909) @JCQuintas
+- [code-infra] Fix `renameImports` codemod not preserving comments (#20977) @JCQuintas
+- [code-infra] Fix the label comparison to use lower case (#20934) @brijeshb42
+- [code-infra] Github action to sync title and label (#20922) @brijeshb42
+- [code-infra] Ignore scheduler demo with random data (#20982) @JCQuintas
+- [code-infra] Improve `codemod` testing setup (#20981) @JCQuintas
+- [code-infra] Only ignore renovate[bot] in changelog generation script (#21185) @bernardobelchior
+- [code-infra] Prepare for v9 (#20860) @JCQuintas
+- [code-infra] Set `rasterizehtml` version in pnpm catalog (#21175) @bernardobelchior
+- [code-infra] Update codeowners (#20886) @JCQuintas
+- [code-infra] V9 preparation (#20928) @JCQuintas
+- [code-infra] eslint rule rename (#21172) @Janpot
+- [code-infra][docs] V9 charts migration doc kickoff (#20973) @JCQuintas
+- [docs-infra] Add Cookie Banner and Analytics Provider (#21228) @dav-is
+- [docs-infra] Fix missing slots section on API page (#20915) @Janpot
+- [docs-infra] Fix two broken links (#20914) @Janpot
+- [docs-infra] Port demo changes (#20971) @Janpot
+- [internal] Add information about codemods to AGENTS.md (#21011) @bernardobelchior
+- [internal] Fix codemod versioning instructions in `AGENTS.md` (#21024) @bernardobelchior
+- [internal] Fix missing generated props in master (#21142) @bernardobelchior
+- [internal] Headless sorting plugin (#21089) @arminmeh
+- [internal] Remove duplicate code (#20896) @oliviertassinari
+
+### Miscellaneous
+
+- Bump next to ^15.5.11 (#21171) @Copilot
+- [core] Fix CI (#21223) @flaviendelangle
+- [PoC] Headless data grid (#20645) @cherniavskii
+
+## v8.27.1
 
 _Feb 13, 2026_
 

package/components/GridPagination.js

@@ -34,14 +34,15 @@ function GridPagination() {
     paginationMode,
     loading
   } = rootProps;
-  const disabled = rowCount === -1 && paginationMode === 'server' && loading;
+  const unknownRowCount = rowCount == null || rowCount === -1;
+  const disabled = unknownRowCount && paginationMode === 'server' && loading;
   const lastPage = React.useMemo(() => Math.max(0, pageCount - 1), [pageCount]);
   const computedPage = React.useMemo(() => {
-    if (rowCount === -1) {
+    if (unknownRowCount) {
       return paginationModel.page;
     }
     return paginationModel.page <= lastPage ? paginationModel.page : lastPage;
-  }, [lastPage, paginationModel.page, rowCount]);
+  }, [lastPage, paginationModel.page, unknownRowCount]);
   const handlePageSizeChange = React.useCallback(pageSize => {
     apiRef.current.setPageSize(pageSize);
   }, [apiRef]);
@@ -73,7 +74,7 @@ function GridPagination() {
   const pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize) ? rootProps.pageSizeOptions : [];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPaginationRoot, (0, _extends2.default)({
     as: rootProps.slots.basePagination,
-    count: rowCount,
+    count: rowCount ?? -1,
     page: computedPage,
     rowsPerPageOptions: pageSizeOptions,
     rowsPerPage: paginationModel.pageSize,

package/components/virtualization/GridVirtualScrollbar.js

@@ -9,11 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.scrollbarSizeCssExpression = exports.ScrollbarCorner = exports.GridVirtualScrollbar = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
-var _useOnMount = require("../../hooks/utils/useOnMount");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _hooks = require("../../hooks");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -91,64 +88,16 @@ const ScrollbarCorner = exports.ScrollbarCorner = (0, _styles.styled)(Scrollbar,
 const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forwardRef)(function GridVirtualScrollbar(props, ref) {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const isLocked = React.useRef(false);
-  const lastPosition = React.useRef(0);
-  const scrollbarRef = React.useRef(null);
   const classes = useUtilityClasses(rootProps, props.position);
   const dimensions = (0, _hooks.useGridSelector)(apiRef, _hooks.gridDimensionsSelector);
   const propertyDimension = props.position === 'vertical' ? 'height' : 'width';
-  const propertyScroll = props.position === 'vertical' ? 'scrollTop' : 'scrollLeft';
-  const propertyScrollPosition = props.position === 'vertical' ? 'top' : 'left';
   const scrollbarInnerSize = props.position === 'horizontal' ? dimensions.minimumSize.width : dimensions.minimumSize.height - dimensions.headersTotalHeight;
-  const onScrollerScroll = (0, _useEventCallback.default)(() => {
-    const scrollbar = scrollbarRef.current;
-    const scrollPosition = props.scrollPosition.current;
-    if (!scrollbar) {
-      return;
-    }
-    if (scrollPosition[propertyScrollPosition] === lastPosition.current) {
-      return;
-    }
-    lastPosition.current = scrollPosition[propertyScrollPosition];
-    if (isLocked.current) {
-      isLocked.current = false;
-      return;
-    }
-    isLocked.current = true;
-    scrollbar[propertyScroll] = props.scrollPosition.current[propertyScrollPosition];
-  });
-  const onScrollbarScroll = (0, _useEventCallback.default)(() => {
-    const scroller = apiRef.current.virtualScrollerRef.current;
-    const scrollbar = scrollbarRef.current;
-    if (!scrollbar) {
-      return;
-    }
-    if (isLocked.current) {
-      isLocked.current = false;
-      return;
-    }
-    isLocked.current = true;
-    scroller[propertyScroll] = scrollbar[propertyScroll];
-  });
-  (0, _useOnMount.useOnMount)(() => {
-    const scroller = apiRef.current.virtualScrollerRef.current;
-    const scrollbar = scrollbarRef.current;
-    const options = {
-      passive: true
-    };
-    scroller.addEventListener('scroll', onScrollerScroll, options);
-    scrollbar.addEventListener('scroll', onScrollbarScroll, options);
-    return () => {
-      scroller.removeEventListener('scroll', onScrollerScroll, options);
-      scrollbar.removeEventListener('scroll', onScrollbarScroll, options);
-    };
-  });
   const Container = props.position === 'vertical' ? ScrollbarVertical : ScrollbarHorizontal;
   const scrollbarInnerStyle = React.useMemo(() => ({
     [propertyDimension]: `${scrollbarInnerSize}px`
   }), [propertyDimension, scrollbarInnerSize]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
-    ref: (0, _useForkRef.default)(ref, scrollbarRef),
+    ref: ref,
     className: classes.root,
     tabIndex: -1,
     "aria-hidden": "true"

package/constants/localeTextConstants.js

@@ -171,11 +171,12 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
     count,
     estimated
   }) => {
+    const unknownRowCount = count == null || count === -1;
     if (!estimated) {
-      return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
+      return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`;
     }
     const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-    return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
+    return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`;
   },
   paginationItemAriaLabel: type => {
     if (type === 'first') {

package/esm/components/GridPagination.js

@@ -27,14 +27,15 @@ function GridPagination() {
     paginationMode,
     loading
   } = rootProps;
-  const disabled = rowCount === -1 && paginationMode === 'server' && loading;
+  const unknownRowCount = rowCount == null || rowCount === -1;
+  const disabled = unknownRowCount && paginationMode === 'server' && loading;
   const lastPage = React.useMemo(() => Math.max(0, pageCount - 1), [pageCount]);
   const computedPage = React.useMemo(() => {
-    if (rowCount === -1) {
+    if (unknownRowCount) {
       return paginationModel.page;
     }
     return paginationModel.page <= lastPage ? paginationModel.page : lastPage;
-  }, [lastPage, paginationModel.page, rowCount]);
+  }, [lastPage, paginationModel.page, unknownRowCount]);
   const handlePageSizeChange = React.useCallback(pageSize => {
     apiRef.current.setPageSize(pageSize);
   }, [apiRef]);
@@ -66,7 +67,7 @@ function GridPagination() {
   const pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize) ? rootProps.pageSizeOptions : [];
   return /*#__PURE__*/_jsx(GridPaginationRoot, _extends({
     as: rootProps.slots.basePagination,
-    count: rowCount,
+    count: rowCount ?? -1,
     page: computedPage,
     rowsPerPageOptions: pageSizeOptions,
     rowsPerPage: paginationModel.pageSize,

package/esm/components/virtualization/GridVirtualScrollbar.js

@@ -2,11 +2,8 @@
 
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import useEventCallback from '@mui/utils/useEventCallback';
-import useForkRef from '@mui/utils/useForkRef';
 import composeClasses from '@mui/utils/composeClasses';
 import { forwardRef } from '@mui/x-internals/forwardRef';
-import { useOnMount } from "../../hooks/utils/useOnMount.js";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
 import { gridDimensionsSelector, useGridSelector } from "../../hooks/index.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
@@ -84,64 +81,16 @@ export const ScrollbarCorner = styled(Scrollbar, {
 const GridVirtualScrollbar = forwardRef(function GridVirtualScrollbar(props, ref) {
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
-  const isLocked = React.useRef(false);
-  const lastPosition = React.useRef(0);
-  const scrollbarRef = React.useRef(null);
   const classes = useUtilityClasses(rootProps, props.position);
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const propertyDimension = props.position === 'vertical' ? 'height' : 'width';
-  const propertyScroll = props.position === 'vertical' ? 'scrollTop' : 'scrollLeft';
-  const propertyScrollPosition = props.position === 'vertical' ? 'top' : 'left';
   const scrollbarInnerSize = props.position === 'horizontal' ? dimensions.minimumSize.width : dimensions.minimumSize.height - dimensions.headersTotalHeight;
-  const onScrollerScroll = useEventCallback(() => {
-    const scrollbar = scrollbarRef.current;
-    const scrollPosition = props.scrollPosition.current;
-    if (!scrollbar) {
-      return;
-    }
-    if (scrollPosition[propertyScrollPosition] === lastPosition.current) {
-      return;
-    }
-    lastPosition.current = scrollPosition[propertyScrollPosition];
-    if (isLocked.current) {
-      isLocked.current = false;
-      return;
-    }
-    isLocked.current = true;
-    scrollbar[propertyScroll] = props.scrollPosition.current[propertyScrollPosition];
-  });
-  const onScrollbarScroll = useEventCallback(() => {
-    const scroller = apiRef.current.virtualScrollerRef.current;
-    const scrollbar = scrollbarRef.current;
-    if (!scrollbar) {
-      return;
-    }
-    if (isLocked.current) {
-      isLocked.current = false;
-      return;
-    }
-    isLocked.current = true;
-    scroller[propertyScroll] = scrollbar[propertyScroll];
-  });
-  useOnMount(() => {
-    const scroller = apiRef.current.virtualScrollerRef.current;
-    const scrollbar = scrollbarRef.current;
-    const options = {
-      passive: true
-    };
-    scroller.addEventListener('scroll', onScrollerScroll, options);
-    scrollbar.addEventListener('scroll', onScrollbarScroll, options);
-    return () => {
-      scroller.removeEventListener('scroll', onScrollerScroll, options);
-      scrollbar.removeEventListener('scroll', onScrollbarScroll, options);
-    };
-  });
   const Container = props.position === 'vertical' ? ScrollbarVertical : ScrollbarHorizontal;
   const scrollbarInnerStyle = React.useMemo(() => ({
     [propertyDimension]: `${scrollbarInnerSize}px`
   }), [propertyDimension, scrollbarInnerSize]);
   return /*#__PURE__*/_jsx(Container, {
-    ref: useForkRef(ref, scrollbarRef),
+    ref: ref,
     className: classes.root,
     tabIndex: -1,
     "aria-hidden": "true"

package/esm/constants/localeTextConstants.js

@@ -165,11 +165,12 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
     count,
     estimated
   }) => {
+    const unknownRowCount = count == null || count === -1;
     if (!estimated) {
-      return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
+      return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`;
     }
     const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-    return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
+    return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`;
   },
   paginationItemAriaLabel: type => {
     if (type === 'first') {

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

@@ -203,6 +203,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
       return undefined;
     }
     if (props.dataSource) {
+      apiRef.current.setRows([]);
       apiRef.current.dataSource.cache.clear();
       apiRef.current.dataSource.fetchRows();
     }

package/esm/hooks/features/pagination/gridPaginationUtils.js

@@ -5,7 +5,7 @@ export const getPageCount = (rowCount, pageSize, page) => {
   if (pageSize > 0 && rowCount > 0) {
     return Math.ceil(rowCount / pageSize);
   }
-  if (rowCount === -1) {
+  if (rowCount === -1 || rowCount == null) {
     // With unknown row-count, we can assume a page after the current one
     return page + 2;
   }

package/esm/hooks/features/pagination/useGridRowCount.js

@@ -11,10 +11,11 @@ import { gridPaginationRowCountSelector, gridPaginationMetaSelector, gridPaginat
 export const useGridRowCount = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridRowCount');
   const previousPageSize = useLazyRef(() => gridPaginationModelSelector(apiRef).pageSize);
+  const onRowCountChangeProp = props.onRowCountChange;
   apiRef.current.registerControlState({
     stateId: 'paginationRowCount',
     propModel: props.rowCount,
-    propOnChange: props.onRowCountChange,
+    propOnChange: onRowCountChangeProp,
     stateSelector: gridPaginationRowCountSelector,
     changeEvent: 'rowCountChange'
   });
@@ -28,12 +29,26 @@ export const useGridRowCount = (apiRef, props) => {
       return;
     }
     logger.debug("Setting 'rowCount' to", newRowCount);
+    if (rowCountState == null || rowCountState === -1) {
+      const newState = _extends({}, apiRef.current.state, {
+        pagination: _extends({}, apiRef.current.state.pagination, {
+          rowCount: newRowCount
+        })
+      });
+      apiRef.current.state = newState;
+      apiRef.current.store.update(newState);
+      apiRef.current.publishEvent('rowCountChange', newRowCount);
+      if (onRowCountChangeProp) {
+        onRowCountChangeProp(newRowCount);
+      }
+      return;
+    }
     apiRef.current.setState(state => _extends({}, state, {
       pagination: _extends({}, state.pagination, {
         rowCount: newRowCount
       })
     }));
-  }, [apiRef, logger]);
+  }, [apiRef, logger, onRowCountChangeProp]);
   const paginationRowCountApi = {
     setRowCount
   };
@@ -110,7 +125,8 @@ export const useGridRowCount = (apiRef, props) => {
     }
     return undefined;
   }, (_, isLastPageOrRowCount) => {
-    if (isLastPageOrRowCount === true && gridPaginationRowCountSelector(apiRef) !== -1) {
+    const rowCount = gridPaginationRowCountSelector(apiRef);
+    if (isLastPageOrRowCount === true && (rowCount == null || rowCount === -1)) {
       const visibleTopLevelRowCount = gridFilteredTopLevelRowCountSelector(apiRef);
       const paginationModel = gridPaginationModelSelector(apiRef);
       apiRef.current.setRowCount(paginationModel.pageSize * paginationModel.page + visibleTopLevelRowCount);

package/esm/index.js

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

package/esm/internals/utils/propValidation.js

@@ -1,7 +1,7 @@
 import { warnOnce } from '@mui/x-internals/warning';
 import { isNumber } from "../../utils/utils.js";
 import { GridSignature } from "../../constants/signature.js";
-export const propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined, props => props.paginationMode === 'client' && props.paginationMeta != null && ['MUI X: Usage of the `paginationMeta` prop with client-side pagination (`paginationMode="client"`) has no effect.', '`paginationMeta` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.signature === GridSignature.DataGrid && props.paginationMode === 'client' && isNumber(props.rowCount) && ['MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect.', '`rowCount` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.paginationMode === 'server' && props.rowCount == null && !props.dataSource && ["MUI X: The `rowCount` prop must be passed using `paginationMode='server'`", 'For more detail, see http://mui.com/components/data-grid/pagination/#index-based-pagination'].join('\n') || undefined];
+export const propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined, props => props.paginationMode === 'client' && props.paginationMeta != null && ['MUI X: Usage of the `paginationMeta` prop with client-side pagination (`paginationMode="client"`) has no effect.', '`paginationMeta` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.signature === GridSignature.DataGrid && props.paginationMode === 'client' && isNumber(props.rowCount) && ['MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect.', '`rowCount` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.paginationMode === 'server' && props.rowCount == null && !props.dataSource && !props.paginationMeta && ["MUI X: The `rowCount` prop must be passed using `paginationMode='server'`", 'For more detail, see http://mui.com/components/data-grid/pagination/#index-based-pagination'].join('\n') || undefined];
 export function validateProps(props, validators) {
   validators.forEach(validator => {
     const message = validator(props);

package/esm/locales/beBY.js

@@ -196,11 +196,12 @@ const beBYGrid = {
   //   count,
   //   estimated
   // }) => {
+  //   const unknownRowCount = count == null || count === -1;
   //   if (!estimated) {
-  //     return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
+  //     return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`;
   //   }
   //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
+  //   return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`;
   // },
   paginationItemAriaLabel: type => {
     if (type === 'first') {

package/esm/locales/bgBG.js

@@ -173,11 +173,12 @@ const bgBGGrid = {
   //   count,
   //   estimated
   // }) => {
+  //   const unknownRowCount = count == null || count === -1;
   //   if (!estimated) {
-  //     return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
+  //     return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`;
   //   }
   //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
+  //   return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`;
   // },
   paginationItemAriaLabel: type => {
     if (type === 'first') {

package/esm/locales/bnBD.js

@@ -172,11 +172,12 @@ const bnBDGrid = {
   //   count,
   //   estimated
   // }) => {
+  //   const unknownRowCount = count == null || count === -1;
   //   if (!estimated) {
-  //     return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
+  //     return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`;
   //   }
   //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
+  //   return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`;
   // },
   paginationItemAriaLabel: type => {
     if (type === 'first') {

package/esm/locales/daDK.js

@@ -172,11 +172,12 @@ const daDKGrid = {
   //   count,
   //   estimated
   // }) => {
+  //   const unknownRowCount = count == null || count === -1;
   //   if (!estimated) {
-  //     return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
+  //     return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`;
   //   }
   //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
+  //   return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`;
   // },
   paginationItemAriaLabel: type => {
     if (type === 'first') {

package/esm/locales/elGR.js

@@ -173,11 +173,12 @@ const elGRGrid = {
   //   count,
   //   estimated
   // }) => {
+  //   const unknownRowCount = count == null || count === -1;
   //   if (!estimated) {
-  //     return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
+  //     return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`;
   //   }
   //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
+  //   return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`;
   // },
   paginationItemAriaLabel: type => {
     if (type === 'first') {