@mui/x-data-grid-pro 8.27.0 → 8.27.2

package/CHANGELOG.md

@@ -5,6 +5,131 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.27.2
+
+_Feb 20, 2026_
+
+We'd like to extend a big thank you to the 3 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.27.2`
+
+Internal changes.
+
+#### `@mui/x-data-grid-pro@8.27.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.27.2`, plus:
+
+- [DataGridPro] Fix number input visibility in header filters (#21345) @michelengelen
+
+#### `@mui/x-data-grid-premium@8.27.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.27.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.27.2`
+
+- [DatePicker] Add keyboard support for selecting day, month, and year (#21399) @michelengelen
+
+#### `@mui/x-date-pickers-pro@8.27.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.27.2`, plus:
+
+- [DateRangePicker] Fix timezone update issue leading to `invalidRange` error (#21382) @michelengelen
+
+### Charts
+
+#### `@mui/x-charts@8.27.2`
+
+Internal changes.
+
+#### `@mui/x-charts-pro@8.27.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.27.2`, plus:
+
+- [charts-pro] Handle edge case in export image (#21206) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.27.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.27.2`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.27.2`
+
+- [tree view] Focus item sibling on unmount instead of the 1st item (#21386) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.27.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.27.2`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.27.2`
+
+Internal changes.
+
+### Core
+
+- [code-infra] Only ignore `renovate[bot]` in changelog generation script (#21188) @bernardobelchior
+
+## v8.27.1
+
+<!-- generated comparing v8.27.0..v8.x -->
+
+_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
 
 _Feb 2, 2026_

package/DataGridPro/DataGridPro.js

@@ -34,7 +34,7 @@ const configuration = {
     useFilterValueGetter: apiRef => apiRef.current.getRowValue
   }
 };
-const releaseInfo = "MTc2OTk5MDQwMDAwMA==";
+const releaseInfo = "MTc3MTU0NTYwMDAwMA==";
 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/components/headerFiltering/GridHeaderFilterCell.js

@@ -34,7 +34,7 @@ const StyledInputComponent = (0, _styles.styled)(_xDataGrid.GridFilterInputValue
   flex: 1,
   marginRight: _internals.vars.spacing(0.5),
   marginBottom: _internals.vars.spacing(-0.25),
-  '& input[type="number"], & input[type="date"], & input[type="datetime-local"]': {
+  '& input[type="date"], & input[type="datetime-local"]': {
     '&[value=""]:not(:focus)': {
       color: 'transparent'
     }

package/esm/DataGridPro/DataGridPro.js

@@ -27,7 +27,7 @@ const configuration = {
     useFilterValueGetter: apiRef => apiRef.current.getRowValue
   }
 };
-const releaseInfo = "MTc2OTk5MDQwMDAwMA==";
+const releaseInfo = "MTc3MTU0NTYwMDAwMA==";
 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/components/headerFiltering/GridHeaderFilterCell.js

@@ -27,7 +27,7 @@ const StyledInputComponent = styled(GridFilterInputValue, {
   flex: 1,
   marginRight: vars.spacing(0.5),
   marginBottom: vars.spacing(-0.25),
-  '& input[type="number"], & input[type="date"], & input[type="datetime-local"]': {
+  '& input[type="date"], & input[type="datetime-local"]': {
     '&[value=""]:not(:focus)': {
       color: 'transparent'
     }

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 v8.27.2
  *
  * @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 v8.27.2
  *
  * @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": "8.27.2",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Data Grid components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -37,9 +37,9 @@
     "@mui/utils": "^7.3.5",
     "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-license": "8.26.0",
+    "@mui/x-data-grid": "8.27.1",
+    "@mui/x-internals": "8.26.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",