@mui/x-data-grid 8.27.4 → 8.28.0

package/CHANGELOG.md

@@ -5,6 +5,149 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.28.0
+
+_Mar 19, 2026_
+
+We'd like to extend a big thank you to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+TODO INSERT HIGHLIGHTS
+
+The following team members contributed to this release:
+@alexfauquette, @brijeshb42, @Janpot, @JCQuintas, @sai6855
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.28.0`
+
+- [DataGrid] Move `elementOverrides` to constants and remove duplicates (@sai6855) (#21752) @github-actions[bot]
+
+#### `@mui/x-data-grid-pro@8.28.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.28.0`.
+
+#### `@mui/x-data-grid-premium@8.28.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.28.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.27.2`
+
+Internal changes.
+
+#### `@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`.
+
+### Charts
+
+#### `@mui/x-charts@8.28.0`
+
+- [charts] Improve deprecation warnings (#21760) (#21767) @alexfauquette
+- [charts] Refactor `FunnelChart` classes structure (@JCQuintas) (#21763) @github-actions[bot]
+- [charts] Refactor `Heatmap` classes structure (#21653) (#21745) @JCQuintas
+- [charts] Refactor `PieChart` classes structure (@JCQuintas) (#21715) @github-actions[bot]
+- [charts] Refactor `RadarChart` classes structure (@JCQuintas) (#21730) @github-actions[bot]
+- [charts] Refactor `SankeyChart` classes structure (#21654) (#21726) @JCQuintas
+- [charts] Rename `data-series-id` by `data-series` (#21761) (#21772) @alexfauquette
+
+#### `@mui/x-charts-pro@8.28.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.28.0`, plus:
+
+- [charts-pro] Allow `brush` interaction to accept `requiredKeys/pointerMode` (#21723) @JCQuintas
+
+#### `@mui/x-charts-premium@8.28.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.28.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.27.2`
+
+Internal changes.
+
+#### `@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.0`
+
+Internal changes.
+
+### Core
+
+- [code-infra] Fix contributor generation in changelog (#21712) @brijeshb42
+- [code-infra] Install pkg-pr-new (#21778) @Janpot
+
+## 8.27.5
+
+_Mar 11, 2026_
+
+We'd like to extend a big thank you to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+The following team members contributed to this release:
+@bernardobelchior, @JCQuintas, @MBilalShafi, @michelengelen, @mj12albert, @sai6855, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.27.5`
+
+- [DataGrid] Fix crash when `rows` and `rowModesModel` are updated simultaneously (#21684) @michelengelen
+- [DataGrid] Forward rest props in `GridFilterInputMultipleValue` (#21444) @siriwatknp
+- [DataGrid] Remove double rtl inversion logic for columns pinning (#21443) @siriwatknp
+- [DataGrid] Add missing `resizablePanelHandle` classes to `gridClasses` object (#21632) @sai6855
+- [DataGrid] Refactor `headerAlign` style calls (#21633) @sai6855
+- [DataGrid] Fix keyboard navigation with single-row checkbox selection (#21529) @mj12albert
+
+#### `@mui/x-data-grid-pro@8.27.5` [![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.5`, plus:
+
+- [DataGridPro] Add `role="presentation"` to detail panel toggle header content (#21691) @michelengelen
+- [DataGridPro] Fix sorting not reflected in nested server-side data (#21641) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.27.5` [![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.5`.
+
+### Charts
+
+#### `@mui/x-charts@8.27.5`
+
+- [charts] Refactor `BarChart` classes structure (#21601) (#21644) @JCQuintas
+- [charts] Refactor `LineChart` classes structure (#21672) @JCQuintas
+- [charts] Refactor `ScatterChart` classes structure (#21706) @JCQuintas
+
+#### `@mui/x-charts-pro@8.27.5` [![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.5`, plus:
+
+- [charts-pro] Fix image export truncated when page is zoomed out (#21696) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.27.5` [![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.5`.
+
+### Docs
+
+- [docs] Fix `AssistantWithDataSource` demo crashing (#21631) @sai6855
+- [docs] Move Range Bar Chart to existing charts (#21122) @bernardobelchior
+
+### Core
+
+- [code-infra] Fix datagrid test flakyness (#21657) @JCQuintas
+- [code-infra] Removed `getTeamMembers` function and usage from the release script (#21608) @michelengelen
+
+### Miscellaneous
+
+- [test] Add missing tests for forwarding props to filter operators in DataGrid (#21700) @siriwatknp
+
 ## 8.27.4
 
 _Mar 5, 2026_

package/components/columnHeaders/GridColumnGroupHeader.js

@@ -11,6 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _doesSupportPreventScroll = require("../../utils/doesSupportPreventScroll");
 var _gridClasses = require("../../constants/gridClasses");
@@ -35,7 +36,7 @@ const useUtilityClasses = ownerState => {
     pinnedPosition
   } = ownerState;
   const slots = {
-    root: ['columnHeader', headerAlign === 'left' && 'columnHeader--alignLeft', headerAlign === 'center' && 'columnHeader--alignCenter', headerAlign === 'right' && 'columnHeader--alignRight', isDragging && 'columnHeader--moving', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', 'withBorderColor', groupId === null ? 'columnHeader--emptyGroup' : 'columnHeader--filledGroup', pinnedPosition === _constants.PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === _constants.PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight', isLastColumn && 'columnHeader--last'],
+    root: ['columnHeader', headerAlign && `columnHeader--align${(0, _capitalize.default)(headerAlign)}`, isDragging && 'columnHeader--moving', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', 'withBorderColor', groupId === null ? 'columnHeader--emptyGroup' : 'columnHeader--filledGroup', pinnedPosition === _constants.PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === _constants.PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight', isLastColumn && 'columnHeader--last'],
     draggableContainer: ['columnHeaderDraggableContainer'],
     titleContainer: ['columnHeaderTitleContainer', 'withBorderColor'],
     titleContainerContent: ['columnHeaderTitleContainerContent']

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _fastMemo = require("@mui/x-internals/fastMemo");
 var _RtlProvider = require("@mui/system/RtlProvider");
@@ -48,7 +49,7 @@ const useUtilityClasses = ownerState => {
   // todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
   const isColumnNumeric = colDef.type === 'number';
   const slots = {
-    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',
+    root: ['columnHeader', colDef.headerAlign && `columnHeader--align${(0, _capitalize.default)(colDef.headerAlign)}`, 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
     isSiblingFocused && 'columnHeader--siblingFocused'],

package/components/columnSelection/GridHeaderCheckbox.js

@@ -12,6 +12,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _utils = require("../../hooks/features/rowSelection/utils");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
@@ -125,13 +126,14 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = (0, _forwardRef.forwardR
     };
     apiRef.current.publishEvent('headerSelectionCheckboxChange', params);
   };
-  const tabIndex = tabIndexState !== null && tabIndexState.field === props.field ? 0 : -1;
-  React.useLayoutEffect(() => {
+  const multipleSelectionEnabled = (0, _utils.isMultipleRowSelectionEnabled)(rootProps);
+  const tabIndex = tabIndexState !== null && tabIndexState.field === props.field && multipleSelectionEnabled ? 0 : -1;
+  (0, _useEnhancedEffect.default)(() => {
     const element = apiRef.current.getColumnHeaderElement(props.field);
-    if (tabIndex === 0 && element) {
+    if (tabIndex === 0 && element && multipleSelectionEnabled) {
       element.tabIndex = -1;
     }
-  }, [tabIndex, apiRef, props.field]);
+  }, [tabIndex, apiRef, props.field, multipleSelectionEnabled]);
   const handleKeyDown = React.useCallback(event => {
     if (event.key === ' ') {
       // imperative toggle the checkbox because Space is disable by some preventDefault
@@ -160,7 +162,7 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = (0, _forwardRef.forwardR
     },
     tabIndex: tabIndex,
     onKeyDown: handleKeyDown,
-    disabled: !(0, _utils.isMultipleRowSelectionEnabled)(rootProps)
+    disabled: !multipleSelectionEnabled
   }, rootProps.slotProps?.baseCheckbox, other, {
     ref: ref
   }));

package/components/containers/GridRootStyles.js

@@ -22,17 +22,13 @@ const separatorIconDragStyles = {
 // https://github.com/emotion-js/emotion/issues/1105#issuecomment-1722524968
 const ignoreSsrWarning = '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';
 const shouldShowBorderTopRightRadiusSelector = apiRef => !apiRef.current.state.dimensions.isReady ? apiRef.current.state.dimensions.scrollbarSize === 0 : apiRef.current.state.dimensions.hasScrollX && (!apiRef.current.state.dimensions.hasScrollY || apiRef.current.state.dimensions.scrollbarSize === 0);
-const elementOverrides = {
-  root: ['autoHeight', 'autosizing', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'withVerticalBorder'],
-  children: ['actionsCell', 'booleanCell', 'cell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--rangeTop', 'cell--selectionMode', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withLeftBorder', 'cell--withRightBorder', 'cellCheckbox', 'cellEmpty', 'cellOffsetLeft', 'cellSkeleton', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--emptyGroup', 'columnHeader--filledGroup', 'columnHeader--filtered', 'columnHeader--last', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--siblingFocused', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnSeparator', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'container--bottom', 'container--top', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'editBooleanCell', 'filterIcon', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'groupingCriteriaCell', 'groupingCriteriaCellLoadingContainer', 'groupingCriteriaCellToggle', 'headerFilterRow', 'iconSeparator', 'menuIcon', 'menuIconButton', 'menuList', 'menuOpen', 'overlayWrapperInner', 'pinnedRows', 'pinnedRows--bottom', 'pinnedRows--top', 'row', 'row--borderBottom', 'row--detailPanelExpanded', 'row--dragging', 'row--dynamicHeight', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderCellContainer', 'rowReorderCellPlaceholder', 'rowSkeleton', 'scrollbar', 'scrollbar--horizontal', 'scrollbar--vertical', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'sortIcon', 'treeDataGroupingCell', 'treeDataGroupingCellLoadingContainer', 'treeDataGroupingCellToggle', 'withBorderColor', 'row--beingDragged']
-};
 const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
   overridesResolver: (props, styles) => {
     // Root overrides
     const overrides = [styles.root];
-    elementOverrides.root.forEach(key => {
+    _gridClasses.gridClassesOverrides.root.forEach(key => {
       overrides.push({
         [`&.${_gridClasses.gridClasses[key]}`]: styles[key]
       });
@@ -41,7 +37,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     // Child element overrides
     // - Only declare overrides here for class names that are not applied to `styled` components.
     // - For `styled` components, declare overrides in the component itself.
-    elementOverrides.children.forEach(key => {
+    _gridClasses.gridClassesOverrides.children.forEach(key => {
       overrides.push({
         [`& .${_gridClasses.gridClasses[key]}`]: styles[key]
       });

package/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -1,27 +1,30 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridFilterInputMultipleValue = GridFilterInputMultipleValue;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps"];
 function GridFilterInputMultipleValue(props) {
   const {
-    item,
-    applyValue,
-    type,
-    apiRef,
-    focusElementRef,
-    slotProps
-  } = props;
+      item,
+      applyValue,
+      type,
+      apiRef,
+      focusElementRef,
+      slotProps
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const id = (0, _useId.default)();
   const [options, setOptions] = React.useState([]);
   const [filterValueState, setFilterValueState] = React.useState(item.value || []);
@@ -60,7 +63,7 @@ function GridFilterInputMultipleValue(props) {
         inputRef: focusElementRef
       }
     }
-  }, slotProps?.root));
+  }, other, slotProps?.root));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputMultipleValue.propTypes = {
   // ----------------------------- Warning --------------------------------

package/constants/gridClasses.d.ts

@@ -960,4 +960,20 @@ export interface GridClasses {
 }
 export type GridClassKey = keyof GridClasses;
 export declare function getDataGridUtilityClass(slot: string): string;
+/**
+ * Class groups for the MuiDataGrid component used in GridRootStyles overridesResolver.
+ *
+ * Splits classes into two groups to support style overrides:
+ * - `root`: classes applied directly to the root element (use `&.className` selector)
+ * - `children`: classes applied to child elements (use `& .className` selector)
+ *
+ * These are spread into the gridClasses utility object and used for CSS-in-JS overrides.
+ *
+ * Only include class names here that are NOT applied via `styled` components.
+ * For `styled` components, declare overrides directly in the component definition.
+ */
+export declare const gridClassesOverrides: {
+  readonly root: ["autoHeight", "autosizing", "root--densityStandard", "root--densityComfortable", "root--densityCompact", "root--disableUserSelection", "root--noToolbar", "withVerticalBorder"];
+  readonly children: ["actionsCell", "booleanCell", "cell", "cell--editable", "cell--editing", "cell--flex", "cell--pinnedLeft", "cell--pinnedRight", "cell--rangeBottom", "cell--rangeLeft", "cell--rangeRight", "cell--rangeTop", "cell--selectionMode", "cell--textCenter", "cell--textLeft", "cell--textRight", "cell--withLeftBorder", "cell--withRightBorder", "cellCheckbox", "cellEmpty", "cellOffsetLeft", "cellSkeleton", "checkboxInput", "columnHeader", "columnHeader--alignCenter", "columnHeader--alignLeft", "columnHeader--alignRight", "columnHeader--dragging", "columnHeader--emptyGroup", "columnHeader--filledGroup", "columnHeader--filtered", "columnHeader--last", "columnHeader--moving", "columnHeader--numeric", "columnHeader--pinnedLeft", "columnHeader--pinnedRight", "columnHeader--siblingFocused", "columnHeader--sortable", "columnHeader--sorted", "columnHeader--withLeftBorder", "columnHeader--withRightBorder", "columnHeaderCheckbox", "columnHeaderDraggableContainer", "columnHeaderTitleContainer", "columnHeaderTitleContainerContent", "columnSeparator", "columnSeparator--resizable", "columnSeparator--resizing", "columnSeparator--sideLeft", "columnSeparator--sideRight", "container--bottom", "container--top", "detailPanelToggleCell", "detailPanelToggleCell--expanded", "editBooleanCell", "filterIcon", "filler--borderBottom", "filler--pinnedLeft", "filler--pinnedRight", "groupingCriteriaCell", "groupingCriteriaCellLoadingContainer", "groupingCriteriaCellToggle", "headerFilterRow", "iconSeparator", "menuIcon", "menuIconButton", "menuList", "menuOpen", "overlayWrapperInner", "pinnedRows", "pinnedRows--bottom", "pinnedRows--top", "row", "row--borderBottom", "row--detailPanelExpanded", "row--dragging", "row--dynamicHeight", "row--editable", "row--editing", "row--firstVisible", "row--lastVisible", "rowReorderCell", "rowReorderCell--draggable", "rowReorderCellContainer", "rowReorderCellPlaceholder", "rowSkeleton", "scrollbar", "scrollbar--horizontal", "scrollbar--vertical", "scrollbarFiller", "scrollbarFiller--pinnedRight", "sortIcon", "treeDataGroupingCell", "treeDataGroupingCellLoadingContainer", "treeDataGroupingCellToggle", "withBorderColor", "row--beingDragged"];
+};
 export declare const gridClasses: Record<keyof GridClasses, string>;

package/constants/gridClasses.js

@@ -5,12 +5,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getDataGridUtilityClass = getDataGridUtilityClass;
-exports.gridClasses = void 0;
+exports.gridClassesOverrides = exports.gridClasses = void 0;
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 function getDataGridUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiDataGrid', slot);
 }
-const gridClasses = exports.gridClasses = (0, _generateUtilityClasses.default)('MuiDataGrid', ['aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'autoHeight', 'autosizing', 'mainContent', 'withSidePanel', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'container--top', 'container--bottom', 'detailPanel', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'longTextCell', 'longTextCellContent', 'longTextCellExpandButton', 'longTextCellCollapseButton', 'longTextCellPopup', 'longTextCellPopperContent', 'editLongTextCell', 'editLongTextCellValue', 'editLongTextCellPopup', 'editLongTextCellPopperContent', 'editLongTextCellTextarea', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible',
-// TODO v9: Rename to `cell--dragging`
-'row--dragging', 'row--beingDragged', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderIcon', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'sortIcon', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction']);
+
+/**
+ * Class groups for the MuiDataGrid component used in GridRootStyles overridesResolver.
+ *
+ * Splits classes into two groups to support style overrides:
+ * - `root`: classes applied directly to the root element (use `&.className` selector)
+ * - `children`: classes applied to child elements (use `& .className` selector)
+ *
+ * These are spread into the gridClasses utility object and used for CSS-in-JS overrides.
+ *
+ * Only include class names here that are NOT applied via `styled` components.
+ * For `styled` components, declare overrides directly in the component definition.
+ */
+const gridClassesOverrides = exports.gridClassesOverrides = {
+  root: ['autoHeight', 'autosizing', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'withVerticalBorder'],
+  children: ['actionsCell', 'booleanCell', 'cell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--rangeTop', 'cell--selectionMode', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withLeftBorder', 'cell--withRightBorder', 'cellCheckbox', 'cellEmpty', 'cellOffsetLeft', 'cellSkeleton', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--emptyGroup', 'columnHeader--filledGroup', 'columnHeader--filtered', 'columnHeader--last', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--siblingFocused', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnSeparator', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'container--bottom', 'container--top', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'editBooleanCell', 'filterIcon', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'groupingCriteriaCell', 'groupingCriteriaCellLoadingContainer', 'groupingCriteriaCellToggle', 'headerFilterRow', 'iconSeparator', 'menuIcon', 'menuIconButton', 'menuList', 'menuOpen', 'overlayWrapperInner', 'pinnedRows', 'pinnedRows--bottom', 'pinnedRows--top', 'row', 'row--borderBottom', 'row--detailPanelExpanded',
+  // TODO v9: Rename to `cell--dragging`
+  'row--dragging', 'row--dynamicHeight', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderCellContainer', 'rowReorderCellPlaceholder', 'rowSkeleton', 'scrollbar', 'scrollbar--horizontal', 'scrollbar--vertical', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'sortIcon', 'treeDataGroupingCell', 'treeDataGroupingCellLoadingContainer', 'treeDataGroupingCellToggle', 'withBorderColor', 'row--beingDragged']
+};
+const gridClasses = exports.gridClasses = (0, _generateUtilityClasses.default)('MuiDataGrid', [...gridClassesOverrides.root, ...gridClassesOverrides.children, 'aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'mainContent', 'withSidePanel', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderTitle', 'columnHeaders', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'detailPanel', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editInputCell', 'longTextCell', 'longTextCellContent', 'longTextCellExpandButton', 'longTextCellCollapseButton', 'longTextCellPopup', 'longTextCellPopperContent', 'editLongTextCell', 'editLongTextCellValue', 'editLongTextCellPopup', 'editLongTextCellPopperContent', 'editLongTextCellTextarea', 'filler', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'footerContainer', 'iconButtonContainer', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'overlay', 'overlayWrapper', 'root', 'rowCount', 'rowReorderIcon', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction', 'resizablePanelHandle', 'resizablePanelHandle--horizontal', 'resizablePanelHandle--vertical']);

package/constants/index.d.ts

@@ -1,4 +1,4 @@
 export * from "./envConstants.js";
 export * from "./localeTextConstants.js";
-export * from "./gridClasses.js";
+export { type GridClassKey, type GridClasses, getDataGridUtilityClass, gridClasses } from "./gridClasses.js";
 export * from "./signature.js";

package/constants/index.js

@@ -3,9 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  getDataGridUtilityClass: true,
+  gridClasses: true
+};
+Object.defineProperty(exports, "getDataGridUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _gridClasses.getDataGridUtilityClass;
+  }
+});
+Object.defineProperty(exports, "gridClasses", {
+  enumerable: true,
+  get: function () {
+    return _gridClasses.gridClasses;
+  }
+});
 var _envConstants = require("./envConstants");
 Object.keys(_envConstants).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _envConstants[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -17,6 +34,7 @@ Object.keys(_envConstants).forEach(function (key) {
 var _localeTextConstants = require("./localeTextConstants");
 Object.keys(_localeTextConstants).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _localeTextConstants[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -26,19 +44,10 @@ Object.keys(_localeTextConstants).forEach(function (key) {
   });
 });
 var _gridClasses = require("./gridClasses");
-Object.keys(_gridClasses).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _gridClasses[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _gridClasses[key];
-    }
-  });
-});
 var _signature = require("./signature");
 Object.keys(_signature).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _signature[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,

package/esm/components/columnHeaders/GridColumnGroupHeader.js

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useId from '@mui/utils/useId';
 import composeClasses from '@mui/utils/composeClasses';
+import capitalize from '@mui/utils/capitalize';
 import { useRtl } from '@mui/system/RtlProvider';
 import { doesSupportPreventScroll } from "../../utils/doesSupportPreventScroll.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
@@ -28,7 +29,7 @@ const useUtilityClasses = ownerState => {
     pinnedPosition
   } = ownerState;
   const slots = {
-    root: ['columnHeader', headerAlign === 'left' && 'columnHeader--alignLeft', headerAlign === 'center' && 'columnHeader--alignCenter', headerAlign === 'right' && 'columnHeader--alignRight', isDragging && 'columnHeader--moving', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', 'withBorderColor', groupId === null ? 'columnHeader--emptyGroup' : 'columnHeader--filledGroup', pinnedPosition === PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight', isLastColumn && 'columnHeader--last'],
+    root: ['columnHeader', headerAlign && `columnHeader--align${capitalize(headerAlign)}`, isDragging && 'columnHeader--moving', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', 'withBorderColor', groupId === null ? 'columnHeader--emptyGroup' : 'columnHeader--filledGroup', pinnedPosition === PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight', isLastColumn && 'columnHeader--last'],
     draggableContainer: ['columnHeaderDraggableContainer'],
     titleContainer: ['columnHeaderTitleContainer', 'withBorderColor'],
     titleContainerContent: ['columnHeaderTitleContainerContent']

package/esm/components/columnHeaders/GridColumnHeaderItem.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
+import capitalize from '@mui/utils/capitalize';
 import useId from '@mui/utils/useId';
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { useRtl } from '@mui/system/RtlProvider';
@@ -41,7 +42,7 @@ const useUtilityClasses = ownerState => {
   // todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
   const isColumnNumeric = colDef.type === 'number';
   const slots = {
-    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 === PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight',
+    root: ['columnHeader', colDef.headerAlign && `columnHeader--align${capitalize(colDef.headerAlign)}`, isColumnSortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === 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
     isSiblingFocused && 'columnHeader--siblingFocused'],

package/esm/components/columnSelection/GridHeaderCheckbox.js

@@ -6,6 +6,7 @@ const _excluded = ["field", "colDef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { isMultipleRowSelectionEnabled } from "../../hooks/features/rowSelection/utils.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
@@ -118,13 +119,14 @@ const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
     };
     apiRef.current.publishEvent('headerSelectionCheckboxChange', params);
   };
-  const tabIndex = tabIndexState !== null && tabIndexState.field === props.field ? 0 : -1;
-  React.useLayoutEffect(() => {
+  const multipleSelectionEnabled = isMultipleRowSelectionEnabled(rootProps);
+  const tabIndex = tabIndexState !== null && tabIndexState.field === props.field && multipleSelectionEnabled ? 0 : -1;
+  useEnhancedEffect(() => {
     const element = apiRef.current.getColumnHeaderElement(props.field);
-    if (tabIndex === 0 && element) {
+    if (tabIndex === 0 && element && multipleSelectionEnabled) {
       element.tabIndex = -1;
     }
-  }, [tabIndex, apiRef, props.field]);
+  }, [tabIndex, apiRef, props.field, multipleSelectionEnabled]);
   const handleKeyDown = React.useCallback(event => {
     if (event.key === ' ') {
       // imperative toggle the checkbox because Space is disable by some preventDefault
@@ -153,7 +155,7 @@ const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
     },
     tabIndex: tabIndex,
     onKeyDown: handleKeyDown,
-    disabled: !isMultipleRowSelectionEnabled(rootProps)
+    disabled: !multipleSelectionEnabled
   }, rootProps.slotProps?.baseCheckbox, other, {
     ref: ref
   }));

package/esm/components/containers/GridRootStyles.js

@@ -1,5 +1,5 @@
 import { styled } from '@mui/material/styles';
-import { gridClasses as c } from "../../constants/gridClasses.js";
+import { gridClasses as c, gridClassesOverrides } from "../../constants/gridClasses.js";
 import { vars } from "../../constants/cssVariables.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
@@ -16,17 +16,13 @@ const separatorIconDragStyles = {
 // https://github.com/emotion-js/emotion/issues/1105#issuecomment-1722524968
 const ignoreSsrWarning = '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';
 const shouldShowBorderTopRightRadiusSelector = apiRef => !apiRef.current.state.dimensions.isReady ? apiRef.current.state.dimensions.scrollbarSize === 0 : apiRef.current.state.dimensions.hasScrollX && (!apiRef.current.state.dimensions.hasScrollY || apiRef.current.state.dimensions.scrollbarSize === 0);
-const elementOverrides = {
-  root: ['autoHeight', 'autosizing', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'withVerticalBorder'],
-  children: ['actionsCell', 'booleanCell', 'cell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--rangeTop', 'cell--selectionMode', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withLeftBorder', 'cell--withRightBorder', 'cellCheckbox', 'cellEmpty', 'cellOffsetLeft', 'cellSkeleton', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--emptyGroup', 'columnHeader--filledGroup', 'columnHeader--filtered', 'columnHeader--last', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--siblingFocused', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnSeparator', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'container--bottom', 'container--top', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'editBooleanCell', 'filterIcon', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'groupingCriteriaCell', 'groupingCriteriaCellLoadingContainer', 'groupingCriteriaCellToggle', 'headerFilterRow', 'iconSeparator', 'menuIcon', 'menuIconButton', 'menuList', 'menuOpen', 'overlayWrapperInner', 'pinnedRows', 'pinnedRows--bottom', 'pinnedRows--top', 'row', 'row--borderBottom', 'row--detailPanelExpanded', 'row--dragging', 'row--dynamicHeight', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderCellContainer', 'rowReorderCellPlaceholder', 'rowSkeleton', 'scrollbar', 'scrollbar--horizontal', 'scrollbar--vertical', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'sortIcon', 'treeDataGroupingCell', 'treeDataGroupingCellLoadingContainer', 'treeDataGroupingCellToggle', 'withBorderColor', 'row--beingDragged']
-};
 export const GridRootStyles = styled('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
   overridesResolver: (props, styles) => {
     // Root overrides
     const overrides = [styles.root];
-    elementOverrides.root.forEach(key => {
+    gridClassesOverrides.root.forEach(key => {
       overrides.push({
         [`&.${c[key]}`]: styles[key]
       });
@@ -35,7 +31,7 @@ export const GridRootStyles = styled('div', {
     // Child element overrides
     // - Only declare overrides here for class names that are not applied to `styled` components.
     // - For `styled` components, declare overrides in the component itself.
-    elementOverrides.children.forEach(key => {
+    gridClassesOverrides.children.forEach(key => {
       overrides.push({
         [`& .${c[key]}`]: styles[key]
       });

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

@@ -1,6 +1,8 @@
 'use client';
 
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useId from '@mui/utils/useId';
@@ -8,13 +10,14 @@ import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridFilterInputMultipleValue(props) {
   const {
-    item,
-    applyValue,
-    type,
-    apiRef,
-    focusElementRef,
-    slotProps
-  } = props;
+      item,
+      applyValue,
+      type,
+      apiRef,
+      focusElementRef,
+      slotProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
   const [options, setOptions] = React.useState([]);
   const [filterValueState, setFilterValueState] = React.useState(item.value || []);
@@ -53,7 +56,7 @@ function GridFilterInputMultipleValue(props) {
         inputRef: focusElementRef
       }
     }
-  }, slotProps?.root));
+  }, other, slotProps?.root));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputMultipleValue.propTypes = {
   // ----------------------------- Warning --------------------------------

package/esm/constants/gridClasses.d.ts

@@ -960,4 +960,20 @@ export interface GridClasses {
 }
 export type GridClassKey = keyof GridClasses;
 export declare function getDataGridUtilityClass(slot: string): string;
+/**
+ * Class groups for the MuiDataGrid component used in GridRootStyles overridesResolver.
+ *
+ * Splits classes into two groups to support style overrides:
+ * - `root`: classes applied directly to the root element (use `&.className` selector)
+ * - `children`: classes applied to child elements (use `& .className` selector)
+ *
+ * These are spread into the gridClasses utility object and used for CSS-in-JS overrides.
+ *
+ * Only include class names here that are NOT applied via `styled` components.
+ * For `styled` components, declare overrides directly in the component definition.
+ */
+export declare const gridClassesOverrides: {
+  readonly root: ["autoHeight", "autosizing", "root--densityStandard", "root--densityComfortable", "root--densityCompact", "root--disableUserSelection", "root--noToolbar", "withVerticalBorder"];
+  readonly children: ["actionsCell", "booleanCell", "cell", "cell--editable", "cell--editing", "cell--flex", "cell--pinnedLeft", "cell--pinnedRight", "cell--rangeBottom", "cell--rangeLeft", "cell--rangeRight", "cell--rangeTop", "cell--selectionMode", "cell--textCenter", "cell--textLeft", "cell--textRight", "cell--withLeftBorder", "cell--withRightBorder", "cellCheckbox", "cellEmpty", "cellOffsetLeft", "cellSkeleton", "checkboxInput", "columnHeader", "columnHeader--alignCenter", "columnHeader--alignLeft", "columnHeader--alignRight", "columnHeader--dragging", "columnHeader--emptyGroup", "columnHeader--filledGroup", "columnHeader--filtered", "columnHeader--last", "columnHeader--moving", "columnHeader--numeric", "columnHeader--pinnedLeft", "columnHeader--pinnedRight", "columnHeader--siblingFocused", "columnHeader--sortable", "columnHeader--sorted", "columnHeader--withLeftBorder", "columnHeader--withRightBorder", "columnHeaderCheckbox", "columnHeaderDraggableContainer", "columnHeaderTitleContainer", "columnHeaderTitleContainerContent", "columnSeparator", "columnSeparator--resizable", "columnSeparator--resizing", "columnSeparator--sideLeft", "columnSeparator--sideRight", "container--bottom", "container--top", "detailPanelToggleCell", "detailPanelToggleCell--expanded", "editBooleanCell", "filterIcon", "filler--borderBottom", "filler--pinnedLeft", "filler--pinnedRight", "groupingCriteriaCell", "groupingCriteriaCellLoadingContainer", "groupingCriteriaCellToggle", "headerFilterRow", "iconSeparator", "menuIcon", "menuIconButton", "menuList", "menuOpen", "overlayWrapperInner", "pinnedRows", "pinnedRows--bottom", "pinnedRows--top", "row", "row--borderBottom", "row--detailPanelExpanded", "row--dragging", "row--dynamicHeight", "row--editable", "row--editing", "row--firstVisible", "row--lastVisible", "rowReorderCell", "rowReorderCell--draggable", "rowReorderCellContainer", "rowReorderCellPlaceholder", "rowSkeleton", "scrollbar", "scrollbar--horizontal", "scrollbar--vertical", "scrollbarFiller", "scrollbarFiller--pinnedRight", "sortIcon", "treeDataGroupingCell", "treeDataGroupingCellLoadingContainer", "treeDataGroupingCellToggle", "withBorderColor", "row--beingDragged"];
+};
 export declare const gridClasses: Record<keyof GridClasses, string>;

package/esm/constants/gridClasses.js

@@ -3,6 +3,23 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'autoHeight', 'autosizing', 'mainContent', 'withSidePanel', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'container--top', 'container--bottom', 'detailPanel', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'longTextCell', 'longTextCellContent', 'longTextCellExpandButton', 'longTextCellCollapseButton', 'longTextCellPopup', 'longTextCellPopperContent', 'editLongTextCell', 'editLongTextCellValue', 'editLongTextCellPopup', 'editLongTextCellPopperContent', 'editLongTextCellTextarea', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible',
-// TODO v9: Rename to `cell--dragging`
-'row--dragging', 'row--beingDragged', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderIcon', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'sortIcon', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction']);
+
+/**
+ * Class groups for the MuiDataGrid component used in GridRootStyles overridesResolver.
+ *
+ * Splits classes into two groups to support style overrides:
+ * - `root`: classes applied directly to the root element (use `&.className` selector)
+ * - `children`: classes applied to child elements (use `& .className` selector)
+ *
+ * These are spread into the gridClasses utility object and used for CSS-in-JS overrides.
+ *
+ * Only include class names here that are NOT applied via `styled` components.
+ * For `styled` components, declare overrides directly in the component definition.
+ */
+export const gridClassesOverrides = {
+  root: ['autoHeight', 'autosizing', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'withVerticalBorder'],
+  children: ['actionsCell', 'booleanCell', 'cell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--rangeTop', 'cell--selectionMode', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withLeftBorder', 'cell--withRightBorder', 'cellCheckbox', 'cellEmpty', 'cellOffsetLeft', 'cellSkeleton', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--emptyGroup', 'columnHeader--filledGroup', 'columnHeader--filtered', 'columnHeader--last', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--siblingFocused', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnSeparator', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'container--bottom', 'container--top', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'editBooleanCell', 'filterIcon', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'groupingCriteriaCell', 'groupingCriteriaCellLoadingContainer', 'groupingCriteriaCellToggle', 'headerFilterRow', 'iconSeparator', 'menuIcon', 'menuIconButton', 'menuList', 'menuOpen', 'overlayWrapperInner', 'pinnedRows', 'pinnedRows--bottom', 'pinnedRows--top', 'row', 'row--borderBottom', 'row--detailPanelExpanded',
+  // TODO v9: Rename to `cell--dragging`
+  'row--dragging', 'row--dynamicHeight', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderCellContainer', 'rowReorderCellPlaceholder', 'rowSkeleton', 'scrollbar', 'scrollbar--horizontal', 'scrollbar--vertical', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'sortIcon', 'treeDataGroupingCell', 'treeDataGroupingCellLoadingContainer', 'treeDataGroupingCellToggle', 'withBorderColor', 'row--beingDragged']
+};
+export const gridClasses = generateUtilityClasses('MuiDataGrid', [...gridClassesOverrides.root, ...gridClassesOverrides.children, 'aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'mainContent', 'withSidePanel', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderTitle', 'columnHeaders', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'detailPanel', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editInputCell', 'longTextCell', 'longTextCellContent', 'longTextCellExpandButton', 'longTextCellCollapseButton', 'longTextCellPopup', 'longTextCellPopperContent', 'editLongTextCell', 'editLongTextCellValue', 'editLongTextCellPopup', 'editLongTextCellPopperContent', 'editLongTextCellTextarea', 'filler', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'footerContainer', 'iconButtonContainer', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'overlay', 'overlayWrapper', 'root', 'rowCount', 'rowReorderIcon', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction', 'resizablePanelHandle', 'resizablePanelHandle--horizontal', 'resizablePanelHandle--vertical']);

package/esm/constants/index.d.ts

@@ -1,4 +1,4 @@
 export * from "./envConstants.js";
 export * from "./localeTextConstants.js";
-export * from "./gridClasses.js";
+export { type GridClassKey, type GridClasses, getDataGridUtilityClass, gridClasses } from "./gridClasses.js";
 export * from "./signature.js";

package/esm/constants/index.js

@@ -1,4 +1,4 @@
 export * from "./envConstants.js";
 export * from "./localeTextConstants.js";
-export * from "./gridClasses.js";
+export { getDataGridUtilityClass, gridClasses } from "./gridClasses.js";
 export * from "./signature.js";

package/esm/hooks/features/columns/gridColumnsSelector.js

@@ -1,6 +1,5 @@
 import { createSelector, createSelectorMemoized, createRootSelector } from "../../../utils/createSelector.js";
 import { EMPTY_PINNED_COLUMN_FIELDS } from "./gridColumnsInterfaces.js";
-import { gridIsRtlSelector } from "../../core/gridCoreSelector.js";
 import { gridListColumnSelector, gridListViewSelector } from "../listView/index.js";
 
 /**
@@ -65,24 +64,24 @@ export const gridPinnedColumnsSelector = createRootSelector(state => state.pinne
  * @category Pinned Columns
  * @ignore - Do not document
  */
-export const gridExistingPinnedColumnSelector = createSelectorMemoized(gridPinnedColumnsSelector, gridColumnFieldsSelector, gridIsRtlSelector, (model, orderedFields, isRtl) => filterMissingColumns(model, orderedFields, isRtl));
+export const gridExistingPinnedColumnSelector = createSelectorMemoized(gridPinnedColumnsSelector, gridColumnFieldsSelector, (model, orderedFields) => filterMissingColumns(model, orderedFields));
 
 /**
  * Get the visible pinned columns.
  * @category Visible Columns
  */
-export const gridVisiblePinnedColumnDefinitionsSelector = createSelectorMemoized(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, gridIsRtlSelector, gridListViewSelector, (columnsState, model, visibleColumnFields, isRtl, listView) => {
+export const gridVisiblePinnedColumnDefinitionsSelector = createSelectorMemoized(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, gridListViewSelector, (columnsState, model, visibleColumnFields, listView) => {
   if (listView) {
     return EMPTY_PINNED_COLUMN_FIELDS;
   }
-  const visiblePinnedFields = filterMissingColumns(model, visibleColumnFields, isRtl);
+  const visiblePinnedFields = filterMissingColumns(model, visibleColumnFields);
   const visiblePinnedColumns = {
     left: visiblePinnedFields.left.map(field => columnsState.lookup[field]),
     right: visiblePinnedFields.right.map(field => columnsState.lookup[field])
   };
   return visiblePinnedColumns;
 });
-function filterMissingColumns(pinnedColumns, columns, invert) {
+function filterMissingColumns(pinnedColumns, columns) {
   if (!Array.isArray(pinnedColumns.left) && !Array.isArray(pinnedColumns.right)) {
     return EMPTY_PINNED_COLUMN_FIELDS;
   }
@@ -96,16 +95,8 @@ function filterMissingColumns(pinnedColumns, columns, invert) {
     return newPinnedColumns.filter(field => remainingColumns.includes(field));
   };
   const leftPinnedColumns = filter(pinnedColumns.left, columns);
-  const columnsWithoutLeftPinnedColumns = columns.filter(
-  // Filter out from the remaining columns those columns already pinned to the left
-  field => !leftPinnedColumns.includes(field));
+  const columnsWithoutLeftPinnedColumns = columns.filter(field => !leftPinnedColumns.includes(field));
   const rightPinnedColumns = filter(pinnedColumns.right, columnsWithoutLeftPinnedColumns);
-  if (invert) {
-    return {
-      left: rightPinnedColumns,
-      right: leftPinnedColumns
-    };
-  }
   return {
     left: leftPinnedColumns,
     right: rightPinnedColumns

package/esm/hooks/features/dataSource/useGridDataSourceBase.js

@@ -253,9 +253,10 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
   };
   const debouncedFetchRows = React.useMemo(() => debounce(fetchRows, 0), [fetchRows]);
   const handleFetchRowsOnParamsChange = React.useCallback(() => {
+    apiRef.current.setRows([]);
     stopPolling();
     debouncedFetchRows();
-  }, [stopPolling, debouncedFetchRows]);
+  }, [stopPolling, debouncedFetchRows, apiRef]);
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {

package/esm/hooks/features/editing/useGridRowEditing.js

@@ -403,11 +403,15 @@ export const useGridRowEditing = (apiRef, props) => {
       updateRowInRowModesModel(id, null);
       delete prevRowValuesLookup.current[id];
     };
-    if (ignoreModifications) {
+    if (ignoreModifications && apiRef.current.getRow(id)) {
       finishRowEditMode();
       return;
     }
     const editingState = gridEditRowsStateSelector(apiRef);
+    if (!editingState[id]) {
+      finishRowEditMode();
+      return;
+    }
     const row = prevRowValuesLookup.current[id];
     const isSomeFieldProcessingProps = Object.values(editingState[id]).some(fieldProps => fieldProps.isProcessingProps);
     if (isSomeFieldProcessingProps) {
@@ -466,14 +470,18 @@ export const useGridRowEditing = (apiRef, props) => {
         Promise.resolve(processRowUpdate(rowUpdate, row, {
           rowId: id
         })).then(finalRowUpdate => {
-          apiRef.current.updateRows([finalRowUpdate]);
+          if (apiRef.current.getRow(id)) {
+            apiRef.current.updateRows([finalRowUpdate]);
+          }
           finishRowEditMode();
         }).catch(handleError);
       } catch (errorThrown) {
         handleError(errorThrown);
       }
     } else {
-      apiRef.current.updateRows([rowUpdate]);
+      if (apiRef.current.getRow(id)) {
+        apiRef.current.updateRows([rowUpdate]);
+      }
       finishRowEditMode();
     }
   });
@@ -641,5 +649,5 @@ export const useGridRowEditing = (apiRef, props) => {
         }, params));
       }
     });
-  }, [apiRef, rowModesModel, updateStateToStartRowEditMode, updateStateToStopRowEditMode]);
+  }, [apiRef, rowModesModel, updateOrDeleteRowState, updateStateToStartRowEditMode, updateStateToStopRowEditMode, updateRowInRowModesModel]);
 };

package/esm/index.js

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

package/hooks/features/columns/gridColumnsSelector.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisibleColumnFieldsSelector = exports.gridVisibleColumnDefinitionsSelector = exports.gridPinnedColumnsSelector = exports.gridInitialColumnVisibilityModelSelector = exports.gridHasColSpanSelector = exports.gridFilterableColumnLookupSelector = exports.gridFilterableColumnDefinitionsSelector = exports.gridExistingPinnedColumnSelector = exports.gridColumnsStateSelector = exports.gridColumnVisibilityModelSelector = exports.gridColumnPositionsSelector = exports.gridColumnLookupSelector = exports.gridColumnFieldsSelector = exports.gridColumnDefinitionsSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 var _gridColumnsInterfaces = require("./gridColumnsInterfaces");
-var _gridCoreSelector = require("../../core/gridCoreSelector");
 var _listView = require("../listView");
 /**
  * Get the columns state
@@ -70,24 +69,24 @@ const gridPinnedColumnsSelector = exports.gridPinnedColumnsSelector = (0, _creat
  * @category Pinned Columns
  * @ignore - Do not document
  */
-const gridExistingPinnedColumnSelector = exports.gridExistingPinnedColumnSelector = (0, _createSelector.createSelectorMemoized)(gridPinnedColumnsSelector, gridColumnFieldsSelector, _gridCoreSelector.gridIsRtlSelector, (model, orderedFields, isRtl) => filterMissingColumns(model, orderedFields, isRtl));
+const gridExistingPinnedColumnSelector = exports.gridExistingPinnedColumnSelector = (0, _createSelector.createSelectorMemoized)(gridPinnedColumnsSelector, gridColumnFieldsSelector, (model, orderedFields) => filterMissingColumns(model, orderedFields));
 
 /**
  * Get the visible pinned columns.
  * @category Visible Columns
  */
-const gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisiblePinnedColumnDefinitionsSelector = (0, _createSelector.createSelectorMemoized)(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, _gridCoreSelector.gridIsRtlSelector, _listView.gridListViewSelector, (columnsState, model, visibleColumnFields, isRtl, listView) => {
+const gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisiblePinnedColumnDefinitionsSelector = (0, _createSelector.createSelectorMemoized)(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, _listView.gridListViewSelector, (columnsState, model, visibleColumnFields, listView) => {
   if (listView) {
     return _gridColumnsInterfaces.EMPTY_PINNED_COLUMN_FIELDS;
   }
-  const visiblePinnedFields = filterMissingColumns(model, visibleColumnFields, isRtl);
+  const visiblePinnedFields = filterMissingColumns(model, visibleColumnFields);
   const visiblePinnedColumns = {
     left: visiblePinnedFields.left.map(field => columnsState.lookup[field]),
     right: visiblePinnedFields.right.map(field => columnsState.lookup[field])
   };
   return visiblePinnedColumns;
 });
-function filterMissingColumns(pinnedColumns, columns, invert) {
+function filterMissingColumns(pinnedColumns, columns) {
   if (!Array.isArray(pinnedColumns.left) && !Array.isArray(pinnedColumns.right)) {
     return _gridColumnsInterfaces.EMPTY_PINNED_COLUMN_FIELDS;
   }
@@ -101,16 +100,8 @@ function filterMissingColumns(pinnedColumns, columns, invert) {
     return newPinnedColumns.filter(field => remainingColumns.includes(field));
   };
   const leftPinnedColumns = filter(pinnedColumns.left, columns);
-  const columnsWithoutLeftPinnedColumns = columns.filter(
-  // Filter out from the remaining columns those columns already pinned to the left
-  field => !leftPinnedColumns.includes(field));
+  const columnsWithoutLeftPinnedColumns = columns.filter(field => !leftPinnedColumns.includes(field));
   const rightPinnedColumns = filter(pinnedColumns.right, columnsWithoutLeftPinnedColumns);
-  if (invert) {
-    return {
-      left: rightPinnedColumns,
-      right: leftPinnedColumns
-    };
-  }
   return {
     left: leftPinnedColumns,
     right: rightPinnedColumns

package/hooks/features/dataSource/useGridDataSourceBase.js

@@ -260,9 +260,10 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
   };
   const debouncedFetchRows = React.useMemo(() => (0, _debounce.default)(fetchRows, 0), [fetchRows]);
   const handleFetchRowsOnParamsChange = React.useCallback(() => {
+    apiRef.current.setRows([]);
     stopPolling();
     debouncedFetchRows();
-  }, [stopPolling, debouncedFetchRows]);
+  }, [stopPolling, debouncedFetchRows, apiRef]);
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {

package/hooks/features/editing/useGridRowEditing.js

@@ -410,11 +410,15 @@ const useGridRowEditing = (apiRef, props) => {
       updateRowInRowModesModel(id, null);
       delete prevRowValuesLookup.current[id];
     };
-    if (ignoreModifications) {
+    if (ignoreModifications && apiRef.current.getRow(id)) {
       finishRowEditMode();
       return;
     }
     const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef);
+    if (!editingState[id]) {
+      finishRowEditMode();
+      return;
+    }
     const row = prevRowValuesLookup.current[id];
     const isSomeFieldProcessingProps = Object.values(editingState[id]).some(fieldProps => fieldProps.isProcessingProps);
     if (isSomeFieldProcessingProps) {
@@ -473,14 +477,18 @@ const useGridRowEditing = (apiRef, props) => {
         Promise.resolve(processRowUpdate(rowUpdate, row, {
           rowId: id
         })).then(finalRowUpdate => {
-          apiRef.current.updateRows([finalRowUpdate]);
+          if (apiRef.current.getRow(id)) {
+            apiRef.current.updateRows([finalRowUpdate]);
+          }
           finishRowEditMode();
         }).catch(handleError);
       } catch (errorThrown) {
         handleError(errorThrown);
       }
     } else {
-      apiRef.current.updateRows([rowUpdate]);
+      if (apiRef.current.getRow(id)) {
+        apiRef.current.updateRows([rowUpdate]);
+      }
       finishRowEditMode();
     }
   });
@@ -648,6 +656,6 @@ const useGridRowEditing = (apiRef, props) => {
         }, params));
       }
     });
-  }, [apiRef, rowModesModel, updateStateToStartRowEditMode, updateStateToStopRowEditMode]);
+  }, [apiRef, rowModesModel, updateOrDeleteRowState, updateStateToStartRowEditMode, updateStateToStopRowEditMode, updateRowInRowModesModel]);
 };
 exports.useGridRowEditing = useGridRowEditing;

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "8.27.4",
+  "version": "8.28.0",
   "author": "MUI Team",
   "description": "The Community plan edition of the MUI X Data Grid components.",
   "license": "MIT",