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

package/modern/hooks/utils/useGridApiEventHandler.js

@@ -1,32 +1,52 @@
 import * as React from 'react';
 import { TimerBasedCleanupTracking } from "../../utils/cleanupTracking/TimerBasedCleanupTracking.js";
 import { FinalizationRegistryBasedCleanupTracking } from "../../utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.js";
-/**
- * Signal to the underlying logic what version of the public component API
- * of the Data Grid is exposed.
- */
-var GridSignature = /*#__PURE__*/function (GridSignature) {
-  GridSignature["DataGrid"] = "DataGrid";
-  GridSignature["DataGridPro"] = "DataGridPro";
-  GridSignature["DataGridPremium"] = "DataGridPremium";
-  return GridSignature;
-}(GridSignature || {});
-// We use class to make it easier to detect in heap snapshots by name
-class ObjectToBeRetainedByReact {}
-
 // Based on https://github.com/Bnaya/use-dispose-uncommitted/blob/main/src/finalization-registry-based-impl.ts
 // Check https://github.com/facebook/react/issues/15317 to get more information
-export function createUseGridApiEventHandler(registryContainer) {
-  let cleanupTokensCounter = 0;
-  return function useGridApiEventHandler(apiRef, eventName, handler, options) {
-    if (registryContainer.registry === null) {
-      registryContainer.registry = typeof FinalizationRegistry !== 'undefined' ? new FinalizationRegistryBasedCleanupTracking() : new TimerBasedCleanupTracking();
+
+// We use class to make it easier to detect in heap snapshots by name
+class ObjectToBeRetainedByReact {
+  static create() {
+    return new ObjectToBeRetainedByReact();
+  }
+}
+const registryContainer = {
+  current: createRegistry()
+};
+let cleanupTokensCounter = 0;
+export function useGridApiEventHandler(apiRef, eventName, handler, options) {
+  const objectRetainedByReact = React.useState(ObjectToBeRetainedByReact.create)[0];
+  const subscription = React.useRef(null);
+  const handlerRef = React.useRef(null);
+  handlerRef.current = handler;
+  const cleanupTokenRef = React.useRef(null);
+  if (!subscription.current && handlerRef.current) {
+    const enhancedHandler = (params, event, details) => {
+      if (!event.defaultMuiPrevented) {
+        handlerRef.current?.(params, event, details);
+      }
+    };
+    subscription.current = apiRef.current.subscribeEvent(eventName, enhancedHandler, options);
+    cleanupTokensCounter += 1;
+    cleanupTokenRef.current = {
+      cleanupToken: cleanupTokensCounter
+    };
+    registryContainer.current.register(objectRetainedByReact,
+    // The callback below will be called once this reference stops being retained
+    () => {
+      subscription.current?.();
+      subscription.current = null;
+      cleanupTokenRef.current = null;
+    }, cleanupTokenRef.current);
+  } else if (!handlerRef.current && subscription.current) {
+    subscription.current();
+    subscription.current = null;
+    if (cleanupTokenRef.current) {
+      registryContainer.current.unregister(cleanupTokenRef.current);
+      cleanupTokenRef.current = null;
     }
-    const [objectRetainedByReact] = React.useState(new ObjectToBeRetainedByReact());
-    const subscription = React.useRef(null);
-    const handlerRef = React.useRef(null);
-    handlerRef.current = handler;
-    const cleanupTokenRef = React.useRef(null);
+  }
+  React.useEffect(() => {
     if (!subscription.current && handlerRef.current) {
       const enhancedHandler = (params, event, details) => {
         if (!event.defaultMuiPrevented) {
@@ -34,62 +54,35 @@ export function createUseGridApiEventHandler(registryContainer) {
         }
       };
       subscription.current = apiRef.current.subscribeEvent(eventName, enhancedHandler, options);
-      cleanupTokensCounter += 1;
-      cleanupTokenRef.current = {
-        cleanupToken: cleanupTokensCounter
-      };
-      registryContainer.registry.register(objectRetainedByReact,
-      // The callback below will be called once this reference stops being retained
-      () => {
-        subscription.current?.();
-        subscription.current = null;
-        cleanupTokenRef.current = null;
-      }, cleanupTokenRef.current);
-    } else if (!handlerRef.current && subscription.current) {
-      subscription.current();
-      subscription.current = null;
-      if (cleanupTokenRef.current) {
-        registryContainer.registry.unregister(cleanupTokenRef.current);
-        cleanupTokenRef.current = null;
-      }
     }
-    React.useEffect(() => {
-      if (!subscription.current && handlerRef.current) {
-        const enhancedHandler = (params, event, details) => {
-          if (!event.defaultMuiPrevented) {
-            handlerRef.current?.(params, event, details);
-          }
-        };
-        subscription.current = apiRef.current.subscribeEvent(eventName, enhancedHandler, options);
-      }
-      if (cleanupTokenRef.current && registryContainer.registry) {
-        // If the effect was called, it means that this render was committed
-        // so we can trust the cleanup function to remove the listener.
-        registryContainer.registry.unregister(cleanupTokenRef.current);
-        cleanupTokenRef.current = null;
-      }
-      return () => {
-        subscription.current?.();
-        subscription.current = null;
-      };
-    }, [apiRef, eventName, options]);
-  };
+    if (cleanupTokenRef.current && registryContainer.current) {
+      // If the effect was called, it means that this render was committed
+      // so we can trust the cleanup function to remove the listener.
+      registryContainer.current.unregister(cleanupTokenRef.current);
+      cleanupTokenRef.current = null;
+    }
+    return () => {
+      subscription.current?.();
+      subscription.current = null;
+    };
+  }, [apiRef, eventName, options]);
 }
-const registryContainer = {
-  registry: null
+const OPTIONS_IS_FIRST = {
+  isFirst: true
 };
+export function useGridApiOptionHandler(apiRef, eventName, handler) {
+  useGridApiEventHandler(apiRef, eventName, handler, OPTIONS_IS_FIRST);
+}
 
 // TODO: move to @mui/x-data-grid/internals
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const unstable_resetCleanupTracking = () => {
-  registryContainer.registry?.reset();
-  registryContainer.registry = null;
-};
-export const useGridApiEventHandler = createUseGridApiEventHandler(registryContainer);
-const optionsSubscriberOptions = {
-  isFirst: true
-};
-export function useGridApiOptionHandler(apiRef, eventName, handler) {
-  useGridApiEventHandler(apiRef, eventName, handler, optionsSubscriberOptions);
+export function unstable_resetCleanupTracking() {
+  registryContainer.current?.reset();
+  registryContainer.current = createRegistry();
 }
-export { GridSignature };
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const internal_registryContainer = registryContainer;
+function createRegistry() {
+  return typeof FinalizationRegistry !== 'undefined' ? new FinalizationRegistryBasedCleanupTracking() : new TimerBasedCleanupTracking();
+}

package/modern/hooks/utils/useGridSelector.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 import { warnOnce } from '@mui/x-internals/warning';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { useLazyRef } from "./useLazyRef.js";
-import { useOnMount } from "./useOnMount.js";
 function isOutputSelector(selector) {
   return selector.acceptsApiRef;
 }
@@ -33,8 +33,10 @@ const createRefs = () => ({
   state: null,
   equals: null,
   selector: null,
-  args: null
+  args: undefined
 });
+const EMPTY = [];
+const emptyGetSnapshot = () => null;
 export const useGridSelector = (apiRef, selector, args = undefined, equals = defaultCompare) => {
   if (process.env.NODE_ENV !== 'production') {
     if (!apiRef.current.state) {
@@ -58,14 +60,30 @@ export const useGridSelector = (apiRef, selector, args = undefined, equals = def
       setState(newState);
     }
   }
-  useOnMount(() => {
-    return apiRef.current.store.subscribe(() => {
+  const subscribe = React.useCallback(() => {
+    if (refs.current.subscription) {
+      return null;
+    }
+    refs.current.subscription = apiRef.current.store.subscribe(() => {
       const newState = applySelector(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
       if (!refs.current.equals(refs.current.state, newState)) {
         refs.current.state = newState;
         setState(newState);
       }
     });
-  });
+    return null;
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  EMPTY);
+  const unsubscribe = React.useCallback(() => {
+    return () => {
+      if (refs.current.subscription) {
+        refs.current.subscription();
+        refs.current.subscription = undefined;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, EMPTY);
+  useSyncExternalStore(unsubscribe, subscribe, emptyGetSnapshot);
   return state;
 };

package/modern/hooks/utils/useIsSSR.js

@@ -0,0 +1,5 @@
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+const emptySubscribe = () => () => {};
+const clientSnapshot = () => false;
+const serverSnapshot = () => true;
+export const useIsSSR = () => useSyncExternalStore(emptySubscribe, clientSnapshot, serverSnapshot);

package/modern/index.js

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

package/modern/internals/index.js

@@ -4,6 +4,7 @@ export { GridVirtualScrollerRenderZone } from "../components/virtualization/Grid
 export { GridHeaders } from "../components/GridHeaders.js";
 export { GridBaseColumnHeaders } from "../components/columnHeaders/GridBaseColumnHeaders.js";
 export { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from "../constants/defaultGridSlotsComponents.js";
+export * from "../constants/signature.js";
 export { getGridFilter } from "../components/panel/filterPanel/GridFilterPanel.js";
 export { getValueOptions } from "../components/panel/filterPanel/filterPanelUtils.js";
 export { useGridRegisterPipeProcessor } from "../hooks/core/pipeProcessing/index.js";
@@ -23,6 +24,7 @@ export { useGridDensity, densityStateInitializer } from "../hooks/features/densi
 export { useGridCsvExport } from "../hooks/features/export/useGridCsvExport.js";
 export { useGridPrintExport } from "../hooks/features/export/useGridPrintExport.js";
 export { useGridFilter, filterStateInitializer } from "../hooks/features/filter/useGridFilter.js";
+export { defaultGridFilterLookup } from "../hooks/features/filter/gridFilterState.js";
 export { passFilterLogic } from "../hooks/features/filter/gridFilterUtils.js";
 export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector } from "../hooks/features/filter/gridFilterSelector.js";
 export { isSingleSelectColDef } from "../components/panel/filterPanel/filterPanelUtils.js";
@@ -43,7 +45,6 @@ export { useGridParamsApi } from "../hooks/features/rows/useGridParamsApi.js";
 export { getRowIdFromRowModel, GRID_ID_AUTOGENERATED } from "../hooks/features/rows/gridRowsUtils.js";
 export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector } from "../hooks/features/rows/gridRowsSelector.js";
 export { headerFilteringStateInitializer, useGridHeaderFiltering } from "../hooks/features/headerFiltering/useGridHeaderFiltering.js";
-export { calculatePinnedRowsHeight } from "../hooks/features/rows/gridRowsUtils.js";
 export { useGridRowSelection, rowSelectionStateInitializer } from "../hooks/features/rowSelection/useGridRowSelection.js";
 export { useGridRowSelectionPreProcessors } from "../hooks/features/rowSelection/useGridRowSelectionPreProcessors.js";
 export { useGridSorting, sortingStateInitializer } from "../hooks/features/sorting/useGridSorting.js";
@@ -51,6 +52,7 @@ export { gridSortedRowIndexLookupSelector } from "../hooks/features/sorting/grid
 export { useGridScroll } from "../hooks/features/scroll/useGridScroll.js";
 export { useGridEvents } from "../hooks/features/events/useGridEvents.js";
 export { dimensionsStateInitializer, useGridDimensions } from "../hooks/features/dimensions/useGridDimensions.js";
+export * from "../hooks/features/dimensions/gridDimensionsSelectors.js";
 export { useGridStatePersistence } from "../hooks/features/statePersistence/useGridStatePersistence.js";
 export { useGridVirtualScroller, EMPTY_DETAIL_PANELS } from "../hooks/features/virtualization/useGridVirtualScroller.js";
 export * from "../hooks/features/virtualization/index.js";

package/modern/internals/utils/propValidation.js

@@ -1,6 +1,6 @@
 import { warnOnce } from '@mui/x-internals/warning';
 import { isNumber } from "../../utils/utils.js";
-import { GridSignature } from "../../hooks/utils/useGridApiEventHandler.js";
+import { GridSignature } from "../../constants/signature.js";
 export const propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined, props => props.paginationMode === 'client' && props.paginationMeta != null && ['MUI X: Usage of the `paginationMeta` prop with client-side pagination (`paginationMode="client"`) has no effect.', '`paginationMeta` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.signature === GridSignature.DataGrid && props.paginationMode === 'client' && isNumber(props.rowCount) && ['MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect.', '`rowCount` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.paginationMode === 'server' && props.rowCount == null && !props.unstable_dataSource && ["MUI X: The `rowCount` prop must be passed using `paginationMode='server'`", 'For more detail, see http://mui.com/components/data-grid/pagination/#index-based-pagination'].join('\n') || undefined];
 export function validateProps(props, validators) {
   validators.forEach(validator => {

package/node/DataGrid/useDataGridComponent.js

@@ -47,7 +47,6 @@ const useDataGridComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
-  (0, _useGridInitializeState.useGridInitializeState)(_useGridDimensions.dimensionsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRowSelection.rowSelectionStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumns.columnsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridPagination.paginationStateInitializer, apiRef, props);
@@ -60,10 +59,11 @@ const useDataGridComponent = (inputApiRef, props) => {
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRowSpanning.rowSpanningStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridDensity.densityStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnResize.columnResizeStateInitializer, apiRef, props);
-  (0, _useGridInitializeState.useGridInitializeState)(_useGridRowsMeta.rowsMetaStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnMenu.columnMenuStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnGrouping.columnGroupsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_virtualization.virtualizationStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridDimensions.dimensionsStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridRowsMeta.rowsMetaStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridListView.listViewStateInitializer, apiRef, props);
   (0, _useGridKeyboardNavigation.useGridKeyboardNavigation)(apiRef, props);
   (0, _useGridRowSelection.useGridRowSelection)(apiRef, props);

package/node/components/GridRow.js

@@ -87,7 +87,10 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
   const isRowReorderingEnabled = (0, _useGridSelector.useGridSelector)(apiRef, isRowReorderingEnabledSelector, rowReordering);
   const handleRef = (0, _utils.unstable_useForkRef)(ref, refProp);
   const rowNode = apiRef.current.getRowNode(rowId);
-  const editing = (0, _useGridSelector.useGridSelector)(apiRef, _gridEditingSelectors.gridRowIsEditingSelector, rowId);
+  const editing = (0, _useGridSelector.useGridSelector)(apiRef, _gridEditingSelectors.gridRowIsEditingSelector, {
+    rowId,
+    editMode: rootProps.editMode
+  });
   const editable = rootProps.editMode === _gridEditRowModel.GridEditModes.Row;
   const hasFocusCell = focusedColumnIndex !== undefined;
   const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < firstColumnIndex;
@@ -305,7 +308,8 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
       role: "presentation",
       className: (0, _clsx.default)(_gridClasses.gridClasses.cell, _gridClasses.gridClasses.cellEmpty)
     }), rightCells, scrollbarWidth !== 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollbarFillerCell.GridScrollbarFillerCell, {
-      pinnedRight: pinnedColumns.right.length > 0
+      pinnedRight: pinnedColumns.right.length > 0,
+      borderTop: !isFirstVisible
     })]
   }));
 });

package/node/components/GridScrollArea.js

@@ -20,9 +20,9 @@ var _useGridApiEventHandler = require("../hooks/utils/useGridApiEventHandler");
 var _useGridSelector = require("../hooks/utils/useGridSelector");
 var _gridDimensionsSelectors = require("../hooks/features/dimensions/gridDimensionsSelectors");
 var _densitySelector = require("../hooks/features/density/densitySelector");
-var _gridColumnsSelector = require("../hooks/features/columns/gridColumnsSelector");
 var _useTimeout = require("../hooks/utils/useTimeout");
 var _gridColumnsUtils = require("../hooks/features/columns/gridColumnsUtils");
+var _createSelector = require("../utils/createSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 const CLIFF = 1;
 const SLOP = 1.5;
@@ -57,21 +57,38 @@ const GridScrollAreaRawRoot = (0, _system.styled)('div', {
     right: 0
   }
 }));
-function GridScrollAreaRaw(props) {
+const offsetSelector = (0, _createSelector.createSelector)(_gridDimensionsSelectors.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 = (0, _useGridApiContext.useGridApiContext)();
+  const [dragging, setDragging] = React.useState(false);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragStart', () => setDragging(true));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragEnd', () => setDragging(false));
+  if (!dragging) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridScrollAreaContent, (0, _extends2.default)({}, props));
+}
+function GridScrollAreaContent(props) {
   const {
-    scrollDirection
+    scrollDirection,
+    scrollPosition
   } = props;
   const rootRef = React.useRef(null);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const timeout = (0, _useTimeout.useTimeout)();
   const densityFactor = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityFactorSelector);
-  const columnsTotalWidth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnsTotalWidthSelector);
-  const dimensions = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridDimensionsSelector);
-  const scrollPosition = React.useRef({
-    left: 0,
-    top: 0
-  });
+  const columnsTotalWidth = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridColumnsTotalWidthSelector);
+  const sideOffset = (0, _useGridSelector.useGridSelector)(apiRef, offsetSelector, scrollDirection);
   const getCanScrollMore = () => {
+    const dimensions = (0, _gridDimensionsSelectors.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;
@@ -83,7 +100,6 @@ function GridScrollAreaRaw(props) {
     }
     return false;
   };
-  const [dragging, setDragging] = React.useState(false);
   const [canScrollMore, setCanScrollMore] = React.useState(getCanScrollMore);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const ownerState = (0, _extends2.default)({}, rootProps, {
@@ -97,12 +113,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 = (0, _utils.unstable_useEventCallback)(event => {
@@ -127,16 +142,8 @@ function GridScrollAreaRaw(props) {
       });
     });
   });
-  const handleColumnHeaderDragStart = (0, _utils.unstable_useEventCallback)(() => {
-    setDragging(true);
-  });
-  const handleColumnHeaderDragEnd = (0, _utils.unstable_useEventCallback)(() => {
-    setDragging(false);
-  });
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'scrollPositionChange', handleScrolling);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragStart', handleColumnHeaderDragStart);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragEnd', handleColumnHeaderDragEnd);
-  if (!dragging || !canScrollMore) {
+  if (!canScrollMore) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridScrollAreaRawRoot, {
@@ -147,4 +154,4 @@ function GridScrollAreaRaw(props) {
     style: style
   });
 }
-const GridScrollArea = exports.GridScrollArea = (0, _fastMemo.fastMemo)(GridScrollAreaRaw);
+const GridScrollArea = exports.GridScrollArea = (0, _fastMemo.fastMemo)(GridScrollAreaWrapper);

package/node/components/GridSkeletonLoadingOverlay.js

@@ -18,6 +18,7 @@ var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _hooks = require("../hooks");
 var _constants = require("../internals/constants");
+var _gridDimensionsSelectors = require("../hooks/features/dimensions/gridDimensionsSelectors");
 var _gridClasses = require("../constants/gridClasses");
 var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
 var _cellBorderUtils = require("../utils/cellBorderUtils");
@@ -62,7 +63,7 @@ const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = (0, _for
   const dimensions = (0, _hooks.useGridSelector)(apiRef, _hooks.gridDimensionsSelector);
   const viewportHeight = dimensions?.viewportInnerSize.height ?? 0;
   const skeletonRowsCount = Math.ceil(viewportHeight / dimensions.rowHeight);
-  const totalWidth = (0, _hooks.useGridSelector)(apiRef, _hooks.gridColumnsTotalWidthSelector);
+  const totalWidth = (0, _hooks.useGridSelector)(apiRef, _gridDimensionsSelectors.gridColumnsTotalWidthSelector);
   const positions = (0, _hooks.useGridSelector)(apiRef, _hooks.gridColumnPositionsSelector);
   const inViewportCount = React.useMemo(() => positions.filter(value => value <= totalWidth).length, [totalWidth, positions]);
   const allVisibleColumns = (0, _hooks.useGridSelector)(apiRef, _hooks.gridVisibleColumnDefinitionsSelector);

package/node/components/containers/GridRoot.js

@@ -20,6 +20,7 @@ var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiCont
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _densitySelector = require("../../hooks/features/density/densitySelector");
+var _useIsSSR = require("../../hooks/utils/useIsSSR");
 var _GridHeader = require("../GridHeader");
 var _base = require("../base");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -45,16 +46,17 @@ const GridRoot = (0, _forwardRef.forwardRef)(function GridRoot(props, ref) {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const density = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensitySelector);
   const rootElementRef = apiRef.current.rootElementRef;
-  const handleRef = (0, _utils.unstable_useForkRef)(rootElementRef, ref);
+  const rootMountCallback = React.useCallback(node => {
+    if (node === null) {
+      return;
+    }
+    apiRef.current.publishEvent('rootMount', node);
+  }, [apiRef]);
+  const handleRef = (0, _utils.unstable_useForkRef)(rootElementRef, ref, rootMountCallback);
   const ownerState = rootProps;
   const classes = useUtilityClasses(ownerState, density);
-
-  // Our implementation of <NoSsr />
-  const [mountedState, setMountedState] = React.useState(false);
-  (0, _utils.unstable_useEnhancedEffect)(() => {
-    setMountedState(true);
-  }, []);
-  if (!mountedState) {
+  const isSSR = (0, _useIsSSR.useIsSSR)();
+  if (isSSR) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridRootStyles.GridRootStyles, (0, _extends2.default)({

package/node/components/containers/GridRootStyles.js

@@ -10,7 +10,6 @@ var _styles = require("@mui/material/styles");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
-var _gridDimensionsSelectors = require("../../hooks/features/dimensions/gridDimensionsSelectors");
 function getBorderColor(theme) {
   if (theme.vars) {
     return theme.vars.palette.TableCell.border;
@@ -42,6 +41,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);
 const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
@@ -272,7 +272,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
   theme: t
 }) => {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
-  const dimensions = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridDimensionsSelector);
+  const shouldShowBorderTopRightRadius = (0, _useGridSelector.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;
@@ -427,7 +427,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       borderTopLeftRadius: 'calc(var(--unstable_DataGrid-radius) - 1px)'
     },
     [`&.${_gridClasses.gridClasses['root--noToolbar']} [aria-rowindex="1"] .${_gridClasses.gridClasses['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
     },
     [`& .${_gridClasses.gridClasses.columnHeaderCheckbox}, & .${_gridClasses.gridClasses.cellCheckbox}`]: {
       padding: 0,

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

@@ -11,14 +11,15 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
-var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 var _styles = require("@mui/material/styles");
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _keyboardUtils = require("../../../utils/keyboardUtils");
+var _assert = require("../../../utils/assert");
 var _gridClasses = require("../../../constants/gridClasses");
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["hideMenu", "colDef", "id", "labelledby", "className", "children", "open"];
-const StyledMenuList = (0, _styles.styled)(_MenuList.default)(() => ({
+const StyledMenuList = (0, _styles.styled)(_assert.NotRendered)(() => ({
   minWidth: 248
 }));
 const GridColumnMenuContainer = exports.GridColumnMenuContainer = (0, _forwardRef.forwardRef)(function GridColumnMenuContainer(props, ref) {
@@ -31,6 +32,7 @@ const GridColumnMenuContainer = exports.GridColumnMenuContainer = (0, _forwardRe
       open
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const handleListKeyDown = React.useCallback(event => {
     if (event.key === 'Tab') {
       event.preventDefault();
@@ -40,6 +42,7 @@ const GridColumnMenuContainer = exports.GridColumnMenuContainer = (0, _forwardRe
     }
   }, [hideMenu]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledMenuList, (0, _extends2.default)({
+    as: rootProps.slots.baseMenuList,
     id: id,
     className: (0, _clsx.default)(_gridClasses.gridClasses.menuList, className),
     "aria-labelledby": labelledby,

package/node/components/virtualization/GridMainContainer.js

@@ -26,7 +26,7 @@ const Element = (0, _system.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,