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

package/node/components/toolbar/GridToolbarExportContainer.js

@@ -10,13 +10,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _keyboardUtils = require("../../utils/keyboardUtils");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _GridMenu = require("../menu/GridMenu");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const GridToolbarExportContainer = exports.GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridToolbarExportContainer(props, ref) {
+const GridToolbarExportContainer = exports.GridToolbarExportContainer = (0, _forwardRef.forwardRef)(function GridToolbarExportContainer(props, ref) {
   const {
     children,
     slotProps = {}
@@ -50,9 +51,8 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = /*#__PUR
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
       title: apiRef.current.getLocaleText('toolbarExportLabel'),
       enterDelay: 1000
-    }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+    }, rootProps.slotProps?.baseTooltip, tooltipProps, {
       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,
@@ -60,9 +60,9 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = /*#__PUR
         "aria-haspopup": "menu",
         "aria-controls": open ? exportMenuId : undefined,
         id: exportButtonId
-      }, buttonProps, {
-        onClick: handleMenuOpen
-      }, rootProps.slotProps?.baseButton, {
+      }, rootProps.slotProps?.baseButton, buttonProps, {
+        onClick: handleMenuOpen,
+        ref: handleRef,
         children: apiRef.current.getLocaleText('toolbarExport')
       }))
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {

package/node/components/toolbar/GridToolbarFilterButton.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _gridFilterSelector = require("../../hooks/features/filter/gridFilterSelector");
@@ -39,12 +40,16 @@ const GridToolbarFilterListRoot = (0, _styles.styled)('ul', {
   margin: theme.spacing(1, 1, 0.5),
   padding: theme.spacing(0, 1)
 }));
-const GridToolbarFilterButton = exports.GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbarFilterButton(props, ref) {
+
+// FIXME(v8:romgrk): override slotProps
+
+const GridToolbarFilterButton = exports.GridToolbarFilterButton = (0, _forwardRef.forwardRef)(function GridToolbarFilterButton(props, ref) {
   const {
     slotProps = {}
   } = props;
   const buttonProps = slotProps.button || {};
   const tooltipProps = slotProps.tooltip || {};
+  const badgeProps = slotProps.badge || {};
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const activeFilters = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterActiveItemsSelector);
@@ -102,23 +107,29 @@ const GridToolbarFilterButton = exports.GridToolbarFilterButton = /*#__PURE__*/R
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
     title: tooltipContentNode,
     enterDelay: 1000
-  }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+  }, rootProps.slotProps?.baseTooltip, tooltipProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
-      ref: ref,
       id: filterButtonId,
       size: "small",
       "aria-label": apiRef.current.getLocaleText('toolbarFiltersLabel'),
       "aria-controls": isOpen ? filterPanelId : undefined,
       "aria-expanded": isOpen,
       "aria-haspopup": true,
-      startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
+      startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, (0, _extends2.default)({
         badgeContent: activeFilters.length,
-        color: "primary",
+        color: "primary"
+      }, rootProps.slotProps?.baseBadge, badgeProps, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.openFilterButtonIcon, {})
-      })
-    }, buttonProps, {
-      onClick: toggleFilter
-    }, rootProps.slotProps?.baseButton, {
+      }))
+    }, rootProps.slotProps?.baseButton, buttonProps, {
+      onClick: toggleFilter,
+      onPointerUp: event => {
+        if (preferencePanel.open) {
+          event.stopPropagation();
+        }
+        buttonProps.onPointerUp?.(event);
+      },
+      ref: ref,
       children: apiRef.current.getLocaleText('toolbarFilters')
     }))
   }));

package/node/components/toolbar/GridToolbarQuickFilter.js

@@ -11,10 +11,10 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _OutlinedInput = require("@mui/material/OutlinedInput");
 var _constants = require("../../constants");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -22,7 +22,7 @@ var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _filter = require("../../hooks/features/filter");
 var _utils2 = require("../../utils/utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs", "className"];
+const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs", "className", "slotProps"];
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -32,20 +32,15 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _constants.getDataGridUtilityClass, classes);
 };
-const GridToolbarQuickFilterRoot = (0, _styles.styled)(_TextField.default, {
+const GridToolbarQuickFilterRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ToolbarQuickFilter',
   overridesResolver: (props, styles) => styles.toolbarQuickFilter
 })(({
   theme
 }) => ({
-  width: 'auto',
-  paddingBottom: theme.spacing(0.5),
-  '& input': {
-    marginLeft: theme.spacing(0.5)
-  },
-  '& .MuiInput-underline:before': {
-    borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
+  [`.${_OutlinedInput.outlinedInputClasses.root}`]: {
+    fontSize: theme.typography.body2.fontSize
   },
   [`& input[type="search"]::-webkit-search-decoration,
   & input[type="search"]::-webkit-search-cancel-button,
@@ -66,7 +61,8 @@ function GridToolbarQuickFilter(props) {
       quickFilterParser = defaultSearchValueParser,
       quickFilterFormatter = defaultSearchValueFormatter,
       debounceMs = rootProps.filterDebounceMs,
-      className
+      className,
+      slotProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(quickFilterValues ?? []));
@@ -86,6 +82,7 @@ function GridToolbarQuickFilter(props) {
     apiRef.current.setQuickFilterValues(newQuickFilterValues);
   }, [apiRef, quickFilterParser]);
   const debouncedUpdateSearchValue = React.useMemo(() => (0, _utils.unstable_debounce)(updateSearchValue, debounceMs), [updateSearchValue, debounceMs]);
+  React.useEffect(() => debouncedUpdateSearchValue.clear, [debouncedUpdateSearchValue]);
   const handleSearchValueChange = React.useCallback(event => {
     const newSearchValue = event.target.value;
     setSearchValue(newSearchValue);
@@ -98,7 +95,7 @@ function GridToolbarQuickFilter(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarQuickFilterRoot, (0, _extends2.default)({
     as: rootProps.slots.baseTextField,
     ownerState: rootProps,
-    variant: "standard",
+    size: "small",
     value: searchValue,
     onChange: handleSearchValueChange,
     className: (0, _clsx.default)(classes.root, className),
@@ -106,25 +103,34 @@ function GridToolbarQuickFilter(props) {
     "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
     type: "search"
   }, other, {
-    InputProps: (0, _extends2.default)({
-      startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {
-        fontSize: "small"
-      }),
-      endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
-        "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
-        size: "small",
-        sx: [searchValue ? {
-          visibility: 'visible'
-        } : {
-          visibility: 'hidden'
-        }],
-        onClick: handleSearchReset
-      }, rootProps.slotProps?.baseIconButton, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterClearIcon, {
-          fontSize: "small"
+    slotProps: (0, _extends2.default)({}, slotProps?.root.slotProps, {
+      input: (0, _extends2.default)({
+        startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputAdornment, {
+          position: "start",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {
+            fontSize: "small"
+          })
+        }),
+        endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputAdornment, {
+          position: "end",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+            "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
+            size: "small",
+            edge: "end",
+            style: searchValue ? {
+              visibility: 'visible'
+            } : {
+              visibility: 'hidden'
+            },
+            onClick: handleSearchReset
+          }, rootProps.slotProps?.baseIconButton, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterClearIcon, {
+              fontSize: "small"
+            })
+          }))
         })
-      }))
-    }, other.InputProps)
+      }, slotProps?.root.slotProps?.input)
+    })
   }, rootProps.slotProps?.baseTextField));
 }
 process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
@@ -132,6 +138,7 @@ process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  className: _propTypes.default.string,
   /**
    * The debounce time in milliseconds.
    * @default 150
@@ -152,7 +159,8 @@ process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
    *   .split(' ')
    *   .filter((word) => word !== '')
    */
-  quickFilterParser: _propTypes.default.func
+  quickFilterParser: _propTypes.default.func,
+  slotProps: _propTypes.default.object
 } : void 0;
 
 /**

package/node/components/virtualization/GridMainContainer.js

@@ -9,6 +9,7 @@ exports.GridMainContainer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _system = require("@mui/system");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridConfiguration = require("../../hooks/utils/useGridConfiguration");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -21,7 +22,12 @@ const GridPanelAnchor = (0, _system.styled)('div')({
 const Element = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Main',
-  overridesResolver: (props, styles) => styles.main
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.main, ownerState.dimensions.rightPinnedWidth > 0 && styles['main--hasPinnedRight'], ownerState.loadingOverlayVariant === 'skeleton' && styles['main--hasSkeletonLoadingOverlay']];
+  }
 })({
   flexGrow: 1,
   position: 'relative',
@@ -29,16 +35,19 @@ const Element = (0, _system.styled)('div', {
   display: 'flex',
   flexDirection: 'column'
 });
-const GridMainContainer = exports.GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
+const GridMainContainer = exports.GridMainContainer = (0, _forwardRef.forwardRef)((props, ref) => {
+  const {
+    ownerState
+  } = props;
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const configuration = (0, _useGridConfiguration.useGridConfiguration)();
   const ariaAttributes = configuration.hooks.useGridAriaAttributes();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Element, (0, _extends2.default)({
-    ref: ref,
-    ownerState: rootProps,
+    ownerState: ownerState,
     className: props.className,
     tabIndex: -1
-  }, ariaAttributes, {
+  }, ariaAttributes, rootProps.slotProps?.main, {
+    ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelAnchor, {
       role: "presentation",
       "data-id": "gridPanelAnchor"

package/node/components/virtualization/GridVirtualScrollbar.js

@@ -8,6 +8,7 @@ exports.GridVirtualScrollbar = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _system = require("@mui/system");
 var _utils = require("@mui/utils");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useOnMount = require("../../hooks/utils/useOnMount");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _hooks = require("../../hooks");
@@ -28,6 +29,9 @@ const Scrollbar = (0, _system.styled)('div')({
   position: 'absolute',
   display: 'inline-block',
   zIndex: 6,
+  '&:hover': {
+    zIndex: 7
+  },
   // 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
@@ -59,7 +63,7 @@ const ScrollbarHorizontal = (0, _system.styled)(Scrollbar)({
   },
   bottom: '0px'
 });
-const GridVirtualScrollbar = exports.GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualScrollbar(props, ref) {
+const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forwardRef)(function GridVirtualScrollbar(props, ref) {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const isLocked = React.useRef(false);
@@ -70,26 +74,27 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = /*#__PURE__*/React.f
   const dimensions = (0, _hooks.useGridSelector)(apiRef, _hooks.gridDimensionsSelector);
   const propertyDimension = props.position === 'vertical' ? 'height' : 'width';
   const propertyScroll = props.position === 'vertical' ? 'scrollTop' : 'scrollLeft';
+  const propertyScrollPosition = props.position === 'vertical' ? 'top' : 'left';
   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;
+    const scrollPosition = props.scrollPosition.current;
     if (!scrollbar) {
       return;
     }
-    if (scroller[propertyScroll] === lastPosition.current) {
+    if (scrollPosition[propertyScrollPosition] === lastPosition.current) {
       return;
     }
-    lastPosition.current = scroller[propertyScroll];
+    lastPosition.current = scrollPosition[propertyScrollPosition];
     if (isLocked.current) {
       isLocked.current = false;
       return;
     }
     isLocked.current = true;
-    const value = scroller[propertyScroll] / contentSize;
+    const value = scrollPosition[propertyScrollPosition] / contentSize;
     scrollbar[propertyScroll] = value * scrollbarInnerSize;
   });
   const onScrollbarScroll = (0, _utils.unstable_useEventCallback)(() => {
@@ -109,19 +114,14 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = /*#__PURE__*/React.f
   (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
-    });
+    const options = {
+      passive: true
+    };
+    scroller.addEventListener('scroll', onScrollerScroll, options);
+    scrollbar.addEventListener('scroll', onScrollbarScroll, options);
     return () => {
-      scroller.removeEventListener('scroll', onScrollerScroll, {
-        capture: true
-      });
-      scrollbar.removeEventListener('scroll', onScrollbarScroll, {
-        capture: true
-      });
+      scroller.removeEventListener('scroll', onScrollerScroll, options);
+      scrollbar.removeEventListener('scroll', onScrollbarScroll, options);
     };
   });
   React.useEffect(() => {

package/node/components/virtualization/GridVirtualScroller.js

@@ -18,7 +18,6 @@ var _gridClasses = require("../../constants/gridClasses");
 var _dimensions = require("../../hooks/features/dimensions");
 var _useGridVirtualScroller = require("../../hooks/features/virtualization/useGridVirtualScroller");
 var _useGridOverlays = require("../../hooks/features/overlays/useGridOverlays");
-var _GridOverlays = require("../base/GridOverlays");
 var _GridHeaders = require("../GridHeaders");
 var _GridMainContainer = require("./GridMainContainer");
 var _GridTopContainer = require("./GridTopContainer");
@@ -28,9 +27,11 @@ var _GridVirtualScrollerFiller = require("./GridVirtualScrollerFiller");
 var _GridVirtualScrollerRenderZone = require("./GridVirtualScrollerRenderZone");
 var _GridVirtualScrollbar = require("./GridVirtualScrollbar");
 var _jsxRuntime = require("react/jsx-runtime");
-const useUtilityClasses = (ownerState, dimensions, loadingOverlayVariant) => {
+const useUtilityClasses = ownerState => {
   const {
-    classes
+    classes,
+    dimensions,
+    loadingOverlayVariant
   } = ownerState;
   const slots = {
     root: ['main', dimensions.rightPinnedWidth > 0 && 'main--hasPinnedRight', loadingOverlayVariant === 'skeleton' && 'main--hasSkeletonLoadingOverlay'],
@@ -41,7 +42,12 @@ const useUtilityClasses = (ownerState, dimensions, loadingOverlayVariant) => {
 const Scroller = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'VirtualScroller',
-  overridesResolver: (props, styles) => styles.virtualScroller
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.virtualScroller, ownerState.dimensions.hasScrollX && styles['virtualScroller--hasScrollX']];
+  }
 })({
   position: 'relative',
   height: '100%',
@@ -63,8 +69,16 @@ function GridVirtualScroller(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const dimensions = (0, _useGridSelector.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
-  const overlaysProps = (0, _useGridOverlays.useGridOverlays)();
-  const classes = useUtilityClasses(rootProps, dimensions, overlaysProps.loadingOverlayVariant);
+  const {
+    getOverlay,
+    overlaysProps
+  } = (0, _useGridOverlays.useGridOverlays)();
+  const ownerState = {
+    classes: rootProps.classes,
+    dimensions,
+    loadingOverlayVariant: overlaysProps.loadingOverlayVariant
+  };
+  const classes = useUtilityClasses(ownerState);
   const virtualScroller = (0, _useGridVirtualScroller.useGridVirtualScroller)();
   const {
     getContainerProps,
@@ -79,6 +93,7 @@ function GridVirtualScroller(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridMainContainer.GridMainContainer, (0, _extends2.default)({
     className: classes.root
   }, getContainerProps(), {
+    ownerState: ownerState,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, {
       scrollDirection: "left"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, {
@@ -86,13 +101,13 @@ function GridVirtualScroller(props) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Scroller, (0, _extends2.default)({
       className: classes.scroller
     }, getScrollerProps(), {
-      ownerState: rootProps,
+      ownerState: ownerState,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridTopContainer.GridTopContainer, {
         children: [!rootProps.unstable_listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeaders.GridHeaders, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pinnedRows, {
           position: "top",
           virtualScroller: virtualScroller
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlays.GridOverlays, (0, _extends2.default)({}, overlaysProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerContent.GridVirtualScrollerContent, (0, _extends2.default)({}, getContentProps(), {
+      }), getOverlay(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerContent.GridVirtualScrollerContent, (0, _extends2.default)({}, getContentProps(), {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridVirtualScrollerRenderZone.GridVirtualScrollerRenderZone, (0, _extends2.default)({}, getRenderZoneProps(), {
           children: [rows, /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.detailPanels, {
             virtualScroller: virtualScroller
@@ -106,10 +121,10 @@ function GridVirtualScroller(props) {
           virtualScroller: virtualScroller
         })
       })]
-    })), dimensions.hasScrollY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
-      position: "vertical"
-    }, getScrollbarVerticalProps())), dimensions.hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
+    })), dimensions.hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
       position: "horizontal"
-    }, getScrollbarHorizontalProps())), props.children]
+    }, getScrollbarHorizontalProps())), dimensions.hasScrollY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
+      position: "vertical"
+    }, getScrollbarVerticalProps())), props.children]
   }));
 }

package/node/components/virtualization/GridVirtualScrollerContent.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -26,16 +27,24 @@ const useUtilityClasses = (props, overflowedContent) => {
 const VirtualScrollerContentRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'VirtualScrollerContent',
-  overridesResolver: (props, styles) => styles.virtualScrollerContent
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.virtualScrollerContent, ownerState.overflowedContent && styles['virtualScrollerContent--overflowed']];
+  }
 })({});
-const GridVirtualScrollerContent = exports.GridVirtualScrollerContent = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerContent(props, ref) {
+const GridVirtualScrollerContent = exports.GridVirtualScrollerContent = (0, _forwardRef.forwardRef)(function GridVirtualScrollerContent(props, ref) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const overflowedContent = !rootProps.autoHeight && props.style?.minHeight === 'auto';
   const classes = useUtilityClasses(rootProps, overflowedContent);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerContentRoot, (0, _extends2.default)({
+  const ownerState = {
+    classes: rootProps.classes,
+    overflowedContent
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerContentRoot, (0, _extends2.default)({}, props, {
+    ownerState: ownerState,
+    className: (0, _clsx.default)(classes.root, props.className),
     ref: ref
-  }, props, {
-    ownerState: rootProps,
-    className: (0, _clsx.default)(classes.root, props.className)
   }));
 });

package/node/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _rows = require("../../hooks/features/rows");
@@ -39,7 +40,7 @@ const VirtualScrollerRenderZoneRoot = (0, _system.styled)('div', {
   // Prevents margin collapsing when using `getRowSpacing`
   flexDirection: 'column'
 });
-const GridVirtualScrollerRenderZone = exports.GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
+const GridVirtualScrollerRenderZone = exports.GridVirtualScrollerRenderZone = (0, _forwardRef.forwardRef)(function GridVirtualScrollerRenderZone(props, ref) {
   const {
       className
     } = props,
@@ -53,11 +54,12 @@ const GridVirtualScrollerRenderZone = exports.GridVirtualScrollerRenderZone = /*
     return rowsMeta.positions[renderContext.firstRowIndex] ?? 0;
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerRenderZoneRoot, (0, _extends2.default)({
-    ref: ref,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps,
     style: {
       transform: `translate3d(0, ${offsetTop}px, 0)`
     }
-  }, other));
+  }, other, {
+    ref: ref
+  }));
 });

package/node/constants/dataGridPropsDefaultValues.js

@@ -40,8 +40,6 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
   hideFooterSelectedRowCount: false,
   ignoreDiacritics: false,
   ignoreValueFormatterDuringExport: false,
-  // TODO v8: Update to 'select'
-  indeterminateCheckboxAction: 'deselect',
   keepColumnPositionIfDraggedOutside: false,
   keepNonExistentRowsSelected: false,
   loading: false,
@@ -53,14 +51,14 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
   resizeThrottleMs: 60,
   rowBufferPx: 150,
   rowHeight: 52,
-  rowPositionsDebounceMs: 166,
   rows: [],
   rowSelection: true,
   rowSpacingType: 'margin',
+  rowSpanning: false,
   showCellVerticalBorder: false,
   showColumnVerticalBorder: false,
   sortingMode: 'client',
   sortingOrder: ['asc', 'desc', null],
   throttleRowsMs: 0,
-  unstable_rowSpanning: false
+  virtualizeColumnsWithAutoRowHeight: false
 };

package/node/constants/gridClasses.js

@@ -9,4 +9,4 @@ var _utils = require("@mui/utils");
 function getDataGridUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiDataGrid', slot);
 }
-const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'toolbarPromptControl', 'toolbarPromptControl--recording', 'toolbarPromptControlRecordingIndicator', 'toolbarPromptControlRecordButton', 'toolbarPromptControlSendButton', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom']);

package/node/constants/localeTextConstants.js

@@ -27,6 +27,16 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   toolbarQuickFilterPlaceholder: 'Search…',
   toolbarQuickFilterLabel: 'Search',
   toolbarQuickFilterDeleteIconLabel: 'Clear',
+  // Prompt toolbar field
+  toolbarPromptControlPlaceholder: 'Type a prompt…',
+  toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
+  toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
+  toolbarPromptControlLabel: 'Prompt input',
+  toolbarPromptControlRecordButtonDefaultLabel: 'Record',
+  toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
+  toolbarPromptControlSendActionLabel: 'Send',
+  toolbarPromptControlSendActionAriaLabel: 'Send prompt',
+  toolbarPromptControlErrorMessage: 'An error occurred while processing the request. Please try again with a different prompt.',
   // Export selector toolbar button text
   toolbarExport: 'Export',
   toolbarExportLabel: 'Export',
@@ -38,6 +48,7 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   columnsManagementNoColumns: 'No columns',
   columnsManagementShowHideAllText: 'Show/Hide All',
   columnsManagementReset: 'Reset',
+  columnsManagementDeleteIconLabel: 'Clear',
   // Filter panel text
   filterPanelAddFilter: 'Add filter',
   filterPanelRemoveAll: 'Remove all',
@@ -93,6 +104,7 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   'headerFilterOperator>=': 'Greater than or equal to',
   'headerFilterOperator<': 'Less than',
   'headerFilterOperator<=': 'Less than or equal to',
+  headerFilterClear: 'Clear filter',
   // Filter values text
   filterValueAny: 'any',
   filterValueTrue: 'true',

package/node/context/GridRootPropsContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {