@mui/x-data-grid 8.6.0 → 8.8.0

package/CHANGELOG.md

@@ -5,6 +5,207 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.8.0
+
+_Jul 11, 2025_
+
+We'd like to extend a big thank you to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Chart zoom preview can be enabled
+
+  <img width="758" alt="chart with x-axis preview" src="https://github.com/user-attachments/assets/50ce6f61-16dc-4e9b-a727-ca65d80927d7" />
+
+- 🌎 Add Indonesian (id-ID) locale on the Data Grid
+
+Special thanks go out to the community members for their valuable contributions:
+@kennarddh
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @noraleonte, @prakhargupta1, @rita-codes, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.8.0`
+
+- [DataGrid] Fix `useGridSelector` missing subscription in `React.StrictMode` (#18676) @cherniavskii
+- [DataGrid] Fix scrollbar filler `z-index` (#18688) @KenanYusuf
+- [DataGrid] Set correct data source cache chunk size when pagination is disabled (#18636) @arminmeh
+- [l10n] Add Indonesian (id-ID) locale (#18710) @kennarddh
+
+#### `@mui/x-data-grid-pro@8.8.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.8.0`, plus:
+
+- [DataGridPro] Fix row ordering not auto-scrolling when moving beyond viewport (#18557) @MBilalShafi
+- [DataGridPro] Set correct parent paths when tree is refreshed with data source tree data and row grouping (#18715) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.8.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.8.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.8.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.8.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.8.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.8.0`
+
+- [charts] Add control to the axis highlight (#17900) @alexfauquette
+- [charts] Avoid processing area plot data if area isn't used in series (#18712) @bernardobelchior
+- [charts] Make smarter default domain limit (#18506) @alexfauquette
+
+#### `@mui/x-charts-pro@8.8.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.8.0`, plus:
+
+- [charts-pro] Add `funnelDirection` to control pyramid direction (#18568) @JCQuintas
+- [charts-pro] Add `onBeforeExport` callback (#18722) @bernardobelchior
+- [charts-pro] Add chart zoom preview (#18267) @bernardobelchior
+- [charts-pro] Allow customizing scatter preview marker size (#18726) @bernardobelchior
+- [charts-pro] Allow disabling the copy of styles in charts export (#18753) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.8.0`
+
+- [tree view] Fix state update that caused scrolling bug when lazy loading and `checkboxSelection` are enabled (#18749) @rita-codes
+
+#### `@mui/x-tree-view-pro@8.8.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.8.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.8.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add standalone Pyramid chart page to improve SEO (#18527) @prakhargupta1
+- [docs] Add example to customise line interaction (#18539) @alexfauquette
+- [docs] Fix `size` column filtering in files tree demo (#17952) @cherniavskii
+- [docs] Generate `llms.txt` for X and their products (#18595) @siriwatknp
+- [docs] Improve bar chart demos on mobile (#18721) @alexfauquette
+- [docs] Refine charts overview page (#17447) @noraleonte
+
+### Miscellaneous
+
+- [code-infra] Ensure all `@mui/*` packages are picked by `Material UI` renovate group (#18711) @LukasTy
+- [code-infra] Fix broken CI (#18716) @LukasTy
+- [code-infra] Refactor `prettier` config resolving (#18720) @LukasTy
+- [test] Increase data points in chart benchmarks (#18714) @bernardobelchior
+
+## 8.7.0
+
+_Jul 4, 2025_
+
+We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Add `useChartProApiRef` for easier access to the API
+- 📆 Support different start and end `referenceDate` props on range components
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+- 🌎 Improve Greek (el-GR) translations on the Charts
+- 🌎 Improve Danish (da-DK) locale on the Data Grid
+
+Special thanks go out to the community members for their valuable contributions:
+@ShahrazH, @vadimkuragkovskiy, @whythecode
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @brijeshb42, @mapache-salvaje, @arminmeh, @bernardobelchior, @bharatkashyap, @Janpot, @JCQuintas, @KenanYusuf, @LukasTy, @michelengelen, @rita-codes
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.7.0`
+
+- [DataGrid] Fix column state restore with controlled column visibility model (#18567) @arminmeh
+- [DataGrid] Fix styling virtualized column headers (#18603) @KenanYusuf
+- [l10n] Improve Danish (da-DK) locale (#18537) @ShahrazH
+
+#### `@mui/x-data-grid-pro@8.7.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.7.0`.
+
+#### `@mui/x-data-grid-premium@8.7.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.7.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.7.0`
+
+- [pickers] Support different `start` and `end` `referenceDate` props on range components (#18549) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.7.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.7.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.7.0`
+
+- [charts] Export `ChartsReferenceLineProps` (#18598) @bernardobelchior
+- [charts] Extract bar and line plot logic into reusable hooks (#18541) @bernardobelchior
+- [charts] Extract plot logic into separate files for reuse (#18522) @bernardobelchior
+- [charts] Profile charts benchmarks using chromium (#18528) @bernardobelchior
+- [l10n] Add Greek (el-GR) locale to charts (#18548) @whythecode
+
+#### `@mui/x-charts-pro@8.7.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.7.0`, plus:
+
+- [charts-pro] Add `useChartProApiRef` for easier refs (#18013) @JCQuintas
+- [charts-pro] Add tests and classes to zoom slider (#18660) @JCQuintas
+- [charts-pro] Fix geometry not handling gestures in specific scenarios (#18651) @JCQuintas
+- [charts-pro] Rename `useChartApiContext` to `useChartProApiContext` (#18565) @JCQuintas
+- [charts-pro] Zoom pointer improvements (#17480) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.7.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.7.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.7.0`, plus:
+
+- [tree view pro] Add missing `dataSource` JSDoc (#18650) @LukasTy
+
+### Docs
+
+- [docs] Add MCP stub (#18204) @bharatkashyap
+- [docs] Fix AI Assistant proxy rewrite prefix (#18661) @arminmeh
+- [docs] Improve test README.MD (#18634) @LukasTy
+- [docs] Provide workaround for pie chart composition (#18600) @alexfauquette
+- [docs][charts] Add donut chart as a special case of a pie chart (#18652) @bernardobelchior
+- [docs][charts] Centralize country and continent data (#18604) @bernardobelchior
+- [docs][data grid] Audit and revise the Pro row docs (#17926) @mapache-salvaje
+- [docs][pickers] Add mention of theme augmentation in relevant migration section (#18608) @LukasTy
+
+### Core
+
+- [core] Avoid stringifying `document` object (#18657) @vadimkuragkovskiy
+
+### Miscellaneous
+
+- [code-infra] Bump code-infra version and fix breaking changes (#18653) @brijeshb42
+- [code-infra] Ensure `material-ui/disallow-react-api-in-server-components` ESLint rule is applied (#18570) @LukasTy
+- [code-infra] Migrate to flat eslint config (#18562) @brijeshb42
+- [code-infra] Refactor eslint config (#18643) @LukasTy
+- [infra] Add renovatebot rule for latest infra packages (#18609) @Janpot
+- [infra] Move pushArgos script to code-infra (#18667) @Janpot
+- [infra] Updates release script to fetch latest major version from upstream (#18552) @michelengelen
+- [release] Add missing contributor to changelog (#18561) @bernardobelchior
+
 ## 8.6.0
 
 _Jun 27, 2025_
@@ -19,7 +220,7 @@ We'd like to extend a big thank you to the 12 contributors who made this release
 - 🌎 Improve German (de-DE) locale
 
 Special thanks go out to the community members for their valuable contributions:
-@ShahrazH, @vadimka123
+@omalyutin, @ShahrazH, @vadimka123
 
 The following are all team members who have contributed to this release:
 @arminmeh, @bernardobelchior, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @noraleonte, @rita-codes, @sai6855

package/components/GridScrollArea.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { RefObject } from '@mui/x-internals/types';
 import { GridScrollParams } from "../models/params/gridScrollParams.js";
 interface ScrollAreaProps {
-  scrollDirection: 'left' | 'right';
+  scrollDirection: 'left' | 'right' | 'up' | 'down';
   scrollPosition: RefObject<GridScrollParams>;
 }
 declare function GridScrollAreaWrapper(props: ScrollAreaProps): React.JSX.Element | null;

package/components/GridScrollArea.js

@@ -1,6 +1,7 @@
 "use strict";
 'use client';
 
+/* eslint-disable @typescript-eslint/no-use-before-define */
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
@@ -13,6 +14,7 @@ var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallb
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
 var _fastMemo = require("@mui/x-internals/fastMemo");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _constants = require("../constants");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
@@ -23,6 +25,7 @@ var _densitySelector = require("../hooks/features/density/densitySelector");
 var _useTimeout = require("../hooks/utils/useTimeout");
 var _gridColumnsUtils = require("../hooks/features/columns/gridColumnsUtils");
 var _createSelector = require("../utils/createSelector");
+var _gridRowsMetaSelector = require("../hooks/features/rows/gridRowsMetaSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 const CLIFF = 1;
 const SLOP = 1.5;
@@ -43,18 +46,39 @@ const GridScrollAreaRawRoot = (0, _system.styled)('div', {
     [`&.${_constants.gridClasses['scrollArea--left']}`]: styles['scrollArea--left']
   }, {
     [`&.${_constants.gridClasses['scrollArea--right']}`]: styles['scrollArea--right']
+  }, {
+    [`&.${_constants.gridClasses['scrollArea--up']}`]: styles['scrollArea--up']
+  }, {
+    [`&.${_constants.gridClasses['scrollArea--down']}`]: styles['scrollArea--down']
   }, styles.scrollArea]
 })(() => ({
   position: 'absolute',
-  top: 0,
   zIndex: 101,
-  width: 20,
-  bottom: 0,
+  // Horizontal scroll areas
   [`&.${_constants.gridClasses['scrollArea--left']}`]: {
-    left: 0
+    top: 0,
+    left: 0,
+    width: 20,
+    bottom: 0
   },
   [`&.${_constants.gridClasses['scrollArea--right']}`]: {
-    right: 0
+    top: 0,
+    right: 0,
+    width: 20,
+    bottom: 0
+  },
+  // Vertical scroll areas
+  [`&.${_constants.gridClasses['scrollArea--up']}`]: {
+    top: 0,
+    left: 0,
+    right: 0,
+    height: 20
+  },
+  [`&.${_constants.gridClasses['scrollArea--down']}`]: {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 20
   }
 }));
 const offsetSelector = (0, _createSelector.createSelector)(_gridDimensionsSelectors.gridDimensionsSelector, (dimensions, direction) => {
@@ -64,19 +88,27 @@ const offsetSelector = (0, _createSelector.createSelector)(_gridDimensionsSelect
   if (direction === 'right') {
     return dimensions.rightPinnedWidth + (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
   }
+  // For vertical scroll areas, we don't need horizontal offset
   return 0;
 });
 function GridScrollAreaWrapper(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const [dragging, setDragging] = React.useState(false);
-  (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderDragStart', () => setDragging(true));
-  (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderDragEnd', () => setDragging(false));
-  if (!dragging) {
+  const [dragDirection, setDragDirection] = React.useState('none');
+
+  // Listen for both column and row drag events
+  (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderDragStart', () => setDragDirection('horizontal'));
+  (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderDragEnd', () => setDragDirection('none'));
+  (0, _useGridEvent.useGridEvent)(apiRef, 'rowDragStart', () => setDragDirection('vertical'));
+  (0, _useGridEvent.useGridEvent)(apiRef, 'rowDragEnd', () => setDragDirection('none'));
+  if (dragDirection === 'none') {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridScrollAreaContent, (0, _extends2.default)({}, props));
+  if (dragDirection === 'horizontal') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridHorizontalScrollAreaContent, (0, _extends2.default)({}, props));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridVerticalScrollAreaContent, (0, _extends2.default)({}, props));
 }
-function GridScrollAreaContent(props) {
+function GridHorizontalScrollAreaContent(props) {
   const {
     scrollDirection,
     scrollPosition
@@ -100,26 +132,17 @@ function GridScrollAreaContent(props) {
     }
     return false;
   };
-  const [canScrollMore, setCanScrollMore] = React.useState(getCanScrollMore);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const ownerState = (0, _extends2.default)({}, rootProps, {
-    scrollDirection
-  });
-  const classes = useUtilityClasses(ownerState);
   const totalHeaderHeight = (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, rootProps);
   const headerHeight = Math.floor(rootProps.columnHeaderHeight * densityFactor);
-  const style = {
+  const style = (0, _extends2.default)({
     height: headerHeight,
     top: totalHeaderHeight - headerHeight
-  };
-  if (scrollDirection === 'left') {
-    style.left = sideOffset;
-  } else if (scrollDirection === 'right') {
-    style.right = sideOffset;
-  }
-  const handleScrolling = () => {
-    setCanScrollMore(getCanScrollMore);
-  };
+  }, scrollDirection === 'left' ? {
+    left: sideOffset
+  } : {}, scrollDirection === 'right' ? {
+    right: sideOffset
+  } : {});
   const handleDragOver = (0, _useEventCallback.default)(event => {
     let offset;
 
@@ -142,16 +165,99 @@ function GridScrollAreaContent(props) {
       });
     });
   });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridScrollAreaContent, (0, _extends2.default)({}, props, {
+    ref: rootRef,
+    getCanScrollMore: getCanScrollMore,
+    style: style,
+    handleDragOver: handleDragOver
+  }));
+}
+function GridVerticalScrollAreaContent(props) {
+  const {
+    scrollDirection,
+    scrollPosition
+  } = props;
+  const rootRef = React.useRef(null);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const timeout = (0, _useTimeout.useTimeout)();
+  const rowsMeta = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsMetaSelector.gridRowsMetaSelector);
+  const getCanScrollMore = () => {
+    const dimensions = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef);
+    if (scrollDirection === 'up') {
+      // Only render if the user has not reached yet the top of the list
+      return scrollPosition.current.top > 0;
+    }
+    if (scrollDirection === 'down') {
+      // Only render if the user has not reached yet the bottom of the list
+      const totalRowsHeight = rowsMeta.currentPageTotalHeight || 0;
+      const maxScrollTop = totalRowsHeight - dimensions.viewportInnerSize.height - dimensions.scrollbarSize;
+      return scrollPosition.current.top < maxScrollTop;
+    }
+    return false;
+  };
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const totalHeaderHeight = (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, rootProps);
+  const style = {
+    top: scrollDirection === 'up' ? totalHeaderHeight : undefined,
+    bottom: scrollDirection === 'down' ? 0 : undefined
+  };
+  const handleDragOver = (0, _useEventCallback.default)(event => {
+    let offset;
+
+    // Prevents showing the forbidden cursor
+    event.preventDefault();
+    if (scrollDirection === 'up') {
+      offset = event.clientY - rootRef.current.getBoundingClientRect().bottom;
+    } else if (scrollDirection === 'down') {
+      offset = Math.max(1, event.clientY - rootRef.current.getBoundingClientRect().top);
+    } else {
+      throw new Error('MUI X: Wrong drag direction');
+    }
+    offset = (offset - CLIFF) * SLOP + CLIFF;
+
+    // Avoid freeze and inertia.
+    timeout.start(0, () => {
+      apiRef.current.scroll({
+        left: scrollPosition.current.left,
+        top: scrollPosition.current.top + offset
+      });
+    });
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridScrollAreaContent, (0, _extends2.default)({}, props, {
+    ref: rootRef,
+    getCanScrollMore: getCanScrollMore,
+    style: style,
+    handleDragOver: handleDragOver
+  }));
+}
+const GridScrollAreaContent = (0, _forwardRef.forwardRef)(function GridScrollAreaContent(props, ref) {
+  const {
+    scrollDirection,
+    getCanScrollMore,
+    style,
+    handleDragOver
+  } = props;
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const [canScrollMore, setCanScrollMore] = React.useState(getCanScrollMore);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const ownerState = (0, _extends2.default)({}, rootProps, {
+    scrollDirection
+  });
+  const classes = useUtilityClasses(ownerState);
+  const handleScrolling = () => {
+    setCanScrollMore(getCanScrollMore);
+  };
   (0, _useGridEvent.useGridEvent)(apiRef, 'scrollPositionChange', handleScrolling);
   if (!canScrollMore) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridScrollAreaRawRoot, {
-    ref: rootRef,
+    ref: ref,
     className: classes.root,
     ownerState: ownerState,
     onDragOver: handleDragOver,
     style: style
   });
-}
+});
+if (process.env.NODE_ENV !== "production") GridScrollAreaContent.displayName = "GridScrollAreaContent";
 const GridScrollArea = exports.GridScrollArea = (0, _fastMemo.fastMemo)(GridScrollAreaWrapper);

package/components/cell/GridActionsCell.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/components/cell/GridCell.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/components/cell/GridEditBooleanCell.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/components/cell/GridEditDateCell.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/components/cell/GridEditInputCell.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/components/cell/GridEditSingleSelectCell.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/components/columnHeaders/GridColumnGroupHeader.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/components/columnHeaders/GridColumnHeaderTitle.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/components/columnSelection/GridHeaderCheckbox.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/components/columnsManagement/GridColumnsManagement.js

@@ -1,4 +1,6 @@
 "use strict";
+/* eslint-disable @typescript-eslint/no-use-before-define */
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
@@ -23,8 +25,6 @@ var _assert = require("../../utils/assert");
 var _GridShadowScrollArea = require("../GridShadowScrollArea");
 var _gridPivotingSelectors = require("../../hooks/features/pivoting/gridPivotingSelectors");
 var _jsxRuntime = require("react/jsx-runtime");
-/* eslint-disable @typescript-eslint/no-use-before-define */
-
 const useUtilityClasses = ownerState => {
   const {
     classes

package/components/containers/GridRootStyles.js

@@ -629,11 +629,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       },
       '&.Mui-selected': selectedStyles
     },
-    [`& .${_gridClasses.gridClasses['container--top']}, & .${_gridClasses.gridClasses['container--bottom']}`]: {
-      '[role=row]': {
-        background: _cssVariables.vars.colors.background.base
-      }
-    },
     /* Cell styles */
     [`& .${_gridClasses.gridClasses.cell}`]: {
       flex: '0 0 auto',
@@ -847,6 +842,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       [`&.${_gridClasses.gridClasses['scrollbarFiller--pinnedRight']}`]: {
         backgroundColor: _cssVariables.vars.cell.background.pinned,
         position: 'sticky',
+        zIndex: 40,
+        // Should be above the column separator
         right: 0
       }
     },

package/components/menu/GridMenu.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/components/panel/GridPanel.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/components/panel/GridPanelContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {

package/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/components/panel/filterPanel/GridFilterInputDate.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/components/panel/filterPanel/GridFilterInputValue.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/components/panel/filterPanel/GridFilterPanel.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/components/quickFilter/QuickFilter.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/components/quickFilter/QuickFilterContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {