@mui/x-data-grid 8.0.0-beta.1 → 8.0.0-beta.2

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

@@ -13,7 +13,7 @@ import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { useGridSelector } from "../../utils/useGridSelector.js";
 import { useRunOnce } from "../../utils/useRunOnce.js";
 import { gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnPositionsSelector, gridHasColSpanSelector } from "../columns/gridColumnsSelector.js";
-import { gridPinnedRowsSelector } from "../rows/gridRowsSelector.js";
+import { gridPinnedRowsSelector, gridRowTreeSelector } from "../rows/gridRowsSelector.js";
 import { useGridVisibleRows, getVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { useGridApiOptionHandler } from "../../utils/index.js";
 import * as platform from "../../../utils/platform.js";
@@ -259,6 +259,7 @@ export const useGridVirtualScroller = () => {
     if (!params.rows && !currentPage.range) {
       return [];
     }
+    const rowTree = gridRowTreeSelector(apiRef);
     let baseRenderContext = renderContext;
     if (params.renderContext) {
       baseRenderContext = params.renderContext;
@@ -304,6 +305,16 @@ export const useGridVirtualScroller = () => {
         id,
         model
       } = rowModels[rowIndexInPage];
+
+      // In certain cases, the state might already be updated and `currentPage.rows` (which sets `rowModels`)
+      // contains stale data.
+      // In that case, skip any further row processing.
+      // See:
+      // - https://github.com/mui/mui-x/issues/16638
+      // - https://github.com/mui/mui-x/issues/17022
+      if (!rowTree[id]) {
+        return;
+      }
       const rowIndex = (currentPage?.range?.firstRowIndex || 0) + rowIndexOffset + rowIndexInPage;
 
       // NOTE: This is an expensive feature, the colSpan code could be optimized.

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.0.0-beta.1
+ * @mui/x-data-grid v8.0.0-beta.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/locales/deDE.js

@@ -108,7 +108,7 @@ const deDEGrid = {
   filterValueFalse: 'Nein',
   // Column menu text
   columnMenuLabel: 'Menü',
-  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
+  columnMenuAriaLabel: columnName => `${columnName} Spaltenmenü`,
   columnMenuShowColumns: 'Zeige alle Spalten',
   columnMenuManageColumns: 'Spalten verwalten',
   columnMenuFilter: 'Filter',
@@ -155,18 +155,18 @@ const deDEGrid = {
   collapseDetailPanel: 'Zuklappen',
   // Pagination
   paginationRowsPerPage: 'Zeilen pro Seite:',
-  // paginationDisplayedRows: ({
-  //   from,
-  //   to,
-  //   count,
-  //   estimated
-  // }) => {
-  //   if (!estimated) {
-  //     return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
-  //   }
-  //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
-  // },
+  paginationDisplayedRows: ({
+    from,
+    to,
+    count,
+    estimated
+  }) => {
+    if (!estimated) {
+      return `${from}–${to} von ${count !== -1 ? count : `mehr als ${to}`}`;
+    }
+    const estimatedLabel = estimated && estimated > to ? `ungefähr ${estimated}` : `mehr als ${to}`;
+    return `${from}–${to} von ${count !== -1 ? count : estimatedLabel}`;
+  },
   paginationItemAriaLabel: type => {
     if (type === 'first') {
       return 'Zur ersten Seite';

package/esm/models/props/DataGridProps.d.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { RefObject } from '@mui/x-internals/types';
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
-import { CommonProps } from '@mui/material/OverridableComponent';
 import { GridDensity } from "../gridDensity.js";
 import { GridEditMode } from "../gridEditRowModel.js";
 import { GridFeatureMode } from "../gridFeatureMode.js";
@@ -29,6 +28,10 @@ import type { GridAutosizeOptions } from '../../hooks/features/columnResize';
 import type { GridDataSource, GridDataSourceCache } from '../gridDataSource';
 import type { GridRowSelectionPropagation } from '../gridRowSelectionModel';
 import type { GridGetRowsError, GridUpdateRowError } from '../../hooks/features/dataSource/gridDataSourceError';
+type CommonProps = {
+  className?: string;
+  style?: React.CSSProperties;
+};
 export interface GridExperimentalFeatures {
   /**
    * Emits a warning if the cell receives focus without also syncing the focus state.
@@ -853,4 +856,5 @@ export interface DataGridPremiumSharedPropsWithDefaultValue {
 /**
  * The props of the Data Grid component after the pre-processing phase.
  */
-export interface DataGridProcessedProps<R extends GridValidRowModel = any> extends DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithoutDefaultValue<R>, DataGridProSharedPropsWithoutDefaultValue, Partial<DataGridProSharedPropsWithDefaultValue>, Partial<DataGridPremiumSharedPropsWithDefaultValue> {}
+export interface DataGridProcessedProps<R extends GridValidRowModel = any> extends DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithoutDefaultValue<R>, DataGridProSharedPropsWithoutDefaultValue, Partial<DataGridProSharedPropsWithDefaultValue>, Partial<DataGridPremiumSharedPropsWithDefaultValue> {}
+export {};

package/esm/utils/utils.d.ts

@@ -12,33 +12,6 @@ export declare const clamp: (value: number, min: number, max: number) => number;
  * Create an array containing the range [from, to[
  */
 export declare function range(from: number, to: number): number[];
-/**
- * Based on `fast-deep-equal`
- *
- * MIT License
- *
- * Copyright (c) 2017 Evgeny Poberezkin
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- * We only type the public interface to avoid dozens of `as` in the function.
- */
-export declare function isDeepEqual<T>(actual: any, expected: T): actual is T;
 /**
  * Create a random number generator from a seed. The seed
  * ensures that the random number generator produces the

package/esm/utils/utils.js

@@ -39,128 +39,6 @@ export function range(from, to) {
   }).map((_, i) => from + i);
 }
 
-/**
- * Based on `fast-deep-equal`
- *
- * MIT License
- *
- * Copyright (c) 2017 Evgeny Poberezkin
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- * We only type the public interface to avoid dozens of `as` in the function.
- */
-
-export function isDeepEqual(a, b) {
-  if (a === b) {
-    return true;
-  }
-  if (a && b && typeof a === 'object' && typeof b === 'object') {
-    if (a.constructor !== b.constructor) {
-      return false;
-    }
-    if (Array.isArray(a)) {
-      const length = a.length;
-      if (length !== b.length) {
-        return false;
-      }
-      for (let i = 0; i < length; i += 1) {
-        if (!isDeepEqual(a[i], b[i])) {
-          return false;
-        }
-      }
-      return true;
-    }
-    if (a instanceof Map && b instanceof Map) {
-      if (a.size !== b.size) {
-        return false;
-      }
-      const entriesA = Array.from(a.entries());
-      for (let i = 0; i < entriesA.length; i += 1) {
-        if (!b.has(entriesA[i][0])) {
-          return false;
-        }
-      }
-      for (let i = 0; i < entriesA.length; i += 1) {
-        const entryA = entriesA[i];
-        if (!isDeepEqual(entryA[1], b.get(entryA[0]))) {
-          return false;
-        }
-      }
-      return true;
-    }
-    if (a instanceof Set && b instanceof Set) {
-      if (a.size !== b.size) {
-        return false;
-      }
-      const entries = Array.from(a.entries());
-      for (let i = 0; i < entries.length; i += 1) {
-        if (!b.has(entries[i][0])) {
-          return false;
-        }
-      }
-      return true;
-    }
-    if (ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
-      const length = a.length;
-      if (length !== b.length) {
-        return false;
-      }
-      for (let i = 0; i < length; i += 1) {
-        if (a[i] !== b[i]) {
-          return false;
-        }
-      }
-      return true;
-    }
-    if (a.constructor === RegExp) {
-      return a.source === b.source && a.flags === b.flags;
-    }
-    if (a.valueOf !== Object.prototype.valueOf) {
-      return a.valueOf() === b.valueOf();
-    }
-    if (a.toString !== Object.prototype.toString) {
-      return a.toString() === b.toString();
-    }
-    const keys = Object.keys(a);
-    const length = keys.length;
-    if (length !== Object.keys(b).length) {
-      return false;
-    }
-    for (let i = 0; i < length; i += 1) {
-      if (!Object.prototype.hasOwnProperty.call(b, keys[i])) {
-        return false;
-      }
-    }
-    for (let i = 0; i < length; i += 1) {
-      const key = keys[i];
-      if (!isDeepEqual(a[key], b[key])) {
-        return false;
-      }
-    }
-    return true;
-  }
-
-  // true if both NaN, false otherwise
-  // eslint-disable-next-line no-self-compare
-  return a !== a && b !== b;
-}
-
 // Pseudo random number. See https://stackoverflow.com/a/47593316
 function mulberry32(a) {
   return () => {

package/hooks/features/columnGrouping/gridColumnGroupsUtils.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.unwrapGroupingColumnModel = exports.getColumnGroupsHeaderStructure = void 0;
+var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _gridColumnGrouping = require("../../../models/gridColumnGrouping");
-var _utils = require("../../../utils/utils");
 // This is the recurrence function that help writing `unwrapGroupingColumnModel()`
 const recurrentUnwrapGroupingColumnModel = (columnGroupNode, parents, unwrappedGroupingModelToComplete) => {
   if ((0, _gridColumnGrouping.isLeaf)(columnGroupNode)) {
@@ -45,7 +45,7 @@ const getColumnGroupsHeaderStructure = (orderedColumns, unwrappedGroupingModel,
   const getParents = field => unwrappedGroupingModel[field] ?? [];
   const groupingHeaderStructure = [];
   const maxDepth = Math.max(...orderedColumns.map(field => getParents(field).length));
-  const haveSameParents = (field1, field2, depth) => (0, _utils.isDeepEqual)(getParents(field1).slice(0, depth + 1), getParents(field2).slice(0, depth + 1));
+  const haveSameParents = (field1, field2, depth) => (0, _isDeepEqual.isDeepEqual)(getParents(field1).slice(0, depth + 1), getParents(field2).slice(0, depth + 1));
   const haveDifferentContainers = (field1, field2) => {
     if (pinnedFields?.left && pinnedFields.left.includes(field1) && !pinnedFields.left.includes(field2)) {
       return true;

package/hooks/features/columns/useGridColumns.js

@@ -55,7 +55,6 @@ function useGridColumns(apiRef, props) {
     logger.debug('Updating columns state.');
     apiRef.current.setState(mergeColumnsState(columnsState));
     apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
-    apiRef.current.updateRenderContext?.();
   }, [logger, apiRef]);
 
   /**

package/hooks/features/dimensions/useGridDimensions.js

@@ -13,6 +13,7 @@ var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallb
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
 var _throttle = require("@mui/x-internals/throttle");
+var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _createSelector = require("../../../utils/createSelector");
@@ -29,7 +30,6 @@ var _gridColumnsUtils = require("../columns/gridColumnsUtils");
 var _dataGridPropsDefaultValues = require("../../../constants/dataGridPropsDefaultValues");
 var _roundToDecimalPlaces = require("../../../utils/roundToDecimalPlaces");
 var _isJSDOM = require("../../../utils/isJSDOM");
-var _utils2 = require("../../../utils/utils");
 const EMPTY_SIZE = {
   width: 0,
   height: 0
@@ -201,7 +201,7 @@ function useGridDimensions(apiRef, props) {
       bottomContainerHeight
     };
     const prevDimensions = apiRef.current.state.dimensions;
-    if ((0, _utils2.isDeepEqual)(prevDimensions, newDimensions)) {
+    if ((0, _isDeepEqual.isDeepEqual)(prevDimensions, newDimensions)) {
       return;
     }
     setDimensions(newDimensions);

package/hooks/features/filter/useGridFilter.js

@@ -10,6 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _reselect = require("reselect");
 var _utils = require("@mui/utils");
+var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _useLazyRef = require("../../utils/useLazyRef");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
@@ -23,7 +24,6 @@ var _rows = require("../rows");
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _strategyProcessing = require("../../core/strategyProcessing");
 var _gridFilterUtils = require("./gridFilterUtils");
-var _utils2 = require("../../../utils/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const filterStateInitializer = (state, props, apiRef) => {
   const filterModel = props.filterModel ?? props.initialState?.filter?.filterModel ?? (0, _gridFilterState.getDefaultGridFilterModel)();
@@ -187,7 +187,7 @@ const useGridFilter = (apiRef, props) => {
   }, [apiRef]);
   const setQuickFilterValues = React.useCallback(values => {
     const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
-    if ((0, _utils2.isDeepEqual)(filterModel.quickFilterValues, values)) {
+    if ((0, _isDeepEqual.isDeepEqual)(filterModel.quickFilterValues, values)) {
       return;
     }
     apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
@@ -246,7 +246,7 @@ const useGridFilter = (apiRef, props) => {
     // Always export if the model has been initialized
     props.initialState?.filter?.filterModel != null ||
     // Export if the model is not equal to the default value
-    !(0, _utils2.isDeepEqual)(filterModelToExport, (0, _gridFilterState.getDefaultGridFilterModel)());
+    !(0, _isDeepEqual.isDeepEqual)(filterModelToExport, (0, _gridFilterState.getDefaultGridFilterModel)());
     if (!shouldExportFilterModel) {
       return prevState;
     }

package/hooks/features/pagination/useGridPaginationModel.js

@@ -8,10 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridPaginationModel = exports.getDerivedPaginationModel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _gridFilterSelector = require("../filter/gridFilterSelector");
 var _density = require("../density");
 var _utils = require("../../utils");
-var _utils2 = require("../../../utils/utils");
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _gridPaginationSelector = require("./gridPaginationSelector");
 var _gridPaginationUtils = require("./gridPaginationUtils");
@@ -193,7 +193,7 @@ const useGridPaginationModel = (apiRef, props) => {
       // replace items with the active items
       items: (0, _gridFilterSelector.gridFilterActiveItemsSelector)(apiRef)
     });
-    if ((0, _utils2.isDeepEqual)(currentActiveFilters, previousFilterModel.current)) {
+    if ((0, _isDeepEqual.isDeepEqual)(currentActiveFilters, previousFilterModel.current)) {
       return;
     }
     previousFilterModel.current = currentActiveFilters;

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -270,6 +270,7 @@ const useGridVirtualScroller = () => {
     if (!params.rows && !currentPage.range) {
       return [];
     }
+    const rowTree = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef);
     let baseRenderContext = renderContext;
     if (params.renderContext) {
       baseRenderContext = params.renderContext;
@@ -315,6 +316,16 @@ const useGridVirtualScroller = () => {
         id,
         model
       } = rowModels[rowIndexInPage];
+
+      // In certain cases, the state might already be updated and `currentPage.rows` (which sets `rowModels`)
+      // contains stale data.
+      // In that case, skip any further row processing.
+      // See:
+      // - https://github.com/mui/mui-x/issues/16638
+      // - https://github.com/mui/mui-x/issues/17022
+      if (!rowTree[id]) {
+        return;
+      }
       const rowIndex = (currentPage?.range?.firstRowIndex || 0) + rowIndexOffset + rowIndexInPage;
 
       // NOTE: This is an expensive feature, the colSpan code could be optimized.

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.0.0-beta.1
+ * @mui/x-data-grid v8.0.0-beta.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/locales/deDE.js

@@ -114,7 +114,7 @@ const deDEGrid = {
   filterValueFalse: 'Nein',
   // Column menu text
   columnMenuLabel: 'Menü',
-  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
+  columnMenuAriaLabel: columnName => `${columnName} Spaltenmenü`,
   columnMenuShowColumns: 'Zeige alle Spalten',
   columnMenuManageColumns: 'Spalten verwalten',
   columnMenuFilter: 'Filter',
@@ -161,18 +161,18 @@ const deDEGrid = {
   collapseDetailPanel: 'Zuklappen',
   // Pagination
   paginationRowsPerPage: 'Zeilen pro Seite:',
-  // paginationDisplayedRows: ({
-  //   from,
-  //   to,
-  //   count,
-  //   estimated
-  // }) => {
-  //   if (!estimated) {
-  //     return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
-  //   }
-  //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
-  // },
+  paginationDisplayedRows: ({
+    from,
+    to,
+    count,
+    estimated
+  }) => {
+    if (!estimated) {
+      return `${from}–${to} von ${count !== -1 ? count : `mehr als ${to}`}`;
+    }
+    const estimatedLabel = estimated && estimated > to ? `ungefähr ${estimated}` : `mehr als ${to}`;
+    return `${from}–${to} von ${count !== -1 ? count : estimatedLabel}`;
+  },
   paginationItemAriaLabel: type => {
     if (type === 'first') {
       return 'Zur ersten Seite';

package/models/props/DataGridProps.d.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { RefObject } from '@mui/x-internals/types';
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
-import { CommonProps } from '@mui/material/OverridableComponent';
 import { GridDensity } from "../gridDensity.js";
 import { GridEditMode } from "../gridEditRowModel.js";
 import { GridFeatureMode } from "../gridFeatureMode.js";
@@ -29,6 +28,10 @@ import type { GridAutosizeOptions } from '../../hooks/features/columnResize';
 import type { GridDataSource, GridDataSourceCache } from '../gridDataSource';
 import type { GridRowSelectionPropagation } from '../gridRowSelectionModel';
 import type { GridGetRowsError, GridUpdateRowError } from '../../hooks/features/dataSource/gridDataSourceError';
+type CommonProps = {
+  className?: string;
+  style?: React.CSSProperties;
+};
 export interface GridExperimentalFeatures {
   /**
    * Emits a warning if the cell receives focus without also syncing the focus state.
@@ -853,4 +856,5 @@ export interface DataGridPremiumSharedPropsWithDefaultValue {
 /**
  * The props of the Data Grid component after the pre-processing phase.
  */
-export interface DataGridProcessedProps<R extends GridValidRowModel = any> extends DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithoutDefaultValue<R>, DataGridProSharedPropsWithoutDefaultValue, Partial<DataGridProSharedPropsWithDefaultValue>, Partial<DataGridPremiumSharedPropsWithDefaultValue> {}
+export interface DataGridProcessedProps<R extends GridValidRowModel = any> extends DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithoutDefaultValue<R>, DataGridProSharedPropsWithoutDefaultValue, Partial<DataGridProSharedPropsWithDefaultValue>, Partial<DataGridPremiumSharedPropsWithDefaultValue> {}
+export {};

package/modern/DataGrid/DataGrid.js

@@ -110,6 +110,7 @@ DataGridRaw.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  className: PropTypes.string,
   /**
    * The character used to separate cell values when copying to the clipboard.
    * @default '\t'
@@ -769,6 +770,7 @@ DataGridRaw.propTypes = {
     field: PropTypes.string.isRequired,
     sort: PropTypes.oneOf(['asc', 'desc'])
   })),
+  style: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/components/GridRow.js

@@ -23,7 +23,7 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF } from "../colDef/gridCheckboxSelection
 import { GRID_ACTIONS_COLUMN_TYPE } from "../colDef/gridActionsColDef.js";
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD, PinnedColumnPosition } from "../internals/constants.js";
 import { gridSortModelSelector } from "../hooks/features/sorting/gridSortingSelector.js";
-import { gridRowMaximumTreeDepthSelector } from "../hooks/features/rows/gridRowsSelector.js";
+import { gridRowMaximumTreeDepthSelector, gridRowNodeSelector } from "../hooks/features/rows/gridRowsSelector.js";
 import { gridEditRowsStateSelector, gridRowIsEditingSelector } from "../hooks/features/editing/gridEditingSelectors.js";
 import { GridScrollbarFillerCell as ScrollbarFiller } from "./GridScrollbarFillerCell.js";
 import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
@@ -79,7 +79,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
   const rowReordering = rootProps.rowReordering;
   const isRowReorderingEnabled = useGridSelector(apiRef, isRowReorderingEnabledSelector, rowReordering);
   const handleRef = useForkRef(ref, refProp);
-  const rowNode = apiRef.current.getRowNode(rowId);
+  const rowNode = gridRowNodeSelector(apiRef, rowId);
   const editing = useGridSelector(apiRef, gridRowIsEditingSelector, {
     rowId,
     editMode: rootProps.editMode
@@ -192,7 +192,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     return rowStyle;
   }, [isNotVisible, rowHeight, styleProp, heightEntry, rootProps.rowSpacingType]);
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
-  const ariaAttributes = rowNode ? getRowAriaAttributes(rowNode, index) : undefined;
+  const ariaAttributes = getRowAriaAttributes(rowNode, index);
   if (typeof rootProps.getRowClassName === 'function') {
     const indexRelativeToCurrentPage = index - (currentPage.range?.firstRowIndex || 0);
     const rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
@@ -202,11 +202,6 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
-
-  /* Start of rendering */
-  if (!rowNode) {
-    return null;
-  }
   const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = PinnedColumnPosition.NONE) => {
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
     if (cellColSpanInfo?.spannedByColSpan) {
@@ -215,7 +210,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     const width = cellColSpanInfo?.cellProps.width ?? column.computedWidth;
     const colSpan = cellColSpanInfo?.cellProps.colSpan ?? 1;
     const pinnedOffset = getPinnedCellOffset(pinnedPosition, column.computedWidth, indexRelativeToAllColumns, columnPositions, columnsTotalWidth, scrollbarWidth);
-    if (rowNode?.type === 'skeletonRow') {
+    if (rowNode.type === 'skeletonRow') {
       return /*#__PURE__*/_jsx(slots.skeletonCell, {
         type: column.type,
         width: width,

package/modern/components/GridShadowScrollArea.js

@@ -17,48 +17,56 @@ const detectScroll = keyframes({
     '--scrollable': '" "'
   }
 });
+
+// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
+// in string templates. Do not convert these styles in JS object as it will break.
 const ShadowScrollArea = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ShadowScrollArea'
-})({
-  flex: 1,
-  display: 'flex',
-  flexDirection: 'column',
-  animation: detectScroll,
-  animationTimeline: '--scroll-timeline',
-  animationFillMode: 'none',
-  boxSizing: 'border-box',
-  overflow: 'auto',
-  scrollTimeline: '--scroll-timeline block',
-  '&::before, &::after': {
-    content: '""',
-    flexShrink: 0,
-    display: 'block',
-    position: 'sticky',
-    left: 0,
-    width: '100%',
-    height: '4px',
-    animation: `${reveal} linear both`,
-    animationTimeline: '--scroll-timeline',
+})`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  animation: ${detectScroll};
+  animation-timeline: --scroll-timeline;
+  animation-fill-mode: none;
+  box-sizing: border-box;
+  overflow: auto;
+  scroll-timeline: --scroll-timeline block;
+
+  &::before,
+  &::after {
+    content: '';
+    flex-shrink: 0;
+    display: block;
+    position: sticky;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    animation: ${reveal} linear both;
+    animation-timeline: --scroll-timeline;
+
     // Custom property toggle trick:
     // - Detects if the element is scrollable
     // - https://css-tricks.com/the-css-custom-property-toggle-trick/
-    '--visibility-scrollable': 'var(--scrollable) visible',
-    '--visibility-not-scrollable': 'hidden',
-    visibility: 'var(--visibility-scrollable, var(--visibility-not-scrollable))'
-  },
-  '&::before': {
-    top: 0,
-    background: 'linear-gradient(to bottom, rgba(0,0,0,0.05) 0, transparent 100%)',
-    animationRange: '0 4px'
-  },
-  '&::after': {
-    bottom: 0,
-    background: 'linear-gradient(to top, rgba(0,0,0,0.05) 0, transparent 100%)',
-    animationDirection: 'reverse',
-    animationRange: 'calc(100% - 4px) 100%'
+    --visibility-scrollable: var(--scrollable) visible;
+    --visibility-not-scrollable: hidden;
+    visibility: var(--visibility-scrollable, var(--visibility-not-scrollable));
   }
-});
+
+  &::before {
+    top: 0;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0, transparent 100%);
+    animation-range: 0 4px;
+  }
+
+  &::after {
+    bottom: 0;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.05) 0, transparent 100%);
+    animation-direction: reverse;
+    animation-range: calc(100% - 4px) 100%;
+  }
+`;
 
 /**
  * Adds scroll shadows above and below content in a scrollable container.

package/modern/components/cell/GridBooleanCell.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { SvgIconProps } from '@mui/material/SvgIcon';
 import type { GridColDef } from '../../models/colDef/gridColDef';
 import type { GridRenderCellParams } from '../../models/params/gridCellParams';
-interface GridBooleanCellProps extends GridRenderCellParams, Omit<SvgIconProps, 'tabIndex' | 'id'> {
+interface GridBooleanCellProps extends GridRenderCellParams {
   hideDescendantCount?: boolean;
 }
 declare function GridBooleanCellRaw(props: GridBooleanCellProps): React.JSX.Element | null;