@mui/x-data-grid 7.11.1 → 7.12.1

package/modern/hooks/features/virtualization/useGridVirtualScroller.js

@@ -16,6 +16,7 @@ import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
 import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
 import { useGridVisibleRows, getVisibleRows } from '../../utils/useGridVisibleRows';
 import { useGridApiEventHandler } from '../../utils';
+import * as platform from '../../../utils/platform';
 import { clamp, range } from '../../../utils/utils';
 import { selectedIdsLookupSelector } from '../rowSelection/gridRowSelectionSelector';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
@@ -178,6 +179,8 @@ export const useGridVirtualScroller = () => {
   const forceUpdateRenderContext = () => {
     const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
     const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
+    // Reset the frozen context when the render context changes, see the illustration in https://github.com/mui/mui-x/pull/12353
+    frozenContext.current = undefined;
     updateRenderContext(nextRenderContext);
   };
   const handleScroll = useEventCallback(event => {
@@ -257,6 +260,7 @@ export const useGridVirtualScroller = () => {
         id,
         model
       } = rowModels[rowIndexInPage];
+      const rowIndex = (currentPage?.range?.firstRowIndex || 0) + rowIndexOffset + rowIndexInPage;
 
       // NOTE: This is an expensive feature, the colSpan code could be optimized.
       if (hasColSpan) {
@@ -298,6 +302,7 @@ export const useGridVirtualScroller = () => {
         isFirstVisible = rowIndexInPage === 0;
       }
       let isLastVisible = false;
+      const isLastVisibleInSection = rowIndexInPage === rowModels.length - 1;
       if (isLastSection) {
         if (!isPinnedSection) {
           const lastIndex = currentPage.rows.length - 1;
@@ -306,7 +311,7 @@ export const useGridVirtualScroller = () => {
             isLastVisible = true;
           }
         } else {
-          isLastVisible = rowIndexInPage === rowModels.length - 1;
+          isLastVisible = isLastVisibleInSection;
         }
       }
       const isVirtualRow = rowIndexInPage === virtualRowIndex;
@@ -321,7 +326,7 @@ export const useGridVirtualScroller = () => {
         currentRenderContext = frozenContext.current;
       }
       const offsetLeft = computeOffsetLeft(columnPositions, currentRenderContext, theme.direction, pinnedColumns.left.length);
-      const rowIndex = (currentPage?.range?.firstRowIndex || 0) + rowIndexOffset + rowIndexInPage;
+      const showBottomBorder = isLastVisibleInSection && params.position === 'top';
       rows.push( /*#__PURE__*/_jsx(rootProps.slots.row, _extends({
         row: model,
         rowId: id,
@@ -338,7 +343,8 @@ export const useGridVirtualScroller = () => {
         focusedColumnIndex: hasFocus ? focusedCell.columnIndex : undefined,
         isFirstVisible: isFirstVisible,
         isLastVisible: isLastVisible,
-        isNotVisible: isNotVisible
+        isNotVisible: isNotVisible,
+        showBottomBorder: showBottomBorder
       }, rowProps), id));
       if (isNotVisible) {
         return;
@@ -409,12 +415,14 @@ export const useGridVirtualScroller = () => {
     }),
     getScrollerProps: () => ({
       ref: scrollerRef,
-      tabIndex: -1,
       onScroll: handleScroll,
       onWheel: handleWheel,
       onTouchMove: handleTouchMove,
       style: scrollerStyle,
-      role: 'presentation'
+      role: 'presentation',
+      // `tabIndex` shouldn't be used along role=presentation, but it fixes a Firefox bug
+      // https://github.com/mui/mui-x/pull/13891#discussion_r1683416024
+      tabIndex: platform.isFirefox ? -1 : undefined
     }),
     getContentProps: () => ({
       style: contentSize,

package/modern/index.js

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

package/modern/internals/utils/useProps.js

@@ -1,5 +1,3 @@
-import _objectDestructuringEmpty from "@babel/runtime/helpers/esm/objectDestructuringEmpty";
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 
 /** Gathers props for the root element into a single `.forwardedProps` field */
@@ -22,8 +20,5 @@ function groupForwardedProps(props) {
   return newProps;
 }
 export function useProps(allProps) {
-  return React.useMemo(() => {
-    const themedProps = _extends({}, (_objectDestructuringEmpty(allProps), allProps));
-    return groupForwardedProps(themedProps);
-  }, [allProps]);
+  return React.useMemo(() => groupForwardedProps(allProps), [allProps]);
 }

package/modern/locales/trTR.js

@@ -30,11 +30,10 @@ const trTRGrid = {
   toolbarExportPrint: 'Yazdır',
   toolbarExportExcel: 'Excel olarak aktar',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementSearchTitle: 'Arama',
+  columnsManagementNoColumns: 'Kolon yok',
+  columnsManagementShowHideAllText: 'Hepsini Göster/Gizle',
+  columnsManagementReset: 'Sıfırla',
   // Filter panel text
   filterPanelAddFilter: 'Filtre Ekle',
   filterPanelRemoveAll: 'Hepsini kaldır',
@@ -71,22 +70,21 @@ const trTRGrid = {
   headerFilterOperatorEquals: 'Şuna eşittir',
   headerFilterOperatorStartsWith: 'Şununla başlar',
   headerFilterOperatorEndsWith: 'Şununla biter',
-  // headerFilterOperatorIs: 'Is',
-  // headerFilterOperatorNot: 'Is not',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorIs: 'Eşittir',
+  headerFilterOperatorNot: 'Eşit değil',
+  headerFilterOperatorAfter: 'Sonra',
+  headerFilterOperatorOnOrAfter: 'Sonra veya eşit',
+  headerFilterOperatorBefore: 'Önce',
+  headerFilterOperatorOnOrBefore: 'Önce veya eşit',
+  headerFilterOperatorIsEmpty: 'Boş',
+  headerFilterOperatorIsNotEmpty: 'Boş değil',
+  headerFilterOperatorIsAnyOf: 'Herhangi biri',
+  'headerFilterOperator=': 'Eşittir',
+  'headerFilterOperator!=': 'Eşit değil',
+  'headerFilterOperator>': 'Büyüktür',
+  'headerFilterOperator>=': 'Büyük veya eşit',
+  'headerFilterOperator<': 'Küçüktür',
+  'headerFilterOperator<=': 'Küçük veya eşit',
   // Filter values text
   filterValueAny: 'herhangi',
   filterValueTrue: 'doğru',

package/modern/utils/composeGridClasses.js

@@ -0,0 +1,5 @@
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { getDataGridUtilityClass } from '../constants/gridClasses';
+export function composeGridClasses(classes, slots) {
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+}

package/modern/utils/platform.js

@@ -0,0 +1,2 @@
+const userAgent = typeof navigator !== 'undefined' ? navigator.userAgent.toLowerCase() : 'empty';
+export const isFirefox = userAgent.includes('firefox');

package/node/components/GridHeaders.js

@@ -36,10 +36,7 @@ function GridHeaders() {
   const columnVisibility = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnVisibilityModelSelector);
   const columnGroupsHeaderStructure = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsHeaderStructureSelector);
   const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
-  const columnsContainerRef = React.useRef(null);
-  apiRef.current.register('private', {
-    columnHeadersContainerRef: columnsContainerRef
-  });
+  const columnsContainerRef = apiRef.current.columnHeadersContainerRef;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnHeaders, (0, _extends2.default)({
     ref: columnsContainerRef,
     visibleColumns: visibleColumns,

package/node/components/GridPagination.js

@@ -20,6 +20,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const GridPaginationRoot = (0, _styles.styled)(_TablePagination.default)(({
   theme
 }) => ({
+  maxHeight: 'calc(100% + 1px)',
+  // border width
   [`& .${_TablePagination.tablePaginationClasses.selectLabel}`]: {
     display: 'none',
     [theme.breakpoints.up('sm')]: {

package/node/components/GridRow.js

@@ -15,6 +15,7 @@ var _fastMemo = require("../utils/fastMemo");
 var _gridEditRowModel = require("../models/gridEditRowModel");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _gridClasses = require("../constants/gridClasses");
+var _composeGridClasses = require("../utils/composeGridClasses");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _gridColumnsSelector = require("../hooks/features/columns/gridColumnsSelector");
 var _useGridSelector = require("../hooks/utils/useGridSelector");
@@ -31,24 +32,9 @@ var _GridCell = require("./cell/GridCell");
 var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
 var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "dimensions", "renderContext", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "dimensions", "renderContext", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useUtilityClasses = ownerState => {
-  const {
-    editable,
-    editing,
-    selected,
-    isFirstVisible,
-    isLastVisible,
-    rowHeight,
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isFirstVisible && 'row--firstVisible', isLastVisible && 'row--lastVisible', rowHeight === 'auto' && 'row--dynamicHeight']
-  };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
-};
 function EmptyCell({
   width
 }) {
@@ -81,6 +67,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       isFirstVisible,
       isLastVisible,
       isNotVisible,
+      showBottomBorder,
       onClick,
       onDoubleClick,
       onMouseEnter,
@@ -102,21 +89,16 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const rowNode = apiRef.current.getRowNode(rowId);
   const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
+  const editing = apiRef.current.getRowMode(rowId) === _gridEditRowModel.GridRowModes.Edit;
+  const editable = rootProps.editMode === _gridEditRowModel.GridEditModes.Row;
   const hasFocusCell = focusedColumnIndex !== undefined;
   const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < renderContext.firstColumnIndex;
   const hasVirtualFocusCellRight = hasFocusCell && focusedColumnIndex < visibleColumns.length - pinnedColumns.right.length && focusedColumnIndex >= renderContext.lastColumnIndex;
   const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
 
-  const ownerState = {
-    selected,
-    isFirstVisible,
-    isLastVisible,
-    classes: rootProps.classes,
-    editing: apiRef.current.getRowMode(rowId) === _gridEditRowModel.GridRowModes.Edit,
-    editable: rootProps.editMode === _gridEditRowModel.GridEditModes.Row,
-    rowHeight
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = (0, _composeGridClasses.composeGridClasses)(rootProps.classes, {
+    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isFirstVisible && 'row--firstVisible', isLastVisible && 'row--lastVisible', showBottomBorder && 'row--borderBottom', rowHeight === 'auto' && 'row--dynamicHeight']
+  });
   React.useLayoutEffect(() => {
     if (currentPage.range) {
       // The index prop is relative to the rows from all pages. As example, the index prop of the
@@ -426,6 +408,7 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   rowHeight: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]).isRequired,
   rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   selected: _propTypes.default.bool.isRequired,
+  showBottomBorder: _propTypes.default.bool.isRequired,
   /**
    * Determines which cell should be tabbable by having tabIndex=0.
    * If `null`, no cell in this row is in the tab sequence.

package/node/components/GridRowCount.js

@@ -10,7 +10,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _gridClasses = require("../constants/gridClasses");
@@ -26,7 +26,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['rowCount']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const GridRowCountRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',

package/node/components/GridSelectedRowCount.js

@@ -10,7 +10,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _gridClasses = require("../constants/gridClasses");
@@ -26,7 +26,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['selectedRowCount']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const GridSelectedRowCountRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',

package/node/components/base/GridOverlays.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _system = require("@mui/system");
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _dimensions = require("../../hooks/features/dimensions");
@@ -57,7 +57,7 @@ const useUtilityClasses = ownerState => {
     root: ['overlayWrapper'],
     inner: ['overlayWrapperInner']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 function GridOverlayWrapper(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();

package/node/components/cell/GridBooleanCell.js

@@ -9,7 +9,7 @@ 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 _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -25,7 +25,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['booleanCell']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 function GridBooleanCellRaw(props) {
   const {
@@ -114,7 +114,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
 } : void 0;
 const GridBooleanCell = exports.GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
 const renderBooleanCell = params => {
-  if (params.field !== '__row_group_by_columns_group__' && (0, _gridRowsUtils.isAutoGeneratedRow)(params.rowNode)) {
+  if (params.field !== '__row_group_by_columns_group__' && (0, _gridRowsUtils.isAutogeneratedRowNode)(params.rowNode)) {
     return '';
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridBooleanCell, (0, _extends2.default)({}, params));

package/node/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ColumnHeaderMenuIcon = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -23,7 +23,7 @@ const useUtilityClasses = ownerState => {
     root: ['menuIcon', open && 'menuOpen'],
     button: ['menuIconButton']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const ColumnHeaderMenuIcon = exports.ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
   const {

package/node/components/columnHeaders/GridBaseColumnHeaders.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -24,7 +24,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['columnHeaders']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const GridColumnHeadersRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',

package/node/components/columnHeaders/GridColumnGroupHeader.js

@@ -24,13 +24,14 @@ const useUtilityClasses = ownerState => {
     classes,
     headerAlign,
     isDragging,
+    isLastColumn,
     showLeftBorder,
     showRightBorder,
     groupId,
     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 === 'left' && 'columnHeader--pinnedLeft', pinnedPosition === 'right' && 'columnHeader--pinnedRight'],
+    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 === 'left' && 'columnHeader--pinnedLeft', pinnedPosition === 'right' && 'columnHeader--pinnedRight', isLastColumn && 'columnHeader--last'],
     draggableContainer: ['columnHeaderDraggableContainer'],
     titleContainer: ['columnHeaderTitleContainer', 'withBorderColor'],
     titleContainerContent: ['columnHeaderTitleContainerContent']

package/node/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -9,7 +9,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _gridClasses = require("../../constants/gridClasses");
@@ -26,7 +26,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     icon: ['sortIcon']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 function getIcon(icons, direction, className, sortingOrder) {
   let Icon;

package/node/components/columnHeaders/GridColumnHeaderTitle.js

@@ -10,7 +10,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
 var _domUtils = require("../../utils/domUtils");
 var _gridClasses = require("../../constants/gridClasses");
@@ -26,7 +26,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['columnHeaderTitle']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const GridColumnHeaderTitleRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',

package/node/components/columnHeaders/GridIconButtonContainer.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -24,7 +24,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['iconButtonContainer']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const GridIconButtonContainerRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',

package/node/components/columnSelection/GridHeaderCheckbox.js

@@ -9,8 +9,8 @@ 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 _utils = require("@mui/utils");
-var _utils2 = require("../../hooks/features/rowSelection/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _utils = require("../../hooks/features/rowSelection/utils");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusStateSelector");
 var _gridRowSelectionSelector = require("../../hooks/features/rowSelection/gridRowSelectionSelector");
@@ -30,7 +30,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['checkboxInput']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const GridHeaderCheckbox = exports.GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderCheckbox(props, ref) {
   const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
@@ -113,7 +113,7 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = /*#__PURE__*/React.forwa
     },
     tabIndex: tabIndex,
     onKeyDown: handleKeyDown,
-    disabled: !(0, _utils2.isMultipleRowSelectionEnabled)(rootProps)
+    disabled: !(0, _utils.isMultipleRowSelectionEnabled)(rootProps)
   }, rootProps.slotProps?.baseCheckbox, other));
 });
 process.env.NODE_ENV !== "production" ? GridHeaderCheckbox.propTypes = {

package/node/components/columnsManagement/GridColumnsManagement.js

@@ -8,7 +8,7 @@ exports.GridColumnsManagement = GridColumnsManagement;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
 var _styles = require("@mui/material/styles");
 var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
@@ -17,7 +17,7 @@ var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _useLazyRef = require("../../hooks/utils/useLazyRef");
-var _utils2 = require("./utils");
+var _utils = require("./utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -33,7 +33,7 @@ const useUtilityClasses = ownerState => {
     footer: ['columnsManagementFooter'],
     row: ['columnsManagementRow']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const collator = new Intl.Collator();
 function GridColumnsManagement(props) {
@@ -47,14 +47,14 @@ function GridColumnsManagement(props) {
   const classes = useUtilityClasses(rootProps);
   const {
     sort,
-    searchPredicate = _utils2.defaultSearchPredicate,
+    searchPredicate = _utils.defaultSearchPredicate,
     autoFocusSearchField = true,
     disableShowHideToggle = false,
     disableResetButton = false,
     toggleAllMode = 'all',
     getTogglableColumns
   } = props;
-  const isResetDisabled = React.useMemo(() => (0, _utils2.checkColumnVisibilityModelsSame)(columnVisibilityModel, initialColumnVisibilityModel), [columnVisibilityModel, initialColumnVisibilityModel]);
+  const isResetDisabled = React.useMemo(() => (0, _utils.checkColumnVisibilityModelsSame)(columnVisibilityModel, initialColumnVisibilityModel), [columnVisibilityModel, initialColumnVisibilityModel]);
   const sortedColumns = React.useMemo(() => {
     switch (sort) {
       case 'asc':

package/node/components/containers/GridFooterContainer.js

@@ -10,7 +10,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -25,7 +25,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['footerContainer', 'withBorderColor']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const GridFooterContainerRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',

package/node/components/containers/GridOverlay.js

@@ -10,7 +10,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -25,7 +25,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['overlay']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const GridOverlayRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',

package/node/components/containers/GridRoot.js

@@ -21,15 +21,14 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (ownerState, density) => {
   const {
     autoHeight,
-    density,
     classes,
     showCellVerticalBorder
   } = ownerState;
   const slots = {
-    root: ['root', autoHeight && 'autoHeight', `root--density${(0, _utils.unstable_capitalize)(density)}`, 'withBorderColor', showCellVerticalBorder && 'withVerticalBorder']
+    root: ['root', autoHeight && 'autoHeight', `root--density${(0, _utils.unstable_capitalize)(density)}`, ownerState.slots.toolbar === null && 'root--noToolbar', 'withBorderColor', showCellVerticalBorder && 'withVerticalBorder']
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
@@ -43,10 +42,8 @@ const GridRoot = exports.GridRoot = /*#__PURE__*/React.forwardRef(function GridR
   const density = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensitySelector);
   const rootElementRef = apiRef.current.rootElementRef;
   const handleRef = (0, _utils.unstable_useForkRef)(rootElementRef, ref);
-  const ownerState = (0, _extends2.default)({}, rootProps, {
-    density
-  });
-  const classes = useUtilityClasses(ownerState);
+  const ownerState = rootProps;
+  const classes = useUtilityClasses(ownerState, density);
 
   // Our implementation of <NoSsr />
   const [mountedState, setMountedState] = React.useState(false);