@mui/x-data-grid 7.11.1 → 7.12.1

package/modern/components/GridSelectedRowCount.js

@@ -4,7 +4,7 @@ const _excluded = ["className", "selectedRowCount"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../constants/gridClasses';

package/modern/components/base/GridOverlays.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/system';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridDimensionsSelector } from '../../hooks/features/dimensions';

package/modern/components/cell/GridBooleanCell.js

@@ -3,11 +3,11 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "hasFocus", "tabIndex", "hideDescendantCount"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { isAutoGeneratedRow } from '../../hooks/features/rows/gridRowsUtils';
+import { isAutogeneratedRowNode } from '../../hooks/features/rows/gridRowsUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -106,7 +106,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
 const GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
 export { GridBooleanCell };
 export const renderBooleanCell = params => {
-  if (params.field !== '__row_group_by_columns_group__' && isAutoGeneratedRow(params.rowNode)) {
+  if (params.field !== '__row_group_by_columns_group__' && isAutogeneratedRowNode(params.rowNode)) {
     return '';
   }
   return /*#__PURE__*/_jsx(GridBooleanCell, _extends({}, params));

package/modern/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';

package/modern/components/columnHeaders/GridBaseColumnHeaders.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["className"];
 import * as React from 'react';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';

package/modern/components/columnHeaders/GridColumnGroupHeader.js

@@ -15,13 +15,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/modern/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["direction", "index", "sortingOrder", "disabled"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import Badge from '@mui/material/Badge';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';

package/modern/components/columnHeaders/GridColumnHeaderTitle.js

@@ -4,7 +4,7 @@ const _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
 import { isOverflown } from '../../utils/domUtils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';

package/modern/components/columnHeaders/GridIconButtonContainer.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["className"];
 import * as React from 'react';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';

package/modern/components/columnSelection/GridHeaderCheckbox.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["field", "colDef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { isMultipleRowSelectionEnabled } from '../../hooks/features/rowSelection/utils';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridTabIndexColumnHeaderSelector } from '../../hooks/features/focus/gridFocusStateSelector';

package/modern/components/columnsManagement/GridColumnsManagement.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import { styled } from '@mui/material/styles';
 import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from '../../hooks/features/columns/gridColumnsSelector';

package/modern/components/containers/GridFooterContainer.js

@@ -4,7 +4,7 @@ const _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';

package/modern/components/containers/GridOverlay.js

@@ -4,7 +4,7 @@ const _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';

package/modern/components/containers/GridRoot.js

@@ -12,15 +12,14 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { gridDensitySelector } from '../../hooks/features/density/densitySelector';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (ownerState, density) => {
   const {
     autoHeight,
-    density,
     classes,
     showCellVerticalBorder
   } = ownerState;
   const slots = {
-    root: ['root', autoHeight && 'autoHeight', `root--density${capitalize(density)}`, 'withBorderColor', showCellVerticalBorder && 'withVerticalBorder']
+    root: ['root', autoHeight && 'autoHeight', `root--density${capitalize(density)}`, ownerState.slots.toolbar === null && 'root--noToolbar', 'withBorderColor', showCellVerticalBorder && 'withVerticalBorder']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
@@ -34,10 +33,8 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   const density = useGridSelector(apiRef, gridDensitySelector);
   const rootElementRef = apiRef.current.rootElementRef;
   const handleRef = useForkRef(rootElementRef, ref);
-  const ownerState = _extends({}, rootProps, {
-    density
-  });
-  const classes = useUtilityClasses(ownerState);
+  const ownerState = rootProps;
+  const classes = useUtilityClasses(ownerState, density);
 
   // Our implementation of <NoSsr />
   const [mountedState, setMountedState] = React.useState(false);

package/modern/components/containers/GridRootStyles.js

@@ -1,6 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { alpha, styled, darken, lighten, decomposeColor, recomposeColor } from '@mui/material/styles';
 import { gridClasses as c } from '../../constants/gridClasses';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
+import { gridDimensionsSelector } from '../../hooks/features/dimensions/gridDimensionsSelectors';
 function getBorderColor(theme) {
   if (theme.vars) {
     return theme.vars.palette.TableCell.border;
@@ -26,6 +29,10 @@ const columnHeaderStyles = {
     visibility: 'visible'
   }
 };
+
+// Emotion thinks it knows better than us which selector we should use.
+// 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 */';
 export const GridRootStyles = styled('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
@@ -151,6 +158,8 @@ export const GridRootStyles = styled('div', {
 })(({
   theme: t
 }) => {
+  const apiRef = useGridPrivateApiContext();
+  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const borderColor = getBorderColor(t);
   const radius = t.shape.borderRadius;
   const containerBackground = t.vars ? t.vars.palette.background.default : t.mixins.MuiDataGrid?.containerBackground ?? t.palette.background.default;
@@ -213,14 +222,10 @@ export const GridRootStyles = styled('div', {
     // See https://github.com/mui/mui-x/issues/8547
     minHeight: 0,
     flexDirection: 'column',
+    overflow: 'hidden',
     overflowAnchor: 'none',
     // Keep the same scrolling position
-    // The selector we really want here is `:first-child`, but emotion thinks it knows better than use what we
-    // want and prints a warning to the console if we use it, about :first-child being "unsafe" in an SSR context.
-    // https://github.com/emotion-js/emotion/issues/1105
-    // Using `:first-of-type instead` is ironically less "safe" because if all our elements aren't `div`, this style
-    // will fail to apply.
-    [`.${c.main} > *:first-of-type`]: {
+    [`.${c.main} > *:first-child${ignoreSsrWarning}`]: {
       borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
       borderTopRightRadius: 'var(--unstable_DataGrid-radius)'
     },
@@ -268,6 +273,12 @@ export const GridRootStyles = styled('div', {
     [`& .${c.columnHeader}:focus, & .${c.cell}:focus`]: {
       outline: `solid ${t.palette.primary.main} 1px`
     },
+    [`&.${c['root--noToolbar']} [aria-rowindex="1"] [aria-colindex="1"]`]: {
+      borderTopLeftRadius: 'calc(var(--unstable_DataGrid-radius) - 1px)'
+    },
+    [`&.${c['root--noToolbar']} [aria-rowindex="1"] .${c['columnHeader--last']}`]: {
+      borderTopRightRadius: !dimensions.hasScrollY || dimensions.scrollbarSize === 0 ? 'calc(var(--unstable_DataGrid-radius) - 1px)' : undefined
+    },
     [`& .${c.columnHeaderCheckbox}, & .${c.cellCheckbox}`]: {
       padding: 0,
       justifyContent: 'center',
@@ -407,6 +418,15 @@ export const GridRootStyles = styled('div', {
         borderTop: '1px solid var(--DataGrid-rowBorderColor)'
       }
     },
+    /* Bottom border of the top-container */
+    [`& .${c['row--borderBottom']} .${c.columnHeader},
+      & .${c['row--borderBottom']} .${c.filler},
+      & .${c['row--borderBottom']} .${c.scrollbarFiller}`]: {
+      borderBottom: `1px solid var(--DataGrid-rowBorderColor)`
+    },
+    [`& .${c['row--borderBottom']} .${c.cell}`]: {
+      borderBottom: `1px solid var(--rowBorderColor)`
+    },
     /* Row styles */
     [`.${c.row}`]: {
       display: 'flex',

package/modern/components/containers/GridToolbarContainer.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";

package/modern/components/panel/GridPanelContent.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";

package/modern/components/panel/GridPanelFooter.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";

package/modern/components/panel/GridPanelHeader.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";

package/modern/components/panel/GridPanelWrapper.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import FocusTrap from '@mui/material/Unstable_TrapFocus';
 import { styled } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";

package/modern/components/virtualization/GridBottomContainer.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = () => {

package/modern/components/virtualization/GridTopContainer.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = () => {
@@ -14,18 +14,7 @@ const useUtilityClasses = () => {
 const Element = styled('div')({
   position: 'sticky',
   zIndex: 4,
-  top: 0,
-  '&::after': {
-    content: '" "',
-    position: 'absolute',
-    zIndex: 5,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    height: 1,
-    width: 'var(--DataGrid-rowWidth)',
-    backgroundColor: 'var(--DataGrid-rowBorderColor)'
-  }
+  top: 0
 });
 export function GridTopContainer(props) {
   const classes = useUtilityClasses();

package/modern/components/virtualization/GridVirtualScrollbar.js

@@ -126,6 +126,7 @@ const GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualS
     ref: useForkRef(ref, scrollbarRef),
     className: classes.root,
     tabIndex: -1,
+    "aria-hidden": "true",
     children: /*#__PURE__*/_jsx(Content, {
       ref: contentRef,
       className: classes.content

package/modern/components/virtualization/GridVirtualScroller.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { styled } from '@mui/system';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { GridScrollArea } from '../GridScrollArea';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';

package/modern/components/virtualization/GridVirtualScrollerContent.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";

package/modern/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -4,7 +4,7 @@ const _excluded = ["className"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridRowsMetaSelector } from '../../hooks/features/rows';

package/modern/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', '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', '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', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderTop', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', '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', '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', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderTop', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', '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', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/modern/hooks/core/useGridRefs.js

@@ -3,11 +3,13 @@ export const useGridRefs = apiRef => {
   const rootElementRef = React.useRef(null);
   const mainElementRef = React.useRef(null);
   const virtualScrollerRef = React.useRef(null);
+  const columnHeadersContainerRef = React.useRef(null);
   apiRef.current.register('public', {
     rootElementRef
   });
   apiRef.current.register('private', {
     mainElementRef,
-    virtualScrollerRef
+    virtualScrollerRef,
+    columnHeadersContainerRef
   });
 };

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

@@ -12,6 +12,7 @@ import { gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelect
 import { computeOffsetLeft } from '../virtualization/useGridVirtualScroller';
 import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
 import { GridPinnedColumnPosition, gridColumnPositionsSelector, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
+import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
 import { gridColumnGroupsUnwrappedModelSelector } from '../columnGrouping/gridColumnGroupsSelector';
 import { GridScrollbarFillerCell as ScrollbarFiller } from '../../../components/GridScrollbarFillerCell';
 import { getPinnedCellOffset } from '../../../internals/utils/getPinnedCellOffset';
@@ -51,6 +52,7 @@ export const useGridColumnHeaders = props => {
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
+  const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
   const offsetLeft = computeOffsetLeft(columnPositions, renderContext, theme.direction, pinnedColumns.left.length);
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   React.useEffect(() => {
@@ -179,6 +181,7 @@ export const useGridColumnHeaders = props => {
       role: "row",
       "aria-rowindex": headerGroupingMaxDepth + 1,
       ownerState: rootProps,
+      className: pinnedRows.top.length === 0 ? gridClasses['row--borderBottom'] : undefined,
       children: [leftRenderContext && getColumnHeaders({
         position: GridPinnedColumnPosition.LEFT,
         renderContext: leftRenderContext,

package/modern/hooks/features/editing/useGridEditing.js

@@ -5,7 +5,7 @@ import { useGridCellEditing } from './useGridCellEditing';
 import { GridCellModes, GridEditModes } from '../../../models/gridEditRowModel';
 import { useGridRowEditing } from './useGridRowEditing';
 import { gridEditRowsStateSelector } from './gridEditingSelectors';
-import { isAutoGeneratedRow } from '../rows/gridRowsUtils';
+import { isAutogeneratedRowNode } from '../rows/gridRowsUtils';
 export const editingStateInitializer = state => _extends({}, state, {
   editRows: {}
 });
@@ -17,7 +17,7 @@ export const useGridEditing = (apiRef, props) => {
     isCellEditable: isCellEditableProp
   } = props;
   const isCellEditable = React.useCallback(params => {
-    if (isAutoGeneratedRow(params.rowNode)) {
+    if (isAutogeneratedRowNode(params.rowNode)) {
       return false;
     }
     if (!params.colDef.editable) {

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

@@ -272,11 +272,10 @@ export const useGridRowSelection = (apiRef, props) => {
     }
   }, [apiRef, expandMouseRowRangeSelection, canHaveMultipleSelection]);
   const handleHeaderSelectionCheckboxChange = React.useCallback(params => {
-    const shouldLimitSelectionToCurrentPage = props.checkboxSelectionVisibleOnly && props.pagination;
-    const rowsToBeSelected = shouldLimitSelectionToCurrentPage ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef) : gridExpandedSortedRowIdsSelector(apiRef);
+    const rowsToBeSelected = props.pagination && props.checkboxSelectionVisibleOnly && props.paginationMode === 'client' ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef) : gridExpandedSortedRowIdsSelector(apiRef);
     const filterModel = gridFilterModelSelector(apiRef);
     apiRef.current.selectRows(rowsToBeSelected, params.value, filterModel?.items.length > 0);
-  }, [apiRef, props.checkboxSelectionVisibleOnly, props.pagination]);
+  }, [apiRef, props.checkboxSelectionVisibleOnly, props.pagination, props.paginationMode]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     // Get the most recent cell mode because it may have been changed by another listener
     if (apiRef.current.getCellMode(params.id, params.field) === GridCellModes.Edit) {

package/modern/hooks/features/rowSelection/useGridRowSelectionPreProcessors.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { getDataGridUtilityClass } from '../../../constants';
 import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_CHECKBOX_SELECTION_FIELD } from '../../../colDef';

package/modern/hooks/features/rows/gridRowsUtils.js

@@ -123,7 +123,8 @@ export const getRowsStateFromCache = ({
     groupsToFetch
   });
 };
-export const isAutoGeneratedRow = rowNode => rowNode.type === 'skeletonRow' || rowNode.type === 'footer' || rowNode.type === 'group' && rowNode.isAutoGenerated || rowNode.type === 'pinnedRow' && rowNode.isAutoGenerated;
+export const isAutogeneratedRow = row => GRID_ID_AUTOGENERATED in row;
+export const isAutogeneratedRowNode = rowNode => rowNode.type === 'skeletonRow' || rowNode.type === 'footer' || rowNode.type === 'group' && rowNode.isAutoGenerated || rowNode.type === 'pinnedRow' && rowNode.isAutoGenerated;
 export const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) => {
   const node = tree[parentId];
   if (node.type !== 'group') {
@@ -132,7 +133,7 @@ export const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) =>
   const validDescendants = [];
   for (let i = 0; i < node.children.length; i += 1) {
     const child = node.children[i];
-    if (!skipAutoGeneratedRows || !isAutoGeneratedRow(tree[child])) {
+    if (!skipAutoGeneratedRows || !isAutogeneratedRowNode(tree[child])) {
       validDescendants.push(child);
     }
     const childDescendants = getTreeNodeDescendants(tree, child, skipAutoGeneratedRows);

package/modern/hooks/features/rows/index.js

@@ -1,4 +1,4 @@
 export * from './gridRowsMetaSelector';
 export * from './gridRowsMetaState';
 export { gridRowCountSelector, gridRowsLoadingSelector, gridTopLevelRowCountSelector, gridRowsLookupSelector, gridRowsDataRowIdToIdLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridRowMaximumTreeDepthSelector, gridDataRowIdsSelector } from './gridRowsSelector';
-export { GRID_ROOT_GROUP_ID, checkGridRowIdIsValid } from './gridRowsUtils';
+export { GRID_ROOT_GROUP_ID, checkGridRowIdIsValid, isAutogeneratedRow } from './gridRowsUtils';

package/modern/hooks/features/rows/useGridRows.js

@@ -8,7 +8,7 @@ import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEve
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridSortedRowIdsSelector } from '../sorting/gridSortingSelector';
 import { gridFilteredRowsLookupSelector } from '../filter/gridFilterSelector';
-import { getTreeNodeDescendants, createRowsInternalCache, getRowsStateFromCache, isAutoGeneratedRow, GRID_ROOT_GROUP_ID, GRID_ID_AUTOGENERATED, updateCacheWithNewRows, getTopLevelRowCount, getRowIdFromRowModel, computeRowsUpdates } from './gridRowsUtils';
+import { getTreeNodeDescendants, createRowsInternalCache, getRowsStateFromCache, isAutogeneratedRowNode, GRID_ROOT_GROUP_ID, GRID_ID_AUTOGENERATED, updateCacheWithNewRows, getTopLevelRowCount, getRowIdFromRowModel, computeRowsUpdates } from './gridRowsUtils';
 import { useGridRegisterPipeApplier } from '../../core/pipeProcessing';
 export const rowsStateInitializer = (state, props, apiRef) => {
   const isDataSourceAvailable = !!props.unstable_dataSource;
@@ -48,7 +48,7 @@ export const useGridRows = (apiRef, props) => {
       return model;
     }
     const node = apiRef.current.getRowNode(id);
-    if (node && isAutoGeneratedRow(node)) {
+    if (node && isAutogeneratedRowNode(node)) {
       return {
         [GRID_ID_AUTOGENERATED]: id
       };
@@ -212,7 +212,7 @@ export const useGridRows = (apiRef, props) => {
       const startIndex = sortedRowIds.findIndex(id => id === groupId) + 1;
       for (let index = startIndex; index < sortedRowIds.length && tree[sortedRowIds[index]].depth > groupNode.depth; index += 1) {
         const id = sortedRowIds[index];
-        if (!skipAutoGeneratedRows || !isAutoGeneratedRow(tree[id])) {
+        if (!skipAutoGeneratedRows || !isAutogeneratedRowNode(tree[id])) {
           children.push(id);
         }
       }

package/modern/hooks/features/sorting/gridSortingSelector.js

@@ -1,6 +1,6 @@
 import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
 import { gridRowTreeSelector, gridRowsLookupSelector } from '../rows/gridRowsSelector';
-import { GRID_ID_AUTOGENERATED, isAutoGeneratedRow } from '../rows/gridRowsUtils';
+import { GRID_ID_AUTOGENERATED, isAutogeneratedRowNode } from '../rows/gridRowsUtils';
 /**
  * @category Sorting
  * @ignore - do not document.
@@ -26,7 +26,7 @@ export const gridSortedRowEntriesSelector = createSelectorMemoized(gridSortedRow
     });
   }
   const rowNode = rowTree[id];
-  if (rowNode && isAutoGeneratedRow(rowNode)) {
+  if (rowNode && isAutogeneratedRowNode(rowNode)) {
     acc.push({
       id,
       model: {