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

package/esm/components/toolbarV8/Toolbar.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["render", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
 import { forwardRef } from '@mui/x-internals/forwardRef';
@@ -31,6 +31,8 @@ const ToolbarRoot = styled('div', {
   alignItems: 'center',
   gap: vars.spacing(0.25),
   padding: vars.spacing(0.75),
+  minHeight: 52,
+  boxSizing: 'border-box',
   borderBottom: `1px solid ${vars.colors.border.base}`
 });
 
@@ -56,44 +58,95 @@ const Toolbar = forwardRef(function Toolbar(props, ref) {
   const classes = useUtilityClasses(rootProps);
   const [focusableItemId, setFocusableItemId] = React.useState(null);
   const [items, setItems] = React.useState([]);
-  const registerItem = React.useCallback(item => {
-    setItems(prevItems => [...prevItems, item]);
+  const registerItem = React.useCallback((id, itemRef) => {
+    setItems(prevItems => [...prevItems, {
+      id,
+      ref: itemRef
+    }]);
   }, []);
-  const unregisterItem = React.useCallback(item => {
-    setItems(prevItems => prevItems.filter(i => i !== item));
-    if (focusableItemId === item) {
+  const unregisterItem = React.useCallback(id => {
+    setItems(prevItems => prevItems.filter(i => i.id !== id));
+    if (focusableItemId === id) {
       setFocusableItemId(null);
     }
   }, [focusableItemId]);
+  const findEnabledItem = React.useCallback((startIndex, step, wrap = true) => {
+    let index = startIndex;
+    const itemCount = items.length;
+
+    // Look for enabled items in the specified direction
+    for (let i = 0; i < itemCount; i += 1) {
+      index += step;
+
+      // Handle wrapping around the ends
+      if (index >= itemCount) {
+        if (!wrap) {
+          return -1;
+        }
+        index = 0;
+      } else if (index < 0) {
+        if (!wrap) {
+          return -1;
+        }
+        index = itemCount - 1;
+      }
+
+      // Return if we found an enabled item
+      if (!items[index].ref.current?.disabled && items[index].ref.current?.ariaDisabled !== 'true') {
+        return index;
+      }
+    }
+
+    // If we've checked all items and found none enabled
+    return -1;
+  }, [items]);
   const onItemKeyDown = React.useCallback(event => {
     if (!focusableItemId) {
       return;
     }
+    const currentIndex = items.findIndex(item => item.id === focusableItemId);
+    let newIndex = -1;
     if (event.key === 'ArrowRight') {
       event.preventDefault();
-      const nextIndex = items.indexOf(focusableItemId) + 1;
-      setFocusableItemId(items[nextIndex < items.length ? nextIndex : 0]);
-    }
-    if (event.key === 'ArrowLeft') {
+      newIndex = findEnabledItem(currentIndex, 1);
+    } else if (event.key === 'ArrowLeft') {
       event.preventDefault();
-      const prevIndex = items.indexOf(focusableItemId) - 1;
-      setFocusableItemId(items[prevIndex < 0 ? items.length - 1 : prevIndex]);
-    }
-    if (event.key === 'Home') {
+      newIndex = findEnabledItem(currentIndex, -1);
+    } else if (event.key === 'Home') {
       event.preventDefault();
-      setFocusableItemId(items[0]);
-    }
-    if (event.key === 'End') {
+      newIndex = findEnabledItem(-1, 1, false);
+    } else if (event.key === 'End') {
       event.preventDefault();
-      setFocusableItemId(items[items.length - 1]);
+      newIndex = findEnabledItem(items.length, -1, false);
+    }
+    if (newIndex >= 0 && newIndex < items.length) {
+      const item = items[newIndex];
+      setFocusableItemId(item.id);
+      item.ref.current?.focus();
+    }
+  }, [items, focusableItemId, findEnabledItem]);
+  const onItemFocus = React.useCallback(id => {
+    if (focusableItemId !== id) {
+      setFocusableItemId(id);
+    }
+  }, [focusableItemId]);
+  const onItemDisabled = React.useCallback(id => {
+    const currentIndex = items.findIndex(item => item.id === id);
+    const newIndex = findEnabledItem(currentIndex, 1);
+    if (newIndex >= 0 && newIndex < items.length) {
+      const item = items[newIndex];
+      setFocusableItemId(item.id);
+      item.ref.current?.focus();
     }
-  }, [items, focusableItemId]);
+  }, [items, findEnabledItem]);
   const contextValue = React.useMemo(() => ({
     focusableItemId,
     registerItem,
     unregisterItem,
-    onItemKeyDown
-  }), [registerItem, unregisterItem, focusableItemId, onItemKeyDown]);
+    onItemKeyDown,
+    onItemFocus,
+    onItemDisabled
+  }), [focusableItemId, registerItem, unregisterItem, onItemKeyDown, onItemFocus, onItemDisabled]);
   const element = useGridComponentRenderer(ToolbarRoot, render, _extends({
     role: 'toolbar',
     'aria-orientation': 'horizontal',
@@ -104,7 +157,7 @@ const Toolbar = forwardRef(function Toolbar(props, ref) {
   }));
   React.useEffect(() => {
     if (items.length > 0) {
-      setFocusableItemId(items[0]);
+      setFocusableItemId(items[0].id);
     }
   }, [items]);
   return /*#__PURE__*/_jsx(ToolbarContext.Provider, {

package/esm/components/toolbarV8/ToolbarButton.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["render"];
+const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
@@ -24,7 +24,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 const ToolbarButton = forwardRef(function ToolbarButton(props, ref) {
   const {
-      render
+      render,
+      onKeyDown,
+      onFocus,
+      disabled,
+      'aria-disabled': ariaDisabled
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
@@ -35,28 +39,44 @@ const ToolbarButton = forwardRef(function ToolbarButton(props, ref) {
     focusableItemId,
     registerItem,
     unregisterItem,
-    onItemKeyDown
+    onItemKeyDown,
+    onItemFocus,
+    onItemDisabled
   } = useToolbarContext();
+  const handleKeyDown = event => {
+    onItemKeyDown(event);
+    onKeyDown?.(event);
+  };
+  const handleFocus = event => {
+    onItemFocus(id);
+    onFocus?.(event);
+  };
   React.useEffect(() => {
-    registerItem(id);
+    registerItem(id, buttonRef);
     return () => unregisterItem(id);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const isInitialFocus = React.useRef(true);
+  const previousDisabled = React.useRef(disabled);
   React.useEffect(() => {
-    // Do not focus the item on initial render
-    if (focusableItemId && isInitialFocus.current) {
-      isInitialFocus.current = false;
-      return;
+    if (previousDisabled.current !== disabled && disabled === true) {
+      onItemDisabled(id, disabled);
     }
-    if (focusableItemId === id) {
-      buttonRef.current?.focus();
+    previousDisabled.current = disabled;
+  }, [disabled, id, onItemDisabled]);
+  const previousAriaDisabled = React.useRef(ariaDisabled);
+  React.useEffect(() => {
+    if (previousAriaDisabled.current !== ariaDisabled && ariaDisabled === true) {
+      onItemDisabled(id, true);
     }
-  }, [focusableItemId, id]);
+    previousAriaDisabled.current = ariaDisabled;
+  }, [ariaDisabled, id, onItemDisabled]);
   const element = useGridComponentRenderer(rootProps.slots.baseIconButton, render, _extends({}, rootProps.slotProps?.baseIconButton, {
-    tabIndex: focusableItemId === id ? 0 : -1,
-    onKeyDown: onItemKeyDown
+    tabIndex: focusableItemId === id ? 0 : -1
   }, other, {
+    disabled,
+    'aria-disabled': ariaDisabled,
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus,
     ref: handleRef
   }));
   return /*#__PURE__*/_jsx(React.Fragment, {

package/esm/components/toolbarV8/ToolbarContext.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
 export interface ToolbarContextValue {
   focusableItemId: string | null;
-  registerItem: (itemId: string) => void;
-  unregisterItem: (itemId: string) => void;
+  registerItem: (id: string, ref: React.RefObject<HTMLButtonElement | null>) => void;
+  unregisterItem: (id: string) => void;
   onItemKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+  onItemFocus: (id: string) => void;
+  onItemDisabled: (id: string, disabled: boolean) => void;
 }
 export declare const ToolbarContext: React.Context<ToolbarContextValue | undefined>;
 export declare function useToolbarContext(): ToolbarContextValue;

package/esm/constants/gridClasses.d.ts

@@ -631,6 +631,18 @@ export interface GridClasses {
    * Styles applied to the toolbar prompt control send button element.
    */
   toolbarPromptControlSendButton: string;
+  /**
+   * Styles applied to the toolbar quick filter root element.
+   */
+  toolbarQuickFilter: string;
+  /**
+   * Styles applied to the toolbar quick filter trigger element.
+   */
+  toolbarQuickFilterTrigger: string;
+  /**
+   * Styles applied to the toolbar quick filter control element.
+   */
+  toolbarQuickFilterControl: string;
   /**
    * Styles applied the grid if `showColumnVerticalBorder={true}`.
    */

package/esm/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'container--top', 'container--bottom', 'detailPanel', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'shadowScrollArea', 'toolbarContainer', 'toolbarFilterList', 'toolbarPromptControl', 'toolbarPromptControl--recording', 'toolbarPromptControlRecordingIndicator', 'toolbarPromptControlRecordButton', 'toolbarPromptControlSendButton', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'container--top', 'container--bottom', 'detailPanel', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'shadowScrollArea', 'toolbarContainer', 'toolbarFilterList', 'toolbarPromptControl', 'toolbarPromptControl--recording', 'toolbarPromptControlRecordingIndicator', 'toolbarPromptControlRecordButton', 'toolbarPromptControlSendButton', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom']);

package/esm/hooks/features/columnGrouping/gridColumnGroupsUtils.js

@@ -1,5 +1,5 @@
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { isLeaf } from "../../../models/gridColumnGrouping.js";
-import { isDeepEqual } from "../../../utils/utils.js";
 // This is the recurrence function that help writing `unwrapGroupingColumnModel()`
 const recurrentUnwrapGroupingColumnModel = (columnGroupNode, parents, unwrappedGroupingModelToComplete) => {
   if (isLeaf(columnGroupNode)) {

package/esm/hooks/features/columns/useGridColumns.js

@@ -45,7 +45,6 @@ export 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/esm/hooks/features/dimensions/useGridDimensions.js

@@ -4,6 +4,7 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ownerDocument from '@mui/utils/ownerDocument';
 import { throttle } from '@mui/x-internals/throttle';
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { useGridApiOptionHandler } from "../../utils/useGridApiEventHandler.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { createSelector } from "../../../utils/createSelector.js";
@@ -20,7 +21,6 @@ import { getTotalHeaderHeight } from "../columns/gridColumnsUtils.js";
 import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../../../constants/dataGridPropsDefaultValues.js";
 import { roundToDecimalPlaces } from "../../../utils/roundToDecimalPlaces.js";
 import { isJSDOM } from "../../../utils/isJSDOM.js";
-import { isDeepEqual } from "../../../utils/utils.js";
 const EMPTY_SIZE = {
   width: 0,
   height: 0

package/esm/hooks/features/editing/useGridRowEditing.js

@@ -405,7 +405,7 @@ export const useGridRowEditing = (apiRef, props) => {
       });
       return;
     }
-    const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromRowEditing(row.id);
+    const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromRowEditing(id);
     if (processRowUpdate) {
       const handleError = errorThrown => {
         // The row might have been deleted

package/esm/hooks/features/filter/useGridFilter.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { lruMemoize } from 'reselect';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { useLazyRef } from "../../utils/useLazyRef.js";
 import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
@@ -15,7 +16,6 @@ import { gridRowsLookupSelector } from "../rows/index.js";
 import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
 import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from "../../core/strategyProcessing/index.js";
 import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel, cleanFilterItem, passFilterLogic, shouldQuickFilterExcludeHiddenColumns } from "./gridFilterUtils.js";
-import { isDeepEqual } from "../../../utils/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const filterStateInitializer = (state, props, apiRef) => {
   const filterModel = props.filterModel ?? props.initialState?.filter?.filterModel ?? getDefaultGridFilterModel();

package/esm/hooks/features/pagination/useGridPaginationModel.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { gridFilterModelSelector, gridFilterActiveItemsSelector } from "../filter/gridFilterSelector.js";
 import { gridDensityFactorSelector } from "../density/index.js";
 import { useGridLogger, useGridSelector, useGridApiMethod, useGridApiEventHandler } from "../../utils/index.js";
-import { isDeepEqual } from "../../../utils/utils.js";
 import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
 import { gridPageCountSelector, gridPaginationModelSelector } from "./gridPaginationSelector.js";
 import { getPageCount, defaultPageSize, throwIfPageSizeExceedsTheLimit, getDefaultGridPaginationModel, getValidPage } from "./gridPaginationUtils.js";

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.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/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/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/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 () => {