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

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

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

package/modern/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/modern/material/index.js

@@ -38,7 +38,7 @@ import MUIInputAdornment, { inputAdornmentClasses } from '@mui/material/InputAdo
 import MUITooltip from '@mui/material/Tooltip';
 import MUIPagination, { tablePaginationClasses } from '@mui/material/TablePagination';
 import MUIPopper from '@mui/material/Popper';
-import MUIClickAwayListener from '@mui/material/ClickAwayListener';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
 import MUIGrow from '@mui/material/Grow';
 import MUIPaper from '@mui/material/Paper';
 import MUIInputLabel from '@mui/material/InputLabel';
@@ -50,7 +50,6 @@ import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export { useMaterialCSSVariables } from "./variables.js";
-const ClickAwayListener = forwardRef(MUIClickAwayListener);
 const InputAdornment = styled(MUIInputAdornment)({
   [`&.${inputAdornmentClasses.positionEnd} .${iconButtonClasses.sizeSmall}`]: {
     marginRight: '-7px'

package/modern/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/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/modern/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.2",
   "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -43,7 +43,7 @@
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.4.0",
-    "@mui/x-internals": "8.0.0-beta.0"
+    "@mui/x-internals": "8.0.0-beta.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",