@mui/x-data-grid 7.11.1 → 7.12.1

package/node/components/containers/GridRootStyles.js

@@ -8,6 +8,9 @@ exports.GridRootStyles = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _styles = require("@mui/material/styles");
 var _gridClasses = require("../../constants/gridClasses");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
+var _gridDimensionsSelectors = require("../../hooks/features/dimensions/gridDimensionsSelectors");
 function getBorderColor(theme) {
   if (theme.vars) {
     return theme.vars.palette.TableCell.border;
@@ -33,6 +36,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 */';
 const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
@@ -158,6 +165,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
 })(({
   theme: t
 }) => {
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const dimensions = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.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;
@@ -220,14 +229,10 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.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.
-    [`.${_gridClasses.gridClasses.main} > *:first-of-type`]: {
+    [`.${_gridClasses.gridClasses.main} > *:first-child${ignoreSsrWarning}`]: {
       borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
       borderTopRightRadius: 'var(--unstable_DataGrid-radius)'
     },
@@ -275,6 +280,12 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.columnHeader}:focus, & .${_gridClasses.gridClasses.cell}:focus`]: {
       outline: `solid ${t.palette.primary.main} 1px`
     },
+    [`&.${_gridClasses.gridClasses['root--noToolbar']} [aria-rowindex="1"] [aria-colindex="1"]`]: {
+      borderTopLeftRadius: 'calc(var(--unstable_DataGrid-radius) - 1px)'
+    },
+    [`&.${_gridClasses.gridClasses['root--noToolbar']} [aria-rowindex="1"] .${_gridClasses.gridClasses['columnHeader--last']}`]: {
+      borderTopRightRadius: !dimensions.hasScrollY || dimensions.scrollbarSize === 0 ? 'calc(var(--unstable_DataGrid-radius) - 1px)' : undefined
+    },
     [`& .${_gridClasses.gridClasses.columnHeaderCheckbox}, & .${_gridClasses.gridClasses.cellCheckbox}`]: {
       padding: 0,
       justifyContent: 'center',
@@ -414,6 +425,15 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         borderTop: '1px solid var(--DataGrid-rowBorderColor)'
       }
     },
+    /* Bottom border of the top-container */
+    [`& .${_gridClasses.gridClasses['row--borderBottom']} .${_gridClasses.gridClasses.columnHeader},
+      & .${_gridClasses.gridClasses['row--borderBottom']} .${_gridClasses.gridClasses.filler},
+      & .${_gridClasses.gridClasses['row--borderBottom']} .${_gridClasses.gridClasses.scrollbarFiller}`]: {
+      borderBottom: `1px solid var(--DataGrid-rowBorderColor)`
+    },
+    [`& .${_gridClasses.gridClasses['row--borderBottom']} .${_gridClasses.gridClasses.cell}`]: {
+      borderBottom: `1px solid var(--rowBorderColor)`
+    },
     /* Row styles */
     [`.${_gridClasses.gridClasses.row}`]: {
       display: 'flex',

package/node/components/containers/GridToolbarContainer.js

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

package/node/components/panel/GridPanelContent.js

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

package/node/components/panel/GridPanelFooter.js

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

package/node/components/panel/GridPanelHeader.js

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

package/node/components/panel/GridPanelWrapper.js

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _Unstable_TrapFocus = _interopRequireDefault(require("@mui/material/Unstable_TrapFocus"));
 var _styles = require("@mui/material/styles");
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -26,7 +26,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['panelWrapper']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const GridPanelWrapperRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',

package/node/components/virtualization/GridBottomContainer.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _gridClasses = require("../../constants/gridClasses");
 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); }
@@ -18,7 +18,7 @@ const useUtilityClasses = () => {
   const slots = {
     root: ['bottomContainer']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, {});
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, {});
 };
 const Element = (0, _system.styled)('div')({
   position: 'sticky',

package/node/components/virtualization/GridTopContainer.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _gridClasses = require("../../constants/gridClasses");
 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); }
@@ -18,23 +18,12 @@ const useUtilityClasses = () => {
   const slots = {
     root: ['topContainer']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, {});
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, {});
 };
 const Element = (0, _system.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
 });
 function GridTopContainer(props) {
   const classes = useUtilityClasses();

package/node/components/virtualization/GridVirtualScrollbar.js

@@ -134,6 +134,7 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = /*#__PURE__*/React.f
     ref: (0, _utils.unstable_useForkRef)(ref, scrollbarRef),
     className: classes.root,
     tabIndex: -1,
+    "aria-hidden": "true",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
       ref: contentRef,
       className: classes.content

package/node/components/virtualization/GridVirtualScroller.js

@@ -8,7 +8,7 @@ exports.GridVirtualScroller = GridVirtualScroller;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _system = require("@mui/system");
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _GridScrollArea = require("../GridScrollArea");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -37,7 +37,7 @@ const useUtilityClasses = (ownerState, dimensions, loadingOverlayVariant) => {
     root: ['main', dimensions.rightPinnedWidth > 0 && 'main--hasPinnedRight', loadingOverlayVariant === 'skeleton' && 'main--hasSkeletonLoadingOverlay'],
     scroller: ['virtualScroller']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const Scroller = (0, _system.styled)('div', {
   name: 'MuiDataGrid',

package/node/components/virtualization/GridVirtualScrollerContent.js

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

package/node/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -10,7 +10,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _rows = require("../../hooks/features/rows");
@@ -28,7 +28,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['virtualScrollerRenderZone']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const VirtualScrollerRenderZoneRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',

package/node/constants/gridClasses.js

@@ -9,4 +9,4 @@ var _utils = require("@mui/utils");
 function getDataGridUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiDataGrid', slot);
 }
-const gridClasses = exports.gridClasses = (0, _utils.unstable_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']);
+const gridClasses = exports.gridClasses = (0, _utils.unstable_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/node/hooks/core/useGridRefs.js

@@ -11,12 +11,14 @@ 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
   });
 };
 exports.useGridRefs = useGridRefs;

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

@@ -19,6 +19,7 @@ var _virtualization = require("../virtualization");
 var _useGridVirtualScroller = require("../virtualization/useGridVirtualScroller");
 var _GridColumnGroupHeader = require("../../../components/columnHeaders/GridColumnGroupHeader");
 var _columns = require("../columns");
+var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _gridColumnGroupsSelector = require("../columnGrouping/gridColumnGroupsSelector");
 var _GridScrollbarFillerCell = require("../../../components/GridScrollbarFillerCell");
 var _getPinnedCellOffset = require("../../../internals/utils/getPinnedCellOffset");
@@ -60,6 +61,7 @@ const useGridColumnHeaders = props => {
   const columnPositions = (0, _utils.useGridSelector)(apiRef, _columns.gridColumnPositionsSelector);
   const renderContext = (0, _utils.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
   const pinnedColumns = (0, _utils.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
+  const pinnedRows = (0, _utils.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsSelector);
   const offsetLeft = (0, _useGridVirtualScroller.computeOffsetLeft)(columnPositions, renderContext, theme.direction, pinnedColumns.left.length);
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   React.useEffect(() => {
@@ -188,6 +190,7 @@ const useGridColumnHeaders = props => {
       role: "row",
       "aria-rowindex": headerGroupingMaxDepth + 1,
       ownerState: rootProps,
+      className: pinnedRows.top.length === 0 ? _gridClasses.gridClasses['row--borderBottom'] : undefined,
       children: [leftRenderContext && getColumnHeaders({
         position: _columns.GridPinnedColumnPosition.LEFT,
         renderContext: leftRenderContext,

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

@@ -27,7 +27,7 @@ const useGridEditing = (apiRef, props) => {
     isCellEditable: isCellEditableProp
   } = props;
   const isCellEditable = React.useCallback(params => {
-    if ((0, _gridRowsUtils.isAutoGeneratedRow)(params.rowNode)) {
+    if ((0, _gridRowsUtils.isAutogeneratedRowNode)(params.rowNode)) {
       return false;
     }
     if (!params.colDef.editable) {

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

@@ -282,11 +282,10 @@ const useGridRowSelection = (apiRef, props) => {
     }
   }, [apiRef, expandMouseRowRangeSelection, canHaveMultipleSelection]);
   const handleHeaderSelectionCheckboxChange = React.useCallback(params => {
-    const shouldLimitSelectionToCurrentPage = props.checkboxSelectionVisibleOnly && props.pagination;
-    const rowsToBeSelected = shouldLimitSelectionToCurrentPage ? (0, _pagination.gridPaginatedVisibleSortedGridRowIdsSelector)(apiRef) : (0, _gridFilterSelector.gridExpandedSortedRowIdsSelector)(apiRef);
+    const rowsToBeSelected = props.pagination && props.checkboxSelectionVisibleOnly && props.paginationMode === 'client' ? (0, _pagination.gridPaginatedVisibleSortedGridRowIdsSelector)(apiRef) : (0, _gridFilterSelector.gridExpandedSortedRowIdsSelector)(apiRef);
     const filterModel = (0, _gridFilterSelector.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) === _gridEditRowModel.GridCellModes.Edit) {

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridRowSelectionPreProcessors = 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 _pipeProcessing = require("../../core/pipeProcessing");
 var _constants = require("../../../constants");
 var _colDef = require("../../../colDef");
@@ -22,7 +22,7 @@ const useUtilityClasses = ownerState => {
       cellCheckbox: ['cellCheckbox'],
       columnHeaderCheckbox: ['columnHeaderCheckbox']
     };
-    return (0, _utils.unstable_composeClasses)(slots, _constants.getDataGridUtilityClass, classes);
+    return (0, _composeClasses.default)(slots, _constants.getDataGridUtilityClass, classes);
   }, [classes]);
 };
 const useGridRowSelectionPreProcessors = (apiRef, props) => {

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

@@ -10,7 +10,7 @@ exports.checkGridRowIdIsValid = checkGridRowIdIsValid;
 exports.computeRowsUpdates = computeRowsUpdates;
 exports.createRowsInternalCache = void 0;
 exports.getMinimalContentHeight = getMinimalContentHeight;
-exports.updateCacheWithNewRows = exports.isAutoGeneratedRow = exports.getTreeNodeDescendants = exports.getTopLevelRowCount = exports.getRowsStateFromCache = exports.getRowIdFromRowModel = void 0;
+exports.updateCacheWithNewRows = exports.isAutogeneratedRowNode = exports.isAutogeneratedRow = exports.getTreeNodeDescendants = exports.getTopLevelRowCount = exports.getRowsStateFromCache = exports.getRowIdFromRowModel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _gridRowsSelector = require("./gridRowsSelector");
 var _gridDimensionsSelectors = require("../dimensions/gridDimensionsSelectors");
@@ -141,8 +141,10 @@ const getRowsStateFromCache = ({
   });
 };
 exports.getRowsStateFromCache = getRowsStateFromCache;
-const isAutoGeneratedRow = rowNode => rowNode.type === 'skeletonRow' || rowNode.type === 'footer' || rowNode.type === 'group' && rowNode.isAutoGenerated || rowNode.type === 'pinnedRow' && rowNode.isAutoGenerated;
-exports.isAutoGeneratedRow = isAutoGeneratedRow;
+const isAutogeneratedRow = row => GRID_ID_AUTOGENERATED in row;
+exports.isAutogeneratedRow = isAutogeneratedRow;
+const isAutogeneratedRowNode = rowNode => rowNode.type === 'skeletonRow' || rowNode.type === 'footer' || rowNode.type === 'group' && rowNode.isAutoGenerated || rowNode.type === 'pinnedRow' && rowNode.isAutoGenerated;
+exports.isAutogeneratedRowNode = isAutogeneratedRowNode;
 const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) => {
   const node = tree[parentId];
   if (node.type !== 'group') {
@@ -151,7 +153,7 @@ 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/node/hooks/features/rows/index.js

@@ -15,7 +15,8 @@ var _exportNames = {
   gridRowMaximumTreeDepthSelector: true,
   gridDataRowIdsSelector: true,
   GRID_ROOT_GROUP_ID: true,
-  checkGridRowIdIsValid: true
+  checkGridRowIdIsValid: true,
+  isAutogeneratedRow: true
 };
 Object.defineProperty(exports, "GRID_ROOT_GROUP_ID", {
   enumerable: true,
@@ -89,6 +90,12 @@ Object.defineProperty(exports, "gridTopLevelRowCountSelector", {
     return _gridRowsSelector.gridTopLevelRowCountSelector;
   }
 });
+Object.defineProperty(exports, "isAutogeneratedRow", {
+  enumerable: true,
+  get: function () {
+    return _gridRowsUtils.isAutogeneratedRow;
+  }
+});
 var _gridRowsMetaSelector = require("./gridRowsMetaSelector");
 Object.keys(_gridRowsMetaSelector).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -58,7 +58,7 @@ const useGridRows = (apiRef, props) => {
       return model;
     }
     const node = apiRef.current.getRowNode(id);
-    if (node && (0, _gridRowsUtils.isAutoGeneratedRow)(node)) {
+    if (node && (0, _gridRowsUtils.isAutogeneratedRowNode)(node)) {
       return {
         [_gridRowsUtils.GRID_ID_AUTOGENERATED]: id
       };
@@ -222,7 +222,7 @@ 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 || !(0, _gridRowsUtils.isAutoGeneratedRow)(tree[id])) {
+        if (!skipAutoGeneratedRows || !(0, _gridRowsUtils.isAutogeneratedRowNode)(tree[id])) {
           children.push(id);
         }
       }

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

@@ -32,7 +32,7 @@ const gridSortedRowEntriesSelector = exports.gridSortedRowEntriesSelector = (0,
     });
   }
   const rowNode = rowTree[id];
-  if (rowNode && (0, _gridRowsUtils.isAutoGeneratedRow)(rowNode)) {
+  if (rowNode && (0, _gridRowsUtils.isAutogeneratedRowNode)(rowNode)) {
     acc.push({
       id,
       model: {

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

@@ -26,6 +26,7 @@ var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _gridFocusStateSelector = require("../focus/gridFocusStateSelector");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _utils2 = require("../../utils");
+var platform = _interopRequireWildcard(require("../../../utils/platform"));
 var _utils3 = require("../../../utils/utils");
 var _gridRowSelectionSelector = require("../rowSelection/gridRowSelectionSelector");
 var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
@@ -190,6 +191,8 @@ 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 = (0, _utils.unstable_useEventCallback)(event => {
@@ -269,6 +272,7 @@ 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) {
@@ -310,6 +314,7 @@ const useGridVirtualScroller = () => {
         isFirstVisible = rowIndexInPage === 0;
       }
       let isLastVisible = false;
+      const isLastVisibleInSection = rowIndexInPage === rowModels.length - 1;
       if (isLastSection) {
         if (!isPinnedSection) {
           const lastIndex = currentPage.rows.length - 1;
@@ -318,7 +323,7 @@ const useGridVirtualScroller = () => {
             isLastVisible = true;
           }
         } else {
-          isLastVisible = rowIndexInPage === rowModels.length - 1;
+          isLastVisible = isLastVisibleInSection;
         }
       }
       const isVirtualRow = rowIndexInPage === virtualRowIndex;
@@ -333,7 +338,7 @@ 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__*/(0, _jsxRuntime.jsx)(rootProps.slots.row, (0, _extends2.default)({
         row: model,
         rowId: id,
@@ -350,7 +355,8 @@ const useGridVirtualScroller = () => {
         focusedColumnIndex: hasFocus ? focusedCell.columnIndex : undefined,
         isFirstVisible: isFirstVisible,
         isLastVisible: isLastVisible,
-        isNotVisible: isNotVisible
+        isNotVisible: isNotVisible,
+        showBottomBorder: showBottomBorder
       }, rowProps), id));
       if (isNotVisible) {
         return;
@@ -421,12 +427,14 @@ 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/node/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/node/internals/utils/useProps.js

@@ -1,12 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useProps = useProps;
-var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 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; }
@@ -30,8 +27,5 @@ function groupForwardedProps(props) {
   return newProps;
 }
 function useProps(allProps) {
-  return React.useMemo(() => {
-    const themedProps = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(allProps), allProps));
-    return groupForwardedProps(themedProps);
-  }, [allProps]);
+  return React.useMemo(() => groupForwardedProps(allProps), [allProps]);
 }