@mui/x-data-grid 7.0.0-alpha.8 → 7.0.0-beta.0

package/legacy/components/toolbar/GridToolbarDensitySelector.js

@@ -1,8 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["onClick"];
 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 MenuItem from '@mui/material/MenuItem';
@@ -16,10 +15,12 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridClasses } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridToolbarDensitySelector(props, ref) {
-  var _rootProps$slotProps;
-  var onClick = props.onClick,
-    other = _objectWithoutProperties(props, _excluded);
+var GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridToolbarDensitySelector(props, ref) {
+  var _rootProps$slotProps, _rootProps$slotProps2;
+  var _props$slotProps = props.slotProps,
+    slotProps = _props$slotProps === void 0 ? {} : _props$slotProps;
+  var buttonProps = slotProps.button || {};
+  var tooltipProps = slotProps.tooltip || {};
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
   var densityValue = useGridSelector(apiRef, gridDensityValueSelector);
@@ -55,10 +56,11 @@ export var GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function G
     }
   }, [densityValue, rootProps]);
   var handleDensitySelectorOpen = function handleDensitySelectorOpen(event) {
+    var _buttonProps$onClick;
     setOpen(function (prevOpen) {
       return !prevOpen;
     });
-    onClick == null || onClick(event);
+    (_buttonProps$onClick = buttonProps.onClick) == null || _buttonProps$onClick.call(buttonProps, event);
   };
   var handleDensitySelectorClose = function handleDensitySelectorClose() {
     setOpen(false);
@@ -92,19 +94,24 @@ export var GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function G
     }, index);
   });
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-      ref: handleRef,
-      size: "small",
-      startIcon: startIcon,
-      "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),
-      "aria-haspopup": "menu",
-      "aria-expanded": open,
-      "aria-controls": open ? densityMenuId : undefined,
-      id: densityButtonId
-    }, other, {
-      onClick: handleDensitySelectorOpen
-    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseButton, {
-      children: apiRef.current.getLocaleText('toolbarDensity')
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
+      title: apiRef.current.getLocaleText('toolbarDensityLabel'),
+      enterDelay: 1000
+    }, tooltipProps, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+        ref: handleRef,
+        size: "small",
+        startIcon: startIcon,
+        "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? densityMenuId : undefined,
+        id: densityButtonId
+      }, buttonProps, {
+        onClick: handleDensitySelectorOpen
+      }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseButton, {
+        children: apiRef.current.getLocaleText('toolbarDensity')
+      }))
     })), /*#__PURE__*/_jsx(GridMenu, {
       open: open,
       target: buttonRef.current,
@@ -120,4 +127,16 @@ export var GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function G
       })
     })]
   });
-});
+});
+process.env.NODE_ENV !== "production" ? GridToolbarDensitySelector.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.object
+} : void 0;
+export { GridToolbarDensitySelector };

package/legacy/components/toolbar/GridToolbarExport.js

@@ -70,6 +70,11 @@ process.env.NODE_ENV !== "production" ? GridToolbarExport.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   csvOptions: PropTypes.object,
-  printOptions: PropTypes.object
+  printOptions: PropTypes.object,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.object
 } : void 0;
 export { GridToolbarExport };

package/legacy/components/toolbar/GridToolbarExportContainer.js

@@ -1,8 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "onClick"];
 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';
@@ -12,11 +11,13 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridClasses } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridToolbarExportContainer(props, ref) {
-  var _rootProps$slotProps;
+var GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridToolbarExportContainer(props, ref) {
+  var _rootProps$slotProps, _rootProps$slotProps2;
   var children = props.children,
-    onClick = props.onClick,
-    other = _objectWithoutProperties(props, _excluded);
+    _props$slotProps = props.slotProps,
+    slotProps = _props$slotProps === void 0 ? {} : _props$slotProps;
+  var buttonProps = slotProps.button || {};
+  var tooltipProps = slotProps.tooltip || {};
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
   var exportButtonId = useId();
@@ -28,10 +29,11 @@ export var GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function G
   var buttonRef = React.useRef(null);
   var handleRef = useForkRef(ref, buttonRef);
   var handleMenuOpen = function handleMenuOpen(event) {
+    var _buttonProps$onClick;
     setOpen(function (prevOpen) {
       return !prevOpen;
     });
-    onClick == null || onClick(event);
+    (_buttonProps$onClick = buttonProps.onClick) == null || _buttonProps$onClick.call(buttonProps, event);
   };
   var handleMenuClose = function handleMenuClose() {
     return setOpen(false);
@@ -48,19 +50,24 @@ export var GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function G
     return null;
   }
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-      ref: handleRef,
-      size: "small",
-      startIcon: /*#__PURE__*/_jsx(rootProps.slots.exportIcon, {}),
-      "aria-expanded": open,
-      "aria-label": apiRef.current.getLocaleText('toolbarExportLabel'),
-      "aria-haspopup": "menu",
-      "aria-controls": open ? exportMenuId : undefined,
-      id: exportButtonId
-    }, other, {
-      onClick: handleMenuOpen
-    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseButton, {
-      children: apiRef.current.getLocaleText('toolbarExport')
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
+      title: apiRef.current.getLocaleText('toolbarExportLabel'),
+      enterDelay: 1000
+    }, tooltipProps, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+        ref: handleRef,
+        size: "small",
+        startIcon: /*#__PURE__*/_jsx(rootProps.slots.exportIcon, {}),
+        "aria-expanded": open,
+        "aria-label": apiRef.current.getLocaleText('toolbarExportLabel'),
+        "aria-haspopup": "menu",
+        "aria-controls": open ? exportMenuId : undefined,
+        id: exportButtonId
+      }, buttonProps, {
+        onClick: handleMenuOpen
+      }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseButton, {
+        children: apiRef.current.getLocaleText('toolbarExport')
+      }))
     })), /*#__PURE__*/_jsx(GridMenu, {
       open: open,
       target: buttonRef.current,
@@ -83,4 +90,16 @@ export var GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function G
       })
     })]
   });
-});
+});
+process.env.NODE_ENV !== "production" ? GridToolbarExportContainer.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.object
+} : void 0;
+export { GridToolbarExportContainer };

package/legacy/components/toolbar/GridToolbarFilterButton.js

@@ -1,6 +1,4 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["componentsProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
@@ -38,10 +36,10 @@ var GridToolbarFilterListRoot = styled('ul', {
 });
 var GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbarFilterButton(props, ref) {
   var _rootProps$slotProps, _rootProps$slotProps2;
-  var _props$componentsProp = props.componentsProps,
-    componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
-    other = _objectWithoutProperties(props, _excluded);
-  var buttonProps = componentsProps.button || {};
+  var _props$slotProps = props.slotProps,
+    slotProps = _props$slotProps === void 0 ? {} : _props$slotProps;
+  var buttonProps = slotProps.button || {};
+  var tooltipProps = slotProps.tooltip || {};
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
   var activeFilters = useGridSelector(apiRef, gridFilterActiveItemsSelector);
@@ -103,7 +101,7 @@ var GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbar
   return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
     title: tooltipContentNode,
     enterDelay: 1000
-  }, other, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+  }, tooltipProps, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
     children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
       ref: ref,
       id: filterButtonId,
@@ -133,8 +131,6 @@ process.env.NODE_ENV !== "production" ? GridToolbarFilterButton.propTypes = {
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.shape({
-    button: PropTypes.object
-  })
+  slotProps: PropTypes.object
 } : void 0;
 export { GridToolbarFilterButton };

package/legacy/components/virtualization/GridBottomContainer.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/system';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses() {
+  var slots = {
+    root: ['bottomContainer']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, {});
+};
+var Element = styled('div')({
+  position: 'sticky',
+  zIndex: 2,
+  bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))'
+});
+export function GridBottomContainer(props) {
+  var classes = useUtilityClasses();
+  return /*#__PURE__*/_jsx(Element, _extends({}, props, {
+    className: clsx(classes.root, props.className, gridClasses['container--bottom']),
+    role: "presentation"
+  }));
+}

package/legacy/components/virtualization/GridMainContainer.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { useGridAriaAttributes } from '../../hooks/utils/useGridAriaAttributes';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Element = styled('div')({
+  flexGrow: 1,
+  position: 'relative',
+  overflow: 'hidden'
+});
+export var GridMainContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var ariaAttributes = useGridAriaAttributes();
+  return /*#__PURE__*/_jsx(Element, _extends({
+    ref: ref,
+    className: props.className,
+    tabIndex: -1
+  }, ariaAttributes, {
+    children: props.children
+  }));
+});

package/legacy/components/virtualization/GridTopContainer.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/system';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses() {
+  var slots = {
+    root: ['topContainer']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, {});
+};
+var Element = styled('div')({
+  position: 'sticky',
+  zIndex: 2,
+  top: 0,
+  '&::after': {
+    content: '" "',
+    position: 'absolute',
+    zIndex: 5,
+    bottom: 0,
+    left: 0,
+    height: 1,
+    width: 'var(--DataGrid-rowWidth)',
+    backgroundColor: 'var(--DataGrid-rowBorderColor)'
+  }
+});
+export function GridTopContainer(props) {
+  var classes = useUtilityClasses();
+  return /*#__PURE__*/_jsx(Element, _extends({}, props, {
+    className: clsx(classes.root, props.className, gridClasses['container--top']),
+    role: "presentation"
+  }));
+}

package/legacy/components/virtualization/GridVirtualScrollbar.js

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import { useOnMount } from '../../hooks/utils/useOnMount';
+import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
+import { gridDimensionsSelector, useGridSelector } from '../../hooks';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState, position) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['scrollbar', "scrollbar--".concat(position)],
+    content: ['scrollbarContent']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var Scrollbar = styled('div')({
+  position: 'absolute',
+  display: 'inline-block',
+  zIndex: 6,
+  '& > div': {
+    display: 'inline-block'
+  },
+  // In macOS Safari and Gnome Web, scrollbars are overlaid and don't affect the layout. So we consider
+  // their size to be 0px throughout all the calculations, but the floating scrollbar container does need
+  // to appear and have a real size. We set it to 14px because it seems like an acceptable value and we
+  // don't have a method to find the required size for scrollbars on those platforms.
+  '--size': 'calc(max(var(--DataGrid-scrollbarSize), 14px))'
+});
+var ScrollbarVertical = styled(Scrollbar)({
+  width: 'var(--size)',
+  height: 'calc(var(--DataGrid-hasScrollY) * (100% - var(--DataGrid-topContainerHeight) - var(--DataGrid-bottomContainerHeight) - var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize)))',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+  '& > div': {
+    width: 'var(--size)'
+  },
+  top: 'var(--DataGrid-topContainerHeight)',
+  right: '0px'
+});
+var ScrollbarHorizontal = styled(Scrollbar)({
+  width: '100%',
+  height: 'var(--size)',
+  overflowY: 'hidden',
+  overflowX: 'auto',
+  '& > div': {
+    height: 'var(--size)'
+  },
+  bottom: '0px'
+});
+var Content = styled('div')({
+  display: 'inline-block'
+});
+var GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualScrollbar(props, ref) {
+  var apiRef = useGridPrivateApiContext();
+  var rootProps = useGridRootProps();
+  var isLocked = React.useRef(false);
+  var lastPosition = React.useRef(0);
+  var scrollbarRef = React.useRef(null);
+  var contentRef = React.useRef(null);
+  var classes = useUtilityClasses(rootProps, props.position);
+  var dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  var propertyDimension = props.position === 'vertical' ? 'height' : 'width';
+  var propertyScroll = props.position === 'vertical' ? 'scrollTop' : 'scrollLeft';
+  var hasScroll = props.position === 'vertical' ? dimensions.hasScrollX : dimensions.hasScrollY;
+  var contentSize = dimensions.minimumSize[propertyDimension] + (hasScroll ? dimensions.scrollbarSize : 0);
+  var scrollbarSize = props.position === 'vertical' ? dimensions.viewportInnerSize.height : dimensions.viewportOuterSize.width;
+  var scrollbarInnerSize = scrollbarSize * (contentSize / dimensions.viewportOuterSize[propertyDimension]);
+  var onScrollerScroll = useEventCallback(function () {
+    var scroller = apiRef.current.virtualScrollerRef.current;
+    var scrollbar = scrollbarRef.current;
+    if (scroller[propertyScroll] === lastPosition.current) {
+      return;
+    }
+    if (isLocked.current) {
+      isLocked.current = false;
+      return;
+    }
+    isLocked.current = true;
+    var value = scroller[propertyScroll] / contentSize;
+    scrollbar[propertyScroll] = value * scrollbarInnerSize;
+    lastPosition.current = scroller[propertyScroll];
+  });
+  var onScrollbarScroll = useEventCallback(function () {
+    var scroller = apiRef.current.virtualScrollerRef.current;
+    var scrollbar = scrollbarRef.current;
+    if (isLocked.current) {
+      isLocked.current = false;
+      return;
+    }
+    isLocked.current = true;
+    var value = scrollbar[propertyScroll] / scrollbarInnerSize;
+    scroller[propertyScroll] = value * contentSize;
+  });
+  useOnMount(function () {
+    var scroller = apiRef.current.virtualScrollerRef.current;
+    var scrollbar = scrollbarRef.current;
+    scroller.addEventListener('scroll', onScrollerScroll, {
+      capture: true
+    });
+    scrollbar.addEventListener('scroll', onScrollbarScroll, {
+      capture: true
+    });
+    return function () {
+      scroller.removeEventListener('scroll', onScrollerScroll, {
+        capture: true
+      });
+      scrollbar.removeEventListener('scroll', onScrollbarScroll, {
+        capture: true
+      });
+    };
+  });
+  React.useEffect(function () {
+    var content = contentRef.current;
+    content.style.setProperty(propertyDimension, "".concat(scrollbarInnerSize, "px"));
+  }, [scrollbarInnerSize, propertyDimension]);
+  var Container = props.position === 'vertical' ? ScrollbarVertical : ScrollbarHorizontal;
+  return /*#__PURE__*/_jsx(Container, {
+    ref: useForkRef(ref, scrollbarRef),
+    className: classes.root,
+    tabIndex: -1,
+    children: /*#__PURE__*/_jsx(Content, {
+      ref: contentRef,
+      className: classes.content
+    })
+  });
+});
+export { GridVirtualScrollbar };

package/legacy/components/virtualization/GridVirtualScroller.js

@@ -1,42 +1,93 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import clsx from 'clsx';
 import { styled } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { gridDimensionsSelector } from '../../hooks/features/dimensions';
+import { useGridVirtualScroller } from '../../hooks/features/virtualization/useGridVirtualScroller';
+import { GridOverlays } from '../base/GridOverlays';
+import { GridHeaders } from '../GridHeaders';
+import { GridMainContainer as Container } from './GridMainContainer';
+import { GridTopContainer as TopContainer } from './GridTopContainer';
+import { GridBottomContainer as BottomContainer } from './GridBottomContainer';
+import { GridVirtualScrollerContent as Content } from './GridVirtualScrollerContent';
+import { GridVirtualScrollerFiller as SpaceFiller } from './GridVirtualScrollerFiller';
+import { GridVirtualScrollerRenderZone as RenderZone } from './GridVirtualScrollerRenderZone';
+import { GridVirtualScrollbar as Scrollbar } from './GridVirtualScrollbar';
 import { jsx as _jsx } from "react/jsx-runtime";
-var useUtilityClasses = function useUtilityClasses(ownerState) {
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState, dimensions) {
   var classes = ownerState.classes;
   var slots = {
-    root: ['virtualScroller']
+    root: ['main', dimensions.rightPinnedWidth > 0 && 'main--hasPinnedRight'],
+    scroller: ['virtualScroller']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
-var VirtualScrollerRoot = styled('div', {
+var Scroller = styled('div', {
   name: 'MuiDataGrid',
   slot: 'VirtualScroller',
   overridesResolver: function overridesResolver(props, styles) {
     return styles.virtualScroller;
   }
 })({
-  overflow: 'auto',
-  height: '100%',
-  // See https://github.com/mui/mui-x/issues/4360
   position: 'relative',
+  height: '100%',
+  overflow: 'scroll',
+  scrollbarWidth: 'none' /* Firefox */,
+  '&::-webkit-scrollbar': {
+    display: 'none' /* Safari and Chrome */
+  },
   '@media print': {
     overflow: 'hidden'
   },
-  zIndex: 0 // See https://github.com/mui/mui-x/issues/10547
+  // See https://github.com/mui/mui-x/issues/10547
+  zIndex: 0
 });
-var GridVirtualScroller = /*#__PURE__*/React.forwardRef(function GridVirtualScroller(props, ref) {
+function GridVirtualScroller(props) {
+  var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
-  var classes = useUtilityClasses(rootProps);
-  return /*#__PURE__*/_jsx(VirtualScrollerRoot, _extends({
-    ref: ref
-  }, props, {
-    className: clsx(classes.root, props.className),
-    ownerState: rootProps
+  var dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  var classes = useUtilityClasses(rootProps, dimensions);
+  var virtualScroller = useGridVirtualScroller();
+  var getContainerProps = virtualScroller.getContainerProps,
+    getScrollerProps = virtualScroller.getScrollerProps,
+    getContentProps = virtualScroller.getContentProps,
+    getRenderZoneProps = virtualScroller.getRenderZoneProps,
+    getScrollbarVerticalProps = virtualScroller.getScrollbarVerticalProps,
+    getScrollbarHorizontalProps = virtualScroller.getScrollbarHorizontalProps;
+  return /*#__PURE__*/_jsxs(Container, _extends({
+    className: classes.root
+  }, getContainerProps(), {
+    children: [/*#__PURE__*/_jsxs(Scroller, _extends({
+      className: classes.scroller
+    }, getScrollerProps(), {
+      ownerState: rootProps,
+      children: [/*#__PURE__*/_jsxs(TopContainer, {
+        children: [/*#__PURE__*/_jsx(GridHeaders, {}), /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
+          position: "top",
+          virtualScroller: virtualScroller
+        })]
+      }), /*#__PURE__*/_jsx(GridOverlays, {}), /*#__PURE__*/_jsx(Content, _extends({}, getContentProps(), {
+        children: /*#__PURE__*/_jsxs(RenderZone, _extends({}, getRenderZoneProps(), {
+          children: [virtualScroller.getRows(), /*#__PURE__*/_jsx(rootProps.slots.detailPanels, {
+            virtualScroller: virtualScroller
+          })]
+        }))
+      })), /*#__PURE__*/_jsx(SpaceFiller, {}), /*#__PURE__*/_jsx(BottomContainer, {
+        children: /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
+          position: "bottom",
+          virtualScroller: virtualScroller
+        })
+      })]
+    })), /*#__PURE__*/_jsx(Scrollbar, _extends({
+      position: "vertical"
+    }, getScrollbarVerticalProps())), /*#__PURE__*/_jsx(Scrollbar, _extends({
+      position: "horizontal"
+    }, getScrollbarHorizontalProps())), props.children]
   }));
-});
+}
 export { GridVirtualScroller };

package/legacy/components/virtualization/GridVirtualScrollerFiller.js

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { fastMemo } from '../../utils/fastMemo';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { gridDimensionsSelector } from '../../hooks/features/dimensions';
+import { gridClasses } from '../../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Filler = styled('div')({
+  display: 'flex',
+  flexDirection: 'row',
+  width: 'var(--DataGrid-rowWidth)',
+  boxSizing: 'border-box'
+});
+var Pinned = styled('div')({
+  position: 'sticky',
+  height: '100%',
+  boxSizing: 'border-box',
+  borderTop: '1px solid var(--DataGrid-rowBorderColor)',
+  backgroundColor: 'var(--DataGrid-pinnedBackground)'
+});
+var PinnedLeft = styled(Pinned)({
+  left: 0,
+  borderRight: '1px solid var(--DataGrid-rowBorderColor)'
+});
+var PinnedRight = styled(Pinned)({
+  right: 0,
+  borderLeft: '1px solid var(--DataGrid-rowBorderColor)'
+});
+var Main = styled('div')({
+  flexGrow: 1,
+  borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+});
+function GridVirtualScrollerFiller() {
+  var apiRef = useGridApiContext();
+  var _useGridSelector = useGridSelector(apiRef, gridDimensionsSelector),
+    viewportOuterSize = _useGridSelector.viewportOuterSize,
+    minimumSize = _useGridSelector.minimumSize,
+    hasScrollX = _useGridSelector.hasScrollX,
+    scrollbarSize = _useGridSelector.scrollbarSize,
+    leftPinnedWidth = _useGridSelector.leftPinnedWidth,
+    rightPinnedWidth = _useGridSelector.rightPinnedWidth;
+  var scrollbarHeight = hasScrollX ? scrollbarSize : 0;
+  var expandedHeight = viewportOuterSize.height - minimumSize.height - scrollbarHeight;
+  var height = Math.max(scrollbarHeight, expandedHeight);
+  if (height === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(Filler, {
+    className: gridClasses.filler,
+    role: "presentation",
+    style: {
+      height: height
+    },
+    children: [leftPinnedWidth > 0 && /*#__PURE__*/_jsx(PinnedLeft, {
+      className: gridClasses['filler--pinnedLeft'],
+      style: {
+        width: leftPinnedWidth
+      }
+    }), /*#__PURE__*/_jsx(Main, {}), rightPinnedWidth > 0 && /*#__PURE__*/_jsx(PinnedRight, {
+      className: gridClasses['filler--pinnedRight'],
+      style: {
+        width: rightPinnedWidth
+      }
+    })]
+  });
+}
+var Memoized = fastMemo(GridVirtualScrollerFiller);
+export { Memoized as GridVirtualScrollerFiller };

package/legacy/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -25,7 +25,8 @@ var VirtualScrollerRenderZoneRoot = styled('div', {
   position: 'absolute',
   display: 'flex',
   // Prevents margin collapsing when using `getRowSpacing`
-  flexDirection: 'column'
+  flexDirection: 'column',
+  transform: 'translate3d(0, var(--DataGrid-offsetTop), 0)'
 });
 var GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
   var className = props.className,