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

package/CHANGELOG.md

@@ -1,9 +1,261 @@
 # 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_
+
+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')
+
+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_
+
+We'd like to extend a big thank you to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 📝 CSS bundler support is no longer needed for the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to these community members for their valuable contributions:
+@sai6855
+
+The following team members contributed to this release:
+@arminmeh, @cherniavskii, @flaviendelangle, @mj12albert, @MBilalShafi
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.27.1`
+
+- [DataGrid] Hide column menu icon when there are no items (#21303) @MBilalShafi
+- [DataGrid] Migrate styled imports and remove `index.css` (#21176) @MBilalShafi
+- [DataGrid] Optimize `GridRootStyles` overrides resolver (#21251) @sai6855
+
+#### `@mui/x-data-grid-pro@8.27.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@8.27.1`, plus:
+
+- [DataGridPro] Fix column pinning issue with `restoreState` (#21305) @MBilalShafi
+- [DataGridPro] Fix lazy loading params for page with one row (#21238) @MBilalShafi
+- [DataGridPro] Properly extract parent path (#21301) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.27.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@8.27.1`, plus:
+
+- [DataGridPremium] Fix aggregation display when `initialState` has both `sortModel` and `pinnedColumns` (#21152) @mj12albert
+
+### Tree View
+
+#### `@mui/x-tree-view@8.27.1`
+
+- [tree view] Fix `apiRef.current.setItemExpansion()` (#21095) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.27.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@8.27.1`.
+
+### Core
+
+- [internal] Add CLI for translation using LLM (#21299) @cherniavskii
 
 ## v8.27.0
 

package/DataGridPro/DataGridPro.js

@@ -34,7 +34,7 @@ const configuration = {
     useFilterValueGetter: apiRef => apiRef.current.getRowValue
   }
 };
-const releaseInfo = "MTc2OTk5MDQwMDAwMA==";
+const releaseInfo = "MTc3MTIwMDAwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo

package/components/GridProColumnMenu.d.ts

@@ -1,4 +1,4 @@
-import { type GridColumnMenuProps } from '@mui/x-data-grid';
+import type { GridColumnMenuComponent } from '@mui/x-data-grid/internals';
 import { GridColumnMenuPinningItem } from "./GridColumnMenuPinningItem.js";
 export declare const GRID_COLUMN_MENU_SLOTS_PRO: {
   columnMenuPinningItem: typeof GridColumnMenuPinningItem;
@@ -20,4 +20,4 @@ export declare const GRID_COLUMN_MENU_SLOT_PROPS_PRO: {
     displayOrder: number;
   };
 };
-export declare const GridProColumnMenu: import("react").ForwardRefExoticComponent<GridColumnMenuProps> | import("react").ForwardRefExoticComponent<GridColumnMenuProps & import("react").RefAttributes<HTMLUListElement>>;
+export declare const GridProColumnMenu: GridColumnMenuComponent;

package/components/GridProColumnMenu.js

@@ -26,4 +26,6 @@ const GridProColumnMenu = exports.GridProColumnMenu = (0, _forwardRef.forwardRef
     ref: ref
   }));
 });
-if (process.env.NODE_ENV !== "production") GridProColumnMenu.displayName = "GridProColumnMenu";
+if (process.env.NODE_ENV !== "production") GridProColumnMenu.displayName = "GridProColumnMenu";
+GridProColumnMenu.defaultSlots = GRID_COLUMN_MENU_SLOTS_PRO;
+GridProColumnMenu.defaultSlotProps = GRID_COLUMN_MENU_SLOT_PROPS_PRO;

package/components/GridRowReorderCell.js

@@ -11,7 +11,7 @@ exports.renderRowReorderCell = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
@@ -29,7 +29,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGrid.getDataGridUtilityClass, classes);
 };
-const RowReorderIcon = (0, _system.styled)('svg', {
+const RowReorderIcon = (0, _styles.styled)('svg', {
   name: 'MuiDataGrid',
   slot: 'RowReorderIcon'
 })({

package/esm/DataGridPro/DataGridPro.js

@@ -27,7 +27,7 @@ const configuration = {
     useFilterValueGetter: apiRef => apiRef.current.getRowValue
   }
 };
-const releaseInfo = "MTc2OTk5MDQwMDAwMA==";
+const releaseInfo = "MTc3MTIwMDAwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo

package/esm/components/GridProColumnMenu.d.ts

@@ -1,4 +1,4 @@
-import { type GridColumnMenuProps } from '@mui/x-data-grid';
+import type { GridColumnMenuComponent } from '@mui/x-data-grid/internals';
 import { GridColumnMenuPinningItem } from "./GridColumnMenuPinningItem.js";
 export declare const GRID_COLUMN_MENU_SLOTS_PRO: {
   columnMenuPinningItem: typeof GridColumnMenuPinningItem;
@@ -20,4 +20,4 @@ export declare const GRID_COLUMN_MENU_SLOT_PROPS_PRO: {
     displayOrder: number;
   };
 };
-export declare const GridProColumnMenu: import("react").ForwardRefExoticComponent<GridColumnMenuProps> | import("react").ForwardRefExoticComponent<GridColumnMenuProps & import("react").RefAttributes<HTMLUListElement>>;
+export declare const GridProColumnMenu: GridColumnMenuComponent;

package/esm/components/GridProColumnMenu.js

@@ -20,4 +20,6 @@ export const GridProColumnMenu = forwardRef(function GridProColumnMenu(props, re
     ref: ref
   }));
 });
-if (process.env.NODE_ENV !== "production") GridProColumnMenu.displayName = "GridProColumnMenu";
+if (process.env.NODE_ENV !== "production") GridProColumnMenu.displayName = "GridProColumnMenu";
+GridProColumnMenu.defaultSlots = GRID_COLUMN_MENU_SLOTS_PRO;
+GridProColumnMenu.defaultSlotProps = GRID_COLUMN_MENU_SLOT_PROPS_PRO;

package/esm/components/GridRowReorderCell.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { gridSortModelSelector, useGridApiContext, useGridSelector, getDataGridUtilityClass, gridClasses } from '@mui/x-data-grid';
 import { gridEditRowsStateSelector, isEventTargetInPortal, vars } from '@mui/x-data-grid/internals';

package/esm/hooks/features/columnPinning/useGridColumnPinning.js

@@ -104,7 +104,11 @@ export const useGridColumnPinning = (apiRef, props) => {
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     const newPinnedColumns = context.stateToRestore.pinnedColumns;
     if (newPinnedColumns != null) {
+      apiRef.current.caches.columnPinning.orderedFieldsBeforePinningColumns = null;
       setState(apiRef, newPinnedColumns);
+      return _extends({}, params, {
+        callbacks: [...params.callbacks, () => apiRef.current.requestPipeProcessorsApplication('hydrateColumns')]
+      });
     }
     return params;
   }, [apiRef]);

package/esm/hooks/features/lazyLoader/utils.d.ts

@@ -1,6 +1,23 @@
 import type { RefObject } from '@mui/x-internals/types';
 import { type GridRowEntry } from '@mui/x-data-grid';
 import type { GridPrivateApiPro } from "../../../models/gridApiPro.js";
+interface GridRowRenderContext {
+  firstRowIndex: number;
+  lastRowIndex: number;
+}
+interface AdjustRowParamsOptions {
+  pageSize: number;
+  rowCount: number | undefined;
+}
+/**
+ * Adjusts the row fetch parameters to align with page boundaries.
+ * - Start index is decreased to the start of the page
+ * - End index is increased to the end of the page (capped by rowCount - 1 if defined)
+ */
+export declare const adjustRowParams: <T extends {
+  start: number | string;
+  end: number;
+}>(params: T, options: AdjustRowParamsOptions) => T;
 export declare const findSkeletonRowsSection: ({
   apiRef,
   visibleRows,
@@ -8,11 +25,9 @@ export declare const findSkeletonRowsSection: ({
 }: {
   apiRef: RefObject<GridPrivateApiPro>;
   visibleRows: GridRowEntry[];
-  range: {
-    firstRowIndex: number;
-    lastRowIndex: number;
-  };
+  range: GridRowRenderContext;
 }) => {
   firstRowIndex: number;
   lastRowIndex: number;
-} | undefined;
+} | undefined;
+export {};

package/esm/hooks/features/lazyLoader/utils.js

@@ -1,4 +1,27 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { gridRowNodeSelector } from '@mui/x-data-grid';
+/**
+ * Adjusts the row fetch parameters to align with page boundaries.
+ * - Start index is decreased to the start of the page
+ * - End index is increased to the end of the page (capped by rowCount - 1 if defined)
+ */
+export const adjustRowParams = (params, options) => {
+  if (typeof params.start !== 'number') {
+    return params;
+  }
+  const {
+    pageSize,
+    rowCount
+  } = options;
+  const adjustedStart = params.start - params.start % pageSize;
+  const pageAlignedEnd = params.end + pageSize - params.end % pageSize - 1;
+  // rowCount of -1 means "unknown/infinite", treat same as undefined (no capping)
+  const maxEnd = rowCount !== undefined && rowCount !== -1 ? Math.max(0, rowCount - 1) : Infinity;
+  return _extends({}, params, {
+    start: adjustedStart,
+    end: Math.min(maxEnd, pageAlignedEnd)
+  });
+};
 export const findSkeletonRowsSection = ({
   apiRef,
   visibleRows,

package/esm/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.js

@@ -7,7 +7,7 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import debounce from '@mui/utils/debounce';
 import { useGridEvent, gridSortModelSelector, gridFilterModelSelector, GRID_ROOT_GROUP_ID, gridPaginationModelSelector, gridFilteredSortedRowIdsSelector, gridRowIdSelector } from '@mui/x-data-grid';
 import { getVisibleRows, gridRenderContextSelector, GridStrategyGroup, useGridRegisterStrategyProcessor, runIf, DataSourceRowsUpdateStrategy } from '@mui/x-data-grid/internals';
-import { findSkeletonRowsSection } from "../lazyLoader/utils.js";
+import { findSkeletonRowsSection, adjustRowParams } from "../lazyLoader/utils.js";
 import { GRID_SKELETON_ROW_ROOT_ID } from "../lazyLoader/useGridLazyLoaderPreProcessors.js";
 var LoadingTrigger = /*#__PURE__*/function (LoadingTrigger) {
   LoadingTrigger[LoadingTrigger["VIEWPORT"] = 0] = "VIEWPORT";
@@ -39,19 +39,6 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
     privateApiRef.current.dataSource.fetchRows(GRID_ROOT_GROUP_ID, params);
   }, [privateApiRef]);
   const debouncedFetchRows = React.useMemo(() => debounce(fetchRows, 0), [fetchRows]);
-
-  // Adjust the render context range to fit the pagination model's page size
-  // First row index should be decreased to the start of the page, end row index should be increased to the end of the page
-  const adjustRowParams = React.useCallback(params => {
-    if (typeof params.start !== 'number') {
-      return params;
-    }
-    const paginationModel = gridPaginationModelSelector(privateApiRef);
-    return _extends({}, params, {
-      start: params.start - params.start % paginationModel.pageSize,
-      end: params.end + paginationModel.pageSize - params.end % paginationModel.pageSize - 1
-    });
-  }, [privateApiRef]);
   const resetGrid = React.useCallback(() => {
     privateApiRef.current.setLoading(true);
     privateApiRef.current.dataSource.cache.clear();
@@ -102,9 +89,13 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
     if (rootChildrenCount === 0) {
       return;
     }
+    const paginationModel = gridPaginationModelSelector(privateApiRef);
     const pageToSkip = adjustRowParams({
       start: renderedRowsIntervalCache.current.firstRowToRender,
       end: renderedRowsIntervalCache.current.lastRowToRender
+    }, {
+      pageSize: paginationModel.pageSize,
+      rowCount: pageRowCount
     });
     let hasChanged = false;
     const isInitialPage = renderedRowsIntervalCache.current.firstRowToRender === 0 && renderedRowsIntervalCache.current.lastRowToRender === 0;
@@ -157,7 +148,7 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
         tree
       })
     }), 'addSkeletonRows');
-  }, [privateApiRef, adjustRowParams]);
+  }, [privateApiRef]);
   const updateLoadingTrigger = React.useCallback(rowCount => {
     const newLoadingTrigger = rowCount === -1 ? LoadingTrigger.SCROLL_END : LoadingTrigger.VIEWPORT;
     if (loadingTrigger.current !== null) {
@@ -268,43 +259,47 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
       filterModel
     };
     privateApiRef.current.setLoading(true);
-    fetchRows(adjustRowParams(getRowsParams));
+    fetchRows(adjustRowParams(getRowsParams, {
+      pageSize: paginationModel.pageSize,
+      rowCount: privateApiRef.current.state.pagination.rowCount
+    }));
   });
-  const handleRenderedRowsIntervalChange = React.useCallback(params => {
+  const handleRenderedRowsIntervalChange = React.useCallback(renderContext => {
     if (rowsStale.current) {
       return;
     }
     const sortModel = gridSortModelSelector(privateApiRef);
     const filterModel = gridFilterModelSelector(privateApiRef);
     const getRowsParams = {
-      start: params.firstRowIndex,
-      end: params.lastRowIndex - 1,
+      start: renderContext.firstRowIndex,
+      end: renderContext.lastRowIndex - 1,
       sortModel,
       filterModel
     };
-    if (renderedRowsIntervalCache.current.firstRowToRender === params.firstRowIndex && renderedRowsIntervalCache.current.lastRowToRender === params.lastRowIndex) {
+    if (renderedRowsIntervalCache.current.firstRowToRender === renderContext.firstRowIndex && renderedRowsIntervalCache.current.lastRowToRender === renderContext.lastRowIndex) {
       return;
     }
     renderedRowsIntervalCache.current = {
-      firstRowToRender: params.firstRowIndex,
-      lastRowToRender: params.lastRowIndex
+      firstRowToRender: renderContext.firstRowIndex,
+      lastRowToRender: renderContext.lastRowIndex
     };
     const currentVisibleRows = getVisibleRows(privateApiRef);
     const skeletonRowsSection = findSkeletonRowsSection({
       apiRef: privateApiRef,
       visibleRows: currentVisibleRows.rows,
-      range: {
-        firstRowIndex: params.firstRowIndex,
-        lastRowIndex: params.lastRowIndex - 1
-      }
+      range: renderContext
     });
     if (!skeletonRowsSection) {
       return;
     }
     getRowsParams.start = skeletonRowsSection.firstRowIndex;
     getRowsParams.end = skeletonRowsSection.lastRowIndex;
-    fetchRows(adjustRowParams(getRowsParams));
-  }, [privateApiRef, adjustRowParams, fetchRows]);
+    const paginationModel = gridPaginationModelSelector(privateApiRef);
+    fetchRows(adjustRowParams(getRowsParams, {
+      pageSize: paginationModel.pageSize,
+      rowCount: privateApiRef.current.state.pagination.rowCount
+    }));
+  }, [privateApiRef, fetchRows]);
   const throttledHandleRenderedRowsIntervalChange = React.useMemo(() => throttle(handleRenderedRowsIntervalChange, props.lazyLoadingRequestThrottleMs), [props.lazyLoadingRequestThrottleMs, handleRenderedRowsIntervalChange]);
   React.useEffect(() => {
     return () => {

package/esm/hooks/features/serverSideLazyLoader/useGridInfiniteLoadingIntersection.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useGridSelector, useGridApiMethod, gridDimensionsSelector } from '@mui/x-data-grid';
 import { useTimeout, gridHorizontalScrollbarHeightSelector } from '@mui/x-data-grid/internals';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const InfiniteLoadingTriggerElement = styled('div', {
   slot: 'internal',

package/esm/hooks/features/serverSideTreeData/utils.d.ts

@@ -9,5 +9,8 @@ export declare function skipSorting(rowTree: GridRowTreeConfig): GridRowId[];
 /**
  * Retrieves the parent path for a row from the previous tree state.
  * Used during full tree updates to maintain correct hierarchy.
+ *
+ * Uses the parent node's `path` property, which stores the group keys
+ * representing the full path to the parent (i.e. the keys used to fetch the current node).
  */
 export declare function getParentPath(rowId: GridRowId, treeCreationParams: GridRowTreeCreationParams): string[];

package/esm/hooks/features/serverSideTreeData/utils.js

@@ -20,10 +20,22 @@ export function skipSorting(rowTree) {
 /**
  * Retrieves the parent path for a row from the previous tree state.
  * Used during full tree updates to maintain correct hierarchy.
+ *
+ * Uses the parent node's `path` property, which stores the group keys
+ * representing the full path to the parent (i.e. the keys used to fetch the current node).
  */
 export function getParentPath(rowId, treeCreationParams) {
-  if (treeCreationParams.updates.type !== 'full' || !treeCreationParams.previousTree?.[rowId] || treeCreationParams.previousTree[rowId].depth < 1 || !('path' in treeCreationParams.previousTree[rowId])) {
+  if (treeCreationParams.updates.type !== 'full' || !treeCreationParams.previousTree?.[rowId] || treeCreationParams.previousTree[rowId].depth < 1) {
     return [];
   }
-  return treeCreationParams.previousTree[rowId].path || [];
+  const node = treeCreationParams.previousTree[rowId];
+  const parentId = node.parent;
+  if (parentId == null) {
+    return [];
+  }
+  const parentNode = treeCreationParams.previousTree[parentId];
+  if (parentNode && 'path' in parentNode) {
+    return parentNode.path || [];
+  }
+  return [];
 }

package/esm/index.js

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

package/hooks/features/columnPinning/useGridColumnPinning.js

@@ -112,7 +112,11 @@ const useGridColumnPinning = (apiRef, props) => {
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     const newPinnedColumns = context.stateToRestore.pinnedColumns;
     if (newPinnedColumns != null) {
+      apiRef.current.caches.columnPinning.orderedFieldsBeforePinningColumns = null;
       setState(apiRef, newPinnedColumns);
+      return (0, _extends2.default)({}, params, {
+        callbacks: [...params.callbacks, () => apiRef.current.requestPipeProcessorsApplication('hydrateColumns')]
+      });
     }
     return params;
   }, [apiRef]);

package/hooks/features/lazyLoader/utils.d.ts

@@ -1,6 +1,23 @@
 import type { RefObject } from '@mui/x-internals/types';
 import { type GridRowEntry } from '@mui/x-data-grid';
 import type { GridPrivateApiPro } from "../../../models/gridApiPro.js";
+interface GridRowRenderContext {
+  firstRowIndex: number;
+  lastRowIndex: number;
+}
+interface AdjustRowParamsOptions {
+  pageSize: number;
+  rowCount: number | undefined;
+}
+/**
+ * Adjusts the row fetch parameters to align with page boundaries.
+ * - Start index is decreased to the start of the page
+ * - End index is increased to the end of the page (capped by rowCount - 1 if defined)
+ */
+export declare const adjustRowParams: <T extends {
+  start: number | string;
+  end: number;
+}>(params: T, options: AdjustRowParamsOptions) => T;
 export declare const findSkeletonRowsSection: ({
   apiRef,
   visibleRows,
@@ -8,11 +25,9 @@ export declare const findSkeletonRowsSection: ({
 }: {
   apiRef: RefObject<GridPrivateApiPro>;
   visibleRows: GridRowEntry[];
-  range: {
-    firstRowIndex: number;
-    lastRowIndex: number;
-  };
+  range: GridRowRenderContext;
 }) => {
   firstRowIndex: number;
   lastRowIndex: number;
-} | undefined;
+} | undefined;
+export {};

package/hooks/features/lazyLoader/utils.js

@@ -1,10 +1,35 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.findSkeletonRowsSection = void 0;
+exports.findSkeletonRowsSection = exports.adjustRowParams = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _xDataGrid = require("@mui/x-data-grid");
+/**
+ * Adjusts the row fetch parameters to align with page boundaries.
+ * - Start index is decreased to the start of the page
+ * - End index is increased to the end of the page (capped by rowCount - 1 if defined)
+ */
+const adjustRowParams = (params, options) => {
+  if (typeof params.start !== 'number') {
+    return params;
+  }
+  const {
+    pageSize,
+    rowCount
+  } = options;
+  const adjustedStart = params.start - params.start % pageSize;
+  const pageAlignedEnd = params.end + pageSize - params.end % pageSize - 1;
+  // rowCount of -1 means "unknown/infinite", treat same as undefined (no capping)
+  const maxEnd = rowCount !== undefined && rowCount !== -1 ? Math.max(0, rowCount - 1) : Infinity;
+  return (0, _extends2.default)({}, params, {
+    start: adjustedStart,
+    end: Math.min(maxEnd, pageAlignedEnd)
+  });
+};
+exports.adjustRowParams = adjustRowParams;
 const findSkeletonRowsSection = ({
   apiRef,
   visibleRows,

package/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.js

@@ -46,19 +46,6 @@ const useGridDataSourceLazyLoader = (privateApiRef, props) => {
     privateApiRef.current.dataSource.fetchRows(_xDataGrid.GRID_ROOT_GROUP_ID, params);
   }, [privateApiRef]);
   const debouncedFetchRows = React.useMemo(() => (0, _debounce.default)(fetchRows, 0), [fetchRows]);
-
-  // Adjust the render context range to fit the pagination model's page size
-  // First row index should be decreased to the start of the page, end row index should be increased to the end of the page
-  const adjustRowParams = React.useCallback(params => {
-    if (typeof params.start !== 'number') {
-      return params;
-    }
-    const paginationModel = (0, _xDataGrid.gridPaginationModelSelector)(privateApiRef);
-    return (0, _extends2.default)({}, params, {
-      start: params.start - params.start % paginationModel.pageSize,
-      end: params.end + paginationModel.pageSize - params.end % paginationModel.pageSize - 1
-    });
-  }, [privateApiRef]);
   const resetGrid = React.useCallback(() => {
     privateApiRef.current.setLoading(true);
     privateApiRef.current.dataSource.cache.clear();
@@ -109,9 +96,13 @@ const useGridDataSourceLazyLoader = (privateApiRef, props) => {
     if (rootChildrenCount === 0) {
       return;
     }
-    const pageToSkip = adjustRowParams({
+    const paginationModel = (0, _xDataGrid.gridPaginationModelSelector)(privateApiRef);
+    const pageToSkip = (0, _utils.adjustRowParams)({
       start: renderedRowsIntervalCache.current.firstRowToRender,
       end: renderedRowsIntervalCache.current.lastRowToRender
+    }, {
+      pageSize: paginationModel.pageSize,
+      rowCount: pageRowCount
     });
     let hasChanged = false;
     const isInitialPage = renderedRowsIntervalCache.current.firstRowToRender === 0 && renderedRowsIntervalCache.current.lastRowToRender === 0;
@@ -164,7 +155,7 @@ const useGridDataSourceLazyLoader = (privateApiRef, props) => {
         tree
       })
     }), 'addSkeletonRows');
-  }, [privateApiRef, adjustRowParams]);
+  }, [privateApiRef]);
   const updateLoadingTrigger = React.useCallback(rowCount => {
     const newLoadingTrigger = rowCount === -1 ? LoadingTrigger.SCROLL_END : LoadingTrigger.VIEWPORT;
     if (loadingTrigger.current !== null) {
@@ -275,43 +266,47 @@ const useGridDataSourceLazyLoader = (privateApiRef, props) => {
       filterModel
     };
     privateApiRef.current.setLoading(true);
-    fetchRows(adjustRowParams(getRowsParams));
+    fetchRows((0, _utils.adjustRowParams)(getRowsParams, {
+      pageSize: paginationModel.pageSize,
+      rowCount: privateApiRef.current.state.pagination.rowCount
+    }));
   });
-  const handleRenderedRowsIntervalChange = React.useCallback(params => {
+  const handleRenderedRowsIntervalChange = React.useCallback(renderContext => {
     if (rowsStale.current) {
       return;
     }
     const sortModel = (0, _xDataGrid.gridSortModelSelector)(privateApiRef);
     const filterModel = (0, _xDataGrid.gridFilterModelSelector)(privateApiRef);
     const getRowsParams = {
-      start: params.firstRowIndex,
-      end: params.lastRowIndex - 1,
+      start: renderContext.firstRowIndex,
+      end: renderContext.lastRowIndex - 1,
       sortModel,
       filterModel
     };
-    if (renderedRowsIntervalCache.current.firstRowToRender === params.firstRowIndex && renderedRowsIntervalCache.current.lastRowToRender === params.lastRowIndex) {
+    if (renderedRowsIntervalCache.current.firstRowToRender === renderContext.firstRowIndex && renderedRowsIntervalCache.current.lastRowToRender === renderContext.lastRowIndex) {
       return;
     }
     renderedRowsIntervalCache.current = {
-      firstRowToRender: params.firstRowIndex,
-      lastRowToRender: params.lastRowIndex
+      firstRowToRender: renderContext.firstRowIndex,
+      lastRowToRender: renderContext.lastRowIndex
     };
     const currentVisibleRows = (0, _internals.getVisibleRows)(privateApiRef);
     const skeletonRowsSection = (0, _utils.findSkeletonRowsSection)({
       apiRef: privateApiRef,
       visibleRows: currentVisibleRows.rows,
-      range: {
-        firstRowIndex: params.firstRowIndex,
-        lastRowIndex: params.lastRowIndex - 1
-      }
+      range: renderContext
     });
     if (!skeletonRowsSection) {
       return;
     }
     getRowsParams.start = skeletonRowsSection.firstRowIndex;
     getRowsParams.end = skeletonRowsSection.lastRowIndex;
-    fetchRows(adjustRowParams(getRowsParams));
-  }, [privateApiRef, adjustRowParams, fetchRows]);
+    const paginationModel = (0, _xDataGrid.gridPaginationModelSelector)(privateApiRef);
+    fetchRows((0, _utils.adjustRowParams)(getRowsParams, {
+      pageSize: paginationModel.pageSize,
+      rowCount: privateApiRef.current.state.pagination.rowCount
+    }));
+  }, [privateApiRef, fetchRows]);
   const throttledHandleRenderedRowsIntervalChange = React.useMemo(() => (0, _throttle.throttle)(handleRenderedRowsIntervalChange, props.lazyLoadingRequestThrottleMs), [props.lazyLoadingRequestThrottleMs, handleRenderedRowsIntervalChange]);
   React.useEffect(() => {
     return () => {

package/hooks/features/serverSideLazyLoader/useGridInfiniteLoadingIntersection.js

@@ -11,9 +11,9 @@ var React = _interopRequireWildcard(require("react"));
 var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _jsxRuntime = require("react/jsx-runtime");
-const InfiniteLoadingTriggerElement = (0, _system.styled)('div', {
+const InfiniteLoadingTriggerElement = (0, _styles.styled)('div', {
   slot: 'internal',
   shouldForwardProp: undefined
 })({

package/hooks/features/serverSideTreeData/utils.d.ts

@@ -9,5 +9,8 @@ export declare function skipSorting(rowTree: GridRowTreeConfig): GridRowId[];
 /**
  * Retrieves the parent path for a row from the previous tree state.
  * Used during full tree updates to maintain correct hierarchy.
+ *
+ * Uses the parent node's `path` property, which stores the group keys
+ * representing the full path to the parent (i.e. the keys used to fetch the current node).
  */
 export declare function getParentPath(rowId: GridRowId, treeCreationParams: GridRowTreeCreationParams): string[];

package/hooks/features/serverSideTreeData/utils.js

@@ -28,10 +28,22 @@ function skipSorting(rowTree) {
 /**
  * Retrieves the parent path for a row from the previous tree state.
  * Used during full tree updates to maintain correct hierarchy.
+ *
+ * Uses the parent node's `path` property, which stores the group keys
+ * representing the full path to the parent (i.e. the keys used to fetch the current node).
  */
 function getParentPath(rowId, treeCreationParams) {
-  if (treeCreationParams.updates.type !== 'full' || !treeCreationParams.previousTree?.[rowId] || treeCreationParams.previousTree[rowId].depth < 1 || !('path' in treeCreationParams.previousTree[rowId])) {
+  if (treeCreationParams.updates.type !== 'full' || !treeCreationParams.previousTree?.[rowId] || treeCreationParams.previousTree[rowId].depth < 1) {
     return [];
   }
-  return treeCreationParams.previousTree[rowId].path || [];
+  const node = treeCreationParams.previousTree[rowId];
+  const parentId = node.parent;
+  if (parentId == null) {
+    return [];
+  }
+  const parentNode = treeCreationParams.previousTree[parentId];
+  if (parentNode && 'path' in parentNode) {
+    return parentNode.path || [];
+  }
+  return [];
 }

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "8.27.0",
+  "version": "9.0.0-alpha.0",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Data Grid components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -33,13 +33,13 @@
     "directory": "packages/x-data-grid-pro"
   },
   "dependencies": {
-    "@babel/runtime": "^7.28.4",
-    "@mui/utils": "^7.3.5",
+    "@babel/runtime": "^7.28.6",
+    "@mui/utils": "^7.3.7",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-internals": "8.26.0",
-    "@mui/x-data-grid": "8.27.0",
-    "@mui/x-license": "8.26.0"
+    "@mui/x-internals": "9.0.0-alpha.0",
+    "@mui/x-data-grid": "9.0.0-alpha.0",
+    "@mui/x-license": "9.0.0-alpha.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",