@mui/x-data-grid 9.0.0-beta.0 → 9.0.0

package/components/virtualization/GridVirtualScroller.mjs

@@ -2,13 +2,15 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
+import clsx from 'clsx';
+import { Virtualization } from '@mui/x-virtualizer';
 import { gridHasBottomFillerSelector, gridHasScrollXSelector, gridHasScrollYSelector } from "../../hooks/features/dimensions/gridDimensionsSelectors.mjs";
 import { gridRowTreeSelector } from "../../hooks/features/rows/index.mjs";
 import { GridScrollArea } from "../GridScrollArea.mjs";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.mjs";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.mjs";
-import { getDataGridUtilityClass } from "../../constants/gridClasses.mjs";
+import { getDataGridUtilityClass, gridClasses } from "../../constants/gridClasses.mjs";
 import { useGridOverlays } from "../../hooks/features/overlays/useGridOverlays.mjs";
 import { GridHeaders } from "../GridHeaders.mjs";
 import { GridMainContainer as Container } from "./GridMainContainer.mjs";
@@ -50,9 +52,9 @@ const Scroller = styled('div', {
   height: '100%',
   flexGrow: 1,
   overflow: 'scroll',
-  scrollbarWidth: 'none' /* Firefox */,
   display: 'flex',
   flexDirection: 'column',
+  scrollbarWidth: 'none' /* Firefox */,
   '&::-webkit-scrollbar': {
     display: 'none' /* Safari and Chrome */
   },
@@ -62,6 +64,23 @@ const Scroller = styled('div', {
   // See https://github.com/mui/mui-x/issues/10547
   zIndex: 0
 });
+const Viewport = styled('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
+  display: 'contents',
+  [`.${gridClasses['virtualizer--layoutControlled']} &`]: {
+    display: 'inline-block',
+    position: 'sticky',
+    top: 0,
+    left: 0,
+    overflow: 'hidden',
+    scrollbarWidth: 'none' /* Firefox */,
+    '&::-webkit-scrollbar': {
+      display: 'none' /* Safari and Chrome */
+    }
+  }
+});
 const hasPinnedRightSelector = apiRef => apiRef.current.state.dimensions.rightPinnedWidth > 0;
 function GridVirtualScroller(props) {
   const apiRef = useGridPrivateApiContext();
@@ -83,20 +102,26 @@ function GridVirtualScroller(props) {
     loadingOverlayVariant
   };
   const classes = useUtilityClasses(ownerState);
-  const virtualScroller = useGridVirtualizer().api.getters;
+  const virtualizer = useGridVirtualizer();
+  const layoutMode = virtualizer.store.use(Virtualization.selectors.layoutMode);
+  const hasContentFiller = layoutMode === 'uncontrolled' && loadingOverlayVariant !== 'skeleton';
   const {
     getContainerProps,
     getScrollerProps,
+    getScrollerContentProps,
+    getViewportProps,
     getContentProps,
     getPositionerProps,
     getScrollbarVerticalProps,
     getScrollbarHorizontalProps,
     getRows,
-    getScrollAreaProps
-  } = virtualScroller;
+    getScrollAreaProps,
+    getContainerVerticalProps
+  } = virtualizer.api.getters;
   const rows = getRows(undefined, gridRowTreeSelector(apiRef));
+  const containerVerticalProps = getContainerVerticalProps();
   return /*#__PURE__*/_jsxs(Container, _extends({
-    className: classes.root
+    className: clsx(classes.root, layoutMode === 'controlled' && gridClasses['virtualizer--layoutControlled'])
   }, getContainerProps(), {
     ownerState: ownerState,
     children: [/*#__PURE__*/_jsx(GridScrollArea, _extends({
@@ -107,35 +132,35 @@ function GridVirtualScroller(props) {
       scrollDirection: "up"
     }, getScrollAreaProps())), /*#__PURE__*/_jsx(GridScrollArea, _extends({
       scrollDirection: "down"
-    }, getScrollAreaProps())), /*#__PURE__*/_jsxs(Scroller, _extends({
+    }, getScrollAreaProps())), /*#__PURE__*/_jsx(Scroller, _extends({
       className: classes.scroller
     }, getScrollerProps(), {
       ownerState: ownerState,
-      children: [/*#__PURE__*/_jsxs(TopContainer, {
-        children: [!rootProps.listView && /*#__PURE__*/_jsx(GridHeaders, {}), /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
-          position: "top",
-          virtualScroller: virtualScroller
-        })]
-      }), overlayType && /*#__PURE__*/_jsx(GridOverlayWrapper, {
-        overlayType: overlayType,
-        loadingOverlayVariant: loadingOverlayVariant,
-        children: /*#__PURE__*/_jsx(Overlay, _extends({}, rootProps.slotProps?.[overlayType]))
-      }), /*#__PURE__*/_jsx(Content, _extends({}, getContentProps(), {
-        children: /*#__PURE__*/_jsxs(RenderZone, _extends({
-          role: "rowgroup"
-        }, getPositionerProps(), {
-          children: [rows, /*#__PURE__*/_jsx(rootProps.slots.detailPanels, {
-            virtualScroller: virtualScroller
-          })]
+      children: /*#__PURE__*/_jsx(Content, _extends({}, getScrollerContentProps(), {
+        children: /*#__PURE__*/_jsxs(Viewport, _extends({}, getViewportProps(), {
+          children: [/*#__PURE__*/_jsxs(TopContainer, _extends({}, containerVerticalProps, {
+            children: [!rootProps.listView && /*#__PURE__*/_jsx(GridHeaders, {}), /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
+              position: "top"
+            })]
+          })), overlayType && /*#__PURE__*/_jsx(GridOverlayWrapper, {
+            overlayType: overlayType,
+            loadingOverlayVariant: loadingOverlayVariant,
+            children: /*#__PURE__*/_jsx(Overlay, _extends({}, rootProps.slotProps?.[overlayType]))
+          }), /*#__PURE__*/_jsxs(RenderZone, _extends({
+            role: "rowgroup"
+          }, getPositionerProps(), {
+            children: [rows, /*#__PURE__*/_jsx(rootProps.slots.detailPanels, {})]
+          })), hasContentFiller && /*#__PURE__*/_jsx("div", _extends({
+            className: gridClasses.contentFiller
+          }, getContentProps())), hasBottomFiller && /*#__PURE__*/_jsx(SpaceFiller, {
+            rowsLength: rows.length
+          }), /*#__PURE__*/_jsx(rootProps.slots.bottomContainer, _extends({}, containerVerticalProps, {
+            children: /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
+              position: "bottom"
+            })
+          }))]
         }))
-      })), hasBottomFiller && /*#__PURE__*/_jsx(SpaceFiller, {
-        rowsLength: rows.length
-      }), /*#__PURE__*/_jsx(rootProps.slots.bottomContainer, {
-        children: /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
-          position: "bottom",
-          virtualScroller: virtualScroller
-        })
-      })]
+      }))
     })), hasScrollX && /*#__PURE__*/_jsxs(React.Fragment, {
       children: [rootProps.pinnedColumnsSectionSeparator?.endsWith('shadow') && /*#__PURE__*/_jsx(ScrollShadows, {
         position: "horizontal"

package/components/virtualization/GridVirtualScrollerContent.js

@@ -34,7 +34,11 @@ const VirtualScrollerContentRoot = (0, _system.styled)('div', {
     } = props;
     return [styles.virtualScrollerContent, ownerState.overflowedContent && styles['virtualScrollerContent--overflowed']];
   }
-})({});
+})({
+  flex: '1 0 auto',
+  display: 'flex',
+  flexDirection: 'column'
+});
 const GridVirtualScrollerContent = exports.GridVirtualScrollerContent = (0, _forwardRef.forwardRef)(function GridVirtualScrollerContent(props, ref) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const overflowedContent = !rootProps.autoHeight && props.style?.minHeight === 'auto';

package/components/virtualization/GridVirtualScrollerContent.mjs

@@ -27,7 +27,11 @@ const VirtualScrollerContentRoot = styled('div', {
     } = props;
     return [styles.virtualScrollerContent, ownerState.overflowedContent && styles['virtualScrollerContent--overflowed']];
   }
-})({});
+})({
+  flex: '1 0 auto',
+  display: 'flex',
+  flexDirection: 'column'
+});
 const GridVirtualScrollerContent = forwardRef(function GridVirtualScrollerContent(props, ref) {
   const rootProps = useGridRootProps();
   const overflowedContent = !rootProps.autoHeight && props.style?.minHeight === 'auto';

package/constants/gridClasses.d.mts

@@ -136,6 +136,30 @@ export interface GridClasses {
    * Styles applied to the cell element if it is at the right edge of a cell selection range.
    */
   'cell--rangeRight': string;
+  /**
+   * Styles applied to the cell element when it displays the fill handle.
+   */
+  'cell--withFillHandle': string;
+  /**
+   * Styles applied to the cell element when it is in the fill preview range.
+   */
+  'cell--fillPreview': string;
+  /**
+   * Styles applied to the cell element if it is at the top edge of the fill preview range.
+   */
+  'cell--fillPreviewTop': string;
+  /**
+   * Styles applied to the cell element if it is at the bottom edge of the fill preview range.
+   */
+  'cell--fillPreviewBottom': string;
+  /**
+   * Styles applied to the cell element if it is at the left edge of the fill preview range.
+   */
+  'cell--fillPreviewLeft': string;
+  /**
+   * Styles applied to the cell element if it is at the right edge of the fill preview range.
+   */
+  'cell--fillPreviewRight': string;
   /**
    * Styles applied to the cell element if it is pinned to the left.
    */
@@ -336,6 +360,11 @@ export interface GridClasses {
    * Styles applied to the columns management empty text element.
    */
   columnsManagementEmptyText: string;
+  /**
+   * Styles applied to the content filler.
+   * @ignore - do not document.
+   */
+  contentFiller: string;
   /**
    * Styles applied to the top container.
    */
@@ -408,6 +437,11 @@ export interface GridClasses {
    * @ignore - do not document.
    */
   'filler--pinnedRight': string;
+  /**
+   * Styles applied to the horizontal filler element.
+   * @ignore - do not document.
+   */
+  'filler--horizontal': string;
   /**
    * Styles applied to the root of the filter form component.
    */
@@ -604,6 +638,11 @@ export interface GridClasses {
    * @ignore - do not document.
    */
   'root--noToolbar': string;
+  /**
+   * Styles applied to the root element when layout mode is "controlled".
+   * @ignore - do not document.
+   */
+  'virtualizer--layoutControlled': string;
   /**
    * Styles applied to the row element if the row is editable.
    */
@@ -974,6 +1013,6 @@ export declare function getDataGridUtilityClass(slot: string): string;
  */
 export declare const gridClassesOverrides: {
   readonly root: ["autoHeight", "autosizing", "root--densityStandard", "root--densityComfortable", "root--densityCompact", "root--disableUserSelection", "root--noToolbar", "withVerticalBorder"];
-  readonly children: ["actionsCell", "booleanCell", "cell", "cell--editable", "cell--editing", "cell--flex", "cell--pinnedLeft", "cell--pinnedRight", "cell--rangeBottom", "cell--rangeLeft", "cell--rangeRight", "cell--rangeTop", "cell--selectionMode", "cell--textCenter", "cell--textLeft", "cell--textRight", "cell--withLeftBorder", "cell--withRightBorder", "cellCheckbox", "cellEmpty", "cellOffsetLeft", "cellSkeleton", "checkboxInput", "columnHeader", "columnHeader--alignCenter", "columnHeader--alignLeft", "columnHeader--alignRight", "columnHeader--dragging", "columnHeader--emptyGroup", "columnHeader--filledGroup", "columnHeader--filtered", "columnHeader--last", "columnHeader--moving", "columnHeader--numeric", "columnHeader--pinnedLeft", "columnHeader--pinnedRight", "columnHeader--siblingFocused", "columnHeader--sortable", "columnHeader--sorted", "columnHeader--withLeftBorder", "columnHeader--withRightBorder", "columnHeaderCheckbox", "columnHeaderDraggableContainer", "columnHeaderTitleContainer", "columnHeaderTitleContainerContent", "columnSeparator", "columnSeparator--resizable", "columnSeparator--resizing", "columnSeparator--sideLeft", "columnSeparator--sideRight", "container--bottom", "container--top", "detailPanelToggleCell", "detailPanelToggleCell--expanded", "editBooleanCell", "filterIcon", "filler--borderBottom", "filler--pinnedLeft", "filler--pinnedRight", "groupingCriteriaCell", "groupingCriteriaCellLoadingContainer", "groupingCriteriaCellToggle", "headerFilterRow", "iconSeparator", "menuIcon", "menuIconButton", "menuList", "menuOpen", "overlayWrapperInner", "pinnedRows", "pinnedRows--bottom", "pinnedRows--top", "row", "row--borderBottom", "row--detailPanelExpanded", "row--dragging", "row--dynamicHeight", "row--editable", "row--editing", "row--firstVisible", "row--lastVisible", "rowReorderCell", "rowReorderCell--draggable", "rowReorderCellContainer", "rowReorderCellPlaceholder", "rowSkeleton", "scrollbar", "scrollbar--horizontal", "scrollbar--vertical", "scrollbarFiller", "scrollbarFiller--pinnedRight", "sortIcon", "treeDataGroupingCell", "treeDataGroupingCellLoadingContainer", "treeDataGroupingCellToggle", "withBorderColor", "row--beingDragged"];
+  readonly children: ["actionsCell", "booleanCell", "cell", "cell--editable", "cell--editing", "cell--flex", "cell--pinnedLeft", "cell--pinnedRight", "cell--rangeBottom", "cell--rangeLeft", "cell--rangeRight", "cell--rangeTop", "cell--withFillHandle", "cell--fillPreview", "cell--fillPreviewTop", "cell--fillPreviewBottom", "cell--fillPreviewLeft", "cell--fillPreviewRight", "cell--selectionMode", "cell--textCenter", "cell--textLeft", "cell--textRight", "cell--withLeftBorder", "cell--withRightBorder", "cellCheckbox", "cellEmpty", "cellOffsetLeft", "cellSkeleton", "checkboxInput", "columnHeader", "columnHeader--alignCenter", "columnHeader--alignLeft", "columnHeader--alignRight", "columnHeader--dragging", "columnHeader--emptyGroup", "columnHeader--filledGroup", "columnHeader--filtered", "columnHeader--last", "columnHeader--moving", "columnHeader--numeric", "columnHeader--pinnedLeft", "columnHeader--pinnedRight", "columnHeader--siblingFocused", "columnHeader--sortable", "columnHeader--sorted", "columnHeader--withLeftBorder", "columnHeader--withRightBorder", "columnHeaderCheckbox", "columnHeaderDraggableContainer", "columnHeaderTitleContainer", "columnHeaderTitleContainerContent", "columnSeparator", "columnSeparator--resizable", "columnSeparator--resizing", "columnSeparator--sideLeft", "columnSeparator--sideRight", "container--bottom", "container--top", "detailPanelToggleCell", "detailPanelToggleCell--expanded", "editBooleanCell", "filterIcon", "filler--borderBottom", "filler--pinnedLeft", "filler--pinnedRight", "groupingCriteriaCell", "groupingCriteriaCellLoadingContainer", "groupingCriteriaCellToggle", "headerFilterRow", "iconSeparator", "menuIcon", "menuIconButton", "menuList", "menuOpen", "overlayWrapperInner", "pinnedRows", "pinnedRows--bottom", "pinnedRows--top", "row", "row--borderBottom", "row--detailPanelExpanded", "row--dragging", "row--dynamicHeight", "row--editable", "row--editing", "row--firstVisible", "row--lastVisible", "rowReorderCell", "rowReorderCell--draggable", "rowReorderCellContainer", "rowReorderCellPlaceholder", "rowSkeleton", "scrollbar", "scrollbar--horizontal", "scrollbar--vertical", "scrollbarFiller", "scrollbarFiller--pinnedRight", "sortIcon", "treeDataGroupingCell", "treeDataGroupingCellLoadingContainer", "treeDataGroupingCellToggle", "withBorderColor", "row--beingDragged"];
 };
 export declare const gridClasses: Record<keyof GridClasses, string>;

package/constants/gridClasses.d.ts

@@ -136,6 +136,30 @@ export interface GridClasses {
    * Styles applied to the cell element if it is at the right edge of a cell selection range.
    */
   'cell--rangeRight': string;
+  /**
+   * Styles applied to the cell element when it displays the fill handle.
+   */
+  'cell--withFillHandle': string;
+  /**
+   * Styles applied to the cell element when it is in the fill preview range.
+   */
+  'cell--fillPreview': string;
+  /**
+   * Styles applied to the cell element if it is at the top edge of the fill preview range.
+   */
+  'cell--fillPreviewTop': string;
+  /**
+   * Styles applied to the cell element if it is at the bottom edge of the fill preview range.
+   */
+  'cell--fillPreviewBottom': string;
+  /**
+   * Styles applied to the cell element if it is at the left edge of the fill preview range.
+   */
+  'cell--fillPreviewLeft': string;
+  /**
+   * Styles applied to the cell element if it is at the right edge of the fill preview range.
+   */
+  'cell--fillPreviewRight': string;
   /**
    * Styles applied to the cell element if it is pinned to the left.
    */
@@ -336,6 +360,11 @@ export interface GridClasses {
    * Styles applied to the columns management empty text element.
    */
   columnsManagementEmptyText: string;
+  /**
+   * Styles applied to the content filler.
+   * @ignore - do not document.
+   */
+  contentFiller: string;
   /**
    * Styles applied to the top container.
    */
@@ -408,6 +437,11 @@ export interface GridClasses {
    * @ignore - do not document.
    */
   'filler--pinnedRight': string;
+  /**
+   * Styles applied to the horizontal filler element.
+   * @ignore - do not document.
+   */
+  'filler--horizontal': string;
   /**
    * Styles applied to the root of the filter form component.
    */
@@ -604,6 +638,11 @@ export interface GridClasses {
    * @ignore - do not document.
    */
   'root--noToolbar': string;
+  /**
+   * Styles applied to the root element when layout mode is "controlled".
+   * @ignore - do not document.
+   */
+  'virtualizer--layoutControlled': string;
   /**
    * Styles applied to the row element if the row is editable.
    */
@@ -974,6 +1013,6 @@ export declare function getDataGridUtilityClass(slot: string): string;
  */
 export declare const gridClassesOverrides: {
   readonly root: ["autoHeight", "autosizing", "root--densityStandard", "root--densityComfortable", "root--densityCompact", "root--disableUserSelection", "root--noToolbar", "withVerticalBorder"];
-  readonly children: ["actionsCell", "booleanCell", "cell", "cell--editable", "cell--editing", "cell--flex", "cell--pinnedLeft", "cell--pinnedRight", "cell--rangeBottom", "cell--rangeLeft", "cell--rangeRight", "cell--rangeTop", "cell--selectionMode", "cell--textCenter", "cell--textLeft", "cell--textRight", "cell--withLeftBorder", "cell--withRightBorder", "cellCheckbox", "cellEmpty", "cellOffsetLeft", "cellSkeleton", "checkboxInput", "columnHeader", "columnHeader--alignCenter", "columnHeader--alignLeft", "columnHeader--alignRight", "columnHeader--dragging", "columnHeader--emptyGroup", "columnHeader--filledGroup", "columnHeader--filtered", "columnHeader--last", "columnHeader--moving", "columnHeader--numeric", "columnHeader--pinnedLeft", "columnHeader--pinnedRight", "columnHeader--siblingFocused", "columnHeader--sortable", "columnHeader--sorted", "columnHeader--withLeftBorder", "columnHeader--withRightBorder", "columnHeaderCheckbox", "columnHeaderDraggableContainer", "columnHeaderTitleContainer", "columnHeaderTitleContainerContent", "columnSeparator", "columnSeparator--resizable", "columnSeparator--resizing", "columnSeparator--sideLeft", "columnSeparator--sideRight", "container--bottom", "container--top", "detailPanelToggleCell", "detailPanelToggleCell--expanded", "editBooleanCell", "filterIcon", "filler--borderBottom", "filler--pinnedLeft", "filler--pinnedRight", "groupingCriteriaCell", "groupingCriteriaCellLoadingContainer", "groupingCriteriaCellToggle", "headerFilterRow", "iconSeparator", "menuIcon", "menuIconButton", "menuList", "menuOpen", "overlayWrapperInner", "pinnedRows", "pinnedRows--bottom", "pinnedRows--top", "row", "row--borderBottom", "row--detailPanelExpanded", "row--dragging", "row--dynamicHeight", "row--editable", "row--editing", "row--firstVisible", "row--lastVisible", "rowReorderCell", "rowReorderCell--draggable", "rowReorderCellContainer", "rowReorderCellPlaceholder", "rowSkeleton", "scrollbar", "scrollbar--horizontal", "scrollbar--vertical", "scrollbarFiller", "scrollbarFiller--pinnedRight", "sortIcon", "treeDataGroupingCell", "treeDataGroupingCellLoadingContainer", "treeDataGroupingCellToggle", "withBorderColor", "row--beingDragged"];
+  readonly children: ["actionsCell", "booleanCell", "cell", "cell--editable", "cell--editing", "cell--flex", "cell--pinnedLeft", "cell--pinnedRight", "cell--rangeBottom", "cell--rangeLeft", "cell--rangeRight", "cell--rangeTop", "cell--withFillHandle", "cell--fillPreview", "cell--fillPreviewTop", "cell--fillPreviewBottom", "cell--fillPreviewLeft", "cell--fillPreviewRight", "cell--selectionMode", "cell--textCenter", "cell--textLeft", "cell--textRight", "cell--withLeftBorder", "cell--withRightBorder", "cellCheckbox", "cellEmpty", "cellOffsetLeft", "cellSkeleton", "checkboxInput", "columnHeader", "columnHeader--alignCenter", "columnHeader--alignLeft", "columnHeader--alignRight", "columnHeader--dragging", "columnHeader--emptyGroup", "columnHeader--filledGroup", "columnHeader--filtered", "columnHeader--last", "columnHeader--moving", "columnHeader--numeric", "columnHeader--pinnedLeft", "columnHeader--pinnedRight", "columnHeader--siblingFocused", "columnHeader--sortable", "columnHeader--sorted", "columnHeader--withLeftBorder", "columnHeader--withRightBorder", "columnHeaderCheckbox", "columnHeaderDraggableContainer", "columnHeaderTitleContainer", "columnHeaderTitleContainerContent", "columnSeparator", "columnSeparator--resizable", "columnSeparator--resizing", "columnSeparator--sideLeft", "columnSeparator--sideRight", "container--bottom", "container--top", "detailPanelToggleCell", "detailPanelToggleCell--expanded", "editBooleanCell", "filterIcon", "filler--borderBottom", "filler--pinnedLeft", "filler--pinnedRight", "groupingCriteriaCell", "groupingCriteriaCellLoadingContainer", "groupingCriteriaCellToggle", "headerFilterRow", "iconSeparator", "menuIcon", "menuIconButton", "menuList", "menuOpen", "overlayWrapperInner", "pinnedRows", "pinnedRows--bottom", "pinnedRows--top", "row", "row--borderBottom", "row--detailPanelExpanded", "row--dragging", "row--dynamicHeight", "row--editable", "row--editing", "row--firstVisible", "row--lastVisible", "rowReorderCell", "rowReorderCell--draggable", "rowReorderCellContainer", "rowReorderCellPlaceholder", "rowSkeleton", "scrollbar", "scrollbar--horizontal", "scrollbar--vertical", "scrollbarFiller", "scrollbarFiller--pinnedRight", "sortIcon", "treeDataGroupingCell", "treeDataGroupingCellLoadingContainer", "treeDataGroupingCellToggle", "withBorderColor", "row--beingDragged"];
 };
 export declare const gridClasses: Record<keyof GridClasses, string>;

package/constants/gridClasses.js

@@ -26,8 +26,8 @@ function getDataGridUtilityClass(slot) {
  */
 const gridClassesOverrides = exports.gridClassesOverrides = {
   root: ['autoHeight', 'autosizing', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'withVerticalBorder'],
-  children: ['actionsCell', 'booleanCell', 'cell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--rangeTop', 'cell--selectionMode', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withLeftBorder', 'cell--withRightBorder', 'cellCheckbox', 'cellEmpty', 'cellOffsetLeft', 'cellSkeleton', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--emptyGroup', 'columnHeader--filledGroup', 'columnHeader--filtered', 'columnHeader--last', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--siblingFocused', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnSeparator', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'container--bottom', 'container--top', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'editBooleanCell', 'filterIcon', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'groupingCriteriaCell', 'groupingCriteriaCellLoadingContainer', 'groupingCriteriaCellToggle', 'headerFilterRow', 'iconSeparator', 'menuIcon', 'menuIconButton', 'menuList', 'menuOpen', 'overlayWrapperInner', 'pinnedRows', 'pinnedRows--bottom', 'pinnedRows--top', 'row', 'row--borderBottom', 'row--detailPanelExpanded',
+  children: ['actionsCell', 'booleanCell', 'cell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--rangeTop', 'cell--withFillHandle', 'cell--fillPreview', 'cell--fillPreviewTop', 'cell--fillPreviewBottom', 'cell--fillPreviewLeft', 'cell--fillPreviewRight', 'cell--selectionMode', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withLeftBorder', 'cell--withRightBorder', 'cellCheckbox', 'cellEmpty', 'cellOffsetLeft', 'cellSkeleton', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--emptyGroup', 'columnHeader--filledGroup', 'columnHeader--filtered', 'columnHeader--last', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--siblingFocused', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnSeparator', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'container--bottom', 'container--top', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'editBooleanCell', 'filterIcon', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'groupingCriteriaCell', 'groupingCriteriaCellLoadingContainer', 'groupingCriteriaCellToggle', 'headerFilterRow', 'iconSeparator', 'menuIcon', 'menuIconButton', 'menuList', 'menuOpen', 'overlayWrapperInner', 'pinnedRows', 'pinnedRows--bottom', 'pinnedRows--top', 'row', 'row--borderBottom', 'row--detailPanelExpanded',
   // TODO v9: Rename to `cell--dragging`
   'row--dragging', 'row--dynamicHeight', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderCellContainer', 'rowReorderCellPlaceholder', 'rowSkeleton', 'scrollbar', 'scrollbar--horizontal', 'scrollbar--vertical', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'sortIcon', 'treeDataGroupingCell', 'treeDataGroupingCellLoadingContainer', 'treeDataGroupingCellToggle', 'withBorderColor', 'row--beingDragged']
 };
-const gridClasses = exports.gridClasses = (0, _generateUtilityClasses.default)('MuiDataGrid', [...gridClassesOverrides.root, ...gridClassesOverrides.children, 'aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'mainContent', 'withSidePanel', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderTitle', 'columnHeaders', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'detailPanel', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editInputCell', 'longTextCell', 'longTextCellContent', 'longTextCellExpandButton', 'longTextCellCollapseButton', 'longTextCellPopup', 'longTextCellPopperContent', 'editLongTextCell', 'editLongTextCellValue', 'editLongTextCellPopup', 'editLongTextCellPopperContent', 'editLongTextCellTextarea', 'filler', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'footerContainer', 'iconButtonContainer', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'overlay', 'overlayWrapper', 'root', 'rowCount', 'rowReorderIcon', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction', 'resizablePanelHandle', 'resizablePanelHandle--horizontal', 'resizablePanelHandle--vertical']);
+const gridClasses = exports.gridClasses = (0, _generateUtilityClasses.default)('MuiDataGrid', [...gridClassesOverrides.root, ...gridClassesOverrides.children, 'aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'mainContent', 'withSidePanel', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderTitle', 'columnHeaders', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'contentFiller', 'detailPanel', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editInputCell', 'longTextCell', 'longTextCellContent', 'longTextCellExpandButton', 'longTextCellCollapseButton', 'longTextCellPopup', 'longTextCellPopperContent', 'editLongTextCell', 'editLongTextCellValue', 'editLongTextCellPopup', 'editLongTextCellPopperContent', 'editLongTextCellTextarea', 'filler', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filler--horizontal', 'footerContainer', 'iconButtonContainer', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'overlay', 'overlayWrapper', 'root', 'virtualizer--layoutControlled', 'rowCount', 'rowReorderIcon', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction', 'resizablePanelHandle', 'resizablePanelHandle--horizontal', 'resizablePanelHandle--vertical']);

package/constants/gridClasses.mjs

@@ -18,8 +18,8 @@ export function getDataGridUtilityClass(slot) {
  */
 export const gridClassesOverrides = {
   root: ['autoHeight', 'autosizing', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'withVerticalBorder'],
-  children: ['actionsCell', 'booleanCell', 'cell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--rangeTop', 'cell--selectionMode', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withLeftBorder', 'cell--withRightBorder', 'cellCheckbox', 'cellEmpty', 'cellOffsetLeft', 'cellSkeleton', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--emptyGroup', 'columnHeader--filledGroup', 'columnHeader--filtered', 'columnHeader--last', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--siblingFocused', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnSeparator', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'container--bottom', 'container--top', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'editBooleanCell', 'filterIcon', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'groupingCriteriaCell', 'groupingCriteriaCellLoadingContainer', 'groupingCriteriaCellToggle', 'headerFilterRow', 'iconSeparator', 'menuIcon', 'menuIconButton', 'menuList', 'menuOpen', 'overlayWrapperInner', 'pinnedRows', 'pinnedRows--bottom', 'pinnedRows--top', 'row', 'row--borderBottom', 'row--detailPanelExpanded',
+  children: ['actionsCell', 'booleanCell', 'cell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--rangeTop', 'cell--withFillHandle', 'cell--fillPreview', 'cell--fillPreviewTop', 'cell--fillPreviewBottom', 'cell--fillPreviewLeft', 'cell--fillPreviewRight', 'cell--selectionMode', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withLeftBorder', 'cell--withRightBorder', 'cellCheckbox', 'cellEmpty', 'cellOffsetLeft', 'cellSkeleton', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--emptyGroup', 'columnHeader--filledGroup', 'columnHeader--filtered', 'columnHeader--last', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--siblingFocused', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnSeparator', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'container--bottom', 'container--top', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'editBooleanCell', 'filterIcon', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'groupingCriteriaCell', 'groupingCriteriaCellLoadingContainer', 'groupingCriteriaCellToggle', 'headerFilterRow', 'iconSeparator', 'menuIcon', 'menuIconButton', 'menuList', 'menuOpen', 'overlayWrapperInner', 'pinnedRows', 'pinnedRows--bottom', 'pinnedRows--top', 'row', 'row--borderBottom', 'row--detailPanelExpanded',
   // TODO v9: Rename to `cell--dragging`
   'row--dragging', 'row--dynamicHeight', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderCellContainer', 'rowReorderCellPlaceholder', 'rowSkeleton', 'scrollbar', 'scrollbar--horizontal', 'scrollbar--vertical', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'sortIcon', 'treeDataGroupingCell', 'treeDataGroupingCellLoadingContainer', 'treeDataGroupingCellToggle', 'withBorderColor', 'row--beingDragged']
 };
-export const gridClasses = generateUtilityClasses('MuiDataGrid', [...gridClassesOverrides.root, ...gridClassesOverrides.children, 'aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'mainContent', 'withSidePanel', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderTitle', 'columnHeaders', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'detailPanel', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editInputCell', 'longTextCell', 'longTextCellContent', 'longTextCellExpandButton', 'longTextCellCollapseButton', 'longTextCellPopup', 'longTextCellPopperContent', 'editLongTextCell', 'editLongTextCellValue', 'editLongTextCellPopup', 'editLongTextCellPopperContent', 'editLongTextCellTextarea', 'filler', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'footerContainer', 'iconButtonContainer', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'overlay', 'overlayWrapper', 'root', 'rowCount', 'rowReorderIcon', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction', 'resizablePanelHandle', 'resizablePanelHandle--horizontal', 'resizablePanelHandle--vertical']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', [...gridClassesOverrides.root, ...gridClassesOverrides.children, 'aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'mainContent', 'withSidePanel', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderTitle', 'columnHeaders', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'contentFiller', 'detailPanel', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editInputCell', 'longTextCell', 'longTextCellContent', 'longTextCellExpandButton', 'longTextCellCollapseButton', 'longTextCellPopup', 'longTextCellPopperContent', 'editLongTextCell', 'editLongTextCellValue', 'editLongTextCellPopup', 'editLongTextCellPopperContent', 'editLongTextCellTextarea', 'filler', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filler--horizontal', 'footerContainer', 'iconButtonContainer', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'overlay', 'overlayWrapper', 'root', 'virtualizer--layoutControlled', 'rowCount', 'rowReorderIcon', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction', 'resizablePanelHandle', 'resizablePanelHandle--horizontal', 'resizablePanelHandle--vertical']);

package/constants/localeTextConstants.js

@@ -61,7 +61,7 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   filterPanelOperator: 'Operator',
   filterPanelOperatorAnd: 'And',
   filterPanelOperatorOr: 'Or',
-  filterPanelColumns: 'Columns',
+  filterPanelColumn: 'Column',
   filterPanelInputLabel: 'Value',
   filterPanelInputPlaceholder: 'Filter value',
   // Filter operators text

package/constants/localeTextConstants.mjs

@@ -55,7 +55,7 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   filterPanelOperator: 'Operator',
   filterPanelOperatorAnd: 'And',
   filterPanelOperatorOr: 'Or',
-  filterPanelColumns: 'Columns',
+  filterPanelColumn: 'Column',
   filterPanelInputLabel: 'Value',
   filterPanelInputPlaceholder: 'Filter value',
   // Filter operators text

package/hooks/core/useGridVirtualizer.js

@@ -133,6 +133,7 @@ function useGridVirtualizer() {
     layout,
     dimensions: dimensionsParams,
     virtualization: {
+      layoutMode: rootProps.experimentalFeatures?.virtualizerLayoutMode ?? 'uncontrolled',
       isRtl,
       rowBufferPx: rootProps.rowBufferPx,
       columnBufferPx: rootProps.columnBufferPx

package/hooks/core/useGridVirtualizer.mjs

@@ -125,6 +125,7 @@ export function useGridVirtualizer() {
     layout,
     dimensions: dimensionsParams,
     virtualization: {
+      layoutMode: rootProps.experimentalFeatures?.virtualizerLayoutMode ?? 'uncontrolled',
       isRtl,
       rowBufferPx: rootProps.rowBufferPx,
       columnBufferPx: rootProps.columnBufferPx

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -19,6 +19,7 @@ var _useGridEvent = require("../../utils/useGridEvent");
 var _GridColumnHeaderItem = require("../../../components/columnHeaders/GridColumnHeaderItem");
 var _gridDimensionsSelectors = require("../dimensions/gridDimensionsSelectors");
 var _virtualization = require("../virtualization");
+var _gridVirtualizationSelectors = require("../virtualization/gridVirtualizationSelectors");
 var _GridColumnGroupHeader = require("../../../components/columnHeaders/GridColumnGroupHeader");
 var _columns = require("../columns");
 var _gridColumnGroupsSelector = require("../columnGrouping/gridColumnGroupsSelector");
@@ -59,7 +60,8 @@ const useGridColumnHeaders = props => {
   const renderContext = (0, _utils.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
   const pinnedColumns = (0, _utils.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
   const columnsLookup = (0, _utils.useGridSelector)(apiRef, _columns.gridColumnLookupSelector);
-  const offsetLeft = (0, _xVirtualizer.computeOffsetLeft)(columnPositions, renderContext, pinnedColumns.left.length);
+  const layoutMode = (0, _utils.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridVirtualizationLayoutModeSelector);
+  const offsetLeft = (0, _xVirtualizer.computeOffsetLeft)(columnPositions, renderContext, pinnedColumns.left.length, layoutMode);
   const columnsTotalWidth = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridColumnsTotalWidthSelector);
   const gridHasFiller = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasFillerSelector);
   const headerHeight = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHeaderHeightSelector);
@@ -114,7 +116,7 @@ const useGridColumnHeaders = props => {
         }
       }), children, isNotPinned && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         role: "presentation",
-        className: (0, _clsx.default)(_gridClasses.gridClasses.filler, borderBottom && _gridClasses.gridClasses['filler--borderBottom'])
+        className: (0, _clsx.default)(_gridClasses.gridClasses.filler, _gridClasses.gridClasses['filler--horizontal'], borderBottom && _gridClasses.gridClasses['filler--borderBottom'])
       }), hasScrollbarFiller && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollbarFillerCell.GridScrollbarFillerCell, {
         pinnedRight: isPinnedRight
       })]
@@ -169,7 +171,8 @@ const useGridColumnHeaders = props => {
       ownerState: rootProps,
       className: _gridClasses.gridClasses['row--borderBottom'],
       style: {
-        height: headerHeight
+        height: headerHeight,
+        '--height': `${headerHeight}px`
       },
       children: [leftRenderContext && getColumnHeaders({
         position: _constants.PinnedColumnPosition.LEFT,
@@ -277,7 +280,8 @@ const useGridColumnHeaders = props => {
         "aria-rowindex": depth + 1,
         ownerState: rootProps,
         style: {
-          height: groupHeaderHeight
+          height: groupHeaderHeight,
+          '--height': `${groupHeaderHeight}px`
         },
         children: [leftRenderContext && getColumnGroupHeaders({
           depth,

package/hooks/features/columnHeaders/useGridColumnHeaders.mjs

@@ -12,6 +12,7 @@ import { useGridEvent } from "../../utils/useGridEvent.mjs";
 import { GridColumnHeaderItem } from "../../../components/columnHeaders/GridColumnHeaderItem.mjs";
 import { gridColumnsTotalWidthSelector, gridGroupHeaderHeightSelector, gridHasFillerSelector, gridHeaderHeightSelector, gridVerticalScrollbarWidthSelector } from "../dimensions/gridDimensionsSelectors.mjs";
 import { gridRenderContextColumnsSelector } from "../virtualization/index.mjs";
+import { gridVirtualizationLayoutModeSelector } from "../virtualization/gridVirtualizationSelectors.mjs";
 import { GridColumnGroupHeader } from "../../../components/columnHeaders/GridColumnGroupHeader.mjs";
 import { gridColumnPositionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnLookupSelector } from "../columns/index.mjs";
 import { gridColumnGroupsUnwrappedModelSelector } from "../columnGrouping/gridColumnGroupsSelector.mjs";
@@ -52,7 +53,8 @@ export const useGridColumnHeaders = props => {
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector);
-  const offsetLeft = computeOffsetLeft(columnPositions, renderContext, pinnedColumns.left.length);
+  const layoutMode = useGridSelector(apiRef, gridVirtualizationLayoutModeSelector);
+  const offsetLeft = computeOffsetLeft(columnPositions, renderContext, pinnedColumns.left.length, layoutMode);
   const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
   const gridHasFiller = useGridSelector(apiRef, gridHasFillerSelector);
   const headerHeight = useGridSelector(apiRef, gridHeaderHeightSelector);
@@ -107,7 +109,7 @@ export const useGridColumnHeaders = props => {
         }
       }), children, isNotPinned && /*#__PURE__*/_jsx("div", {
         role: "presentation",
-        className: clsx(gridClasses.filler, borderBottom && gridClasses['filler--borderBottom'])
+        className: clsx(gridClasses.filler, gridClasses['filler--horizontal'], borderBottom && gridClasses['filler--borderBottom'])
       }), hasScrollbarFiller && /*#__PURE__*/_jsx(ScrollbarFiller, {
         pinnedRight: isPinnedRight
       })]
@@ -162,7 +164,8 @@ export const useGridColumnHeaders = props => {
       ownerState: rootProps,
       className: gridClasses['row--borderBottom'],
       style: {
-        height: headerHeight
+        height: headerHeight,
+        '--height': `${headerHeight}px`
       },
       children: [leftRenderContext && getColumnHeaders({
         position: PinnedColumnPosition.LEFT,
@@ -270,7 +273,8 @@ export const useGridColumnHeaders = props => {
         "aria-rowindex": depth + 1,
         ownerState: rootProps,
         style: {
-          height: groupHeaderHeight
+          height: groupHeaderHeight,
+          '--height': `${groupHeaderHeight}px`
         },
         children: [leftRenderContext && getColumnGroupHeaders({
           depth,

package/hooks/features/dimensions/useGridDimensions.js

@@ -133,6 +133,7 @@ function setCSSVariables(root, dimensions) {
   set('--DataGrid-headersTotalHeight', `${dimensions.headersTotalHeight}px`);
   set('--DataGrid-topContainerHeight', `${dimensions.topContainerHeight}px`);
   set('--DataGrid-bottomContainerHeight', `${dimensions.bottomContainerHeight}px`);
+  set('--DataGrid-horizontalFiller', `${Math.max(0, dimensions.viewportOuterSize.width - dimensions.columnsTotalWidth)}px`);
   set('--height', `${dimensions.rowHeight}px`);
 }
 function getStaticDimensions(props, apiRef, density, pinnedColumnns) {

package/hooks/features/dimensions/useGridDimensions.mjs

@@ -124,6 +124,7 @@ function setCSSVariables(root, dimensions) {
   set('--DataGrid-headersTotalHeight', `${dimensions.headersTotalHeight}px`);
   set('--DataGrid-topContainerHeight', `${dimensions.topContainerHeight}px`);
   set('--DataGrid-bottomContainerHeight', `${dimensions.bottomContainerHeight}px`);
+  set('--DataGrid-horizontalFiller', `${Math.max(0, dimensions.viewportOuterSize.width - dimensions.columnsTotalWidth)}px`);
   set('--height', `${dimensions.rowHeight}px`);
 }
 function getStaticDimensions(props, apiRef, density, pinnedColumnns) {

package/hooks/features/export/useGridPrintExport.js

@@ -116,7 +116,11 @@ const useGridPrintExport = (apiRef, props) => {
     // Allow to overflow to not hide the border of the last row
     const gridMain = gridClone.querySelector(`.${_gridClasses.gridClasses.main}`);
     gridMain.style.overflow = 'visible';
-    gridClone.querySelector(`.${_gridClasses.gridClasses.virtualScrollerRenderZone}`).style.position = 'static';
+    const renderZone = gridClone.querySelector(`.${_gridClasses.gridClasses.virtualScrollerRenderZone}`);
+    renderZone.style.position = 'static';
+    renderZone.style.transform = '';
+    const contentFiller = gridClone.querySelector(`.${_gridClasses.gridClasses.contentFiller}`);
+    contentFiller.style.display = 'none';
     virtualScrollerContent.style.flexBasis = 'auto';
     gridClone.querySelector(`.${_gridClasses.gridClasses['scrollbar--vertical']}`)?.remove();
     if (!(virtualScrollerContent.nextSibling instanceof HTMLElement && virtualScrollerContent.nextSibling.classList.contains(_gridClasses.gridClasses.filler))) {

package/hooks/features/export/useGridPrintExport.mjs

@@ -109,7 +109,11 @@ export const useGridPrintExport = (apiRef, props) => {
     // Allow to overflow to not hide the border of the last row
     const gridMain = gridClone.querySelector(`.${gridClasses.main}`);
     gridMain.style.overflow = 'visible';
-    gridClone.querySelector(`.${gridClasses.virtualScrollerRenderZone}`).style.position = 'static';
+    const renderZone = gridClone.querySelector(`.${gridClasses.virtualScrollerRenderZone}`);
+    renderZone.style.position = 'static';
+    renderZone.style.transform = '';
+    const contentFiller = gridClone.querySelector(`.${gridClasses.contentFiller}`);
+    contentFiller.style.display = 'none';
     virtualScrollerContent.style.flexBasis = 'auto';
     gridClone.querySelector(`.${gridClasses['scrollbar--vertical']}`)?.remove();
     if (!(virtualScrollerContent.nextSibling instanceof HTMLElement && virtualScrollerContent.nextSibling.classList.contains(gridClasses.filler))) {

package/hooks/features/focus/useGridFocus.js

@@ -301,6 +301,10 @@ const useGridFocus = (apiRef, props) => {
     if (event.relatedTarget?.getAttribute('class')?.includes(_gridClasses.gridClasses.columnHeader)) {
       return;
     }
+    // Don't clear focus when it moves to a body cell — setCellFocus already set it
+    if (event.relatedTarget?.getAttribute('class')?.includes(_gridClasses.gridClasses.cell)) {
+      return;
+    }
     logger.debug(`Clearing focus`);
     apiRef.current.setState(state => (0, _extends2.default)({}, state, {
       focus: {