@mui/x-data-grid 8.12.0 → 8.13.0

package/CHANGELOG.md

@@ -5,6 +5,151 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.13.0
+
+_Oct 1, 2025_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 The chart zoom now supports the `tapAndDrag` gesture. Zoom in/out by tapping twice and dragging vertically.
+- 🔎 Charts now allow [fine-grained control for zoom interactions](https://mui.com/x/react-charts/zoom-and-pan/#zoom-interactions-configuration).
+  ```jsx
+  <BarChartPro
+    zoomInteractionConfig={{
+      // Only zoom when Control key is pressed
+      zoom: [{ type: 'wheel', keys: ['Control'] }],
+      // Only pan when Shift key is pressed
+      pan: [{ type: 'drag', keys: ['Shift'] }],
+    }}
+  />
+  ```
+- ➡️ Data Grid grouping rows now persist their expansion state when the rows are updated.
+- 📜 Updated Data Grid vertical scrollbar to include pinned rows and aggregation sections.
+- 📌 Improved the appearance of [pinned columns](https://mui.com/x/react-data-grid/column-pinning/#pinned-columns-appearance) and [pinned rows](https://mui.com/x/react-data-grid/row-pinning/#pinned-rows-appearance) sections in the Data Grid.
+- 🚀 Tree View now fetches the children of expanded items on mount when using lazy loading.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@sai6855
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @hasdfa, @Janpot, @JCQuintas, @KenanYusuf, @mapache-salvaje, @MBilalShafi, @mnajdova, @rita-codes, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.13.0`
+
+- [DataGrid] Add scroll shadows and fix scrollbar overlap (#16476) @KenanYusuf
+- [DataGrid] Fix row spanning stale state issue (#19733) @MBilalShafi
+- [DataGrid] Fix toolbar `slotProps` not being applied (#19769) @sai6855
+- [DataGrid] Skip calling `fetchRows()` when strategy is not initialized (#19728) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@8.13.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@8.13.0`, plus:
+
+- [DataGridPro] Retain expansion state on rows update (#19697) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.13.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@8.13.0`, plus:
+
+- [DataGridPremium] Add `metadata.referenceId` to AI assistant prompt resolver (#19695) @hasdfa
+- [DataGridPremium] Fix aggregation value retrieval (#19724) @arminmeh
+- [DataGridPremium] Get correct active chart id while rebuilding data (#19720) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.12.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.12.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@8.12.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.13.0`
+
+- [charts] Add `tapAndDrag` zoom gesture (#19727) @JCQuintas
+- [charts] Add arc focus indicator that follows the arc form (#19696) @mnajdova
+- [charts] Fix outline color (#19752) @alexfauquette
+- [charts] Improve tooltip doc (#19731) @JCQuintas
+- [charts] Make axis highlight reflect the keyboard interaction (#19631) @alexfauquette
+- [charts] Prevent horizontal scroll on keyboard navigation (#19704) @alexfauquette
+- [charts] Simplify gestures by removing bindings (#19767) @JCQuintas
+
+#### `@mui/x-charts-pro@8.13.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@8.13.0`, plus:
+
+- [charts-pro] Allow zoom interactions to be configured (#18646) @JCQuintas
+- [charts-pro] Fix zoom preview having wrong domain in some cases (#19723) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.13.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@8.13.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.13.0`
+
+- [tree view] Export the `apiRef` type of each Tree View component (#19543) @flaviendelangle
+- [tree view] Fix indeterminate checkbox state (#19544) @flaviendelangle
+- [tree view] Improve the lazy loading initial expansion (#19284) @flaviendelangle
+- [tree view] Use Base UI utils whenever possible (#19502) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.13.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@8.13.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.12.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add a recipe to customize editing component with Autocomplete (#19651) @siriwatknp
+- [docs] Refine the electricity scatter tooltip (#19689) @alexfauquette
+- [docs] Revise the Axis doc (#19052) @mapache-salvaje
+- [docs] Remove reference to nonexistent `FocusedMark` API page (#19773) @bernardobelchior
+
+### Core
+
+- [code-infra] Change charts codspeed integration to use walltime (#19729) @JCQuintas
+- [code-infra] Port stylelint from core repo (#19633) @Janpot
+- [code-infra] Stabilize fake timers in regression tests (#19719) @Janpot
+- [code-infra] Stabilize size for bundles with `releaseInfo` (#19674) @Janpot
+- [code-infra] Fix `pnpm-lock.yaml` broken lockfile (#19755) @bernardobelchior
+
+## 8.12.1
+
+_Sep 25, 2025_
+
+Release highlight ✨:
+
+- 🐞 Hotfix for Grid-Charts integration issue with aggregated values
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.12.1`
+
+Internal changes.
+
+#### `@mui/x-data-grid-pro@8.12.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.12.1`.
+
+#### `@mui/x-data-grid-premium@8.12.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.12.1`, plus:
+
+- [DataGridPremium] Collect aggregated values properly for the charts integration context (#19714) @arminmeh
+
 ## 8.12.0
 
 _Sep 25, 2025_

package/DataGrid/DataGrid.js

@@ -15,6 +15,7 @@ var _components = require("../components");
 var _useGridAriaAttributes = require("../hooks/utils/useGridAriaAttributes");
 var _useGridRowAriaAttributes = require("../hooks/features/rows/useGridRowAriaAttributes");
 var _useGridRowsOverridableMethods = require("../hooks/features/rows/useGridRowsOverridableMethods");
+var _useGridParamsOverridableMethods = require("../hooks/features/rows/useGridParamsOverridableMethods");
 var _GridContextProvider = require("../context/GridContextProvider");
 var _useDataGridComponent = require("./useDataGridComponent");
 var _useDataGridProps = require("./useDataGridProps");
@@ -28,8 +29,8 @@ const configuration = {
     useGridAriaAttributes: _useGridAriaAttributes.useGridAriaAttributes,
     useGridRowAriaAttributes: _useGridRowAriaAttributes.useGridRowAriaAttributes,
     useGridRowsOverridableMethods: _useGridRowsOverridableMethods.useGridRowsOverridableMethods,
+    useGridParamsOverridableMethods: _useGridParamsOverridableMethods.useGridParamsOverridableMethods,
     useCellAggregationResult: () => null,
-    useSortValueGetter: apiRef => apiRef.current.getCellValue,
     useFilterValueGetter: apiRef => apiRef.current.getRowValue
   }
 };

package/DataGrid/useDataGridComponent.js

@@ -78,14 +78,14 @@ const useDataGridComponent = (apiRef, props, configuration) => {
   (0, _useGridColumns.useGridColumns)(apiRef, props);
   (0, _useGridRows.useGridRows)(apiRef, props, configuration);
   (0, _useGridRowSpanning.useGridRowSpanning)(apiRef, props);
-  (0, _useGridParamsApi.useGridParamsApi)(apiRef, props);
+  (0, _useGridParamsApi.useGridParamsApi)(apiRef, props, configuration);
   (0, _useGridColumnSpanning.useGridColumnSpanning)(apiRef);
   (0, _useGridColumnGrouping.useGridColumnGrouping)(apiRef, props);
   (0, _useGridEditing.useGridEditing)(apiRef, props);
   (0, _useGridFocus.useGridFocus)(apiRef, props);
   (0, _useGridPreferencesPanel.useGridPreferencesPanel)(apiRef, props);
   (0, _useGridFilter.useGridFilter)(apiRef, props, configuration);
-  (0, _useGridSorting.useGridSorting)(apiRef, props, configuration);
+  (0, _useGridSorting.useGridSorting)(apiRef, props);
   (0, _useGridDensity.useGridDensity)(apiRef, props);
   (0, _useGridColumnResize.useGridColumnResize)(apiRef, props);
   (0, _useGridPagination.useGridPagination)(apiRef, props);

package/components/GridLoadingOverlay.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { GridOverlayProps } from "./containers/GridOverlay.js";
-export type GridLoadingOverlayVariant = 'circular-progress' | 'linear-progress' | 'skeleton';
+import type { GridLoadingOverlayVariant } from "../hooks/features/overlays/gridOverlaysInterfaces.js";
 export interface GridLoadingOverlayProps extends GridOverlayProps {
   /**
    * The variant of the overlay.

package/components/GridRow.js

@@ -32,7 +32,6 @@ var _gridSortingSelector = require("../hooks/features/sorting/gridSortingSelecto
 var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
 var _gridEditingSelectors = require("../hooks/features/editing/gridEditingSelectors");
 var _gridRowReorderSelector = require("../hooks/features/rowReorder/gridRowReorderSelector");
-var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
 var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
 var _useGridConfiguration = require("../hooks/utils/useGridConfiguration");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
@@ -247,8 +246,8 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     const canReorderRow = isRowReorderingEnabled && !sortModel.length;
     const disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow || isRowDragActive);
     const cellIsNotVisible = pinnedPosition === _constants.PinnedColumnPosition.VIRTUAL;
-    const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
-    const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
+    const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection, rootProps.showCellVerticalBorder, rootProps.pinnedColumnsSectionSeparator);
+    const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller, rootProps.pinnedColumnsSectionSeparator);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(slots.cell, (0, _extends2.default)({
       column: column,
       width: width,
@@ -316,10 +315,7 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     }), cells, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       role: "presentation",
       className: (0, _clsx.default)(_gridClasses.gridClasses.cell, _gridClasses.gridClasses.cellEmpty)
-    }), rightCells, scrollbarWidth !== 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollbarFillerCell.GridScrollbarFillerCell, {
-      pinnedRight: pinnedColumns.right.length > 0,
-      borderTop: !isFirstVisible
-    })]
+    }), rightCells]
   }));
 });
 if (process.env.NODE_ENV !== "production") GridRow.displayName = "GridRow";

package/components/GridScrollShadows.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+interface GridScrollShadowsProps {
+  position: 'vertical' | 'horizontal';
+}
+declare function GridScrollShadows(props: GridScrollShadowsProps): React.JSX.Element;
+export { GridScrollShadows };

package/components/GridScrollShadows.js

@@ -0,0 +1,108 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridScrollShadows = GridScrollShadows;
+var React = _interopRequireWildcard(require("react"));
+var _system = require("@mui/system");
+var _RtlProvider = require("@mui/system/RtlProvider");
+var _hooks = require("../hooks");
+var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
+var _useGridRootProps = require("../hooks/utils/useGridRootProps");
+var _cssVariables = require("../constants/cssVariables");
+var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
+var _gridDimensionsSelectors = require("../hooks/features/dimensions/gridDimensionsSelectors");
+var _jsxRuntime = require("react/jsx-runtime");
+const ScrollShadow = (0, _system.styled)('div')(({
+  theme
+}) => ({
+  position: 'absolute',
+  inset: 0,
+  pointerEvents: 'none',
+  transition: _cssVariables.vars.transition(['box-shadow'], {
+    duration: _cssVariables.vars.transitions.duration.short
+  }),
+  '--length': theme.palette.mode === 'dark' ? '8px' : '6px',
+  '--length-inverse': 'calc(var(--length) * -1)',
+  '--opacity': theme.palette.mode === 'dark' ? '0.7' : '0.18',
+  '--blur': 'var(--length)',
+  '--spread': 'calc(var(--length) * -1)',
+  '--color-start': 'rgba(0, 0, 0, calc(var(--hasScrollStart) * var(--opacity)))',
+  '--color-end': 'rgba(0, 0, 0, calc(var(--hasScrollEnd) * var(--opacity)))',
+  variants: [{
+    props: {
+      position: 'vertical'
+    },
+    style: {
+      top: 'var(--DataGrid-topContainerHeight)',
+      bottom: 'calc(var(--DataGrid-bottomContainerHeight) + var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))',
+      boxShadow: 'inset 0 var(--length) var(--blur) var(--spread) var(--color-start), inset 0 var(--length-inverse) var(--blur) var(--spread) var(--color-end)'
+    }
+  }, {
+    props: {
+      position: 'horizontal'
+    },
+    style: {
+      left: 'var(--DataGrid-leftPinnedWidth)',
+      right: 'calc(var(--DataGrid-rightPinnedWidth) + var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
+      boxShadow: 'inset var(--length) 0 var(--blur) var(--spread) var(--color-start), inset var(--length-inverse) 0 var(--blur) var(--spread) var(--color-end)'
+    }
+  }]
+}));
+function GridScrollShadows(props) {
+  const {
+    position
+  } = props;
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const ownerState = {
+    classes: rootProps.classes,
+    position
+  };
+  const ref = React.useRef(null);
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const hasScrollX = (0, _hooks.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasScrollXSelector);
+  const hasScrollY = (0, _hooks.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasScrollYSelector);
+  const pinnedRows = (0, _hooks.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsSelector);
+  const pinnedColumns = (0, _hooks.useGridSelector)(apiRef, _hooks.gridPinnedColumnsSelector);
+  const initialScrollable = position === 'vertical' ? hasScrollY && pinnedRows?.bottom?.length > 0 : hasScrollX && pinnedColumns?.right?.length !== undefined && pinnedColumns?.right?.length > 0;
+  const isRtl = (0, _RtlProvider.useRtl)();
+  const updateScrollShadowVisibility = React.useCallback(scrollPosition => {
+    if (!ref.current) {
+      return;
+    }
+    // Math.abs to convert negative scroll position (RTL) to positive
+    const scroll = Math.abs(Math.round(scrollPosition));
+    const dimensions = (0, _hooks.gridDimensionsSelector)(apiRef);
+    const maxScroll = Math.round(dimensions.contentSize[position === 'vertical' ? 'height' : 'width'] - dimensions.viewportInnerSize[position === 'vertical' ? 'height' : 'width']);
+    const hasPinnedStart = position === 'vertical' ? pinnedRows?.top?.length > 0 : pinnedColumns?.left?.length !== undefined && pinnedColumns?.left?.length > 0;
+    const hasPinnedEnd = position === 'vertical' ? pinnedRows?.bottom?.length > 0 : pinnedColumns?.right?.length !== undefined && pinnedColumns?.right?.length > 0;
+    const scrollIsNotAtStart = isRtl ? scroll < maxScroll : scroll > 0;
+    const scrollIsNotAtEnd = isRtl ? scroll > 0 : scroll < maxScroll;
+    ref.current.style.setProperty('--hasScrollStart', hasPinnedStart && scrollIsNotAtStart ? '1' : '0');
+    ref.current.style.setProperty('--hasScrollEnd', hasPinnedEnd && scrollIsNotAtEnd ? '1' : '0');
+  }, [pinnedRows, pinnedColumns, isRtl, position, apiRef]);
+  const handleScrolling = scrollParams => {
+    updateScrollShadowVisibility(scrollParams[position === 'vertical' ? 'top' : 'left']);
+  };
+  const handleColumnResizeStop = () => {
+    if (position === 'horizontal') {
+      updateScrollShadowVisibility(apiRef.current.virtualScrollerRef?.current?.scrollLeft || 0);
+    }
+  };
+  (0, _hooks.useGridEvent)(apiRef, 'scrollPositionChange', handleScrolling);
+  (0, _hooks.useGridEvent)(apiRef, 'columnResizeStop', handleColumnResizeStop);
+  React.useEffect(() => {
+    updateScrollShadowVisibility((position === 'horizontal' ? apiRef.current.virtualScrollerRef?.current?.scrollLeft : apiRef.current.virtualScrollerRef?.current?.scrollTop) ?? 0);
+  }, [updateScrollShadowVisibility, apiRef, position]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ScrollShadow, {
+    ownerState: ownerState,
+    ref: ref,
+    style: {
+      '--hasScrollStart': 0,
+      '--hasScrollEnd': initialScrollable ? '1' : '0'
+    }
+  });
+}

package/components/GridScrollbarFillerCell.d.ts

@@ -1,13 +1,7 @@
 import * as React from 'react';
 declare function GridScrollbarFillerCell({
-  header,
-  borderTop,
-  borderBottom,
   pinnedRight
 }: {
-  header?: boolean;
-  borderTop?: boolean;
-  borderBottom?: boolean;
   pinnedRight?: boolean;
 }): React.JSX.Element;
 export { GridScrollbarFillerCell };

package/components/GridScrollbarFillerCell.js

@@ -12,19 +12,13 @@ var _constants = require("../constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const classes = {
   root: _constants.gridClasses.scrollbarFiller,
-  header: _constants.gridClasses['scrollbarFiller--header'],
-  borderTop: _constants.gridClasses['scrollbarFiller--borderTop'],
-  borderBottom: _constants.gridClasses['scrollbarFiller--borderBottom'],
   pinnedRight: _constants.gridClasses['scrollbarFiller--pinnedRight']
 };
 function GridScrollbarFillerCell({
-  header,
-  borderTop = true,
-  borderBottom,
   pinnedRight
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     role: "presentation",
-    className: (0, _clsx.default)(classes.root, header && classes.header, borderTop && classes.borderTop, borderBottom && classes.borderBottom, pinnedRight && classes.pinnedRight)
+    className: (0, _clsx.default)(classes.root, pinnedRight && classes.pinnedRight)
   });
 }

package/components/GridSkeletonLoadingOverlay.js

@@ -24,7 +24,6 @@ var _gridClasses = require("../constants/gridClasses");
 var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
 var _cellBorderUtils = require("../utils/cellBorderUtils");
 var _domUtils = require("../utils/domUtils");
-var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
 var _rtlFlipSide = require("../utils/rtlFlipSide");
 var _utils = require("../internals/utils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -100,8 +99,8 @@ const GridSkeletonLoadingOverlayInner = exports.GridSkeletonLoadingOverlayInner
         const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
         const pinnedStyle = (0, _utils.attachPinnedStyle)({}, isRtl, pinnedPosition, (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, column.computedWidth, colIndex, positions, dimensions.columnsTotalWidth, scrollbarWidth));
         const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
-        const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, sectionIndex, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
-        const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, sectionIndex);
+        const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, sectionIndex, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller, rootProps.pinnedColumnsSectionSeparator);
+        const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, sectionIndex, rootProps.showCellVerticalBorder, rootProps.pinnedColumnsSectionSeparator);
         const isLastColumn = colIndex === columns.length - 1;
         const isFirstPinnedRight = isPinnedRight && sectionIndex === 0;
         const hasFillerBefore = isFirstPinnedRight && gridHasFiller;
@@ -112,7 +111,6 @@ const GridSkeletonLoadingOverlayInner = exports.GridSkeletonLoadingOverlayInner
           width: emptyCellWidth,
           empty: true
         }, `skeleton-filler-column-${i}`);
-        const hasScrollbarFiller = isLastColumn && scrollbarWidth !== 0;
         if (hasFillerBefore) {
           rowCells.push(emptyCell);
         }
@@ -132,11 +130,6 @@ const GridSkeletonLoadingOverlayInner = exports.GridSkeletonLoadingOverlayInner
         if (hasFillerAfter) {
           rowCells.push(emptyCell);
         }
-        if (hasScrollbarFiller) {
-          rowCells.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollbarFillerCell.GridScrollbarFillerCell, {
-            pinnedRight: pinnedColumns.right.length > 0
-          }, `skeleton-scrollbar-filler-${i}`));
-        }
       }
       array.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: (0, _clsx.default)(_gridClasses.gridClasses.row, _gridClasses.gridClasses.rowSkeleton, i === 0 && !showFirstRowBorder && _gridClasses.gridClasses['row--firstVisible']),
@@ -144,7 +137,7 @@ const GridSkeletonLoadingOverlayInner = exports.GridSkeletonLoadingOverlayInner
       }, `skeleton-row-${i}`));
     }
     return array;
-  }, [skeletonRowsCount, columns, getPinnedPosition, isRtl, pinnedColumns, dimensions.hasScrollY, dimensions.scrollbarSize, dimensions.columnsTotalWidth, dimensions.viewportOuterSize.width, dimensions.rowHeight, positions, rootProps.showCellVerticalBorder, slots, visibleColumns, showFirstRowBorder]);
+  }, [skeletonRowsCount, columns, getPinnedPosition, isRtl, pinnedColumns, dimensions.hasScrollY, dimensions.scrollbarSize, dimensions.columnsTotalWidth, dimensions.viewportOuterSize.width, dimensions.rowHeight, positions, rootProps.showCellVerticalBorder, rootProps.pinnedColumnsSectionSeparator, slots, visibleColumns, showFirstRowBorder]);
 
   // Sync the column resize of the overlay columns with the grid
   const handleColumnResize = params => {

package/components/base/GridOverlays.d.ts

@@ -1,7 +1,5 @@
 import * as React from 'react';
-import { GridLoadingOverlayVariant } from "../GridLoadingOverlay.js";
-import { GridSlotsComponent } from "../../models/index.js";
-export type GridOverlayType = keyof Pick<GridSlotsComponent, 'noColumnsOverlay' | 'noRowsOverlay' | 'noResultsOverlay' | 'loadingOverlay'> | null;
+import type { GridOverlayType, GridLoadingOverlayVariant } from "../../hooks/features/overlays/gridOverlaysInterfaces.js";
 interface GridOverlaysProps {
   overlayType: GridOverlayType;
   loadingOverlayVariant: GridLoadingOverlayVariant | null;

package/components/columnHeaders/GridColumnHeaderItem.d.ts

@@ -21,7 +21,6 @@ interface GridColumnHeaderItemProps {
   pinnedPosition?: PinnedColumnPosition;
   pinnedOffset?: number;
   style?: React.CSSProperties;
-  isLastUnpinned: boolean;
   isSiblingFocused: boolean;
   showLeftBorder: boolean;
   showRightBorder: boolean;

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -39,7 +39,6 @@ const useUtilityClasses = ownerState => {
     showLeftBorder,
     filterItemsCounter,
     pinnedPosition,
-    isLastUnpinned,
     isSiblingFocused
   } = ownerState;
   const isColumnSortable = colDef.sortable && !disableColumnSorting;
@@ -51,7 +50,7 @@ const useUtilityClasses = ownerState => {
     root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', isColumnSortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === _constants.PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === _constants.PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight',
     // TODO: Remove classes below and restore `:has` selectors when they are supported in jsdom
     // See https://github.com/mui/mui-x/pull/14559
-    isLastUnpinned && 'columnHeader--lastUnpinned', isSiblingFocused && 'columnHeader--siblingFocused'],
+    isSiblingFocused && 'columnHeader--siblingFocused'],
     draggableContainer: ['columnHeaderDraggableContainer'],
     titleContainer: ['columnHeaderTitleContainer'],
     titleContainerContent: ['columnHeaderTitleContainerContent']
@@ -237,7 +236,6 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderItem.propTypes = {
   headerHeight: _propTypes.default.number.isRequired,
   isDragging: _propTypes.default.bool.isRequired,
   isLast: _propTypes.default.bool.isRequired,
-  isLastUnpinned: _propTypes.default.bool.isRequired,
   isResizing: _propTypes.default.bool.isRequired,
   isSiblingFocused: _propTypes.default.bool.isRequired,
   pinnedOffset: _propTypes.default.number,

package/components/containers/GridRootStyles.js

@@ -111,8 +111,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['columnHeader--filtered']}`]: styles['columnHeader--filtered']
   }, {
     [`& .${_gridClasses.gridClasses['columnHeader--last']}`]: styles['columnHeader--last']
-  }, {
-    [`& .${_gridClasses.gridClasses['columnHeader--lastUnpinned']}`]: styles['columnHeader--lastUnpinned']
   }, {
     [`& .${_gridClasses.gridClasses['columnHeader--moving']}`]: styles['columnHeader--moving']
   }, {
@@ -229,12 +227,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['scrollbar--vertical']}`]: styles['scrollbar--vertical']
   }, {
     [`& .${_gridClasses.gridClasses.scrollbarFiller}`]: styles.scrollbarFiller
-  }, {
-    [`& .${_gridClasses.gridClasses['scrollbarFiller--borderBottom']}`]: styles['scrollbarFiller--borderBottom']
-  }, {
-    [`& .${_gridClasses.gridClasses['scrollbarFiller--borderTop']}`]: styles['scrollbarFiller--borderTop']
-  }, {
-    [`& .${_gridClasses.gridClasses['scrollbarFiller--header']}`]: styles['scrollbarFiller--header']
   }, {
     [`& .${_gridClasses.gridClasses['scrollbarFiller--pinnedRight']}`]: styles['scrollbarFiller--pinnedRight']
   }, {
@@ -396,9 +388,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.columnHeader}:focus,
       & .${_gridClasses.gridClasses['columnHeader--withLeftBorder']},
       & .${_gridClasses.gridClasses['columnHeader--withRightBorder']},
-      & .${_gridClasses.gridClasses['columnHeader--siblingFocused']},
-      & .${_gridClasses.gridClasses['virtualScroller--hasScrollX']} .${_gridClasses.gridClasses['columnHeader--lastUnpinned']},
-      & .${_gridClasses.gridClasses['virtualScroller--hasScrollX']} .${_gridClasses.gridClasses['columnHeader--last']}
+      & .${_gridClasses.gridClasses['columnHeader--siblingFocused']}
       `]: {
       [`& .${_gridClasses.gridClasses.columnSeparator}`]: {
         opacity: 0
@@ -603,7 +593,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       width: 'auto'
     },
     [`& .${_gridClasses.gridClasses.headerFilterRow}`]: {
-      [`& .${_gridClasses.gridClasses.columnHeader}`]: {
+      [`& .${_gridClasses.gridClasses.columnHeader}, & .${_gridClasses.gridClasses.scrollbarFiller}`]: {
         boxSizing: 'border-box',
         borderBottom: '1px solid var(--DataGrid-rowBorderColor)'
       }
@@ -852,14 +842,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`.${_gridClasses.gridClasses.scrollbarFiller}`]: {
       minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
       alignSelf: 'stretch',
-      [`&.${_gridClasses.gridClasses['scrollbarFiller--borderTop']}`]: {
-        borderTop: '1px solid var(--DataGrid-rowBorderColor)'
-      },
-      [`&.${_gridClasses.gridClasses['scrollbarFiller--borderBottom']}`]: {
-        borderBottom: '1px solid var(--DataGrid-rowBorderColor)'
-      },
+      backgroundColor: headerBackground,
       [`&.${_gridClasses.gridClasses['scrollbarFiller--pinnedRight']}`]: {
-        backgroundColor: _cssVariables.vars.cell.background.pinned,
         position: 'sticky',
         zIndex: 40,
         // Should be above the column separator
@@ -875,7 +859,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.columnHeaders} .${_gridClasses.gridClasses.filler}`]: {
       backgroundColor: headerBackground
     },
-    /* Hide grid rows, row filler, and vertical scrollbar. Used when skeleton/no columns overlay is visible */
+    /* Used when skeleton/no columns overlay is visible */
     [`& .${_gridClasses.gridClasses['main--hiddenContent']}`]: {
       [`& .${_gridClasses.gridClasses.virtualScrollerContent}`]: {
         // We use visibility hidden so that the virtual scroller content retains its height.
@@ -884,7 +868,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         position: 'fixed',
         visibility: 'hidden'
       },
-      [`& .${_gridClasses.gridClasses['scrollbar--vertical']}, & .${_gridClasses.gridClasses.pinnedRows}, & .${_gridClasses.gridClasses.virtualScroller} > .${_gridClasses.gridClasses.filler}`]: {
+      // Hide grid content
+      [`& .${_gridClasses.gridClasses.pinnedRows}`]: {
         display: 'none'
       }
     },

package/components/toolbarV8/GridToolbar.js

@@ -30,7 +30,8 @@ var _cssVariables = require("../../constants/cssVariables");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className"],
-  _excluded2 = ["className"];
+  _excluded2 = ["className"],
+  _excluded3 = ["showQuickFilter", "quickFilterProps", "csvOptions", "printOptions", "additionalItems", "additionalExportMenuItems"];
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -88,13 +89,14 @@ function GridToolbarLabel(props) {
 }
 function GridToolbar(props) {
   const {
-    showQuickFilter = true,
-    quickFilterProps,
-    csvOptions,
-    printOptions,
-    additionalItems,
-    additionalExportMenuItems
-  } = props;
+      showQuickFilter = true,
+      quickFilterProps,
+      csvOptions,
+      printOptions,
+      additionalItems,
+      additionalExportMenuItems
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded3);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const [exportMenuOpen, setExportMenuOpen] = React.useState(false);
@@ -103,7 +105,7 @@ function GridToolbar(props) {
   const exportMenuTriggerId = (0, _useId.default)();
   const showExportMenu = !csvOptions?.disableToolbarButton || !printOptions?.disableToolbarButton || additionalExportMenuItems;
   const closeExportMenu = () => setExportMenuOpen(false);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Toolbar.Toolbar, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Toolbar.Toolbar, (0, _extends2.default)({}, other, {
     children: [rootProps.label && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarLabel, {
       children: rootProps.label
     }), !rootProps.disableColumnSelector && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
@@ -170,7 +172,7 @@ function GridToolbar(props) {
     }), showQuickFilter && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarDivider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarQuickFilter.GridToolbarQuickFilter, (0, _extends2.default)({}, quickFilterProps))]
     })]
-  });
+  }));
 }
 process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
   // ----------------------------- Warning --------------------------------

package/components/virtualization/GridMainContainer.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
-import { GridLoadingOverlayVariant } from "../GridLoadingOverlay.js";
-import { GridOverlayType } from "../base/GridOverlays.js";
+import type { GridOverlayType, GridLoadingOverlayVariant } from "../../hooks/features/overlays/gridOverlaysInterfaces.js";
 type OwnerState = Pick<DataGridProcessedProps, 'classes'> & {
   hasScrollX: boolean;
   hasPinnedRight: boolean;

package/components/virtualization/GridVirtualScrollbar.d.ts

@@ -7,5 +7,6 @@ type GridVirtualScrollbarProps = {
     top: number;
   }>;
 };
+export declare const ScrollbarCorner: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, {}, {}>;
 declare const GridVirtualScrollbar: React.ForwardRefExoticComponent<GridVirtualScrollbarProps> | React.ForwardRefExoticComponent<GridVirtualScrollbarProps & React.RefAttributes<HTMLDivElement>>;
 export { GridVirtualScrollbar };