@mui/x-data-grid 6.5.0 → 6.7.0

package/constants/gridClasses.d.ts

@@ -307,6 +307,10 @@ export interface GridClasses {
      * Styles applied to the column header separator icon element.
      */
     iconSeparator: string;
+    /**
+     * Styles applied to the column header filter row.
+     */
+    headerFilterRow: string;
     /**
      * Styles applied to the main container element.
      */

package/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', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/constants/localeTextConstants.js

@@ -80,10 +80,10 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   headerFilterOperatorIsAnyOf: 'Is any of',
   'headerFilterOperator=': 'Equals',
   'headerFilterOperator!=': 'Not equals',
-  'headerFilterOperator>': 'Is greater than',
-  'headerFilterOperator>=': 'Is greater than or equal to',
-  'headerFilterOperator<': 'Is less than',
-  'headerFilterOperator<=': 'Is less than or equal to',
+  'headerFilterOperator>': 'Greater than',
+  'headerFilterOperator>=': 'Greater than or equal to',
+  'headerFilterOperator<': 'Less than',
+  'headerFilterOperator<=': 'Less than or equal to',
   // Filter values text
   filterValueAny: 'any',
   filterValueTrue: 'true',

package/context/GridContextProvider.d.ts

@@ -5,5 +5,5 @@ type GridContextProviderProps = {
     props: {};
     children: React.ReactNode;
 };
-export declare function GridContextProvider({ privateApiRef, props, children }: GridContextProviderProps): JSX.Element;
+export declare function GridContextProvider({ privateApiRef, props, children }: GridContextProviderProps): React.JSX.Element;
 export {};

package/hooks/core/strategyProcessing/gridStrategyProcessingApi.d.ts

@@ -1,5 +1,5 @@
-import { GridRowTreeCreationParams, GridRowTreeCreationValue } from '../../features/rows/gridRowsInterfaces';
-import { GridFilteringMethodParams, GridFilteringMethodValue } from '../../features/filter/gridFilterState';
+import { GridRowTreeCreationParams, GridRowTreeCreationValue, GridRowsState } from '../../features/rows/gridRowsInterfaces';
+import { GridFilteringMethodParams, GridFilteringMethodValue, GridFilterState, GridVisibleRowsLookupState } from '../../features/filter/gridFilterState';
 import { GridSortingMethodParams, GridSortingMethodValue } from '../../features/sorting/gridSortingState';
 export type GridStrategyProcessorName = keyof GridStrategyProcessingLookup;
 export type GridStrategyGroup = GridStrategyProcessingLookup[keyof GridStrategyProcessingLookup]['group'];
@@ -19,6 +19,14 @@ export interface GridStrategyProcessingLookup {
         params: GridSortingMethodParams;
         value: GridSortingMethodValue;
     };
+    visibleRowsLookupCreation: {
+        group: 'rowTree';
+        params: {
+            tree: GridRowsState['tree'];
+            filteredRowsLookup: GridFilterState['filteredRowsLookup'];
+        };
+        value: GridVisibleRowsLookupState;
+    };
 }
 export type GridStrategyProcessor<P extends GridStrategyProcessorName> = (params: GridStrategyProcessingLookup[P]['params']) => GridStrategyProcessingLookup[P]['value'];
 export interface GridStrategyProcessingApi {

package/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -6,7 +6,8 @@ export const GRID_DEFAULT_STRATEGY = 'none';
 export const GRID_STRATEGIES_PROCESSORS = {
   rowTreeCreation: 'rowTree',
   filtering: 'rowTree',
-  sorting: 'rowTree'
+  sorting: 'rowTree',
+  visibleRowsLookupCreation: 'rowTree'
 };
 /**
  * Implements a variant of the Strategy Pattern (see https://en.wikipedia.org/wiki/Strategy_pattern)

package/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -32,7 +32,7 @@ export interface GetHeadersParams {
 }
 export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {
     renderContext: GridRenderContext | null;
-    getColumnHeaders: (params?: GetHeadersParams, other?: {}) => JSX.Element | null;
+    getColumnHeaders: (params?: GetHeadersParams, other?: {}) => React.JSX.Element | null;
     getColumnsToRender: (params?: GetHeadersParams) => {
         renderedColumns: GridStateColDef[];
         firstColumnToRender: number;

package/hooks/features/filter/gridFilterSelector.d.ts

@@ -11,10 +11,10 @@ export declare const gridFilterModelSelector: import("../../../utils/createSelec
  */
 export declare const gridQuickFilterValuesSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, any[] | undefined>;
 /**
- * @category Filtering
+ * @category Visible rows
  * @ignore - do not document.
  */
-export declare const gridVisibleRowsLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Record<import("../../..").GridRowId, boolean>>;
+export declare const gridVisibleRowsLookupSelector: (state: GridStateCommunity) => import("./gridFilterState").GridVisibleRowsLookupState;
 /**
  * @category Filtering
  * @ignore - do not document.

package/hooks/features/filter/gridFilterSelector.js

@@ -21,10 +21,10 @@ export const gridFilterModelSelector = createSelector(gridFilterStateSelector, f
 export const gridQuickFilterValuesSelector = createSelector(gridFilterModelSelector, filterModel => filterModel.quickFilterValues);
 
 /**
- * @category Filtering
+ * @category Visible rows
  * @ignore - do not document.
  */
-export const gridVisibleRowsLookupSelector = createSelector(gridFilterStateSelector, filterState => filterState.visibleRowsLookup);
+export const gridVisibleRowsLookupSelector = state => state.visibleRowsLookup;
 
 /**
  * @category Filtering

package/hooks/features/filter/gridFilterState.d.ts

@@ -17,12 +17,6 @@ export interface GridFilterState {
      * This is the equivalent of the `visibleRowsLookup` if all the groups were expanded.
      */
     filteredRowsLookup: Record<GridRowId, boolean>;
-    /**
-     * Visibility status for each row.
-     * A row is visible if it is passing the filters AND if its parents are expanded.
-     * If a row is not registered in this lookup, it is visible.
-     */
-    visibleRowsLookup: Record<GridRowId, boolean>;
     /**
      * Amount of descendants that are passing the filters.
      * For the Tree Data, it includes all the intermediate depth levels (= amount of children + amount of grand children + ...).
@@ -47,3 +41,9 @@ export interface GridFilteringMethodParams {
     filterModel: GridFilterModel;
 }
 export type GridFilteringMethodValue = Omit<GridFilterState, 'filterModel'>;
+/**
+ * Visibility status for each row.
+ * A row is visible if it is passing the filters AND if its parents are expanded.
+ * If a row is not registered in this lookup, it is visible.
+ */
+export type GridVisibleRowsLookupState = Record<GridRowId, boolean>;

package/hooks/features/filter/gridFilterState.js

@@ -9,4 +9,10 @@ export const getDefaultGridFilterModel = () => ({
 /**
  * @param {GridRowId} rowId The id of the row we want to filter.
  * @param {(filterItem: GridFilterItem) => boolean} shouldApplyItem An optional callback to allow the filtering engine to only apply some items.
+ */
+
+/**
+ * Visibility status for each row.
+ * A row is visible if it is passing the filters AND if its parents are expanded.
+ * If a row is not registered in this lookup, it is visible.
  */

package/hooks/features/filter/useGridFilter.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
@@ -20,11 +21,21 @@ export const filterStateInitializer = (state, props, apiRef) => {
   return _extends({}, state, {
     filter: {
       filterModel: sanitizeFilterModel(filterModel, props.disableMultipleColumnsFiltering, apiRef),
-      visibleRowsLookup: {},
       filteredDescendantCountLookup: {}
-    }
+    },
+    visibleRowsLookup: {}
   });
 };
+const getVisibleRowsLookup = params => {
+  // For flat tree, the `visibleRowsLookup` and the `filteredRowsLookup` are equals since no row is collapsed.
+  return params.filteredRowsLookup;
+};
+function getVisibleRowsLookupState(apiRef, state) {
+  return apiRef.current.applyStrategyProcessor('visibleRowsLookupCreation', {
+    tree: state.rows.tree,
+    filteredRowsLookup: state.filter.filteredRowsLookup
+  });
+}
 
 /**
  * @requires useGridColumns (method, event)
@@ -49,9 +60,13 @@ export const useGridFilter = (apiRef, props) => {
         isRowMatchingFilters,
         filterModel: filterModel != null ? filterModel : getDefaultGridFilterModel()
       });
-      return _extends({}, state, {
+      const newState = _extends({}, state, {
         filter: _extends({}, state.filter, filteringResult)
       });
+      const visibleRowsLookupState = getVisibleRowsLookupState(apiRef, newState);
+      return _extends({}, newState, {
+        visibleRowsLookup: visibleRowsLookupState
+      });
     });
     apiRef.current.publishEvent('filteredRowsSet');
   }, [props.filterMode, apiRef]);
@@ -107,7 +122,7 @@ export const useGridFilter = (apiRef, props) => {
       items
     }), 'deleteFilterItem');
   }, [apiRef]);
-  const showFilterPanel = React.useCallback(targetColumnField => {
+  const showFilterPanel = React.useCallback((targetColumnField, panelId, labelId) => {
     logger.debug('Displaying filter panel');
     if (targetColumnField) {
       const filterModel = gridFilterModelSelector(apiRef);
@@ -153,7 +168,7 @@ export const useGridFilter = (apiRef, props) => {
         items: newFilterItems
       }));
     }
-    apiRef.current.showPreferences(GridPreferencePanelsValue.filters);
+    apiRef.current.showPreferences(GridPreferencePanelsValue.filters, panelId, labelId);
   }, [apiRef, logger, props.disableMultipleColumnsFiltering]);
   const hideFilterPanel = React.useCallback(() => {
     logger.debug('Hiding filter panel');
@@ -262,13 +277,10 @@ export const useGridFilter = (apiRef, props) => {
       }
       return {
         filteredRowsLookup,
-        // For flat tree, the `visibleRowsLookup` and the `filteredRowsLookup` are equals since no row is collapsed.
-        visibleRowsLookup: filteredRowsLookup,
         filteredDescendantCountLookup: {}
       };
     }
     return {
-      visibleRowsLookup: {},
       filteredRowsLookup: {},
       filteredDescendantCountLookup: {}
     };
@@ -278,6 +290,7 @@ export const useGridFilter = (apiRef, props) => {
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'preferencePanel', preferencePanelPreProcessing);
   useGridRegisterStrategyProcessor(apiRef, GRID_DEFAULT_STRATEGY, 'filtering', flatFilteringMethod);
+  useGridRegisterStrategyProcessor(apiRef, GRID_DEFAULT_STRATEGY, 'visibleRowsLookupCreation', getVisibleRowsLookup);
 
   /**
    * EVENTS
@@ -298,13 +311,21 @@ export const useGridFilter = (apiRef, props) => {
       apiRef.current.unstable_applyFilters();
     }
   }, [apiRef]);
+  const updateVisibleRowsLookupState = React.useCallback(() => {
+    apiRef.current.setState(state => {
+      return _extends({}, state, {
+        visibleRowsLookup: getVisibleRowsLookupState(apiRef, state)
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
 
   // Do not call `apiRef.current.forceUpdate` to avoid re-render before updating the sorted rows.
   // Otherwise, the state is not consistent during the render
   useGridApiEventHandler(apiRef, 'rowsSet', updateFilteredRows);
-  useGridApiEventHandler(apiRef, 'rowExpansionChange', apiRef.current.unstable_applyFilters);
   useGridApiEventHandler(apiRef, 'columnsChange', handleColumnsChange);
   useGridApiEventHandler(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
+  useGridApiEventHandler(apiRef, 'rowExpansionChange', updateVisibleRowsLookupState);
 
   /**
    * 1ST RENDER
@@ -316,7 +337,7 @@ export const useGridFilter = (apiRef, props) => {
   /**
    * EFFECTS
    */
-  React.useEffect(() => {
+  useEnhancedEffect(() => {
     if (props.filterModel !== undefined) {
       apiRef.current.setFilterModel(props.filterModel);
     }

package/hooks/features/focus/useGridFocus.js

@@ -350,6 +350,7 @@ export const useGridFocus = (apiRef, props) => {
     };
   }, [apiRef, handleDocumentClick]);
   useGridApiEventHandler(apiRef, 'columnHeaderBlur', handleBlur);
+  useGridApiEventHandler(apiRef, 'headerFilterBlur', handleBlur);
   useGridApiEventHandler(apiRef, 'cellDoubleClick', handleCellDoubleClick);
   useGridApiEventHandler(apiRef, 'cellMouseDown', handleCellMouseDown);
   useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);

package/hooks/features/preferencesPanel/gridPreferencePanelState.d.ts

@@ -1,6 +1,8 @@
 import { GridPreferencePanelsValue } from './gridPreferencePanelsValue';
 export interface GridPreferencePanelState {
     open: boolean;
+    panelId?: string;
+    labelId?: string;
     /**
      * Tab currently opened.
      * @default GridPreferencePanelsValue.filter

package/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -52,13 +52,15 @@ export const useGridPreferencesPanel = (apiRef, props) => {
   const hidePreferencesDelayed = React.useCallback(() => {
     hideTimeout.current = setTimeout(hidePreferences, 100);
   }, [hidePreferences]);
-  const showPreferences = React.useCallback(newValue => {
+  const showPreferences = React.useCallback((newValue, panelId, labelId) => {
     logger.debug('Opening Preferences Panel');
     doNotHidePanel();
     apiRef.current.setState(state => _extends({}, state, {
       preferencePanel: _extends({}, state.preferencePanel, {
         open: true,
-        openedPanelValue: newValue
+        openedPanelValue: newValue,
+        panelId,
+        labelId
       })
     }));
     apiRef.current.publishEvent('preferencePanelOpen', {

package/hooks/features/rows/useGridRowsMeta.js

@@ -41,7 +41,7 @@ export const useGridRowsMeta = (apiRef, props) => {
     getRowSpacing,
     getEstimatedRowHeight
   } = props;
-  const rowsHeightLookup = React.useRef({});
+  const rowsHeightLookup = React.useRef(Object.create(null));
 
   // Inspired by https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js
   const lastMeasuredRowIndex = React.useRef(-1);
@@ -105,17 +105,14 @@ export const useGridRowsMeta = (apiRef, props) => {
       } else {
         rowsHeightLookup.current[row.id].needsFirstMeasurement = false;
       }
-      const existingBaseSizes = Object.entries(sizes).reduce((acc, [key, size]) => {
+      const initialHeights = {};
+      /* eslint-disable-next-line no-restricted-syntax */
+      for (const key in sizes) {
         if (/^base[A-Z]/.test(key)) {
-          acc[key] = size;
+          initialHeights[key] = sizes[key];
         }
-        return acc;
-      }, {});
-
-      // We use an object to make simple to check if a height is already added or not
-      const initialHeights = _extends({}, existingBaseSizes, {
-        baseCenter: baseRowHeight
-      });
+      }
+      initialHeights.baseCenter = baseRowHeight;
       if (getRowSpacing) {
         var _spacing$top, _spacing$bottom;
         const indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
@@ -137,13 +134,15 @@ export const useGridRowsMeta = (apiRef, props) => {
       let maximumBaseSize = 0;
       let otherSizes = 0;
       const processedSizes = calculateRowProcessedSizes(row);
-      Object.entries(processedSizes).forEach(([size, value]) => {
-        if (/^base[A-Z]/.test(size)) {
+      /* eslint-disable-next-line no-restricted-syntax, guard-for-in */
+      for (const key in processedSizes) {
+        const value = processedSizes[key];
+        if (/^base[A-Z]/.test(key)) {
           maximumBaseSize = value > maximumBaseSize ? value : maximumBaseSize;
         } else {
           otherSizes += value;
         }
-      });
+      }
       return acc + maximumBaseSize + otherSizes;
     }, 0);
     pinnedRows == null ? void 0 : (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.forEach(row => {

package/hooks/features/sorting/useGridSorting.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { isEnterKey } from '../../../utils/keyboardUtils';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
@@ -244,7 +245,7 @@ export const useGridSorting = (apiRef, props) => {
   /**
    * EFFECTS
    */
-  React.useEffect(() => {
+  useEnhancedEffect(() => {
     if (props.sortModel !== undefined) {
       apiRef.current.setSortModel(props.sortModel);
     }

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -91,7 +91,7 @@ export const useGridVirtualScroller = props => {
     height: null
   });
   const prevTotalWidth = React.useRef(columnsTotalWidth);
-  const rowStyleCache = React.useRef({});
+  const rowStyleCache = React.useRef(Object.create(null));
   const prevGetRowProps = React.useRef();
   const prevRootRowStyle = React.useRef();
   const getRenderedColumnsRef = React.useRef(defaultMemoize((columns, firstColumnToRender, lastColumnToRender) => {
@@ -377,7 +377,7 @@ export const useGridVirtualScroller = props => {
       rootRowProps = _objectWithoutPropertiesLoose(_ref, _excluded);
     const invalidatesCachedRowStyle = prevGetRowProps.current !== getRowProps || prevRootRowStyle.current !== rootRowStyle;
     if (invalidatesCachedRowStyle) {
-      rowStyleCache.current = {};
+      rowStyleCache.current = Object.create(null);
     }
     const rows = [];
     for (let i = 0; i < renderedRows.length; i += 1) {

package/index.js

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

package/internals/utils/useProps.js

@@ -1,6 +1,26 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["components", "componentsProps"];
 import * as React from 'react';
+/** Gathers props for the root element into a single `.forwardedProps` field */
+function groupForwardedProps(props) {
+  var _props$forwardedProps;
+  const keys = Object.keys(props);
+  if (!keys.some(key => key.startsWith('aria-') || key.startsWith('data-'))) {
+    return props;
+  }
+  const newProps = {};
+  const forwardedProps = (_props$forwardedProps = props.forwardedProps) != null ? _props$forwardedProps : {};
+  for (let i = 0; i < keys.length; i += 1) {
+    const key = keys[i];
+    if (key.startsWith('aria-') || key.startsWith('data-')) {
+      forwardedProps[key] = props[key];
+    } else {
+      newProps[key] = props[key];
+    }
+  }
+  newProps.forwardedProps = forwardedProps;
+  return newProps;
+}
 export function useProps(allProps) {
   return React.useMemo(() => {
     const {
@@ -8,6 +28,6 @@ export function useProps(allProps) {
         componentsProps
       } = allProps,
       themedProps = _objectWithoutPropertiesLoose(allProps, _excluded);
-    return [components, componentsProps, themedProps];
+    return [components, componentsProps, groupForwardedProps(themedProps)];
   }, [allProps]);
 }

package/legacy/DataGrid/DataGrid.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { chainPropTypes } from '@mui/utils';
@@ -14,15 +15,16 @@ var DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref)
   return /*#__PURE__*/_jsx(GridContextProvider, {
     privateApiRef: privateApiRef,
     props: props,
-    children: /*#__PURE__*/_jsxs(GridRoot, {
+    children: /*#__PURE__*/_jsxs(GridRoot, _extends({
       className: props.className,
       style: props.style,
       sx: props.sx,
-      ref: ref,
+      ref: ref
+    }, props.forwardedProps, {
       children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
         VirtualScrollerComponent: DataGridVirtualScroller
       }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
-    })
+    }))
   });
 });
 export var DataGrid = /*#__PURE__*/React.memo(DataGridRaw);
@@ -184,6 +186,11 @@ DataGridRaw.propTypes = {
     quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
     quickFilterValues: PropTypes.array
   }),
+  /**
+   * Forwarded props for the grid root element.
+   * @ignore - do not document.
+   */
+  forwardedProps: PropTypes.object,
   /**
    * Function that applies CSS classes dynamically on cells.
    * @param {GridCellParams} params With all properties from [[GridCellParams]].

package/legacy/components/GridColumnHeaders.js

@@ -4,11 +4,10 @@ var _excluded = ["innerRef", "className", "visibleColumns", "sortColumnLookup",
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
-import { GridScrollArea } from './GridScrollArea';
 import { GridBaseColumnHeaders } from './columnHeaders/GridBaseColumnHeaders';
 import { GridColumnHeadersInner } from './columnHeaders/GridColumnHeadersInner';
-import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 var GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHeaders(props, ref) {
   var innerRef = props.innerRef,
     className = props.className,
@@ -49,18 +48,14 @@ var GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHeader
     getInnerProps = _useGridColumnHeaders.getInnerProps,
     getColumnHeaders = _useGridColumnHeaders.getColumnHeaders,
     getColumnGroupHeaders = _useGridColumnHeaders.getColumnGroupHeaders;
-  return /*#__PURE__*/_jsxs(GridBaseColumnHeaders, _extends({
+  return /*#__PURE__*/_jsx(GridBaseColumnHeaders, _extends({
     ref: ref
   }, getRootProps(other), {
-    children: [/*#__PURE__*/_jsx(GridScrollArea, {
-      scrollDirection: "left"
-    }), /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
+    children: /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
       isDragging: isDragging
     }, getInnerProps(), {
       children: [getColumnGroupHeaders(), getColumnHeaders()]
-    })), /*#__PURE__*/_jsx(GridScrollArea, {
-      scrollDirection: "right"
-    })]
+    }))
   }));
 });
 process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {

package/legacy/components/cell/GridActionsCell.js

@@ -183,9 +183,9 @@ function GridActionsCell(props) {
       ref: buttonRef,
       id: buttonId,
       "aria-label": apiRef.current.getLocaleText('actionsCellMore'),
-      "aria-controls": menuId,
-      "aria-expanded": open ? 'true' : undefined,
-      "aria-haspopup": "true",
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      "aria-controls": open ? menuId : undefined,
       role: "menuitem",
       size: "small",
       onClick: showMenu,

package/legacy/components/cell/GridEditSingleSelectCell.js

@@ -8,6 +8,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { GridCellEditStopReasons } from '../../models/params/gridEditCellParams';
 import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
@@ -123,11 +124,10 @@ function GridEditSingleSelectCell(props) {
       return;
     }
     if (reason === 'backdropClick' || isEscapeKey(event.key)) {
-      apiRef.current.stopCellEditMode({
-        id: id,
-        field: field,
-        ignoreModifications: true
-      });
+      var params = apiRef.current.getCellParams(id, field);
+      apiRef.current.publishEvent('cellEditStop', _extends({}, params, {
+        reason: isEscapeKey(event.key) ? GridCellEditStopReasons.escapeKeyDown : GridCellEditStopReasons.cellFocusOut
+      }));
     }
   };
   var handleOpen = function handleOpen(event) {

package/legacy/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -45,9 +45,9 @@ export var ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(function (props) {
         "aria-label": apiRef.current.getLocaleText('columnMenuLabel'),
         size: "small",
         onClick: handleMenuIconClick,
-        "aria-expanded": open ? 'true' : undefined,
-        "aria-haspopup": "true",
-        "aria-controls": columnMenuId,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? columnMenuId : undefined,
         id: columnMenuButtonId
       }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseIconButton, {
         children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuIcon, {

package/legacy/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
 import Badge from '@mui/material/Badge';
+import { useGridSelector } from '../../hooks';
 import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
 import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
@@ -29,6 +30,9 @@ function GridColumnHeaderFilterIconButton(props) {
     classes: rootProps.classes
   });
   var classes = useUtilityClasses(ownerState);
+  var preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
+  var labelId = useId();
+  var panelId = useId();
   var toggleFilter = React.useCallback(function (event) {
     event.preventDefault();
     event.stopPropagation();
@@ -38,21 +42,26 @@ function GridColumnHeaderFilterIconButton(props) {
     if (open && openedPanelValue === GridPreferencePanelsValue.filters) {
       apiRef.current.hideFilterPanel();
     } else {
-      apiRef.current.showFilterPanel();
+      apiRef.current.showFilterPanel(undefined, panelId, labelId);
     }
     if (onClick) {
       onClick(apiRef.current.getColumnHeaderParams(field), event);
     }
-  }, [apiRef, field, onClick]);
+  }, [apiRef, field, onClick, panelId, labelId]);
   if (!counter) {
     return null;
   }
+  var open = preferencePanel.open && preferencePanel.labelId === labelId;
   var iconButton = /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+    id: labelId,
     onClick: toggleFilter,
     color: "default",
     "aria-label": apiRef.current.getLocaleText('columnHeaderFiltersLabel'),
     size: "small",
-    tabIndex: -1
+    tabIndex: -1,
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    "aria-controls": open ? panelId : undefined
   }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
     children: /*#__PURE__*/_jsx(rootProps.slots.columnFilteredIcon, {
       className: classes.icon,

package/legacy/components/containers/GridRoot.js

@@ -64,9 +64,7 @@ var GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
     role: "grid",
     "aria-colcount": visibleColumns.length,
     "aria-rowcount": headerGroupingMaxDepth + 1 + pinnedRowsCount + totalRowCount,
-    "aria-multiselectable": !rootProps.disableMultipleRowSelection,
-    "aria-label": rootProps['aria-label'],
-    "aria-labelledby": rootProps['aria-labelledby']
+    "aria-multiselectable": !rootProps.disableMultipleRowSelection
   }, other, {
     children: children
   }));