@mui/x-data-grid 7.23.2 → 7.23.4

package/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/node/DataGrid/DataGrid.js

@@ -10,6 +10,7 @@ exports.DataGrid = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _components = require("../components");
 var _useGridAriaAttributes = require("../hooks/utils/useGridAriaAttributes");
 var _useGridRowAriaAttributes = require("../hooks/features/rows/useGridRowAriaAttributes");
@@ -30,7 +31,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 = (0, _forwardRef.forwardRef)(function DataGrid(inProps, ref) {
   const props = (0, _useDataGridProps.useDataGridProps)(inProps);
   const privateApiRef = (0, _useDataGridComponent.useDataGridComponent)(props.apiRef, props);
   if (process.env.NODE_ENV !== 'production') {
@@ -43,9 +44,9 @@ const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.GridRoot, (0, _extends2.default)({
       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__*/(0, _jsxRuntime.jsx)(_components.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridBody, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridFooterPlaceholder, {})]
     }))
   });
@@ -102,6 +103,7 @@ DataGridRaw.propTypes = {
    */
   autosizeOptions: _propTypes.default.shape({
     columns: _propTypes.default.arrayOf(_propTypes.default.string),
+    disableColumnVirtualization: _propTypes.default.bool,
     expand: _propTypes.default.bool,
     includeHeaders: _propTypes.default.bool,
     includeOutliers: _propTypes.default.bool,
@@ -338,6 +340,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.default.oneOf(['deselect', 'select']),
   /**

package/node/components/GridColumnHeaders.js

@@ -11,11 +11,12 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _fastMemo = require("@mui/x-internals/fastMemo");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridColumnHeaders = require("../hooks/features/columnHeaders/useGridColumnHeaders");
 var _GridBaseColumnHeaders = require("./columnHeaders/GridBaseColumnHeaders");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
-const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
+const GridColumnHeaders = (0, _forwardRef.forwardRef)(function GridColumnHeaders(props, ref) {
   const {
       visibleColumns,
       sortColumnLookup,
@@ -49,9 +50,8 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
     columnGroupsHeaderStructure,
     hasOtherElementInTabSequence
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridBaseColumnHeaders.GridBaseColumnHeaders, (0, _extends2.default)({
-    ref: ref
-  }, other, getInnerProps(), {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridBaseColumnHeaders.GridBaseColumnHeaders, (0, _extends2.default)({}, other, getInnerProps(), {
+    ref: ref,
     children: [getColumnGroupHeadersRows(), getColumnHeadersRow()]
   }));
 });

package/node/components/GridFooter.js

@@ -9,6 +9,7 @@ exports.GridFooter = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridSelector = require("../hooks/utils/useGridSelector");
 var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
 var _gridRowSelectionSelector = require("../hooks/features/rowSelection/gridRowSelectionSelector");
@@ -18,7 +19,7 @@ var _GridSelectedRowCount = require("./GridSelectedRowCount");
 var _GridFooterContainer = require("./containers/GridFooterContainer");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const GridFooter = exports.GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
+const GridFooter = exports.GridFooter = (0, _forwardRef.forwardRef)(function GridFooter(props, ref) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const totalTopLevelRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridTopLevelRowCountSelector);
@@ -32,9 +33,8 @@ const GridFooter = exports.GridFooter = /*#__PURE__*/React.forwardRef(function G
     visibleRowCount: visibleTopLevelRowCount
   })) : null;
   const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pagination, (0, _extends2.default)({}, rootProps.slotProps?.pagination));
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridFooterContainer.GridFooterContainer, (0, _extends2.default)({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridFooterContainer.GridFooterContainer, (0, _extends2.default)({}, props, {
+    ref: ref,
     children: [selectedRowCountElement, rowCountElement, paginationElement]
   }));
 });

package/node/components/GridLoadingOverlay.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _LinearProgress = _interopRequireDefault(require("@mui/material/LinearProgress"));
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _GridOverlay = require("./containers/GridOverlay");
 var _GridSkeletonLoadingOverlay = require("./GridSkeletonLoadingOverlay");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
@@ -36,7 +37,7 @@ const LOADING_VARIANTS = {
     }
   }
 };
-const GridLoadingOverlay = exports.GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOverlay(props, ref) {
+const GridLoadingOverlay = exports.GridLoadingOverlay = (0, _forwardRef.forwardRef)(function GridLoadingOverlay(props, ref) {
   const {
       variant = 'circular-progress',
       noRowsVariant = 'circular-progress',
@@ -47,9 +48,9 @@ const GridLoadingOverlay = exports.GridLoadingOverlay = /*#__PURE__*/React.forwa
   const rowsCount = (0, _hooks.useGridSelector)(apiRef, _hooks.gridRowCountSelector);
   const activeVariant = LOADING_VARIANTS[rowsCount === 0 ? noRowsVariant : variant];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlay.GridOverlay, (0, _extends2.default)({
-    ref: ref,
     style: (0, _extends2.default)({}, activeVariant.style, style)
   }, other, {
+    ref: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(activeVariant.component, {})
   }));
 });

package/node/components/GridNoResultsOverlay.js

@@ -8,15 +8,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridNoResultsOverlay = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _GridOverlay = require("./containers/GridOverlay");
 var _jsxRuntime = require("react/jsx-runtime");
-const GridNoResultsOverlay = exports.GridNoResultsOverlay = /*#__PURE__*/React.forwardRef(function GridNoResultsOverlay(props, ref) {
+const GridNoResultsOverlay = exports.GridNoResultsOverlay = (0, _forwardRef.forwardRef)(function GridNoResultsOverlay(props, ref) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const noResultsOverlayLabel = apiRef.current.getLocaleText('noResultsOverlayLabel');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlay.GridOverlay, (0, _extends2.default)({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlay.GridOverlay, (0, _extends2.default)({}, props, {
+    ref: ref,
     children: noResultsOverlayLabel
   }));
 });

package/node/components/GridNoRowsOverlay.js

@@ -9,15 +9,15 @@ exports.GridNoRowsOverlay = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _GridOverlay = require("./containers/GridOverlay");
 var _jsxRuntime = require("react/jsx-runtime");
-const GridNoRowsOverlay = exports.GridNoRowsOverlay = /*#__PURE__*/React.forwardRef(function GridNoRowsOverlay(props, ref) {
+const GridNoRowsOverlay = exports.GridNoRowsOverlay = (0, _forwardRef.forwardRef)(function GridNoRowsOverlay(props, ref) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const noRowsLabel = apiRef.current.getLocaleText('noRowsLabel');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlay.GridOverlay, (0, _extends2.default)({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlay.GridOverlay, (0, _extends2.default)({}, props, {
+    ref: ref,
     children: noRowsLabel
   }));
 });

package/node/components/GridPagination.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TablePagination = _interopRequireWildcard(require("@mui/material/TablePagination"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridSelector = require("../hooks/utils/useGridSelector");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
@@ -63,7 +64,7 @@ const defaultLabelDisplayedRows = ({
 
 // A mutable version of a readonly array.
 
-const GridPagination = exports.GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) {
+const GridPagination = exports.GridPagination = (0, _forwardRef.forwardRef)(function GridPagination(props, ref) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const paginationModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationModelSelector);
@@ -127,7 +128,6 @@ const GridPagination = exports.GridPagination = /*#__PURE__*/React.forwardRef(fu
   const locales = apiRef.current.getLocaleText('MuiTablePagination');
   const wrappedLabelDisplayedRows = wrapLabelDisplayedRows(locales.labelDisplayedRows || defaultLabelDisplayedRows, estimatedRowCount);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPaginationRoot, (0, _extends2.default)({
-    ref: ref,
     component: "div",
     count: rowCount,
     page: computedPage
@@ -141,7 +141,9 @@ const GridPagination = exports.GridPagination = /*#__PURE__*/React.forwardRef(fu
     onRowsPerPageChange: handlePageSizeChange
   }, computedProps, locales, {
     labelDisplayedRows: wrappedLabelDisplayedRows
-  }, props));
+  }, props, {
+    ref: ref
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridPagination.propTypes = {
   // ----------------------------- Warning --------------------------------

package/node/components/GridRow.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
 var _fastMemo = require("@mui/x-internals/fastMemo");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _gridEditRowModel = require("../models/gridEditRowModel");
 var _gridClasses = require("../constants/gridClasses");
 var _composeGridClasses = require("../utils/composeGridClasses");
@@ -32,6 +33,7 @@ var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
 var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
 var _useGridConfiguration = require("../hooks/utils/useGridConfiguration");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "dimensions", "renderContext", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 function EmptyCell({
@@ -55,7 +57,7 @@ process.env.NODE_ENV !== "production" ? EmptyCell.propTypes = {
   // ----------------------------------------------------------------------
   width: _propTypes.default.number.isRequired
 } : void 0;
-const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
+const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
   const {
       selected,
       rowId,
@@ -97,6 +99,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   const editing = apiRef.current.getRowMode(rowId) === _gridEditRowModel.GridRowModes.Edit;
   const editable = rootProps.editMode === _gridEditRowModel.GridEditModes.Row;
+  const hasColumnVirtualization = (0, _useGridSelector.useGridSelector)(apiRef, _hooks.gridVirtualizationColumnEnabledSelector);
   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;
@@ -278,7 +281,16 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   if (hasVirtualFocusCellLeft) {
     cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, _GridCell.PinnedPosition.VIRTUAL));
   }
-  for (let i = renderContext.firstColumnIndex; i < renderContext.lastColumnIndex; i += 1) {
+  let firstColumnIndex;
+  let lastColumnIndex;
+  if (!rootProps.disableVirtualization && !hasColumnVirtualization) {
+    firstColumnIndex = 0;
+    lastColumnIndex = visibleColumns.length;
+  } else {
+    firstColumnIndex = renderContext.firstColumnIndex;
+    lastColumnIndex = renderContext.lastColumnIndex;
+  }
+  for (let i = firstColumnIndex; i < lastColumnIndex; i += 1) {
     const column = visibleColumns[i];
     const indexInSection = i - pinnedColumns.left.length;
     if (!column) {
@@ -300,13 +312,13 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const expandedWidth = dimensions.viewportOuterSize.width - dimensions.columnsTotalWidth - scrollbarWidth;
   const emptyCellWidth = Math.max(0, expandedWidth);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
-    ref: handleRef,
     "data-id": rowId,
     "data-rowindex": index,
     role: "row",
     className: (0, _clsx.default)(...rowClassNames, classes.root, className),
     style: style
   }, ariaAttributes, eventHandlers, other, {
+    ref: handleRef,
     children: [leftCells, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       role: "presentation",
       className: _gridClasses.gridClasses.cellOffsetLeft,

package/node/components/GridRowCount.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _gridClasses = require("../constants/gridClasses");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
@@ -38,7 +39,7 @@ const GridRowCountRoot = (0, _system.styled)('div', {
   display: 'flex',
   margin: theme.spacing(0, 2)
 }));
-const GridRowCount = exports.GridRowCount = /*#__PURE__*/React.forwardRef(function GridRowCount(props, ref) {
+const GridRowCount = exports.GridRowCount = (0, _forwardRef.forwardRef)(function GridRowCount(props, ref) {
   const {
       className,
       rowCount,
@@ -53,10 +54,10 @@ const GridRowCount = exports.GridRowCount = /*#__PURE__*/React.forwardRef(functi
   }
   const text = visibleRowCount < rowCount ? apiRef.current.getLocaleText('footerTotalVisibleRows')(visibleRowCount, rowCount) : rowCount.toLocaleString();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridRowCountRoot, (0, _extends2.default)({
-    ref: ref,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState
   }, other, {
+    ref: ref,
     children: [apiRef.current.getLocaleText('footerTotalRows'), " ", text]
   }));
 });

package/node/components/GridSelectedRowCount.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _gridClasses = require("../constants/gridClasses");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
@@ -46,7 +47,7 @@ const GridSelectedRowCountRoot = (0, _system.styled)('div', {
     height: 'auto'
   }
 }));
-const GridSelectedRowCount = exports.GridSelectedRowCount = /*#__PURE__*/React.forwardRef(function GridSelectedRowCount(props, ref) {
+const GridSelectedRowCount = exports.GridSelectedRowCount = (0, _forwardRef.forwardRef)(function GridSelectedRowCount(props, ref) {
   const {
       className,
       selectedRowCount
@@ -57,10 +58,10 @@ const GridSelectedRowCount = exports.GridSelectedRowCount = /*#__PURE__*/React.f
   const classes = useUtilityClasses(ownerState);
   const rowSelectedText = apiRef.current.getLocaleText('footerRowSelected')(selectedRowCount);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridSelectedRowCountRoot, (0, _extends2.default)({
-    ref: ref,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState
   }, other, {
+    ref: ref,
     children: rowSelectedText
   }));
 });