@mui/x-data-grid 8.0.0-alpha.10 → 8.0.0-alpha.11

package/CHANGELOG.md

@@ -5,6 +5,110 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## **8.0.0-alpha.11**
+
+_Feb 7, 2025_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡ Mount and resize performance improvements for the Data Grid
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@lauri865.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @Janpot, @KenanYusuf, @LukasTy, @MBilalShafi, @noraleonte, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- `createUseGridApiEventHandler()` is not exported anymore.
+- The `filteredRowsLookup` object of the filter state does not contain `true` values anymore. If the row is filtered out, the value is `false`. Otherwise, the row id is not present in the object.
+  This change only impacts you if you relied on `filteredRowsLookup` to get ids of filtered rows. In this case,use `gridDataRowIdsSelector` selector to get row ids and check `filteredRowsLookup` for `false` values:
+
+  ```diff
+   const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
+  -const filteredRowIds = Object.keys(filteredRowsLookup).filter((rowId) => filteredRowsLookup[rowId] === true);
+  +const rowIds = gridDataRowIdsSelector(apiRef);
+  +const filteredRowIds = rowIds.filter((rowId) => filteredRowsLookup[rowId] !== false);
+  ```
+
+- The `visibleRowsLookup` state does not contain `true` values anymore. If the row is not visible, the value is `false`. Otherwise, the row id is not present in the object:
+
+  ```diff
+   const visibleRowsLookup = gridVisibleRowsLookupSelector(apiRef);
+  -const isRowVisible = visibleRowsLookup[rowId] === true;
+  +const isRowVisible = visibleRowsLookup[rowId] !== false;
+  ```
+
+#### `@mui/x-data-grid@8.0.0-alpha.11`
+
+- [DataGrid] Avoid `<GridRoot />` double-render pass on mount in SPA mode (#15648) @lauri865
+- [DataGrid] Fix loading overlay not in sync with scroll (#16437) @MBilalShafi
+- [DataGrid] Refactor: remove material `MenuList` import (#16444) @romgrk
+- [DataGrid] Refactor: simplify `useGridApiEventHandler()` (#16479) @romgrk
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.11` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.0.0-alpha.11`, plus:
+
+- [DataGridPro] Fix the return type of `useGridApiContext()` for Pro and Premium packages on React < 19 (#16441) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.11` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.0.0-alpha.11`, plus:
+
+- [DataGridPremium] Fix "no rows" overlay not showing with active aggregation (#16466) @KenanYusuf
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-alpha.11`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.11` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.0.0-alpha.11`, plus:
+
+- [DateRangeCalendar] Support arrow navigation with multiple months rendered (#16363) @flaviendelangle
+- [DateRangePicker] Fix `currentMonthCalendarPosition` prop behavior on mobile (#16455) @LukasTy
+- [DateRangePicker] Fix vertical alignment for multi input fields (#16489) @noraleonte
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-alpha.11`
+
+- [charts] Add `color` prop to `Sparkline` and deprecate `colors` (#16477) @bernardobelchior
+- [charts] Make typescript more flexible about plugins and their params (#16478) @alexfauquette
+- [charts] Remove component for axis event listener (#16314) @alexfauquette
+
+#### `@mui/x-charts-pro@8.0.0-alpha.11` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.0.0-alpha.11`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.11`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.11` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.0.0-alpha.11`.
+
+### Docs
+
+- [docs] Update charts colors default value (#16484) @bernardobelchior
+
+### Core
+
+- [core] Fix corepack and pnpm installation in CircleCI (#16434) @flaviendelangle
+- [code-infra] Update monorepo (#16112) @Janpot
+- [test] Avoid test warning when running on React 18 (#16486) @LukasTy
+- [test] Disable `react-transition-group` transitions in unit testing (#16288) @lauri865
+
 ## 8.0.0-alpha.10
 
 _Jan 30, 2025_
@@ -50,6 +154,7 @@ Following are all team members who have contributed to this release:
   +  },
    });
   ```
+
 - The `detailPanels`, `pinnedColumns`, and `pinnedRowsRenderZone` classes have been removed.
 - Return type of the `useGridApiRef()` hook and the type of `apiRef` prop are updated to explicitly include the possibilty of `null`. In addition to this, `useGridApiRef()` returns a reference that is initialized with `null` instead of `{}`.
 
@@ -91,7 +196,7 @@ Same changes as in `@mui/x-data-grid-pro@8.0.0-alpha.10`.
 
 #### Breaking changes
 
-- The component passed to the `field` slot no longer receives the `ref`,  `disabled`, `className`, `sx`, `label`, `name`, `formatDensity`, `enableAccessibleFieldDOMStructure`, `selectedSections`, `onSelectedSectionsChange` and `inputRef` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-field)
+- The component passed to the `field` slot no longer receives the `ref`, `disabled`, `className`, `sx`, `label`, `name`, `formatDensity`, `enableAccessibleFieldDOMStructure`, `selectedSections`, `onSelectedSectionsChange` and `inputRef` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-field)
 - The `MuiPickersPopper` theme entry have been renamed `MuiPickerPopper` and some of its props have been removed — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#muipickerspopper)
 
 #### `@mui/x-date-pickers@8.0.0-alpha.10`
@@ -111,7 +216,7 @@ Same changes as in `@mui/x-date-pickers@8.0.0-alpha.10`.
 
 - Replace `legend.position.horizontal` from `"left" | "middle" | "right"` to `"start" | "center" | "end"`.
   This is to align with the CSS values and reflect the RTL ability of the legend component.
-- The default colors have changed. To keep using the old palette. It is possible to import `blueberryTwilightPalette` from  `@mui/x-charts/colorPalettes` and set it on the `colors` property of charts.
+- The default colors have changed. To keep using the old palette. It is possible to import `blueberryTwilightPalette` from `@mui/x-charts/colorPalettes` and set it on the `colors` property of charts.
 - The `id` property is now optional on the `Pie` and `Scatter` data types.
 
 #### `@mui/x-charts@8.0.0-alpha.10`

package/DataGrid/useDataGridComponent.js

@@ -41,7 +41,6 @@ export const useDataGridComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
-  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
   useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(paginationStateInitializer, apiRef, props);
@@ -54,10 +53,11 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridInitializeState(rowSpanningStateInitializer, apiRef, props);
   useGridInitializeState(densityStateInitializer, apiRef, props);
   useGridInitializeState(columnResizeStateInitializer, apiRef, props);
-  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridInitializeState(virtualizationStateInitializer, apiRef, props);
+  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
+  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(listViewStateInitializer, apiRef, props);
   useGridKeyboardNavigation(apiRef, props);
   useGridRowSelection(apiRef, props);

package/components/GridRow.js

@@ -80,7 +80,10 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
   const isRowReorderingEnabled = useGridSelector(apiRef, isRowReorderingEnabledSelector, rowReordering);
   const handleRef = useForkRef(ref, refProp);
   const rowNode = apiRef.current.getRowNode(rowId);
-  const editing = useGridSelector(apiRef, gridRowIsEditingSelector, rowId);
+  const editing = useGridSelector(apiRef, gridRowIsEditingSelector, {
+    rowId,
+    editMode: rootProps.editMode
+  });
   const editable = rootProps.editMode === GridEditModes.Row;
   const hasFocusCell = focusedColumnIndex !== undefined;
   const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < firstColumnIndex;
@@ -298,7 +301,8 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
       role: "presentation",
       className: clsx(gridClasses.cell, gridClasses.cellEmpty)
     }), rightCells, scrollbarWidth !== 0 && /*#__PURE__*/_jsx(ScrollbarFiller, {
-      pinnedRight: pinnedColumns.right.length > 0
+      pinnedRight: pinnedColumns.right.length > 0,
+      borderTop: !isFirstVisible
     })]
   }));
 });

package/components/GridScrollArea.d.ts

@@ -1,7 +1,10 @@
 import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
+import { GridScrollParams } from '../models/params/gridScrollParams';
 interface ScrollAreaProps {
     scrollDirection: 'left' | 'right';
+    scrollPosition: RefObject<GridScrollParams>;
 }
-declare function GridScrollAreaRaw(props: ScrollAreaProps): React.JSX.Element | null;
-export declare const GridScrollArea: typeof GridScrollAreaRaw;
+declare function GridScrollAreaWrapper(props: ScrollAreaProps): React.JSX.Element | null;
+export declare const GridScrollArea: typeof GridScrollAreaWrapper;
 export {};

package/components/GridScrollArea.js

@@ -11,11 +11,11 @@ import { getDataGridUtilityClass, gridClasses } from "../constants/index.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { useGridApiEventHandler } from "../hooks/utils/useGridApiEventHandler.js";
 import { useGridSelector } from "../hooks/utils/useGridSelector.js";
-import { gridDimensionsSelector } from "../hooks/features/dimensions/gridDimensionsSelectors.js";
+import { gridDimensionsSelector, gridColumnsTotalWidthSelector } from "../hooks/features/dimensions/gridDimensionsSelectors.js";
 import { gridDensityFactorSelector } from "../hooks/features/density/densitySelector.js";
-import { gridColumnsTotalWidthSelector } from "../hooks/features/columns/gridColumnsSelector.js";
 import { useTimeout } from "../hooks/utils/useTimeout.js";
 import { getTotalHeaderHeight } from "../hooks/features/columns/gridColumnsUtils.js";
+import { createSelector } from "../utils/createSelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const CLIFF = 1;
 const SLOP = 1.5;
@@ -50,21 +50,38 @@ const GridScrollAreaRawRoot = styled('div', {
     right: 0
   }
 }));
-function GridScrollAreaRaw(props) {
+const offsetSelector = createSelector(gridDimensionsSelector, (dimensions, direction) => {
+  if (direction === 'left') {
+    return dimensions.leftPinnedWidth;
+  }
+  if (direction === 'right') {
+    return dimensions.rightPinnedWidth + (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
+  }
+  return 0;
+});
+function GridScrollAreaWrapper(props) {
+  const apiRef = useGridApiContext();
+  const [dragging, setDragging] = React.useState(false);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', () => setDragging(true));
+  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', () => setDragging(false));
+  if (!dragging) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GridScrollAreaContent, _extends({}, props));
+}
+function GridScrollAreaContent(props) {
   const {
-    scrollDirection
+    scrollDirection,
+    scrollPosition
   } = props;
   const rootRef = React.useRef(null);
   const apiRef = useGridApiContext();
   const timeout = useTimeout();
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
   const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const scrollPosition = React.useRef({
-    left: 0,
-    top: 0
-  });
+  const sideOffset = useGridSelector(apiRef, offsetSelector, scrollDirection);
   const getCanScrollMore = () => {
+    const dimensions = gridDimensionsSelector(apiRef.current.state);
     if (scrollDirection === 'left') {
       // Only render if the user has not reached yet the start of the list
       return scrollPosition.current.left > 0;
@@ -76,7 +93,6 @@ function GridScrollAreaRaw(props) {
     }
     return false;
   };
-  const [dragging, setDragging] = React.useState(false);
   const [canScrollMore, setCanScrollMore] = React.useState(getCanScrollMore);
   const rootProps = useGridRootProps();
   const ownerState = _extends({}, rootProps, {
@@ -90,12 +106,11 @@ function GridScrollAreaRaw(props) {
     top: totalHeaderHeight - headerHeight
   };
   if (scrollDirection === 'left') {
-    style.left = dimensions.leftPinnedWidth;
+    style.left = sideOffset;
   } else if (scrollDirection === 'right') {
-    style.right = dimensions.rightPinnedWidth + (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
+    style.right = sideOffset;
   }
-  const handleScrolling = newScrollPosition => {
-    scrollPosition.current = newScrollPosition;
+  const handleScrolling = () => {
     setCanScrollMore(getCanScrollMore);
   };
   const handleDragOver = useEventCallback(event => {
@@ -120,16 +135,8 @@ function GridScrollAreaRaw(props) {
       });
     });
   });
-  const handleColumnHeaderDragStart = useEventCallback(() => {
-    setDragging(true);
-  });
-  const handleColumnHeaderDragEnd = useEventCallback(() => {
-    setDragging(false);
-  });
   useGridApiEventHandler(apiRef, 'scrollPositionChange', handleScrolling);
-  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleColumnHeaderDragStart);
-  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', handleColumnHeaderDragEnd);
-  if (!dragging || !canScrollMore) {
+  if (!canScrollMore) {
     return null;
   }
   return /*#__PURE__*/_jsx(GridScrollAreaRawRoot, {
@@ -140,4 +147,4 @@ function GridScrollAreaRaw(props) {
     style: style
   });
 }
-export const GridScrollArea = fastMemo(GridScrollAreaRaw);
+export const GridScrollArea = fastMemo(GridScrollAreaWrapper);

package/components/GridSkeletonLoadingOverlay.js

@@ -8,8 +8,9 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { gridColumnPositionsSelector, gridColumnsTotalWidthSelector, gridDimensionsSelector, gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, useGridApiEventHandler, useGridSelector } from "../hooks/index.js";
+import { gridColumnPositionsSelector, gridDimensionsSelector, gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, useGridApiEventHandler, useGridSelector } from "../hooks/index.js";
 import { PinnedColumnPosition } from "../internals/constants.js";
+import { gridColumnsTotalWidthSelector } from "../hooks/features/dimensions/gridDimensionsSelectors.js";
 import { getDataGridUtilityClass, gridClasses } from "../constants/gridClasses.js";
 import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
 import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from "../utils/cellBorderUtils.js";

package/components/containers/GridRoot.js

@@ -4,7 +4,7 @@ const _excluded = ["className", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_capitalize as capitalize, unstable_composeClasses as composeClasses } from '@mui/utils';
+import { unstable_useForkRef as useForkRef, unstable_capitalize as capitalize, unstable_composeClasses as composeClasses } from '@mui/utils';
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridRootStyles } from "./GridRootStyles.js";
@@ -13,6 +13,7 @@ import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiCon
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { gridDensitySelector } from "../../hooks/features/density/densitySelector.js";
+import { useIsSSR } from "../../hooks/utils/useIsSSR.js";
 import { GridHeader } from "../GridHeader.js";
 import { GridBody, GridFooterPlaceholder } from "../base/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -37,16 +38,17 @@ const GridRoot = forwardRef(function GridRoot(props, ref) {
   const apiRef = useGridPrivateApiContext();
   const density = useGridSelector(apiRef, gridDensitySelector);
   const rootElementRef = apiRef.current.rootElementRef;
-  const handleRef = useForkRef(rootElementRef, ref);
+  const rootMountCallback = React.useCallback(node => {
+    if (node === null) {
+      return;
+    }
+    apiRef.current.publishEvent('rootMount', node);
+  }, [apiRef]);
+  const handleRef = useForkRef(rootElementRef, ref, rootMountCallback);
   const ownerState = rootProps;
   const classes = useUtilityClasses(ownerState, density);
-
-  // Our implementation of <NoSsr />
-  const [mountedState, setMountedState] = React.useState(false);
-  useEnhancedEffect(() => {
-    setMountedState(true);
-  }, []);
-  if (!mountedState) {
+  const isSSR = useIsSSR();
+  if (isSSR) {
     return null;
   }
   return /*#__PURE__*/_jsxs(GridRootStyles, _extends({

package/components/containers/GridRootStyles.js

@@ -3,7 +3,6 @@ import { alpha, styled, darken, lighten, decomposeColor, recomposeColor } from '
 import { gridClasses as c } from "../../constants/gridClasses.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
-import { gridDimensionsSelector } from "../../hooks/features/dimensions/gridDimensionsSelectors.js";
 function getBorderColor(theme) {
   if (theme.vars) {
     return theme.vars.palette.TableCell.border;
@@ -35,6 +34,7 @@ const separatorIconDragStyles = {
 // Emotion thinks it knows better than us which selector we should use.
 // https://github.com/emotion-js/emotion/issues/1105#issuecomment-1722524968
 const ignoreSsrWarning = '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';
+const shouldShowBorderTopRightRadiusSelector = state => state.dimensions.hasScrollX && (!state.dimensions.hasScrollY || state.dimensions.scrollbarSize === 0);
 export const GridRootStyles = styled('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
@@ -265,7 +265,7 @@ export const GridRootStyles = styled('div', {
   theme: t
 }) => {
   const apiRef = useGridPrivateApiContext();
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const shouldShowBorderTopRightRadius = useGridSelector(apiRef, shouldShowBorderTopRightRadiusSelector);
   const borderColor = getBorderColor(t);
   const radius = t.shape.borderRadius;
   const background = (t.vars || t).palette.DataGrid?.bg ?? (t.vars || t).palette.background.default;
@@ -420,7 +420,7 @@ export const GridRootStyles = styled('div', {
       borderTopLeftRadius: 'calc(var(--unstable_DataGrid-radius) - 1px)'
     },
     [`&.${c['root--noToolbar']} [aria-rowindex="1"] .${c['columnHeader--last']}`]: {
-      borderTopRightRadius: dimensions.hasScrollX && (!dimensions.hasScrollY || dimensions.scrollbarSize === 0) ? 'calc(var(--unstable_DataGrid-radius) - 1px)' : undefined
+      borderTopRightRadius: shouldShowBorderTopRightRadius ? 'calc(var(--unstable_DataGrid-radius) - 1px)' : undefined
     },
     [`& .${c.columnHeaderCheckbox}, & .${c.cellCheckbox}`]: {
       padding: 0,

package/components/menu/columnMenu/GridColumnMenuContainer.js

@@ -4,13 +4,14 @@ const _excluded = ["hideMenu", "colDef", "id", "labelledby", "className", "child
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import MenuList from '@mui/material/MenuList';
 import { styled } from '@mui/material/styles';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { isHideMenuKey } from "../../../utils/keyboardUtils.js";
+import { NotRendered } from "../../../utils/assert.js";
 import { gridClasses } from "../../../constants/gridClasses.js";
+import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledMenuList = styled(MenuList)(() => ({
+const StyledMenuList = styled(NotRendered)(() => ({
   minWidth: 248
 }));
 const GridColumnMenuContainer = forwardRef(function GridColumnMenuContainer(props, ref) {
@@ -23,6 +24,7 @@ const GridColumnMenuContainer = forwardRef(function GridColumnMenuContainer(prop
       open
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
   const handleListKeyDown = React.useCallback(event => {
     if (event.key === 'Tab') {
       event.preventDefault();
@@ -32,6 +34,7 @@ const GridColumnMenuContainer = forwardRef(function GridColumnMenuContainer(prop
     }
   }, [hideMenu]);
   return /*#__PURE__*/_jsx(StyledMenuList, _extends({
+    as: rootProps.slots.baseMenuList,
     id: id,
     className: clsx(gridClasses.menuList, className),
     "aria-labelledby": labelledby,

package/components/virtualization/GridMainContainer.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
-import { GridDimensions } from '../../hooks/features/dimensions';
 import { GridLoadingOverlayVariant } from '../GridLoadingOverlay';
 type OwnerState = Pick<DataGridProcessedProps, 'classes'> & {
-    dimensions: GridDimensions;
+    hasScrollX: boolean;
+    hasPinnedRight: boolean;
     loadingOverlayVariant: GridLoadingOverlayVariant | null;
 };
 export declare const GridMainContainer: React.ForwardRefExoticComponent<React.PropsWithChildren<{

package/components/virtualization/GridMainContainer.js

@@ -18,7 +18,7 @@ const Element = styled('div', {
     const {
       ownerState
     } = props;
-    return [styles.main, ownerState.dimensions.rightPinnedWidth > 0 && styles['main--hasPinnedRight'], ownerState.loadingOverlayVariant === 'skeleton' && styles['main--hasSkeletonLoadingOverlay']];
+    return [styles.main, ownerState.hasPinnedRight && styles['main--hasPinnedRight'], ownerState.loadingOverlayVariant === 'skeleton' && styles['main--hasSkeletonLoadingOverlay']];
   }
 })({
   flexGrow: 1,

package/components/virtualization/GridVirtualScroller.js

@@ -2,12 +2,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
+import { gridHasBottomFillerSelector, gridHasScrollXSelector, gridHasScrollYSelector } from "../../hooks/features/dimensions/gridDimensionsSelectors.js";
 import { GridScrollArea } from "../GridScrollArea.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { gridDimensionsSelector } from "../../hooks/features/dimensions/index.js";
 import { useGridVirtualScroller } from "../../hooks/features/virtualization/useGridVirtualScroller.js";
 import { useGridOverlays } from "../../hooks/features/overlays/useGridOverlays.js";
 import { GridHeaders } from "../GridHeaders.js";
@@ -22,12 +22,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    dimensions,
+    hasScrollX,
+    hasPinnedRight,
     loadingOverlayVariant
   } = ownerState;
   const slots = {
-    root: ['main', dimensions.rightPinnedWidth > 0 && 'main--hasPinnedRight', loadingOverlayVariant === 'skeleton' && 'main--hasSkeletonLoadingOverlay'],
-    scroller: ['virtualScroller', dimensions.hasScrollX && 'virtualScroller--hasScrollX']
+    root: ['main', hasPinnedRight && 'main--hasPinnedRight', loadingOverlayVariant === 'skeleton' && 'main--hasSkeletonLoadingOverlay'],
+    scroller: ['virtualScroller', hasScrollX && 'virtualScroller--hasScrollX']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
@@ -38,7 +39,7 @@ const Scroller = styled('div', {
     const {
       ownerState
     } = props;
-    return [styles.virtualScroller, ownerState.dimensions.hasScrollX && styles['virtualScroller--hasScrollX']];
+    return [styles.virtualScroller, ownerState.hasScrollX && styles['virtualScroller--hasScrollX']];
   }
 })({
   position: 'relative',
@@ -57,17 +58,22 @@ const Scroller = styled('div', {
   // See https://github.com/mui/mui-x/issues/10547
   zIndex: 0
 });
+const hasPinnedRightSelector = state => state.dimensions.rightPinnedWidth > 0;
 function GridVirtualScroller(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const hasScrollY = useGridSelector(apiRef, gridHasScrollYSelector);
+  const hasScrollX = useGridSelector(apiRef, gridHasScrollXSelector);
+  const hasPinnedRight = useGridSelector(apiRef, hasPinnedRightSelector);
+  const hasBottomFiller = useGridSelector(apiRef, gridHasBottomFillerSelector);
   const {
     getOverlay,
     overlaysProps
   } = useGridOverlays();
   const ownerState = {
     classes: rootProps.classes,
-    dimensions,
+    hasScrollX,
+    hasPinnedRight,
     loadingOverlayVariant: overlaysProps.loadingOverlayVariant
   };
   const classes = useUtilityClasses(ownerState);
@@ -79,18 +85,19 @@ function GridVirtualScroller(props) {
     getRenderZoneProps,
     getScrollbarVerticalProps,
     getScrollbarHorizontalProps,
-    getRows
+    getRows,
+    getScrollAreaProps
   } = virtualScroller;
   const rows = getRows();
   return /*#__PURE__*/_jsxs(Container, _extends({
     className: classes.root
   }, getContainerProps(), {
     ownerState: ownerState,
-    children: [/*#__PURE__*/_jsx(GridScrollArea, {
+    children: [/*#__PURE__*/_jsx(GridScrollArea, _extends({
       scrollDirection: "left"
-    }), /*#__PURE__*/_jsx(GridScrollArea, {
+    }, getScrollAreaProps())), /*#__PURE__*/_jsx(GridScrollArea, _extends({
       scrollDirection: "right"
-    }), /*#__PURE__*/_jsxs(Scroller, _extends({
+    }, getScrollAreaProps())), /*#__PURE__*/_jsxs(Scroller, _extends({
       className: classes.scroller
     }, getScrollerProps(), {
       ownerState: ownerState,
@@ -105,7 +112,7 @@ function GridVirtualScroller(props) {
             virtualScroller: virtualScroller
           })]
         }))
-      })), /*#__PURE__*/_jsx(SpaceFiller, {
+      })), hasBottomFiller && /*#__PURE__*/_jsx(SpaceFiller, {
         rowsLength: rows.length
       }), /*#__PURE__*/_jsx(BottomContainer, {
         children: /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
@@ -113,9 +120,9 @@ function GridVirtualScroller(props) {
           virtualScroller: virtualScroller
         })
       })]
-    })), dimensions.hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/_jsx(Scrollbar, _extends({
+    })), hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/_jsx(Scrollbar, _extends({
       position: "horizontal"
-    }, getScrollbarHorizontalProps())), dimensions.hasScrollY && /*#__PURE__*/_jsx(Scrollbar, _extends({
+    }, getScrollbarHorizontalProps())), hasScrollY && /*#__PURE__*/_jsx(Scrollbar, _extends({
       position: "vertical"
     }, getScrollbarVerticalProps())), props.children]
   }));

package/constants/index.d.ts

@@ -1,3 +1,4 @@
 export * from './envConstants';
 export * from './localeTextConstants';
 export * from './gridClasses';
+export * from './signature';

package/constants/index.js

@@ -1,3 +1,4 @@
 export * from "./envConstants.js";
 export * from "./localeTextConstants.js";
-export * from "./gridClasses.js";
+export * from "./gridClasses.js";
+export * from "./signature.js";

package/constants/signature.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Signal to the underlying logic what version of the public component API
+ * of the Data Grid is exposed.
+ */
+export declare enum GridSignature {
+    DataGrid = "DataGrid",
+    DataGridPro = "DataGridPro",
+    DataGridPremium = "DataGridPremium"
+}

package/constants/signature.js

@@ -0,0 +1,10 @@
+/**
+ * Signal to the underlying logic what version of the public component API
+ * of the Data Grid is exposed.
+ */
+export let GridSignature = /*#__PURE__*/function (GridSignature) {
+  GridSignature["DataGrid"] = "DataGrid";
+  GridSignature["DataGridPro"] = "DataGridPro";
+  GridSignature["DataGridPremium"] = "DataGridPremium";
+  return GridSignature;
+}({});

package/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.d.ts

@@ -1,4 +1,4 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommon } from '../../../models/api/gridApiCommon';
 import { GridPipeProcessorGroup, GridPipeProcessor } from './gridPipeProcessingApi';
-export declare const useGridRegisterPipeProcessor: <PrivateApi extends GridPrivateApiCommon, G extends GridPipeProcessorGroup>(apiRef: RefObject<PrivateApi>, group: G, callback: GridPipeProcessor<G>) => void;
+export declare const useGridRegisterPipeProcessor: <PrivateApi extends GridPrivateApiCommon, G extends GridPipeProcessorGroup>(apiRef: RefObject<PrivateApi>, group: G, callback: GridPipeProcessor<G>, enabled?: boolean) => void;

package/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.js

@@ -1,19 +1,21 @@
 import * as React from 'react';
 import { useFirstRender } from "../../utils/useFirstRender.js";
-export const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
+export const useGridRegisterPipeProcessor = (apiRef, group, callback, enabled = true) => {
   const cleanup = React.useRef(null);
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
   const registerPreProcessor = React.useCallback(() => {
     cleanup.current = apiRef.current.registerPipeProcessor(group, id.current, callback);
   }, [apiRef, callback, group]);
   useFirstRender(() => {
-    registerPreProcessor();
+    if (enabled) {
+      registerPreProcessor();
+    }
   });
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
-    } else {
+    } else if (enabled) {
       registerPreProcessor();
     }
     return () => {
@@ -22,5 +24,5 @@ export const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
         cleanup.current = null;
       }
     };
-  }, [registerPreProcessor]);
+  }, [registerPreProcessor, enabled]);
 };

package/hooks/core/useGridApiInitialization.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { EventManager } from '@mui/x-internals/EventManager';
 import { Store } from "../../utils/Store.js";
 import { useGridApiMethod } from "../utils/useGridApiMethod.js";
-import { GridSignature } from "../utils/useGridApiEventHandler.js";
+import { GridSignature } from "../../constants/signature.js";
 const SYMBOL_API_PRIVATE = Symbol('mui.api_private');
 const isSyntheticEvent = event => {
   return event.isPropagationStopped !== undefined;