@mui/x-data-grid 7.23.2 → 7.23.4

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -47,7 +47,7 @@ export const useGridColumnHeaders = props => {
   const isRtl = useRtl();
   const rootProps = useGridRootProps();
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
+  const hasColumnVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
   const columnGroupsModel = useGridSelector(apiRef, gridColumnGroupsUnwrappedModelSelector);
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
@@ -87,8 +87,15 @@ export const useGridColumnHeaders = props => {
       renderContext: currentContext = renderContext,
       maxLastColumn = visibleColumns.length
     } = params || {};
-    const firstColumnToRender = currentContext.firstColumnIndex;
-    const lastColumnToRender = !hasVirtualization ? maxLastColumn : currentContext.lastColumnIndex;
+    let firstColumnToRender;
+    let lastColumnToRender;
+    if (!rootProps.disableVirtualization && !hasColumnVirtualization) {
+      firstColumnToRender = 0;
+      lastColumnToRender = maxLastColumn;
+    } else {
+      firstColumnToRender = currentContext.firstColumnIndex;
+      lastColumnToRender = currentContext.lastColumnIndex;
+    }
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     return {
       renderedColumns,

package/hooks/features/columnResize/gridColumnResizeApi.d.ts

@@ -4,6 +4,7 @@ export declare const DEFAULT_GRID_AUTOSIZE_OPTIONS: {
     includeOutliers: boolean;
     outliersFactor: number;
     expand: boolean;
+    disableColumnVirtualization: boolean;
 };
 export type GridAutosizeOptions = {
     /**
@@ -30,6 +31,11 @@ export type GridAutosizeOptions = {
      * @default false
      */
     expand?: boolean;
+    /**
+     * If false, column virtualization is not disabled while resizing.
+     * @default true
+     */
+    disableColumnVirtualization?: boolean;
 };
 /**
  * The Resize API interface that is available in the grid `apiRef`.

package/hooks/features/columnResize/gridColumnResizeApi.js

@@ -2,7 +2,8 @@ export const DEFAULT_GRID_AUTOSIZE_OPTIONS = {
   includeHeaders: true,
   includeOutliers: false,
   outliersFactor: 1.5,
-  expand: false
+  expand: false,
+  disableColumnVirtualization: true
 };
 
 /**

package/hooks/features/columnResize/useGridColumnResize.d.ts

@@ -7,4 +7,4 @@ export declare const columnResizeStateInitializer: GridStateInitializer;
  * @requires useGridColumns (method, event)
  * TODO: improve experience for last column
  */
-export declare const useGridColumnResize: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "autosizeOptions" | "autosizeOnMount" | "disableAutosize" | "onColumnResize" | "onColumnWidthChange">) => void;
+export declare const useGridColumnResize: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "autosizeOptions" | "autosizeOnMount" | "disableAutosize" | "onColumnResize" | "onColumnWidthChange" | "disableVirtualization">) => void;

package/hooks/features/columnResize/useGridColumnResize.js

@@ -458,6 +458,7 @@ export const useGridColumnResize = (apiRef, props) => {
       return;
     }
     apiRef.current.autosizeColumns(_extends({}, props.autosizeOptions, {
+      disableColumnVirtualization: false,
       columns: [column.field]
     }));
   });
@@ -484,8 +485,10 @@ export const useGridColumnResize = (apiRef, props) => {
     options.columns = options.columns.filter(c => state.columnVisibilityModel[c] !== false);
     const columns = options.columns.map(c => apiRef.current.state.columns.lookup[c]);
     try {
-      apiRef.current.unstable_setColumnVirtualization(false);
-      await columnVirtualizationDisabled();
+      if (!props.disableVirtualization && options.disableColumnVirtualization) {
+        apiRef.current.unstable_setColumnVirtualization(false);
+        await columnVirtualizationDisabled();
+      }
       const widthByField = extractColumnWidths(apiRef, options, columns);
       const newColumns = columns.map(column => _extends({}, column, {
         width: widthByField[column.field],
@@ -517,10 +520,12 @@ export const useGridColumnResize = (apiRef, props) => {
         }
       });
     } finally {
-      apiRef.current.unstable_setColumnVirtualization(true);
+      if (!props.disableVirtualization) {
+        apiRef.current.unstable_setColumnVirtualization(true);
+      }
       isAutosizingRef.current = false;
     }
-  }, [apiRef, columnVirtualizationDisabled]);
+  }, [apiRef, columnVirtualizationDisabled, props.disableVirtualization]);
 
   /**
    * EFFECTS

package/hooks/features/columns/gridColumnsUtils.d.ts

@@ -53,4 +53,4 @@ export declare function getFirstNonSpannedColumnToRender({ firstColumnToRender,
     lastRowToRender: number;
     visibleRows: GridRowEntry[];
 }): number;
-export declare function getTotalHeaderHeight(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight' | 'unstable_listView'>): number;
+export declare function getTotalHeaderHeight(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight' | 'unstable_listView' | 'columnGroupHeaderHeight'>): number;

package/hooks/features/columns/gridColumnsUtils.js

@@ -319,6 +319,7 @@ export function getTotalHeaderHeight(apiRef, props) {
   const maxDepth = gridColumnGroupsHeaderMaxDepthSelector(apiRef);
   const isHeaderFilteringEnabled = gridHeaderFilteringEnabledSelector(apiRef);
   const columnHeadersHeight = Math.floor(props.columnHeaderHeight * densityFactor);
+  const columnGroupHeadersHeight = Math.floor((props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor);
   const filterHeadersHeight = isHeaderFilteringEnabled ? Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor) : 0;
-  return columnHeadersHeight * (1 + (maxDepth ?? 0)) + filterHeadersHeight;
+  return columnHeadersHeight + columnGroupHeadersHeight * maxDepth + filterHeadersHeight;
 }

package/hooks/features/rows/useGridRowSpanning.js

@@ -6,6 +6,7 @@ import { gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSele
 import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { gridRenderContextSelector } from "../virtualization/gridVirtualizationSelectors.js";
 import { useGridSelector } from "../../utils/useGridSelector.js";
+import { gridRowTreeSelector } from "./gridRowsSelector.js";
 import { getUnprocessedRange, isRowRangeUpdated, isRowContextInitialized, getCellValue } from "./gridRowSpanningUtils.js";
 import { GRID_CHECKBOX_SELECTION_FIELD } from "../../../colDef/gridCheckboxSelectionColDef.js";
 const EMPTY_STATE = {
@@ -35,7 +36,7 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
     if (skippedFields.has(colDef.field)) {
       return;
     }
-    for (let index = rangeToProcess.firstRowIndex; index <= rangeToProcess.lastRowIndex; index += 1) {
+    for (let index = rangeToProcess.firstRowIndex; index < rangeToProcess.lastRowIndex; index += 1) {
       const row = visibleRows[index];
       if (hiddenCells[row.id]?.[colDef.field]) {
         continue;
@@ -142,7 +143,7 @@ export const rowSpanningStateInitializer = (state, props, apiRef) => {
     }
     const rangeToProcess = {
       firstRowIndex: 0,
-      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS - 1, Math.max(rowIds.length - 1, 0))
+      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS, Math.max(rowIds.length, 0))
     };
     const rows = rowIds.map(id => ({
       id,
@@ -173,10 +174,11 @@ export const useGridRowSpanning = (apiRef, props) => {
   } = useGridVisibleRows(apiRef, props);
   const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
   const colDefs = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  const tree = useGridSelector(apiRef, gridRowTreeSelector);
   const processedRange = useLazyRef(() => {
     return Object.keys(apiRef.current.state.rowSpanning.spannedCells).length > 0 ? {
       firstRowIndex: 0,
-      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS - 1, Math.max(apiRef.current.state.rows.dataRowIds.length - 1, 0))
+      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS, Math.max(apiRef.current.state.rows.dataRowIds.length, 0))
     } : EMPTY_RANGE;
   });
   const lastRange = React.useRef(EMPTY_RANGE);
@@ -204,7 +206,7 @@ export const useGridRowSpanning = (apiRef, props) => {
     }
     const rangeToProcess = getUnprocessedRange({
       firstRowIndex: renderContext.firstRowIndex,
-      lastRowIndex: Math.min(renderContext.lastRowIndex - 1, range.lastRowIndex)
+      lastRowIndex: Math.min(renderContext.lastRowIndex, range.lastRowIndex + 1)
     }, processedRange.current);
     if (rangeToProcess === null) {
       return;
@@ -237,11 +239,17 @@ export const useGridRowSpanning = (apiRef, props) => {
   const prevRenderContext = React.useRef(renderContext);
   const isFirstRender = React.useRef(true);
   const shouldResetState = React.useRef(false);
+  const previousTree = React.useRef(tree);
   React.useEffect(() => {
     const firstRender = isFirstRender.current;
     if (isFirstRender.current) {
       isFirstRender.current = false;
     }
+    if (tree !== previousTree.current) {
+      previousTree.current = tree;
+      updateRowSpanningState(true);
+      return;
+    }
     if (range && lastRange.current && isRowRangeUpdated(range, lastRange.current)) {
       lastRange.current = range;
       shouldResetState.current = true;
@@ -255,5 +263,5 @@ export const useGridRowSpanning = (apiRef, props) => {
       return;
     }
     updateRowSpanningState();
-  }, [updateRowSpanningState, renderContext, range, lastRange]);
+  }, [updateRowSpanningState, renderContext, range, lastRange, tree]);
 };

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -92,10 +92,7 @@ export const useGridVirtualScroller = () => {
       return undefined;
     }
     const initialRect = node.getBoundingClientRect();
-    let lastSize = {
-      width: initialRect.width,
-      height: initialRect.height
-    };
+    let lastSize = roundDimensions(initialRect);
     apiRef.current.publishEvent('resize', lastSize);
     if (typeof ResizeObserver === 'undefined') {
       return undefined;
@@ -105,10 +102,7 @@ export const useGridVirtualScroller = () => {
       if (!entry) {
         return;
       }
-      const newSize = {
-        width: entry.contentRect.width,
-        height: entry.contentRect.height
-      };
+      const newSize = roundDimensions(entry.contentRect);
       if (newSize.width === lastSize.width && newSize.height === lastSize.height) {
         return;
       }
@@ -784,4 +778,13 @@ function bufferForDirection(isRtl, direction, rowBufferPx, columnBufferPx, verti
       // eslint unable to figure out enum exhaustiveness
       throw new Error('unreachable');
   }
+}
+
+// Round to avoid issues with subpixel rendering
+// https://github.com/mui/mui-x/issues/15721
+function roundDimensions(dimensions) {
+  return {
+    width: Math.round(dimensions.width * 10) / 10,
+    height: Math.round(dimensions.height * 10) / 10
+  };
 }

package/index.js

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

package/internals/utils/useProps.js

@@ -2,6 +2,9 @@ import * as React from 'react';
 
 /** Gathers props for the root element into a single `.forwardedProps` field */
 function groupForwardedProps(props) {
+  if (props.slotProps?.root) {
+    return props;
+  }
   const keys = Object.keys(props);
   if (!keys.some(key => key.startsWith('aria-') || key.startsWith('data-'))) {
     return props;

package/locales/koKR.js

@@ -30,15 +30,14 @@ const koKRGrid = {
   toolbarExportPrint: '프린트',
   toolbarExportExcel: 'Excel로 내보내기',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: '검색',
+  columnsManagementNoColumns: '열이 없습니다.',
+  columnsManagementShowHideAllText: '모두 보기/숨기기',
+  columnsManagementReset: '초기화',
+  columnsManagementDeleteIconLabel: '제거',
   // Filter panel text
   filterPanelAddFilter: '필터 추가',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: '모두 삭제',
   filterPanelDeleteIconLabel: '삭제',
   filterPanelLogicOperator: '논리 연산자',
   filterPanelOperator: '연산자',
@@ -49,9 +48,9 @@ const koKRGrid = {
   filterPanelInputPlaceholder: '값 입력',
   // Filter operators text
   filterOperatorContains: '포함하는',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: '포함하지 않는',
   filterOperatorEquals: '값이 같은',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: '값이 다른',
   filterOperatorStartsWith: '시작하는',
   filterOperatorEndsWith: '끝나는',
   filterOperatorIs: '~인',
@@ -63,36 +62,34 @@ const koKRGrid = {
   filterOperatorIsEmpty: '값이 없는',
   filterOperatorIsNotEmpty: '값이 있는',
   filterOperatorIsAnyOf: '값 중 하나인',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
-  // 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',
-
+  headerFilterOperatorContains: '포함하는',
+  headerFilterOperatorDoesNotContain: '포함하지 않는',
+  headerFilterOperatorEquals: '값이 같은',
+  headerFilterOperatorDoesNotEqual: '값이 다른',
+  headerFilterOperatorStartsWith: '시작하는',
+  headerFilterOperatorEndsWith: '끝나는',
+  headerFilterOperatorIs: '~인',
+  headerFilterOperatorNot: '~아닌',
+  headerFilterOperatorAfter: '더 이후',
+  headerFilterOperatorOnOrAfter: '이후',
+  headerFilterOperatorBefore: '더 이전',
+  headerFilterOperatorOnOrBefore: '이전',
+  headerFilterOperatorIsEmpty: '값이 없는',
+  headerFilterOperatorIsNotEmpty: '값이 있는',
+  headerFilterOperatorIsAnyOf: '값 중 하나인',
+  'headerFilterOperator=': '값이 같은',
+  'headerFilterOperator!=': '값이 다른',
+  'headerFilterOperator>': '더 큰',
+  'headerFilterOperator>=': '같거나 더 큰',
+  'headerFilterOperator<': '더 작은',
+  'headerFilterOperator<=': '같거나 더 작은',
   // Filter values text
   filterValueAny: '아무값',
   filterValueTrue: '참',
@@ -100,7 +97,7 @@ const koKRGrid = {
   // Column menu text
   columnMenuLabel: '메뉴',
   columnMenuShowColumns: '열 표시',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: '열 관리',
   columnMenuFilter: '필터',
   columnMenuHideColumn: '열 숨기기',
   columnMenuUnsort: '정렬 해제',

package/locales/nlNL.js

@@ -34,8 +34,7 @@ const nlNLGrid = {
   columnsManagementNoColumns: 'Geen kolommen',
   columnsManagementShowHideAllText: 'Toon/Verberg Alle',
   columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementDeleteIconLabel: 'Verwijderen',
   // Filter panel text
   filterPanelAddFilter: 'Filter toevoegen',
   filterPanelRemoveAll: 'Alles verwijderen',
@@ -49,9 +48,9 @@ const nlNLGrid = {
   filterPanelInputPlaceholder: 'Filter waarde',
   // Filter operators text
   filterOperatorContains: 'bevat',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'bevat niet',
   filterOperatorEquals: 'gelijk aan',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'niet gelijk aan',
   filterOperatorStartsWith: 'begint met',
   filterOperatorEndsWith: 'eindigt met',
   filterOperatorIs: 'is',
@@ -71,9 +70,9 @@ const nlNLGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Bevat',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Bevat niet',
   headerFilterOperatorEquals: 'Gelijk aan',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Niet gelijk aan',
   headerFilterOperatorStartsWith: 'Begint met',
   headerFilterOperatorEndsWith: 'Eindigt met',
   headerFilterOperatorIs: 'Is',

package/models/gridSlotsComponentsProps.d.ts

@@ -32,6 +32,8 @@ import type { GridLoadingOverlayProps } from '../components/GridLoadingOverlay';
 import type { GridRowCountProps } from '../components/GridRowCount';
 import type { GridColumnHeaderSortIconProps } from '../components/columnHeaders/GridColumnHeaderSortIcon';
 type DividerProps = {};
+type RootProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
+type MainProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
 export interface BaseBadgePropsOverrides {
 }
 export interface BaseCheckboxPropsOverrides {
@@ -140,6 +142,14 @@ export interface GridSlotProps {
     row: GridRowProps & RowPropsOverrides;
     skeletonCell: GridSkeletonCellProps & SkeletonCellPropsOverrides;
     toolbar: GridToolbarProps & ToolbarPropsOverrides;
+    /**
+     * Props passed to the `.main` (role="grid") element
+     */
+    main: MainProps;
+    /**
+     * Props passed to the `.root` element
+     */
+    root: RootProps;
 }
 /**
  * Overridable components props dynamically passed to the component at rendering.

package/models/props/DataGridProps.d.ts

@@ -229,6 +229,7 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
      * If `deselect`, it will deselect all the rows under it.
      * Works only if `checkboxSelection` is enabled.
      * @default "deselect"
+     * @deprecated `select` will be the default behavior from v8 onwards
      */
     indeterminateCheckboxAction: 'select' | 'deselect';
     /**

package/modern/DataGrid/DataGrid.js

@@ -3,6 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot } from "../components/index.js";
 import { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
 import { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
@@ -23,7 +24,7 @@ if (process.env.NODE_ENV !== 'production') {
   // Only validate in MIT version
   props => props.columns && props.columns.some(column => column.resizable) && [`MUI X: \`column.resizable = true\` is not a valid prop.`, 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n') || undefined];
 }
-const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref) {
+const DataGridRaw = forwardRef(function DataGrid(inProps, ref) {
   const props = useDataGridProps(inProps);
   const privateApiRef = useDataGridComponent(props.apiRef, props);
   if (process.env.NODE_ENV !== 'production') {
@@ -36,9 +37,9 @@ const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref
     children: /*#__PURE__*/_jsxs(GridRoot, _extends({
       className: props.className,
       style: props.style,
-      sx: props.sx,
-      ref: ref
-    }, props.forwardedProps, {
+      sx: props.sx
+    }, props.forwardedProps, props.slotProps?.root, {
+      ref: ref,
       children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {}), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
     }))
   });
@@ -95,6 +96,7 @@ DataGridRaw.propTypes = {
    */
   autosizeOptions: PropTypes.shape({
     columns: PropTypes.arrayOf(PropTypes.string),
+    disableColumnVirtualization: PropTypes.bool,
     expand: PropTypes.bool,
     includeHeaders: PropTypes.bool,
     includeOutliers: PropTypes.bool,
@@ -331,6 +333,7 @@ DataGridRaw.propTypes = {
    * If `deselect`, it will deselect all the rows under it.
    * Works only if `checkboxSelection` is enabled.
    * @default "deselect"
+   * @deprecated `select` will be the default behavior from v8 onwards
    */
   indeterminateCheckboxAction: PropTypes.oneOf(['deselect', 'select']),
   /**

package/modern/components/GridColumnHeaders.js

@@ -4,10 +4,11 @@ const _excluded = ["className", "visibleColumns", "sortColumnLookup", "filterCol
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { fastMemo } from '@mui/x-internals/fastMemo';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridColumnHeaders } from "../hooks/features/columnHeaders/useGridColumnHeaders.js";
 import { GridBaseColumnHeaders } from "./columnHeaders/GridBaseColumnHeaders.js";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
+const GridColumnHeaders = forwardRef(function GridColumnHeaders(props, ref) {
   const {
       visibleColumns,
       sortColumnLookup,
@@ -41,9 +42,8 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
     columnGroupsHeaderStructure,
     hasOtherElementInTabSequence
   });
-  return /*#__PURE__*/_jsxs(GridBaseColumnHeaders, _extends({
-    ref: ref
-  }, other, getInnerProps(), {
+  return /*#__PURE__*/_jsxs(GridBaseColumnHeaders, _extends({}, other, getInnerProps(), {
+    ref: ref,
     children: [getColumnGroupHeadersRows(), getColumnHeadersRow()]
   }));
 });

package/modern/components/GridFooter.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridSelector } from "../hooks/utils/useGridSelector.js";
 import { gridTopLevelRowCountSelector } from "../hooks/features/rows/gridRowsSelector.js";
 import { selectedGridRowsCountSelector } from "../hooks/features/rowSelection/gridRowSelectionSelector.js";
@@ -10,7 +11,7 @@ import { GridSelectedRowCount } from "./GridSelectedRowCount.js";
 import { GridFooterContainer } from "./containers/GridFooterContainer.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
+const GridFooter = forwardRef(function GridFooter(props, ref) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const totalTopLevelRowCount = useGridSelector(apiRef, gridTopLevelRowCountSelector);
@@ -24,9 +25,8 @@ const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref)
     visibleRowCount: visibleTopLevelRowCount
   })) : null;
   const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && /*#__PURE__*/_jsx(rootProps.slots.pagination, _extends({}, rootProps.slotProps?.pagination));
-  return /*#__PURE__*/_jsxs(GridFooterContainer, _extends({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/_jsxs(GridFooterContainer, _extends({}, props, {
+    ref: ref,
     children: [selectedRowCountElement, rowCountElement, paginationElement]
   }));
 });

package/modern/components/GridLoadingOverlay.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import LinearProgress from '@mui/material/LinearProgress';
 import CircularProgress from '@mui/material/CircularProgress';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridOverlay } from "./containers/GridOverlay.js";
 import { GridSkeletonLoadingOverlay } from "./GridSkeletonLoadingOverlay.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
@@ -28,7 +29,7 @@ const LOADING_VARIANTS = {
     }
   }
 };
-const GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOverlay(props, ref) {
+const GridLoadingOverlay = forwardRef(function GridLoadingOverlay(props, ref) {
   const {
       variant = 'circular-progress',
       noRowsVariant = 'circular-progress',
@@ -39,9 +40,9 @@ const GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOve
   const rowsCount = useGridSelector(apiRef, gridRowCountSelector);
   const activeVariant = LOADING_VARIANTS[rowsCount === 0 ? noRowsVariant : variant];
   return /*#__PURE__*/_jsx(GridOverlay, _extends({
-    ref: ref,
     style: _extends({}, activeVariant.style, style)
   }, other, {
+    ref: ref,
     children: /*#__PURE__*/_jsx(activeVariant.component, {})
   }));
 });

package/modern/components/GridNoResultsOverlay.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { GridOverlay } from "./containers/GridOverlay.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const GridNoResultsOverlay = /*#__PURE__*/React.forwardRef(function GridNoResultsOverlay(props, ref) {
+export const GridNoResultsOverlay = forwardRef(function GridNoResultsOverlay(props, ref) {
   const apiRef = useGridApiContext();
   const noResultsOverlayLabel = apiRef.current.getLocaleText('noResultsOverlayLabel');
-  return /*#__PURE__*/_jsx(GridOverlay, _extends({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/_jsx(GridOverlay, _extends({}, props, {
+    ref: ref,
     children: noResultsOverlayLabel
   }));
 });

package/modern/components/GridNoRowsOverlay.js

@@ -1,15 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { GridOverlay } from "./containers/GridOverlay.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const GridNoRowsOverlay = /*#__PURE__*/React.forwardRef(function GridNoRowsOverlay(props, ref) {
+const GridNoRowsOverlay = forwardRef(function GridNoRowsOverlay(props, ref) {
   const apiRef = useGridApiContext();
   const noRowsLabel = apiRef.current.getLocaleText('noRowsLabel');
-  return /*#__PURE__*/_jsx(GridOverlay, _extends({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/_jsx(GridOverlay, _extends({}, props, {
+    ref: ref,
     children: noRowsLabel
   }));
 });

package/modern/components/GridPagination.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import TablePagination, { tablePaginationClasses } from '@mui/material/TablePagination';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridSelector } from "../hooks/utils/useGridSelector.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
@@ -55,7 +56,7 @@ const defaultLabelDisplayedRows = ({
 
 // A mutable version of a readonly array.
 
-const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) {
+const GridPagination = forwardRef(function GridPagination(props, ref) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
@@ -119,7 +120,6 @@ const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(pro
   const locales = apiRef.current.getLocaleText('MuiTablePagination');
   const wrappedLabelDisplayedRows = wrapLabelDisplayedRows(locales.labelDisplayedRows || defaultLabelDisplayedRows, estimatedRowCount);
   return /*#__PURE__*/_jsx(GridPaginationRoot, _extends({
-    ref: ref,
     component: "div",
     count: rowCount,
     page: computedPage
@@ -133,7 +133,9 @@ const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(pro
     onRowsPerPageChange: handlePageSizeChange
   }, computedProps, locales, {
     labelDisplayedRows: wrappedLabelDisplayedRows
-  }, props));
+  }, props, {
+    ref: ref
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridPagination.propTypes = {
   // ----------------------------- Warning --------------------------------