@mui/x-data-grid 7.11.1 → 7.12.1

package/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/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/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/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/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/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/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/constants/gridClasses.d.ts

@@ -439,6 +439,11 @@ export interface GridClasses {
      * Styles applied to the root element when user selection is disabled.
      */
     'root--disableUserSelection': string;
+    /**
+     * Used to fix header outline border radius.
+     * @ignore - do not document.
+     */
+    'root--noToolbar': string;
     /**
      * Styles applied to the row element if the row is editable.
      */
@@ -467,6 +472,11 @@ export interface GridClasses {
      * Styles applied to the row if its detail panel is open.
      */
     'row--detailPanelExpanded': string;
+    /**
+     * Styles applied to the row cells if the row needs a bottom border.
+     * @ignore - do not document.
+     */
+    'row--borderBottom': string;
     /**
      * Styles applied to the row element.
      */

package/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/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/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/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/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/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/hooks/features/rows/gridRowsUtils.d.ts

@@ -24,7 +24,8 @@ export declare const getRowsStateFromCache: ({ apiRef, rowCountProp, loadingProp
     rowCountProp: number | undefined;
     loadingProp: boolean | undefined;
 }) => GridRowsState;
-export declare const isAutoGeneratedRow: (rowNode: GridTreeNode) => rowNode is GridFooterNode | GridSkeletonRowNode | GridAutoGeneratedGroupNode | GridAutoGeneratedPinnedRowNode;
+export declare const isAutogeneratedRow: (row: GridRowModel) => boolean;
+export declare const isAutogeneratedRowNode: (rowNode: GridTreeNode) => rowNode is GridFooterNode | GridSkeletonRowNode | GridAutoGeneratedGroupNode | GridAutoGeneratedPinnedRowNode;
 export declare const getTreeNodeDescendants: (tree: GridRowTreeConfig, parentId: GridRowId, skipAutoGeneratedRows: boolean) => GridRowId[];
 export declare const updateCacheWithNewRows: ({ previousCache, getRowId, updates, groupKeys, }: {
     previousCache: GridRowsInternalCache;

package/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/hooks/features/rows/index.d.ts

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

package/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/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/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: {

package/hooks/features/virtualization/useGridVirtualScroller.d.ts

@@ -17,12 +17,12 @@ export declare const useGridVirtualScroller: () => {
     };
     getScrollerProps: () => {
         ref: React.RefObject<HTMLDivElement>;
-        tabIndex: number;
         onScroll: (event: React.UIEvent) => void;
         onWheel: (event: React.WheelEvent) => void;
         onTouchMove: (event: React.TouchEvent) => void;
         style: React.CSSProperties;
         role: string;
+        tabIndex: number | undefined;
     };
     getContentProps: () => {
         style: React.CSSProperties;

package/hooks/features/virtualization/useGridVirtualScroller.js

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

package/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/internals/utils/useProps.js

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

package/locales/trTR.js

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

package/models/api/gridCoreApi.d.ts

@@ -67,7 +67,7 @@ export interface GridCorePrivateApi<GridPublicApi extends GridApiCommon, GridPri
     /**
      * The React ref of the grid column container virtualized div element.
      */
-    columnHeadersContainerRef?: React.RefObject<HTMLDivElement>;
+    columnHeadersContainerRef: React.RefObject<HTMLDivElement>;
     /**
      * The React ref of the grid header filter row element.
      */

package/modern/components/GridHeaders.js

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

package/modern/components/GridPagination.js

@@ -11,6 +11,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const GridPaginationRoot = styled(TablePagination)(({
   theme
 }) => ({
+  maxHeight: 'calc(100% + 1px)',
+  // border width
   [`& .${tablePaginationClasses.selectLabel}`]: {
     display: 'none',
     [theme.breakpoints.up('sm')]: {

package/modern/components/GridRow.js

@@ -1,14 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "dimensions", "renderContext", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "dimensions", "renderContext", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef } from '@mui/utils';
+import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { fastMemo } from '../utils/fastMemo';
 import { GridEditModes, GridRowModes, GridCellModes } from '../models/gridEditRowModel';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
+import { gridClasses } from '../constants/gridClasses';
+import { composeGridClasses } from '../utils/composeGridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { gridColumnPositionsSelector } from '../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector, objectShallowCompare } from '../hooks/utils/useGridSelector';
@@ -25,21 +26,6 @@ import { PinnedPosition, gridPinnedColumnPositionLookup } from './cell/GridCell'
 import { GridScrollbarFillerCell as ScrollbarFiller } from './GridScrollbarFillerCell';
 import { getPinnedCellOffset } from '../internals/utils/getPinnedCellOffset';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    editable,
-    editing,
-    selected,
-    isFirstVisible,
-    isLastVisible,
-    rowHeight,
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isFirstVisible && 'row--firstVisible', isLastVisible && 'row--lastVisible', rowHeight === 'auto' && 'row--dynamicHeight']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
 function EmptyCell({
   width
 }) {
@@ -72,6 +58,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       isFirstVisible,
       isLastVisible,
       isNotVisible,
+      showBottomBorder,
       onClick,
       onDoubleClick,
       onMouseEnter,
@@ -93,21 +80,16 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const rowNode = apiRef.current.getRowNode(rowId);
   const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
+  const editing = apiRef.current.getRowMode(rowId) === GridRowModes.Edit;
+  const editable = rootProps.editMode === GridEditModes.Row;
   const hasFocusCell = focusedColumnIndex !== undefined;
   const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < renderContext.firstColumnIndex;
   const hasVirtualFocusCellRight = hasFocusCell && focusedColumnIndex < visibleColumns.length - pinnedColumns.right.length && focusedColumnIndex >= renderContext.lastColumnIndex;
   const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
 
-  const ownerState = {
-    selected,
-    isFirstVisible,
-    isLastVisible,
-    classes: rootProps.classes,
-    editing: apiRef.current.getRowMode(rowId) === GridRowModes.Edit,
-    editable: rootProps.editMode === GridEditModes.Row,
-    rowHeight
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = composeGridClasses(rootProps.classes, {
+    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isFirstVisible && 'row--firstVisible', isLastVisible && 'row--lastVisible', showBottomBorder && 'row--borderBottom', rowHeight === 'auto' && 'row--dynamicHeight']
+  });
   React.useLayoutEffect(() => {
     if (currentPage.range) {
       // The index prop is relative to the rows from all pages. As example, the index prop of the
@@ -417,6 +399,7 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   selected: PropTypes.bool.isRequired,
+  showBottomBorder: PropTypes.bool.isRequired,
   /**
    * Determines which cell should be tabbable by having tabIndex=0.
    * If `null`, no cell in this row is in the tab sequence.

package/modern/components/GridRowCount.js

@@ -4,7 +4,7 @@ const _excluded = ["className", "rowCount", "visibleRowCount"];
 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';