@mui/x-data-grid 7.12.1 → 7.14.0

package/models/gridDataSource.d.ts

@@ -43,19 +43,19 @@ export interface GridGetRowsResponse {
 }
 export interface GridDataSource {
     /**
-     * This method will be called when the grid needs to fetch some rows
+     * This method will be called when the grid needs to fetch some rows.
      * @param {GridGetRowsParams} params The parameters required to fetch the rows
      * @returns {Promise<GridGetRowsResponse>} A promise that resolves to the data of type [GridGetRowsResponse]
      */
     getRows(params: GridGetRowsParams): Promise<GridGetRowsResponse>;
     /**
-     * This method will be called when the user updates a row [Not yet implemented]
+     * This method will be called when the user updates a row [Not yet implemented].
      * @param {GridRowModel} updatedRow The updated row
      * @returns {Promise<any>} If resolved (synced on the backend), the grid will update the row and mutate the cache
      */
     updateRow?(updatedRow: GridRowModel): Promise<any>;
     /**
-     * Used to group rows by their parent group. Replaces `getTreeDataPath` used in client side tree-data .
+     * Used to group rows by their parent group. Replaces `getTreeDataPath` used in client side tree-data.
      * @param {GridRowModel} row The row to get the group key of
      * @returns {string} The group key for the row
      */
@@ -63,25 +63,26 @@ export interface GridDataSource {
     /**
      * Used to determine the number of children a row has on server.
      * @param {GridRowModel} row The row to check the number of children
-     * @returns {number} The number of children the row has
+     * @returns {number} The number of children the row has.
+     * If the children count is not available for some reason, but there are some children, `getChildrenCount` should return `-1`.
      */
     getChildrenCount?: (row: GridRowModel) => number;
 }
 export interface GridDataSourceCache {
     /**
-     * Set the cache entry for the given key
+     * Set the cache entry for the given key.
      * @param {GridGetRowsParams} key The key of type `GridGetRowsParams`
      * @param {GridGetRowsResponse} value The value to be stored in the cache
      */
     set: (key: GridGetRowsParams, value: GridGetRowsResponse) => void;
     /**
-     * Get the cache entry for the given key
+     * Get the cache entry for the given key.
      * @param {GridGetRowsParams} key The key of type `GridGetRowsParams`
      * @returns {GridGetRowsResponse} The value stored in the cache
      */
     get: (key: GridGetRowsParams) => GridGetRowsResponse | undefined;
     /**
-     * Clear the cache
+     * Clear the cache.
      */
     clear: () => void;
 }

package/models/gridRows.d.ts

@@ -104,9 +104,9 @@ export interface GridDataGroupNode extends GridBasicGroupNode {
 }
 export interface GridDataSourceGroupNode extends GridDataGroupNode {
     /**
-     * If true, this node has children on server.
+     * Number of children this node has on the server. Equals to `-1` if there are some children but the count is unknown.
      */
-    hasServerChildren: boolean;
+    serverChildrenCount: number;
     /**
      * The cached path to be passed on as `groupKey` to the server.
      */

package/models/params/gridCellParams.d.ts

@@ -53,6 +53,10 @@ export interface GridCellParams<R extends GridValidRowModel = any, V = unknown,
      * the tabIndex value.
      */
     tabIndex: 0 | -1;
+    /**
+     * GridApi that let you manipulate the grid.
+     */
+    api: GridApiCommunity;
 }
 export interface FocusElement {
     focus(): void;

package/models/props/DataGridProps.d.ts

@@ -441,7 +441,7 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
     /**
      * Determines if a row can be selected.
      * @param {GridRowParams} params With all properties from [[GridRowParams]].
-     * @returns {boolean} A boolean indicating if the cell is selectable.
+     * @returns {boolean} A boolean indicating if the row is selectable.
      */
     isRowSelectable?: (params: GridRowParams<R>) => boolean;
     /**

package/modern/DataGrid/DataGrid.js

@@ -4,11 +4,19 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot } from '../components';
+import { useGridAriaAttributes } from '../hooks/utils/useGridAriaAttributes';
+import { useGridRowAriaAttributes } from '../hooks/features/rows/useGridRowAriaAttributes';
 import { GridContextProvider } from '../context/GridContextProvider';
 import { useDataGridComponent } from './useDataGridComponent';
 import { useDataGridProps } from './useDataGridProps';
 import { propValidatorsDataGrid, validateProps } from '../internals/utils/propValidation';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const configuration = {
+  hooks: {
+    useGridAriaAttributes,
+    useGridRowAriaAttributes
+  }
+};
 let propValidators;
 if (process.env.NODE_ENV !== 'production') {
   propValidators = [...propValidatorsDataGrid,
@@ -23,6 +31,7 @@ const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref
   }
   return /*#__PURE__*/_jsx(GridContextProvider, {
     privateApiRef: privateApiRef,
+    configuration: configuration,
     props: props,
     children: /*#__PURE__*/_jsxs(GridRoot, _extends({
       className: props.className,
@@ -321,7 +330,7 @@ DataGridRaw.propTypes = {
   /**
    * Determines if a row can be selected.
    * @param {GridRowParams} params With all properties from [[GridRowParams]].
-   * @returns {boolean} A boolean indicating if the cell is selectable.
+   * @returns {boolean} A boolean indicating if the row is selectable.
    */
   isRowSelectable: PropTypes.func,
   /**

package/modern/components/GridColumnHeaders.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { fastMemo } from '../utils/fastMemo';
+import { fastMemo } from '@mui/x-internals/fastMemo';
 import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
 import { GridBaseColumnHeaders } from './columnHeaders/GridBaseColumnHeaders';
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/modern/components/GridConfigurationContext.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export const GridConfigurationContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+  GridConfigurationContext.displayName = 'GridConfigurationContext';
+}

package/modern/components/GridHeaders.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { fastMemo } from '../utils/fastMemo';
+import { fastMemo } from '@mui/x-internals/fastMemo';
 import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 import { useGridSelector } from '../hooks/utils/useGridSelector';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';

package/modern/components/GridRow.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import { fastMemo } from '../utils/fastMemo';
+import { fastMemo } from '@mui/x-internals/fastMemo';
 import { GridEditModes, GridRowModes, GridCellModes } from '../models/gridEditRowModel';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { gridClasses } from '../constants/gridClasses';
@@ -20,11 +20,11 @@ import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelToggleField';
 import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSelector';
 import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
-import { gridColumnGroupsHeaderMaxDepthSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector';
 import { gridEditRowsStateSelector } from '../hooks/features/editing/gridEditingSelectors';
 import { PinnedPosition, gridPinnedColumnPositionLookup } from './cell/GridCell';
 import { GridScrollbarFillerCell as ScrollbarFiller } from './GridScrollbarFillerCell';
 import { getPinnedCellOffset } from '../internals/utils/getPinnedCellOffset';
+import { useGridConfiguration } from '../hooks/utils/useGridConfiguration';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function EmptyCell({
   width
@@ -68,12 +68,12 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
+  const configuration = useGridConfiguration();
   const ref = React.useRef(null);
   const rootProps = useGridRootProps();
   const currentPage = useGridVisibleRows(apiRef, rootProps);
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
   const treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
-  const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector);
   const handleRef = useForkRef(ref, refProp);
@@ -85,11 +85,10 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const hasFocusCell = focusedColumnIndex !== undefined;
   const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < renderContext.firstColumnIndex;
   const hasVirtualFocusCellRight = hasFocusCell && focusedColumnIndex < visibleColumns.length - pinnedColumns.right.length && focusedColumnIndex >= renderContext.lastColumnIndex;
-  const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
-
   const classes = composeGridClasses(rootProps.classes, {
     root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isFirstVisible && 'row--firstVisible', isLastVisible && 'row--lastVisible', showBottomBorder && 'row--borderBottom', rowHeight === 'auto' && 'row--dynamicHeight']
   });
+  const getRowAriaAttributes = configuration.hooks.useGridRowAriaAttributes();
   React.useLayoutEffect(() => {
     if (currentPage.range) {
       // The index prop is relative to the rows from all pages. As example, the index prop of the
@@ -212,6 +211,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     return rowStyle;
   }, [isNotVisible, rowHeight, styleProp, minHeight, sizes, rootProps.rowSpacingType]);
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
+  const ariaAttributes = rowNode ? getRowAriaAttributes(rowNode, index) : undefined;
   if (typeof rootProps.getRowClassName === 'function') {
     const indexRelativeToCurrentPage = index - (currentPage.range?.firstRowIndex || 0);
     const rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
@@ -308,10 +308,8 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     "data-rowindex": index,
     role: "row",
     className: clsx(...rowClassNames, classes.root, className),
-    "aria-rowindex": ariaRowIndex,
-    "aria-selected": selected,
     style: style
-  }, eventHandlers, other, {
+  }, ariaAttributes, eventHandlers, other, {
     children: [leftCells, /*#__PURE__*/_jsx("div", {
       role: "presentation",
       className: gridClasses.cellOffsetLeft,

package/modern/components/GridScrollArea.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { styled } from '@mui/system';
+import { fastMemo } from '@mui/x-internals/fastMemo';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass, gridClasses } from '../constants';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
@@ -13,7 +14,6 @@ import { gridDensityFactorSelector } from '../hooks/features/density/densitySele
 import { gridColumnsTotalWidthSelector } from '../hooks/features/columns/gridColumnsSelector';
 import { useTimeout } from '../hooks/utils/useTimeout';
 import { getTotalHeaderHeight } from '../hooks/features/columns/gridColumnsUtils';
-import { fastMemo } from '../utils/fastMemo';
 import { jsx as _jsx } from "react/jsx-runtime";
 const CLIFF = 1;
 const SLOP = 1.5;

package/modern/components/GridSkeletonLoadingOverlay.js

@@ -119,7 +119,7 @@ const GridSkeletonLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridSk
         if (hasScrollbarFiller) {
           rowCells.push( /*#__PURE__*/_jsx(GridScrollbarFillerCell, {
             pinnedRight: pinnedColumns.right.length > 0
-          }));
+          }, `skeleton-scrollbar-filler-${i}`));
         }
       }
       array.push( /*#__PURE__*/_jsx("div", {

package/modern/components/cell/GridCell.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_ownerDocument as ownerDocument, unstable_capitalize as capitalize } from '@mui/utils';
-import { fastMemo } from '../../utils/fastMemo';
+import { fastMemo } from '@mui/x-internals/fastMemo';
 import { doesSupportPreventScroll } from '../../utils/doesSupportPreventScroll';
 import { getDataGridUtilityClass, gridClasses } from '../../constants/gridClasses';
 import { GridCellModes } from '../../models';
@@ -107,13 +107,12 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const field = column.field;
-  const cellParamsWithAPI = useGridSelector(apiRef, () => {
+  const cellParams = useGridSelector(apiRef, () => {
     // This is required because `.getCellParams` tries to get the `state.rows.tree` entry
     // associated with `rowId`/`fieldId`, but this selector runs after the state has been
     // updated, while `rowId`/`fieldId` reference an entry in the old state.
     try {
-      const cellParams = apiRef.current.getCellParams(rowId, field);
-      const result = cellParams;
+      const result = apiRef.current.getCellParams(rowId, field);
       result.api = apiRef.current;
       return result;
     } catch (e) {
@@ -132,9 +131,9 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     hasFocus,
     isEditable = false,
     value
-  } = cellParamsWithAPI;
+  } = cellParams;
   const canManageOwnFocus = column.type === 'actions' && column.getActions?.(apiRef.current.getRowParams(rowId)).some(action => !action.props.disabled);
-  const tabIndex = (cellMode === 'view' || !isEditable) && !canManageOwnFocus ? cellParamsWithAPI.tabIndex : -1;
+  const tabIndex = (cellMode === 'view' || !isEditable) && !canManageOwnFocus ? cellParams.tabIndex : -1;
   const {
     classes: rootClasses,
     getCellClassName
@@ -147,15 +146,15 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
   }).filter(Boolean).join(' '));
   const classNames = [pipesClassName];
   if (column.cellClassName) {
-    classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParamsWithAPI) : column.cellClassName);
+    classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParams) : column.cellClassName);
   }
   if (column.display === 'flex') {
     classNames.push(gridClasses['cell--flex']);
   }
   if (getCellClassName) {
-    classNames.push(getCellClassName(cellParamsWithAPI));
+    classNames.push(getCellClassName(cellParams));
   }
-  const valueToRender = cellParamsWithAPI.formattedValue ?? value;
+  const valueToRender = cellParams.formattedValue ?? value;
   const cellRef = React.useRef(null);
   const handleRef = useForkRef(ref, cellRef);
   const focusElementRef = React.useRef(null);
@@ -238,7 +237,7 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
       }
     }
   }, [hasFocus, cellMode, apiRef]);
-  if (cellParamsWithAPI === EMPTY_CELL_PARAMS) {
+  if (cellParams === EMPTY_CELL_PARAMS) {
     return null;
   }
   let handleFocus = other.onFocus;
@@ -260,15 +259,15 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
   let children;
   let title;
   if (editCellState === null && column.renderCell) {
-    children = column.renderCell(cellParamsWithAPI);
+    children = column.renderCell(cellParams);
   }
   if (editCellState !== null && column.renderEditCell) {
     const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
 
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const editCellStateRest = _objectWithoutPropertiesLoose(editCellState, _excluded2);
-    const formattedValue = column.valueFormatter ? column.valueFormatter(editCellState.value, updatedRow, column, apiRef) : cellParamsWithAPI.formattedValue;
-    const params = _extends({}, cellParamsWithAPI, {
+    const formattedValue = column.valueFormatter ? column.valueFormatter(editCellState.value, updatedRow, column, apiRef) : cellParams.formattedValue;
+    const params = _extends({}, cellParams, {
       row: updatedRow,
       formattedValue
     }, editCellStateRest);

package/modern/components/cell/GridEditSingleSelectCell.js

@@ -6,7 +6,6 @@ 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';
 import { getValueFromValueOptions, getValueOptions, isSingleSelectColDef } from '../panel/filterPanel/filterPanelUtils';
@@ -80,10 +79,10 @@ function GridEditSingleSelectCell(props) {
       setOpen(false);
       return;
     }
-    if (reason === 'backdropClick' || isEscapeKey(event.key)) {
+    if (reason === 'backdropClick' || event.key === 'Escape') {
       const params = apiRef.current.getCellParams(id, field);
       apiRef.current.publishEvent('cellEditStop', _extends({}, params, {
-        reason: isEscapeKey(event.key) ? GridCellEditStopReasons.escapeKeyDown : GridCellEditStopReasons.cellFocusOut
+        reason: event.key === 'Escape' ? GridCellEditStopReasons.escapeKeyDown : GridCellEditStopReasons.cellFocusOut
       }));
     }
   };

package/modern/components/cell/GridSkeletonCell.js

@@ -3,10 +3,10 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["field", "type", "align", "width", "height", "empty", "style", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import Skeleton from '@mui/material/Skeleton';
 import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
-import clsx from 'clsx';
-import { fastMemo } from '../../utils/fastMemo';
+import { fastMemo } from '@mui/x-internals/fastMemo';
 import { createRandomNumberGenerator } from '../../utils/utils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';

package/modern/components/columnHeaders/GridColumnHeaderItem.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
-import { fastMemo } from '../../utils/fastMemo';
+import { fastMemo } from '@mui/x-internals/fastMemo';
 import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
 import { ColumnHeaderMenuIcon } from './ColumnHeaderMenuIcon';
 import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';

package/modern/components/containers/GridRootStyles.js

@@ -668,9 +668,16 @@ export const GridRootStyles = styled('div', {
     [`& .${c['filler--borderTop']}`]: {
       borderTop: '1px solid var(--DataGrid-rowBorderColor)'
     },
-    /* Hide grid rows and vertical scrollbar when skeleton overlay is visible */
+    /* Hide grid rows, row filler, and vertical scrollbar when skeleton overlay is visible */
     [`& .${c['main--hasSkeletonLoadingOverlay']}`]: {
-      [`& .${c.virtualScrollerContent}, & .${c['scrollbar--vertical']}, & .${c.pinnedRows}`]: {
+      [`& .${c.virtualScrollerContent}`]: {
+        // We use visibility hidden so that the virtual scroller content retains its height.
+        // Position fixed is used to remove the virtual scroller content from the flow.
+        // https://github.com/mui/mui-x/issues/14061
+        position: 'fixed',
+        visibility: 'hidden'
+      },
+      [`& .${c['scrollbar--vertical']}, & .${c.pinnedRows}, & .${c.virtualScroller} > .${c.filler}`]: {
         display: 'none'
       }
     }

package/modern/components/menu/columnMenu/GridColumnMenuContainer.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import * as React from 'react';
 import MenuList from '@mui/material/MenuList';
 import { styled } from '@mui/material/styles';
-import { isHideMenuKey, isTabKey } from '../../../utils/keyboardUtils';
+import { isHideMenuKey } from '../../../utils/keyboardUtils';
 import { gridClasses } from '../../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledMenuList = styled(MenuList)(() => ({
@@ -23,7 +23,7 @@ const GridColumnMenuContainer = /*#__PURE__*/React.forwardRef(function GridColum
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const handleListKeyDown = React.useCallback(event => {
-    if (isTabKey(event.key)) {
+    if (event.key === 'Tab') {
       event.preventDefault();
     }
     if (isHideMenuKey(event.key)) {

package/modern/components/panel/GridPanel.js

@@ -10,7 +10,6 @@ import ClickAwayListener from '@mui/material/ClickAwayListener';
 import Paper from '@mui/material/Paper';
 import Popper from '@mui/material/Popper';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const gridPanelClasses = generateUtilityClasses('MuiDataGrid', ['panel', 'paper']);
@@ -51,7 +50,7 @@ const GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
     apiRef.current.hidePreferences();
   }, [apiRef]);
   const handleKeyDown = React.useCallback(event => {
-    if (isEscapeKey(event.key)) {
+    if (event.key === 'Escape') {
       apiRef.current.hidePreferences();
     }
   }, [apiRef]);

package/modern/components/panel/filterPanel/GridFilterForm.js

@@ -281,10 +281,15 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
       variant: "standard",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, logicOperatorInputProps, {
-      sx: _extends({
-        display: hasLogicOperatorColumn ? 'flex' : 'none',
-        visibility: showMultiFilterOperators ? 'visible' : 'hidden'
-      }, baseFormControlProps.sx || {}, logicOperatorInputProps.sx || {}),
+      sx: [hasLogicOperatorColumn ? {
+        display: 'flex'
+      } : {
+        display: 'none'
+      }, showMultiFilterOperators ? {
+        visibility: 'visible'
+      } : {
+        visibility: 'hidden'
+      }, baseFormControlProps.sx, logicOperatorInputProps.sx],
       className: clsx(classes.logicOperatorInput, baseFormControlProps.className, logicOperatorInputProps.className),
       ownerState: rootProps,
       children: /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({

package/modern/components/toolbar/GridToolbarDensitySelector.js

@@ -6,7 +6,7 @@ import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import { gridDensitySelector } from '../../hooks/features/density/densitySelector';
-import { isHideMenuKey, isTabKey } from '../../utils/keyboardUtils';
+import { isHideMenuKey } from '../../utils/keyboardUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { GridMenu } from '../menu/GridMenu';
@@ -62,7 +62,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
     setOpen(false);
   };
   const handleListKeyDown = event => {
-    if (isTabKey(event.key)) {
+    if (event.key === 'Tab') {
       event.preventDefault();
     }
     if (isHideMenuKey(event.key)) {

package/modern/components/toolbar/GridToolbarExportContainer.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
 import MenuList from '@mui/material/MenuList';
-import { isHideMenuKey, isTabKey } from '../../utils/keyboardUtils';
+import { isHideMenuKey } from '../../utils/keyboardUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { GridMenu } from '../menu/GridMenu';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -29,7 +29,7 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
   };
   const handleMenuClose = () => setOpen(false);
   const handleListKeyDown = event => {
-    if (isTabKey(event.key)) {
+    if (event.key === 'Tab') {
       event.preventDefault();
     }
     if (isHideMenuKey(event.key)) {

package/modern/components/toolbar/GridToolbarQuickFilter.js

@@ -105,9 +105,11 @@ function GridToolbarQuickFilter(props) {
       endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
         "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
         size: "small",
-        sx: {
-          visibility: searchValue ? 'visible' : 'hidden'
-        },
+        sx: [searchValue ? {
+          visibility: 'visible'
+        } : {
+          visibility: 'hidden'
+        }],
         onClick: handleSearchReset
       }, rootProps.slotProps?.baseIconButton, {
         children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {

package/modern/components/virtualization/GridMainContainer.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { styled } from '@mui/system';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { useGridAriaAttributes } from '../../hooks/utils/useGridAriaAttributes';
+import { useGridConfiguration } from '../../hooks/utils/useGridConfiguration';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridPanelAnchor = styled('div')({
   position: 'absolute',
@@ -19,8 +19,9 @@ const Element = styled('div', {
   overflow: 'hidden'
 });
 export const GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const ariaAttributes = useGridAriaAttributes();
   const rootProps = useGridRootProps();
+  const configuration = useGridConfiguration();
+  const ariaAttributes = configuration.hooks.useGridAriaAttributes();
   return /*#__PURE__*/_jsxs(Element, _extends({
     ref: ref,
     ownerState: rootProps,

package/modern/components/virtualization/GridVirtualScrollerFiller.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import { fastMemo } from '../../utils/fastMemo';
+import { fastMemo } from '@mui/x-internals/fastMemo';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { gridDimensionsSelector } from '../../hooks/features/dimensions';

package/modern/context/GridContextProvider.js

@@ -2,20 +2,25 @@ import * as React from 'react';
 import { GridApiContext } from '../components/GridApiContext';
 import { GridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 import { GridRootPropsContext } from './GridRootPropsContext';
+import { GridConfigurationContext } from '../components/GridConfigurationContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function GridContextProvider({
   privateApiRef,
+  configuration,
   props,
   children
 }) {
   const apiRef = React.useRef(privateApiRef.current.getPublicApi());
-  return /*#__PURE__*/_jsx(GridRootPropsContext.Provider, {
-    value: props,
-    children: /*#__PURE__*/_jsx(GridPrivateApiContext.Provider, {
-      value: privateApiRef,
-      children: /*#__PURE__*/_jsx(GridApiContext.Provider, {
-        value: apiRef,
-        children: children
+  return /*#__PURE__*/_jsx(GridConfigurationContext.Provider, {
+    value: configuration,
+    children: /*#__PURE__*/_jsx(GridRootPropsContext.Provider, {
+      value: props,
+      children: /*#__PURE__*/_jsx(GridPrivateApiContext.Provider, {
+        value: privateApiRef,
+        children: /*#__PURE__*/_jsx(GridApiContext.Provider, {
+          value: apiRef,
+          children: children
+        })
       })
     })
   });

package/modern/hooks/core/useGridStateInitialization.js

@@ -48,9 +48,7 @@ export const useGridStateInitialization = apiRef => {
     if (!ignoreSetState) {
       // We always assign it as we mutate rows for perf reason.
       apiRef.current.state = newState;
-      if (apiRef.current.publishEvent) {
-        apiRef.current.publishEvent('stateChange', newState);
-      }
+      apiRef.current.publishEvent('stateChange', newState);
       apiRef.current.store.update(newState);
     }
     if (updatedControlStateIds.length === 1) {

package/modern/hooks/features/dimensions/useGridDimensions.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_ownerDocument as ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback, unstable_ownerWindow as ownerWindow } from '@mui/utils';
+import { throttle } from '@mui/x-internals/throttle';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { throttle } from '../../../utils/throttle';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnsTotalWidthSelector, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
 import { gridDimensionsSelector } from './gridDimensionsSelectors';

package/modern/hooks/features/export/serializers/csvSerializer.js

@@ -1,6 +1,9 @@
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../../colDef';
 import { warnOnce } from '../../../../internals/utils/warning';
 function sanitizeCellValue(value, csvOptions) {
+  if (value === null || value === undefined) {
+    return '';
+  }
   const valueStr = typeof value === 'string' ? value : `${value}`;
   if (csvOptions.shouldAppendQuotes || csvOptions.escapeFormulas) {
     const escapedValue = valueStr.replace(/"/g, '""');
@@ -51,9 +54,7 @@ class CSVRow {
     if (!this.isEmpty) {
       this.rowString += this.options.csvOptions.delimiter;
     }
-    if (value === null || value === undefined) {
-      this.rowString += '';
-    } else if (typeof this.options.sanitizeCellValue === 'function') {
+    if (typeof this.options.sanitizeCellValue === 'function') {
       this.rowString += this.options.sanitizeCellValue(value, this.options.csvOptions);
     } else {
       this.rowString += value;