@mui/x-data-grid 8.0.0 → 8.1.0

package/CHANGELOG.md

@@ -5,6 +5,112 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.1.0
+
+_Apr 24, 2025_
+
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Add API to print a chart or export it as PDF: `apiRef.exportAsPrint`.
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@lhilgert9, @ArturAghakaryan, @sai6855.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @JCQuintas, @joserodolfofreitas, @KenanYusuf, @LukasTy, @mapache-salvaje, @oliviertassinari, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.1.0`
+
+- [DataGrid] Allow row deselection with multiple rows selected (#17473) @arminmeh
+- [DataGrid] Fix column title truncation on touch devices (#17375) @KenanYusuf
+- [DataGrid] Remove internal usage of `material` prop (#17513) @KenanYusuf
+- [DataGrid] Fix apiRef not being passed on onCellClick params (#17335) @sai6855
+- [DataGrid] Add Armenian (hy-AM) locale (#17527) @ArturAghakaryan
+
+#### `@mui/x-data-grid-pro@8.1.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.1.0`, plus:
+
+- [DataGridPro] Fix locales.ts export (#17433) @lhilgert9
+- [DataGridPro] Avoid proptypes warnings with header filters in React 17 (#17482) @cherniavskii
+- [DataGridPro] Fix expandable rows detail content height updates (#17394) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.1.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.1.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.1.0`
+
+- [pickers] Improve `PickersInputBase` owner state typing (#17478) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.1.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.1.0`.
+
+### Charts
+
+- Add API to print a chart or export it as PDF: `apiRef.exportAsPrint`.
+
+#### `@mui/x-charts@8.1.0`
+
+- [charts] Add a localization provider (#17325) @alexfauquette
+- [charts] Add codemod for replacing legend's hidden slot prop (#17392) @bernardobelchior
+- [charts] Fix chart visual tests flakiness (#17469) @bernardobelchior
+- [charts] Fix tooltip position (#17440) @alexfauquette
+- [charts] Improve axis tooltip performances (#17398) @alexfauquette
+- [charts] Move radar from under development to preview (#17418) @alexfauquette
+- [charts] Advance time in charts regression tests (#17420) @bernardobelchior
+- [charts] Fix charts visuals flakiness (#17472) @bernardobelchior
+- [charts] Move `rafThrottle` on event handlers instead of setter (#17489) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.1.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.1.0`, plus:
+
+- [charts-pro] Add export as PDF/print functionality (#17285) @bernardobelchior
+- [charts-pro] Fix axis zoom being disabled when not specified in `initialZoom` (#17500) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.1.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.1.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.1.0`.
+
+### Docs
+
+- [docs] Fix AI Assistant Panel Trigger demo (#17426) @KenanYusuf
+- [docs] Fix DataGrid's master-detail demo for one expanded detail panel at a time (#17471) @arminmeh
+- [docs] Improve StackOverflow links (#17483) @oliviertassinari
+- [docs] Refine charts demos (#17417) @alexfauquette
+- [docs] Remove ad on paid docs pages (#17373) @oliviertassinari
+- [docs] Serve migration guides in raw markdown format (#17210) @cherniavskii
+- [docs] Fix heading structure (#17495) @oliviertassinari
+- [docs] Revise the Row Grouping doc (#16217) @mapache-salvaje
+- [docs] Fix ellipsis in the demo (#17476) @oliviertassinari
+- [docs] Add docs information for Legend HTML (#17502) @alexfauquette
+- [docs] Refine charts demos (#17417) @alexfauquette
+- [tree view][docs] Copyedit the Tree View Overview page (#17498) @mapache-salvaje
+
+### Core
+
+- [core] Bump `@types/node` (#17444) @LukasTy
+- [core] Remove `react-is` dependency (#17470) @LukasTy
+- [core] Remove redundant `overridesResolver` in `styled` components (#17466) @romgrk
+- [core] Update support table (#17425) @joserodolfofreitas
+- [code-infra] Ditch `@babel/node` (#17446) @LukasTy
+- [code-infra] Further remove `clock=fake` from pickers (#17253) @JCQuintas
+
 ## 8.0.0
 
 _Apr 17, 2025_

package/components/GridRowCount.js

@@ -31,8 +31,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridRowCountRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'RowCount',
-  overridesResolver: (props, styles) => styles.rowCount
+  slot: 'RowCount'
 })({
   alignItems: 'center',
   display: 'flex',

package/components/GridSelectedRowCount.js

@@ -31,8 +31,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridSelectedRowCountRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'SelectedRowCount',
-  overridesResolver: (props, styles) => styles.selectedRowCount
+  slot: 'SelectedRowCount'
 })({
   alignItems: 'center',
   display: 'flex',

package/components/GridSkeletonLoadingOverlay.js

@@ -31,8 +31,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["skeletonRowsCount", "visibleColumns", "showFirstRowBorder"];
 const SkeletonOverlay = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'SkeletonLoadingOverlay',
-  overridesResolver: (props, styles) => styles.skeletonLoadingOverlay
+  slot: 'SkeletonLoadingOverlay'
 })({
   minWidth: '100%',
   width: 'max-content',

package/components/base/GridOverlays.js

@@ -22,8 +22,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const GridOverlayWrapperRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapper',
-  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant' && prop !== 'right',
-  overridesResolver: (props, styles) => styles.overlayWrapper
+  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant' && prop !== 'right'
 })(({
   overlayType,
   loadingOverlayVariant,
@@ -47,8 +46,7 @@ loadingOverlayVariant !== 'skeleton' ? {
 const GridOverlayWrapperInner = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapperInner',
-  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant',
-  overridesResolver: (props, styles) => styles.overlayWrapperInner
+  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant'
 })({});
 const useUtilityClasses = ownerState => {
   const {

package/components/columnHeaders/GridBaseColumnHeaders.js

@@ -28,8 +28,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridColumnHeadersRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'ColumnHeaders',
-  overridesResolver: (props, styles) => styles.columnHeaders
+  slot: 'ColumnHeaders'
 })({
   display: 'flex',
   flexDirection: 'column',

package/components/columnHeaders/GridColumnHeaderTitle.js

@@ -30,8 +30,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridColumnHeaderTitleRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'ColumnHeaderTitle',
-  overridesResolver: (props, styles) => styles.columnHeaderTitle
+  slot: 'ColumnHeaderTitle'
 })({
   textOverflow: 'ellipsis',
   overflow: 'hidden',

package/components/columnHeaders/GridIconButtonContainer.js

@@ -28,8 +28,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridIconButtonContainerRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'IconButtonContainer',
-  overridesResolver: (props, styles) => styles.iconButtonContainer
+  slot: 'IconButtonContainer'
 })(() => ({
   display: 'flex',
   visibility: 'hidden',

package/components/containers/GridFooterContainer.js

@@ -29,8 +29,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridFooterContainerRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'FooterContainer',
-  overridesResolver: (props, styles) => styles.footerContainer
+  slot: 'FooterContainer'
 })({
   display: 'flex',
   justifyContent: 'space-between',

package/components/containers/GridRootStyles.js

@@ -9,16 +9,6 @@ var _gridClasses = require("../../constants/gridClasses");
 var _cssVariables = require("../../constants/cssVariables");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
-const columnHeaderStyles = {
-  [`& .${_gridClasses.gridClasses.iconButtonContainer}`]: {
-    visibility: 'visible',
-    width: 'auto'
-  },
-  [`& .${_gridClasses.gridClasses.menuIcon}`]: {
-    width: 'auto',
-    visibility: 'visible'
-  }
-};
 const columnSeparatorTargetSize = 10;
 const columnSeparatorOffset = -5;
 const focusOutlineWidth = 1;
@@ -520,7 +510,16 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       backgroundColor: headerBackground
     },
     '@media (hover: hover)': {
-      [`& .${_gridClasses.gridClasses.columnHeader}:hover`]: columnHeaderStyles,
+      [`& .${_gridClasses.gridClasses.columnHeader}:hover`]: {
+        [`& .${_gridClasses.gridClasses.menuIcon}`]: {
+          width: 'auto',
+          visibility: 'visible'
+        },
+        [`& .${_gridClasses.gridClasses.iconButtonContainer}`]: {
+          visibility: 'visible',
+          width: 'auto'
+        }
+      },
       [`& .${_gridClasses.gridClasses.columnHeader}:not(.${_gridClasses.gridClasses['columnHeader--sorted']}):hover .${_gridClasses.gridClasses.sortButton},
         & .${_gridClasses.gridClasses.pivotPanelField}:not(.${_gridClasses.gridClasses['pivotPanelField--sorted']}):hover .${_gridClasses.gridClasses.sortButton},
         & .${_gridClasses.gridClasses.pivotPanelField}:not(.${_gridClasses.gridClasses['pivotPanelField--sorted']}) .${_gridClasses.gridClasses.sortButton}:focus-visible`]: {
@@ -528,7 +527,10 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       }
     },
     '@media (hover: none)': {
-      [`& .${_gridClasses.gridClasses.columnHeader}`]: columnHeaderStyles,
+      [`& .${_gridClasses.gridClasses.columnHeader} .${_gridClasses.gridClasses.menuIcon}`]: {
+        width: 'auto',
+        visibility: 'visible'
+      },
       [`& .${_gridClasses.gridClasses.columnHeader}:focus,
         & .${_gridClasses.gridClasses['columnHeader--siblingFocused']}`]: {
         [`.${_gridClasses.gridClasses['columnSeparator--resizable']}`]: {

package/components/panel/GridPanelFooter.js

@@ -29,8 +29,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridPanelFooterRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'PanelFooter',
-  overridesResolver: (props, styles) => styles.panelFooter
+  slot: 'PanelFooter'
 })({
   padding: _cssVariables.vars.spacing(1),
   display: 'flex',

package/components/panel/GridPanelHeader.js

@@ -29,8 +29,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridPanelHeaderRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'PanelHeader',
-  overridesResolver: (props, styles) => styles.panelHeader
+  slot: 'PanelHeader'
 })({
   padding: _cssVariables.vars.spacing(1)
 });

package/components/panel/filterPanel/GridFilterForm.js

@@ -44,16 +44,14 @@ const useUtilityClasses = ownerState => {
 };
 const GridFilterFormRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'FilterForm',
-  overridesResolver: (props, styles) => styles.filterForm
+  slot: 'FilterForm'
 })({
   display: 'flex',
   gap: _cssVariables.vars.spacing(1.5)
 });
 const FilterFormDeleteIcon = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'FilterFormDeleteIcon',
-  overridesResolver: (_, styles) => styles.filterFormDeleteIcon
+  slot: 'FilterFormDeleteIcon'
 })({
   flexShrink: 0,
   display: 'flex',
@@ -62,30 +60,26 @@ const FilterFormDeleteIcon = (0, _styles.styled)('div', {
 });
 const FilterFormLogicOperatorInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'FilterFormLogicOperatorInput',
-  overridesResolver: (_, styles) => styles.filterFormLogicOperatorInput
+  slot: 'FilterFormLogicOperatorInput'
 })({
   minWidth: 75,
   justifyContent: 'end'
 });
 const FilterFormColumnInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'FilterFormColumnInput',
-  overridesResolver: (_, styles) => styles.filterFormColumnInput
+  slot: 'FilterFormColumnInput'
 })({
   width: 150
 });
 const FilterFormOperatorInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'FilterFormOperatorInput',
-  overridesResolver: (_, styles) => styles.filterFormOperatorInput
+  slot: 'FilterFormOperatorInput'
 })({
   width: 150
 });
 const FilterFormValueInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'FilterFormValueInput',
-  overridesResolver: (_, styles) => styles.filterFormValueInput
+  slot: 'FilterFormValueInput'
 })({
   width: 190
 });

package/components/toolbar/GridToolbarFilterButton.js

@@ -35,8 +35,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridToolbarFilterListRoot = (0, _styles.styled)('ul', {
   name: 'MuiDataGrid',
-  slot: 'ToolbarFilterList',
-  overridesResolver: (_props, styles) => styles.toolbarFilterList
+  slot: 'ToolbarFilterList'
 })({
   margin: _cssVariables.vars.spacing(1, 1, 0.5),
   padding: _cssVariables.vars.spacing(0, 1)

package/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -32,8 +32,7 @@ const useUtilityClasses = ownerState => {
 };
 const VirtualScrollerRenderZoneRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'VirtualScrollerRenderZone',
-  overridesResolver: (props, styles) => styles.virtualScrollerRenderZone
+  slot: 'VirtualScrollerRenderZone'
 })({
   position: 'absolute',
   display: 'flex',

package/esm/components/GridRowCount.js

@@ -23,8 +23,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridRowCountRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'RowCount',
-  overridesResolver: (props, styles) => styles.rowCount
+  slot: 'RowCount'
 })({
   alignItems: 'center',
   display: 'flex',

package/esm/components/GridSelectedRowCount.js

@@ -23,8 +23,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridSelectedRowCountRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'SelectedRowCount',
-  overridesResolver: (props, styles) => styles.selectedRowCount
+  slot: 'SelectedRowCount'
 })({
   alignItems: 'center',
   display: 'flex',

package/esm/components/GridSkeletonLoadingOverlay.js

@@ -23,8 +23,7 @@ import { attachPinnedStyle } from "../internals/utils/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const SkeletonOverlay = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'SkeletonLoadingOverlay',
-  overridesResolver: (props, styles) => styles.skeletonLoadingOverlay
+  slot: 'SkeletonLoadingOverlay'
 })({
   minWidth: '100%',
   width: 'max-content',

package/esm/components/base/GridOverlays.js

@@ -14,8 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const GridOverlayWrapperRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapper',
-  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant' && prop !== 'right',
-  overridesResolver: (props, styles) => styles.overlayWrapper
+  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant' && prop !== 'right'
 })(({
   overlayType,
   loadingOverlayVariant,
@@ -39,8 +38,7 @@ loadingOverlayVariant !== 'skeleton' ? {
 const GridOverlayWrapperInner = styled('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapperInner',
-  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant',
-  overridesResolver: (props, styles) => styles.overlayWrapperInner
+  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant'
 })({});
 const useUtilityClasses = ownerState => {
   const {

package/esm/components/columnHeaders/GridBaseColumnHeaders.js

@@ -20,8 +20,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridColumnHeadersRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'ColumnHeaders',
-  overridesResolver: (props, styles) => styles.columnHeaders
+  slot: 'ColumnHeaders'
 })({
   display: 'flex',
   flexDirection: 'column',

package/esm/components/columnHeaders/GridColumnHeaderTitle.js

@@ -22,8 +22,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridColumnHeaderTitleRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'ColumnHeaderTitle',
-  overridesResolver: (props, styles) => styles.columnHeaderTitle
+  slot: 'ColumnHeaderTitle'
 })({
   textOverflow: 'ellipsis',
   overflow: 'hidden',

package/esm/components/columnHeaders/GridIconButtonContainer.js

@@ -20,8 +20,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridIconButtonContainerRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'IconButtonContainer',
-  overridesResolver: (props, styles) => styles.iconButtonContainer
+  slot: 'IconButtonContainer'
 })(() => ({
   display: 'flex',
   visibility: 'hidden',

package/esm/components/containers/GridFooterContainer.js

@@ -21,8 +21,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridFooterContainerRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'FooterContainer',
-  overridesResolver: (props, styles) => styles.footerContainer
+  slot: 'FooterContainer'
 })({
   display: 'flex',
   justifyContent: 'space-between',

package/esm/components/containers/GridRootStyles.js

@@ -3,16 +3,6 @@ import { gridClasses as c } from "../../constants/gridClasses.js";
 import { vars } from "../../constants/cssVariables.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
-const columnHeaderStyles = {
-  [`& .${c.iconButtonContainer}`]: {
-    visibility: 'visible',
-    width: 'auto'
-  },
-  [`& .${c.menuIcon}`]: {
-    width: 'auto',
-    visibility: 'visible'
-  }
-};
 const columnSeparatorTargetSize = 10;
 const columnSeparatorOffset = -5;
 const focusOutlineWidth = 1;
@@ -514,7 +504,16 @@ export const GridRootStyles = styled('div', {
       backgroundColor: headerBackground
     },
     '@media (hover: hover)': {
-      [`& .${c.columnHeader}:hover`]: columnHeaderStyles,
+      [`& .${c.columnHeader}:hover`]: {
+        [`& .${c.menuIcon}`]: {
+          width: 'auto',
+          visibility: 'visible'
+        },
+        [`& .${c.iconButtonContainer}`]: {
+          visibility: 'visible',
+          width: 'auto'
+        }
+      },
       [`& .${c.columnHeader}:not(.${c['columnHeader--sorted']}):hover .${c.sortButton},
         & .${c.pivotPanelField}:not(.${c['pivotPanelField--sorted']}):hover .${c.sortButton},
         & .${c.pivotPanelField}:not(.${c['pivotPanelField--sorted']}) .${c.sortButton}:focus-visible`]: {
@@ -522,7 +521,10 @@ export const GridRootStyles = styled('div', {
       }
     },
     '@media (hover: none)': {
-      [`& .${c.columnHeader}`]: columnHeaderStyles,
+      [`& .${c.columnHeader} .${c.menuIcon}`]: {
+        width: 'auto',
+        visibility: 'visible'
+      },
       [`& .${c.columnHeader}:focus,
         & .${c['columnHeader--siblingFocused']}`]: {
         [`.${c['columnSeparator--resizable']}`]: {

package/esm/components/panel/GridPanelFooter.js

@@ -21,8 +21,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridPanelFooterRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'PanelFooter',
-  overridesResolver: (props, styles) => styles.panelFooter
+  slot: 'PanelFooter'
 })({
   padding: vars.spacing(1),
   display: 'flex',

package/esm/components/panel/GridPanelHeader.js

@@ -21,8 +21,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridPanelHeaderRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'PanelHeader',
-  overridesResolver: (props, styles) => styles.panelHeader
+  slot: 'PanelHeader'
 })({
   padding: vars.spacing(1)
 });

package/esm/components/panel/filterPanel/GridFilterForm.js

@@ -36,16 +36,14 @@ const useUtilityClasses = ownerState => {
 };
 const GridFilterFormRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'FilterForm',
-  overridesResolver: (props, styles) => styles.filterForm
+  slot: 'FilterForm'
 })({
   display: 'flex',
   gap: vars.spacing(1.5)
 });
 const FilterFormDeleteIcon = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'FilterFormDeleteIcon',
-  overridesResolver: (_, styles) => styles.filterFormDeleteIcon
+  slot: 'FilterFormDeleteIcon'
 })({
   flexShrink: 0,
   display: 'flex',
@@ -54,30 +52,26 @@ const FilterFormDeleteIcon = styled('div', {
 });
 const FilterFormLogicOperatorInput = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'FilterFormLogicOperatorInput',
-  overridesResolver: (_, styles) => styles.filterFormLogicOperatorInput
+  slot: 'FilterFormLogicOperatorInput'
 })({
   minWidth: 75,
   justifyContent: 'end'
 });
 const FilterFormColumnInput = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'FilterFormColumnInput',
-  overridesResolver: (_, styles) => styles.filterFormColumnInput
+  slot: 'FilterFormColumnInput'
 })({
   width: 150
 });
 const FilterFormOperatorInput = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'FilterFormOperatorInput',
-  overridesResolver: (_, styles) => styles.filterFormOperatorInput
+  slot: 'FilterFormOperatorInput'
 })({
   width: 150
 });
 const FilterFormValueInput = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'FilterFormValueInput',
-  overridesResolver: (_, styles) => styles.filterFormValueInput
+  slot: 'FilterFormValueInput'
 })({
   width: 190
 });

package/esm/components/toolbar/GridToolbarFilterButton.js

@@ -27,8 +27,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridToolbarFilterListRoot = styled('ul', {
   name: 'MuiDataGrid',
-  slot: 'ToolbarFilterList',
-  overridesResolver: (_props, styles) => styles.toolbarFilterList
+  slot: 'ToolbarFilterList'
 })({
   margin: vars.spacing(1, 1, 0.5),
   padding: vars.spacing(0, 1)

package/esm/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -24,8 +24,7 @@ const useUtilityClasses = ownerState => {
 };
 const VirtualScrollerRenderZoneRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'VirtualScrollerRenderZone',
-  overridesResolver: (props, styles) => styles.virtualScrollerRenderZone
+  slot: 'VirtualScrollerRenderZone'
 })({
   position: 'absolute',
   display: 'flex',

package/esm/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -22,8 +22,7 @@ import { PinnedColumnPosition } from "../../../internals/constants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const GridColumnHeaderRow = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'ColumnHeaderRow',
-  overridesResolver: (_, styles) => styles.columnHeaderRow
+  slot: 'ColumnHeaderRow'
 })({
   display: 'flex'
 });

package/esm/hooks/features/rowSelection/useGridRowSelection.js

@@ -374,13 +374,14 @@ export const useGridRowSelection = (apiRef, props) => {
 
     const isMultipleSelectionDisabled = !checkboxSelection && !hasCtrlKey && !isKeyboardEvent(event);
     const resetSelection = !canHaveMultipleSelection || isMultipleSelectionDisabled;
+    const isSelected = apiRef.current.isRowSelected(id);
     const selectedRowsCount = gridRowSelectionCountSelector(apiRef);
-    if (canHaveMultipleSelection && selectedRowsCount > 1 && !hasCtrlKey) {
-      apiRef.current.selectRow(id, true, resetSelection);
-    } else {
-      const isSelected = apiRef.current.isRowSelected(id);
-      apiRef.current.selectRow(id, !isSelected, resetSelection);
-    }
+
+    // Clicking on a row should toggle the selection except when a range of rows is already selected and the selection should reset
+    // In that case, we want to keep the current row selected (https://github.com/mui/mui-x/pull/15509#discussion_r1878082687)
+    const shouldStaySelected = selectedRowsCount > 1 && resetSelection;
+    const newSelectionState = shouldStaySelected || !isSelected;
+    apiRef.current.selectRow(id, newSelectionState, resetSelection);
   }, [apiRef, canHaveMultipleSelection, checkboxSelection]);
   const handleRowClick = React.useCallback((params, event) => {
     if (disableRowSelectionOnClick) {

package/esm/hooks/features/rows/useGridParamsApi.js

@@ -53,7 +53,7 @@ export function useGridParamsApi(apiRef, props) {
       value,
       formattedValue: value,
       isEditable: false,
-      api: null
+      api: apiRef.current
     };
     if (colDef && colDef.valueFormatter) {
       params.formattedValue = colDef.valueFormatter(value, row, colDef, apiRef);

package/esm/index.js

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