@mui/x-data-grid 7.11.1 → 7.12.0

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/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/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.0
  *
  * @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]);
 }

package/node/locales/trTR.js

@@ -36,11 +36,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',
@@ -77,22 +76,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/node/utils/composeGridClasses.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.composeGridClasses = composeGridClasses;
+var _utils = require("@mui/utils");
+var _gridClasses = require("../constants/gridClasses");
+function composeGridClasses(classes, slots) {
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+}

package/node/utils/platform.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isFirefox = void 0;
+const userAgent = typeof navigator !== 'undefined' ? navigator.userAgent.toLowerCase() : 'empty';
+const isFirefox = exports.isFirefox = userAgent.includes('firefox');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.11.1",
+  "version": "7.12.0",
   "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -37,13 +37,13 @@
     "directory": "packages/x-data-grid"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.8",
+    "@babel/runtime": "^7.25.0",
     "@mui/system": "^5.16.5",
     "@mui/utils": "^5.16.5",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^4.1.8",
-    "@mui/x-internals": "7.11.1"
+    "@mui/x-internals": "7.12.0"
   },
   "peerDependencies": {
     "@mui/material": "^5.15.14",

package/utils/composeGridClasses.d.ts

@@ -0,0 +1,3 @@
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import type { DataGridProcessedProps } from '../models/props/DataGridProps';
+export declare function composeGridClasses(classes: DataGridProcessedProps['classes'], slots: Parameters<typeof composeClasses>[0]): Record<string, string>;

package/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/utils/platform.d.ts

@@ -0,0 +1 @@
+export declare const isFirefox: boolean;

package/utils/platform.js

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