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

package/node/components/toolbar/GridToolbarDensitySelector.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GridToolbarDensitySelector = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
 var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
@@ -20,14 +20,14 @@ var _GridMenu = require("../menu/GridMenu");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["onClick"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridToolbarDensitySelector(props, ref) {
   const {
-      onClick
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    slotProps = {}
+  } = props;
+  const buttonProps = slotProps.button || {};
+  const tooltipProps = slotProps.tooltip || {};
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const densityValue = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityValueSelector);
@@ -61,7 +61,7 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
   }, [densityValue, rootProps]);
   const handleDensitySelectorOpen = event => {
     setOpen(prevOpen => !prevOpen);
-    onClick?.(event);
+    buttonProps.onClick?.(event);
   };
   const handleDensitySelectorClose = () => {
     setOpen(false);
@@ -91,19 +91,24 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
     }), option.label]
   }, index));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
-      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?.baseButton, {
-      children: apiRef.current.getLocaleText('toolbarDensity')
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
+      title: apiRef.current.getLocaleText('toolbarDensityLabel'),
+      enterDelay: 1000
+    }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
+        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.slotProps?.baseButton, {
+        children: apiRef.current.getLocaleText('toolbarDensity')
+      }))
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {
       open: open,
       target: buttonRef.current,
@@ -119,4 +124,15 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
       })
     })]
   });
-});
+});
+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.default.object
+} : void 0;

package/node/components/toolbar/GridToolbarExport.js

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

package/node/components/toolbar/GridToolbarExportContainer.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GridToolbarExportContainer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
 var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 var _keyboardUtils = require("../../utils/keyboardUtils");
@@ -16,15 +16,15 @@ var _GridMenu = require("../menu/GridMenu");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "onClick"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const GridToolbarExportContainer = exports.GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridToolbarExportContainer(props, ref) {
   const {
-      children,
-      onClick
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    children,
+    slotProps = {}
+  } = props;
+  const buttonProps = slotProps.button || {};
+  const tooltipProps = slotProps.tooltip || {};
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const exportButtonId = (0, _utils.unstable_useId)();
@@ -34,7 +34,7 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = /*#__PUR
   const handleRef = (0, _utils.unstable_useForkRef)(ref, buttonRef);
   const handleMenuOpen = event => {
     setOpen(prevOpen => !prevOpen);
-    onClick?.(event);
+    buttonProps.onClick?.(event);
   };
   const handleMenuClose = () => setOpen(false);
   const handleListKeyDown = event => {
@@ -49,19 +49,24 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = /*#__PUR
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
-      ref: handleRef,
-      size: "small",
-      startIcon: /*#__PURE__*/(0, _jsxRuntime.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?.baseButton, {
-      children: apiRef.current.getLocaleText('toolbarExport')
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
+      title: apiRef.current.getLocaleText('toolbarExportLabel'),
+      enterDelay: 1000
+    }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
+        ref: handleRef,
+        size: "small",
+        startIcon: /*#__PURE__*/(0, _jsxRuntime.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.slotProps?.baseButton, {
+        children: apiRef.current.getLocaleText('toolbarExport')
+      }))
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {
       open: open,
       target: buttonRef.current,
@@ -84,4 +89,15 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = /*#__PUR
       })
     })]
   });
-});
+});
+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.default.object
+} : void 0;

package/node/components/toolbar/GridToolbarFilterButton.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GridToolbarFilterButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
@@ -21,7 +20,6 @@ var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["componentsProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
@@ -45,10 +43,10 @@ const GridToolbarFilterListRoot = (0, _styles.styled)('ul', {
 }));
 const GridToolbarFilterButton = exports.GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbarFilterButton(props, ref) {
   const {
-      componentsProps = {}
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const buttonProps = componentsProps.button || {};
+    slotProps = {}
+  } = props;
+  const buttonProps = slotProps.button || {};
+  const tooltipProps = slotProps.tooltip || {};
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const activeFilters = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterActiveItemsSelector);
@@ -106,7 +104,7 @@ const GridToolbarFilterButton = exports.GridToolbarFilterButton = /*#__PURE__*/R
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
     title: tooltipContentNode,
     enterDelay: 1000
-  }, other, rootProps.slotProps?.baseTooltip, {
+  }, tooltipProps, rootProps.slotProps?.baseTooltip, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
       ref: ref,
       id: filterButtonId,
@@ -136,7 +134,5 @@ process.env.NODE_ENV !== "production" ? GridToolbarFilterButton.propTypes = {
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: _propTypes.default.shape({
-    button: _propTypes.default.object
-  })
+  slotProps: _propTypes.default.object
 } : void 0;

package/node/components/virtualization/GridBottomContainer.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridBottomContainer = GridBottomContainer;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _system = require("@mui/system");
+var _utils = require("@mui/utils");
+var _gridClasses = require("../../constants/gridClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useUtilityClasses = () => {
+  const slots = {
+    root: ['bottomContainer']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, {});
+};
+const Element = (0, _system.styled)('div')({
+  position: 'sticky',
+  zIndex: 2,
+  bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))'
+});
+function GridBottomContainer(props) {
+  const classes = useUtilityClasses();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({}, props, {
+    className: (0, _clsx.default)(classes.root, props.className, _gridClasses.gridClasses['container--bottom']),
+    role: "presentation"
+  }));
+}

package/node/components/{containers → virtualization}/GridMainContainer.js

@@ -7,44 +7,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridMainContainer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("@mui/utils");
 var _system = require("@mui/system");
-var _gridClasses = require("../../constants/gridClasses");
-var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridAriaAttributes = require("../../hooks/utils/useGridAriaAttributes");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['main']
-  };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
-};
-const GridMainContainerRoot = (0, _system.styled)('div', {
-  name: 'MuiDataGrid',
-  slot: 'Main',
-  overridesResolver: (props, styles) => styles.main
-})(() => ({
-  position: 'relative',
+const Element = (0, _system.styled)('div')({
   flexGrow: 1,
-  display: 'flex',
-  flexDirection: 'column',
+  position: 'relative',
   overflow: 'hidden'
-}));
+});
 const GridMainContainer = exports.GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const classes = useUtilityClasses(rootProps);
-  const getAriaAttributes = rootProps.experimentalFeatures?.ariaV7 // ariaV7 should never change
-  ? _useGridAriaAttributes.useGridAriaAttributes : null;
-  const ariaAttributes = typeof getAriaAttributes === 'function' ? getAriaAttributes() : null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridMainContainerRoot, (0, _extends2.default)({
+  const ariaAttributes = (0, _useGridAriaAttributes.useGridAriaAttributes)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({
     ref: ref,
-    className: classes.root,
-    ownerState: rootProps
+    className: props.className,
+    tabIndex: -1
   }, ariaAttributes, {
     children: props.children
   }));

package/node/components/virtualization/GridTopContainer.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridTopContainer = GridTopContainer;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _system = require("@mui/system");
+var _utils = require("@mui/utils");
+var _gridClasses = require("../../constants/gridClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useUtilityClasses = () => {
+  const slots = {
+    root: ['topContainer']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, {});
+};
+const Element = (0, _system.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)'
+  }
+});
+function GridTopContainer(props) {
+  const classes = useUtilityClasses();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({}, props, {
+    className: (0, _clsx.default)(classes.root, props.className, _gridClasses.gridClasses['container--top']),
+    role: "presentation"
+  }));
+}

package/node/components/virtualization/GridVirtualScrollbar.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridVirtualScrollbar = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _system = require("@mui/system");
+var _utils = require("@mui/utils");
+var _useOnMount = require("../../hooks/utils/useOnMount");
+var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
+var _hooks = require("../../hooks");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _gridClasses = require("../../constants/gridClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useUtilityClasses = (ownerState, position) => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['scrollbar', `scrollbar--${position}`],
+    content: ['scrollbarContent']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+const Scrollbar = (0, _system.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))'
+});
+const ScrollbarVertical = (0, _system.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'
+});
+const ScrollbarHorizontal = (0, _system.styled)(Scrollbar)({
+  width: '100%',
+  height: 'var(--size)',
+  overflowY: 'hidden',
+  overflowX: 'auto',
+  '& > div': {
+    height: 'var(--size)'
+  },
+  bottom: '0px'
+});
+const Content = (0, _system.styled)('div')({
+  display: 'inline-block'
+});
+const GridVirtualScrollbar = exports.GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualScrollbar(props, ref) {
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const isLocked = React.useRef(false);
+  const lastPosition = React.useRef(0);
+  const scrollbarRef = React.useRef(null);
+  const contentRef = React.useRef(null);
+  const classes = useUtilityClasses(rootProps, props.position);
+  const dimensions = (0, _hooks.useGridSelector)(apiRef, _hooks.gridDimensionsSelector);
+  const propertyDimension = props.position === 'vertical' ? 'height' : 'width';
+  const propertyScroll = props.position === 'vertical' ? 'scrollTop' : 'scrollLeft';
+  const hasScroll = props.position === 'vertical' ? dimensions.hasScrollX : dimensions.hasScrollY;
+  const contentSize = dimensions.minimumSize[propertyDimension] + (hasScroll ? dimensions.scrollbarSize : 0);
+  const scrollbarSize = props.position === 'vertical' ? dimensions.viewportInnerSize.height : dimensions.viewportOuterSize.width;
+  const scrollbarInnerSize = scrollbarSize * (contentSize / dimensions.viewportOuterSize[propertyDimension]);
+  const onScrollerScroll = (0, _utils.unstable_useEventCallback)(() => {
+    const scroller = apiRef.current.virtualScrollerRef.current;
+    const scrollbar = scrollbarRef.current;
+    if (scroller[propertyScroll] === lastPosition.current) {
+      return;
+    }
+    if (isLocked.current) {
+      isLocked.current = false;
+      return;
+    }
+    isLocked.current = true;
+    const value = scroller[propertyScroll] / contentSize;
+    scrollbar[propertyScroll] = value * scrollbarInnerSize;
+    lastPosition.current = scroller[propertyScroll];
+  });
+  const onScrollbarScroll = (0, _utils.unstable_useEventCallback)(() => {
+    const scroller = apiRef.current.virtualScrollerRef.current;
+    const scrollbar = scrollbarRef.current;
+    if (isLocked.current) {
+      isLocked.current = false;
+      return;
+    }
+    isLocked.current = true;
+    const value = scrollbar[propertyScroll] / scrollbarInnerSize;
+    scroller[propertyScroll] = value * contentSize;
+  });
+  (0, _useOnMount.useOnMount)(() => {
+    const scroller = apiRef.current.virtualScrollerRef.current;
+    const scrollbar = scrollbarRef.current;
+    scroller.addEventListener('scroll', onScrollerScroll, {
+      capture: true
+    });
+    scrollbar.addEventListener('scroll', onScrollbarScroll, {
+      capture: true
+    });
+    return () => {
+      scroller.removeEventListener('scroll', onScrollerScroll, {
+        capture: true
+      });
+      scrollbar.removeEventListener('scroll', onScrollbarScroll, {
+        capture: true
+      });
+    };
+  });
+  React.useEffect(() => {
+    const content = contentRef.current;
+    content.style.setProperty(propertyDimension, `${scrollbarInnerSize}px`);
+  }, [scrollbarInnerSize, propertyDimension]);
+  const Container = props.position === 'vertical' ? ScrollbarVertical : ScrollbarHorizontal;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+    ref: (0, _utils.unstable_useForkRef)(ref, scrollbarRef),
+    className: classes.root,
+    tabIndex: -1,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
+      ref: contentRef,
+      className: classes.content
+    })
+  });
+});

package/node/components/virtualization/GridVirtualScroller.js

@@ -4,47 +4,99 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridVirtualScroller = void 0;
+exports.GridVirtualScroller = GridVirtualScroller;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _utils = require("@mui/utils");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _gridClasses = require("../../constants/gridClasses");
+var _dimensions = require("../../hooks/features/dimensions");
+var _useGridVirtualScroller = require("../../hooks/features/virtualization/useGridVirtualScroller");
+var _GridOverlays = require("../base/GridOverlays");
+var _GridHeaders = require("../GridHeaders");
+var _GridMainContainer = require("./GridMainContainer");
+var _GridTopContainer = require("./GridTopContainer");
+var _GridBottomContainer = require("./GridBottomContainer");
+var _GridVirtualScrollerContent = require("./GridVirtualScrollerContent");
+var _GridVirtualScrollerFiller = require("./GridVirtualScrollerFiller");
+var _GridVirtualScrollerRenderZone = require("./GridVirtualScrollerRenderZone");
+var _GridVirtualScrollbar = require("./GridVirtualScrollbar");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (ownerState, dimensions) => {
   const {
     classes
   } = ownerState;
   const slots = {
-    root: ['virtualScroller']
+    root: ['main', dimensions.rightPinnedWidth > 0 && 'main--hasPinnedRight'],
+    scroller: ['virtualScroller']
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const VirtualScrollerRoot = (0, _system.styled)('div', {
+const Scroller = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'VirtualScroller',
   overridesResolver: (props, styles) => 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
 });
-const GridVirtualScroller = exports.GridVirtualScroller = /*#__PURE__*/React.forwardRef(function GridVirtualScroller(props, ref) {
+function GridVirtualScroller(props) {
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const classes = useUtilityClasses(rootProps);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerRoot, (0, _extends2.default)({
-    ref: ref
-  }, props, {
-    className: (0, _clsx.default)(classes.root, props.className),
-    ownerState: rootProps
+  const dimensions = (0, _useGridSelector.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
+  const classes = useUtilityClasses(rootProps, dimensions);
+  const virtualScroller = (0, _useGridVirtualScroller.useGridVirtualScroller)();
+  const {
+    getContainerProps,
+    getScrollerProps,
+    getContentProps,
+    getRenderZoneProps,
+    getScrollbarVerticalProps,
+    getScrollbarHorizontalProps
+  } = virtualScroller;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridMainContainer.GridMainContainer, (0, _extends2.default)({
+    className: classes.root
+  }, getContainerProps(), {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Scroller, (0, _extends2.default)({
+      className: classes.scroller
+    }, getScrollerProps(), {
+      ownerState: rootProps,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridTopContainer.GridTopContainer, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeaders.GridHeaders, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pinnedRows, {
+          position: "top",
+          virtualScroller: virtualScroller
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlays.GridOverlays, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerContent.GridVirtualScrollerContent, (0, _extends2.default)({}, getContentProps(), {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridVirtualScrollerRenderZone.GridVirtualScrollerRenderZone, (0, _extends2.default)({}, getRenderZoneProps(), {
+          children: [virtualScroller.getRows(), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.detailPanels, {
+            virtualScroller: virtualScroller
+          })]
+        }))
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerFiller.GridVirtualScrollerFiller, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridBottomContainer.GridBottomContainer, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pinnedRows, {
+          position: "bottom",
+          virtualScroller: virtualScroller
+        })
+      })]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
+      position: "vertical"
+    }, getScrollbarVerticalProps())), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
+      position: "horizontal"
+    }, getScrollbarHorizontalProps())), props.children]
   }));
-});
+}