@mui/x-data-grid 7.20.0 → 7.22.0

package/modern/DataGrid/useDataGridProps.js

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { GRID_DEFAULT_LOCALE_TEXT } from "../constants/index.js";
 import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from "../constants/defaultGridSlotsComponents.js";
-import { GridEditModes } from "../models/index.js";
 import { computeSlots, useProps } from "../internals/utils/index.js";
+import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../constants/dataGridPropsDefaultValues.js";
 const DATA_GRID_FORCED_PROPS = {
   disableMultipleColumnsFiltering: true,
   disableMultipleColumnsSorting: true,
@@ -14,67 +14,8 @@ const DATA_GRID_FORCED_PROPS = {
   checkboxSelectionVisibleOnly: false,
   disableColumnReorder: true,
   keepColumnPositionIfDraggedOutside: false,
-  signature: 'DataGrid'
-};
-
-/**
- * The default values of `DataGridPropsWithDefaultValues` to inject in the props of DataGrid.
- */
-export const DATA_GRID_PROPS_DEFAULT_VALUES = {
-  autoHeight: false,
-  autoPageSize: false,
-  autosizeOnMount: false,
-  checkboxSelection: false,
-  checkboxSelectionVisibleOnly: false,
-  clipboardCopyCellDelimiter: '\t',
-  columnBufferPx: 150,
-  columnHeaderHeight: 56,
-  disableAutosize: false,
-  disableColumnFilter: false,
-  disableColumnMenu: false,
-  disableColumnReorder: false,
-  disableColumnResize: false,
-  disableColumnSelector: false,
-  disableColumnSorting: false,
-  disableDensitySelector: false,
-  disableEval: false,
-  disableMultipleColumnsFiltering: false,
-  disableMultipleColumnsSorting: false,
-  disableMultipleRowSelection: false,
-  disableRowSelectionOnClick: false,
-  disableVirtualization: false,
-  editMode: GridEditModes.Cell,
-  filterDebounceMs: 150,
-  filterMode: 'client',
-  hideFooter: false,
-  hideFooterPagination: false,
-  hideFooterRowCount: false,
-  hideFooterSelectedRowCount: false,
-  ignoreDiacritics: false,
-  ignoreValueFormatterDuringExport: false,
-  // TODO v8: Update to 'select'
-  indeterminateCheckboxAction: 'deselect',
-  keepColumnPositionIfDraggedOutside: false,
-  keepNonExistentRowsSelected: false,
-  loading: false,
-  logger: console,
-  logLevel: process.env.NODE_ENV === 'production' ? 'error' : 'warn',
-  pageSizeOptions: [25, 50, 100],
-  pagination: false,
-  paginationMode: 'client',
-  resizeThrottleMs: 60,
-  rowBufferPx: 150,
-  rowHeight: 52,
-  rowPositionsDebounceMs: 166,
-  rows: [],
-  rowSelection: true,
-  rowSpacingType: 'margin',
-  showCellVerticalBorder: false,
-  showColumnVerticalBorder: false,
-  sortingMode: 'client',
-  sortingOrder: ['asc', 'desc', null],
-  throttleRowsMs: 0,
-  unstable_rowSpanning: false
+  signature: 'DataGrid',
+  unstable_listView: false
 };
 const defaultSlots = DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 export const useDataGridProps = inProps => {

package/modern/components/GridPagination.js

@@ -13,6 +13,7 @@ const GridPaginationRoot = styled(TablePagination)(({
 }) => ({
   maxHeight: 'calc(100% + 1px)',
   // border width
+  flexGrow: 1,
   [`& .${tablePaginationClasses.selectLabel}`]: {
     display: 'none',
     [theme.breakpoints.up('sm')]: {

package/modern/components/GridRow.js

@@ -7,7 +7,6 @@ import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { GridEditModes, GridRowModes, GridCellModes } from "../models/gridEditRowModel.js";
-import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { gridClasses } from "../constants/gridClasses.js";
 import { composeGridClasses } from "../utils/composeGridClasses.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
@@ -25,6 +24,7 @@ import { PinnedPosition, gridPinnedColumnPositionLookup } from "./cell/GridCell.
 import { GridScrollbarFillerCell as ScrollbarFiller } from "./GridScrollbarFillerCell.js";
 import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
 import { useGridConfiguration } from "../hooks/utils/useGridConfiguration.js";
+import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function EmptyCell({
   width
@@ -40,6 +40,13 @@ function EmptyCell({
     }
   });
 }
+process.env.NODE_ENV !== "production" ? EmptyCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  width: PropTypes.number.isRequired
+} : void 0;
 const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const {
       selected,
@@ -67,7 +74,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       onMouseOver
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const apiRef = useGridApiContext();
+  const apiRef = useGridPrivateApiContext();
   const configuration = useGridConfiguration();
   const ref = React.useRef(null);
   const rootProps = useGridRootProps();
@@ -91,30 +98,17 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const getRowAriaAttributes = configuration.hooks.useGridRowAriaAttributes();
   React.useLayoutEffect(() => {
     if (currentPage.range) {
-      // The index prop is relative to the rows from all pages. As example, the index prop of the
-      // first row is 5 if `paginationModel.pageSize=5` and `paginationModel.page=1`. However, the index used by the virtualization
-      // doesn't care about pagination and considers the rows from the current page only, so the
-      // first row always has index=0. We need to subtract the index of the first row to make it
-      // compatible with the index used by the virtualization.
       const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(rowId);
-      // pinned rows are not part of the visible rows
-      if (rowIndex != null) {
+      // Pinned rows are not part of the visible rows
+      if (rowIndex !== undefined) {
         apiRef.current.unstable_setLastMeasuredRowIndex(rowIndex);
       }
     }
-    const rootElement = ref.current;
-    const hasFixedHeight = rowHeight !== 'auto';
-    if (!rootElement || hasFixedHeight || typeof ResizeObserver === 'undefined') {
-      return undefined;
+    if (ref.current && rowHeight === 'auto') {
+      return apiRef.current.observeRowHeight(ref.current, rowId);
     }
-    const resizeObserver = new ResizeObserver(entries => {
-      const [entry] = entries;
-      const height = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
-      apiRef.current.unstable_storeRowHeightMeasurement(rowId, height);
-    });
-    resizeObserver.observe(rootElement);
-    return () => resizeObserver.disconnect();
-  }, [apiRef, currentPage.range, index, rowHeight, rowId]);
+    return undefined;
+  }, [apiRef, currentPage.range, rowHeight, rowId]);
   const publish = React.useCallback((eventName, propHandler) => event => {
     // Ignore portal
     if (isEventTargetInPortal(event)) {
@@ -171,15 +165,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     disableColumnReorder
   } = rootProps;
   const rowReordering = rootProps.rowReordering;
-  const sizes = useGridSelector(apiRef, () => _extends({}, apiRef.current.unstable_getRowInternalSizes(rowId)), objectShallowCompare);
-  let minHeight = rowHeight;
-  if (minHeight === 'auto' && sizes) {
-    const numberOfBaseSizes = 1;
-    const maximumSize = sizes.baseCenter ?? 0;
-    if (maximumSize > 0 && numberOfBaseSizes > 1) {
-      minHeight = maximumSize;
-    }
-  }
+  const heightEntry = useGridSelector(apiRef, () => _extends({}, apiRef.current.getRowHeightEntry(rowId)), objectShallowCompare);
   const style = React.useMemo(() => {
     if (isNotVisible) {
       return {
@@ -191,25 +177,25 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     const rowStyle = _extends({}, styleProp, {
       maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
       // max-height doesn't support "auto"
-      minHeight,
+      minHeight: rowHeight,
       '--height': typeof rowHeight === 'number' ? `${rowHeight}px` : rowHeight
     });
-    if (sizes?.spacingTop) {
+    if (heightEntry.spacingTop) {
       const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
-      rowStyle[property] = sizes.spacingTop;
+      rowStyle[property] = heightEntry.spacingTop;
     }
-    if (sizes?.spacingBottom) {
+    if (heightEntry.spacingBottom) {
       const property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
       let propertyValue = rowStyle[property];
       // avoid overriding existing value
       if (typeof propertyValue !== 'number') {
         propertyValue = parseInt(propertyValue || '0', 10);
       }
-      propertyValue += sizes.spacingBottom;
+      propertyValue += heightEntry.spacingBottom;
       rowStyle[property] = propertyValue;
     }
     return rowStyle;
-  }, [isNotVisible, rowHeight, styleProp, minHeight, sizes, rootProps.rowSpacingType]);
+  }, [isNotVisible, rowHeight, styleProp, heightEntry, rootProps.rowSpacingType]);
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
   const ariaAttributes = rowNode ? getRowAriaAttributes(rowNode, index) : undefined;
   if (typeof rootProps.getRowClassName === 'function') {
@@ -287,6 +273,9 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   for (let i = renderContext.firstColumnIndex; i < renderContext.lastColumnIndex; i += 1) {
     const column = visibleColumns[i];
     const indexInSection = i - pinnedColumns.left.length;
+    if (!column) {
+      continue;
+    }
     cells.push(getCell(column, indexInSection, i, middleColumnsLength));
   }
   if (hasVirtualFocusCellRight) {

package/modern/components/base/GridOverlays.js

@@ -74,6 +74,14 @@ function GridOverlayWrapper(props) {
     }, props))
   }));
 }
+process.env.NODE_ENV !== "production" ? GridOverlayWrapper.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  loadingOverlayVariant: PropTypes.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
+  overlayType: PropTypes.oneOf(['loadingOverlay', 'noResultsOverlay', 'noRowsOverlay'])
+} : void 0;
 process.env.NODE_ENV !== "production" ? GridOverlays.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/modern/components/cell/GridBooleanCell.js

@@ -4,6 +4,8 @@ const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowN
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { gridRowMaximumTreeDepthSelector } from "../../hooks/features/rows/gridRowsSelector.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
@@ -20,7 +22,8 @@ const useUtilityClasses = ownerState => {
 };
 function GridBooleanCellRaw(props) {
   const {
-      value
+      value,
+      rowNode
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
@@ -29,7 +32,14 @@ function GridBooleanCellRaw(props) {
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
+  const maxDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
+  const isServerSideRowGroupingRow =
+  // @ts-expect-error - Access tree data prop
+  maxDepth > 0 && rowNode.type === 'group' && rootProps.treeData === false;
   const Icon = React.useMemo(() => value ? rootProps.slots.booleanCellTrueIcon : rootProps.slots.booleanCellFalseIcon, [rootProps.slots.booleanCellFalseIcon, rootProps.slots.booleanCellTrueIcon, value]);
+  if (isServerSideRowGroupingRow && value === undefined) {
+    return null;
+  }
   return /*#__PURE__*/_jsx(Icon, _extends({
     fontSize: "small",
     className: classes.root,

package/modern/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
-import Badge from '@mui/material/Badge';
 import { useGridSelector } from "../../hooks/index.js";
 import { gridPreferencePanelStateSelector } from "../../hooks/features/preferencesPanel/gridPreferencePanelSelector.js";
 import { GridPreferencePanelsValue } from "../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";
@@ -76,7 +75,7 @@ function GridColumnHeaderFilterIconButton(props) {
     enterDelay: 1000
   }, rootProps.slotProps?.baseTooltip, {
     children: /*#__PURE__*/_jsxs(GridIconButtonContainer, {
-      children: [counter > 1 && /*#__PURE__*/_jsx(Badge, {
+      children: [counter > 1 && /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
         badgeContent: counter,
         color: "default",
         children: iconButton

package/modern/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -4,7 +4,6 @@ const _excluded = ["direction", "index", "sortingOrder", "disabled"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import Badge from '@mui/material/Badge';
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
@@ -63,7 +62,7 @@ function GridColumnHeaderSortIconRaw(props) {
     children: iconElement
   }));
   return /*#__PURE__*/_jsxs(GridIconButtonContainer, {
-    children: [index != null && /*#__PURE__*/_jsx(Badge, {
+    children: [index != null && /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
       badgeContent: index,
       color: "default",
       overlap: "circular",

package/modern/components/containers/GridRootStyles.js

@@ -152,6 +152,8 @@ export const GridRootStyles = styled('div', {
     [`& .${c.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
   }, {
     [`& .${c.treeDataGroupingCellLoadingContainer}`]: styles.treeDataGroupingCellLoadingContainer
+  }, {
+    [`& .${c.groupingCriteriaCellLoadingContainer}`]: styles.groupingCriteriaCellLoadingContainer
   }, {
     [`& .${c.detailPanelToggleCell}`]: styles.detailPanelToggleCell
   }, {
@@ -513,6 +515,7 @@ export const GridRootStyles = styled('div', {
     },
     /* Cell styles */
     [`& .${c.cell}`]: {
+      flex: '0 0 auto',
       height: 'var(--height)',
       width: 'var(--width)',
       lineHeight: 'calc(var(--height) - 1px)',
@@ -684,7 +687,7 @@ export const GridRootStyles = styled('div', {
       alignSelf: 'stretch',
       marginRight: t.spacing(2)
     },
-    [`& .${c.treeDataGroupingCellLoadingContainer}`]: {
+    [`& .${c.treeDataGroupingCellLoadingContainer}, .${c.groupingCriteriaCellLoadingContainer}`]: {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
@@ -717,7 +720,7 @@ export const GridRootStyles = styled('div', {
       }
     },
     [`& .${c.filler}`]: {
-      flex: 1
+      flex: '1 0 auto'
     },
     [`& .${c['filler--borderBottom']}`]: {
       borderBottom: '1px solid var(--DataGrid-rowBorderColor)'

package/modern/components/menu/columnMenu/GridColumnMenu.js

@@ -45,6 +45,38 @@ const GridGenericColumnMenu = /*#__PURE__*/React.forwardRef(function GridGeneric
     children: orderedSlots.map(([Component, otherProps], index) => /*#__PURE__*/_jsx(Component, _extends({}, otherProps), index))
   }));
 });
+process.env.NODE_ENV !== "production" ? GridGenericColumnMenu.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  colDef: PropTypes.object.isRequired,
+  /**
+   * Initial `slotProps` - it is internal, to be overrriden by Pro or Premium packages
+   * @ignore - do not document.
+   */
+  defaultSlotProps: PropTypes.object.isRequired,
+  /**
+   * Initial `slots` - it is internal, to be overrriden by Pro or Premium packages
+   * @ignore - do not document.
+   */
+  defaultSlots: PropTypes.object.isRequired,
+  hideMenu: PropTypes.func.isRequired,
+  id: PropTypes.string,
+  labelledby: PropTypes.string,
+  open: PropTypes.bool.isRequired,
+  /**
+   * Could be used to pass new props or override props specific to a column menu component
+   * e.g. `displayOrder`
+   */
+  slotProps: PropTypes.object,
+  /**
+   * `slots` could be used to add new and (or) override default column menu items
+   * If you register a nee component you must pass it's `displayOrder` in `slotProps`
+   * or it will be placed in the end of the list
+   */
+  slots: PropTypes.object
+} : void 0;
 const GridColumnMenu = /*#__PURE__*/React.forwardRef(function GridColumnMenu(props, ref) {
   return /*#__PURE__*/_jsx(GridGenericColumnMenu, _extends({}, props, {
     ref: ref,

package/modern/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -38,7 +38,7 @@ function GridFilterInputBoolean(props) {
     const value = event.target.value;
     setFilterValueState(value);
     applyValue(_extends({}, item, {
-      value
+      value: Boolean(value)
     }));
   }, [applyValue, item]);
   React.useEffect(() => {

package/modern/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -39,9 +39,9 @@ function GridFilterInputMultipleValue(props) {
   const handleChange = React.useCallback((event, value) => {
     setFilterValueState(value.map(String));
     applyValue(_extends({}, item, {
-      value: [...value]
+      value: [...value.map(filterItemValue => type === 'number' ? Number(filterItemValue) : filterItemValue)]
     }));
-  }, [applyValue, item]);
+  }, [applyValue, item, type]);
   return /*#__PURE__*/_jsx(Autocomplete, _extends({
     multiple: true,
     freeSolo: true,

package/modern/components/panel/filterPanel/GridFilterInputValue.js

@@ -34,13 +34,13 @@ function GridFilterInputValue(props) {
     setIsApplying(true);
     filterTimeout.start(rootProps.filterDebounceMs, () => {
       const newItem = _extends({}, item, {
-        value,
+        value: type === 'number' ? Number(value) : value,
         fromInput: id
       });
       applyValue(newItem);
       setIsApplying(false);
     });
-  }, [id, applyValue, item, rootProps.filterDebounceMs, filterTimeout]);
+  }, [filterTimeout, rootProps.filterDebounceMs, item, type, id, applyValue]);
   React.useEffect(() => {
     const itemPlusTag = item;
     if (itemPlusTag.fromInput !== id || item.value === undefined) {

package/modern/components/toolbar/GridToolbar.js

@@ -3,7 +3,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["className", "csvOptions", "printOptions", "excelOptions", "showQuickFilter", "quickFilterProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
 import { GridToolbarContainer } from "../containers/GridToolbarContainer.js";
 import { GridToolbarColumnsButton } from "./GridToolbarColumnsButton.js";
 import { GridToolbarDensitySelector } from "./GridToolbarDensitySelector.js";
@@ -36,8 +35,8 @@ const GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, re
       // TODO: remove the reference to excelOptions in community package
       ,
       excelOptions: excelOptions
-    }), /*#__PURE__*/_jsx(Box, {
-      sx: {
+    }), /*#__PURE__*/_jsx("div", {
+      style: {
         flex: 1
       }
     }), showQuickFilter && /*#__PURE__*/_jsx(GridToolbarQuickFilter, _extends({}, quickFilterProps))]

package/modern/components/toolbar/GridToolbarExport.js

@@ -9,7 +9,7 @@ import MenuItem from '@mui/material/MenuItem';
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { GridToolbarExportContainer } from "./GridToolbarExportContainer.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export function GridCsvExportMenuItem(props) {
+function GridCsvExportMenuItem(props) {
   const apiRef = useGridApiContext();
   const {
       hideMenu,
@@ -25,7 +25,27 @@ export function GridCsvExportMenuItem(props) {
     children: apiRef.current.getLocaleText('toolbarExportCSV')
   }));
 }
-export function GridPrintExportMenuItem(props) {
+process.env.NODE_ENV !== "production" ? GridCsvExportMenuItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  hideMenu: PropTypes.func,
+  options: PropTypes.shape({
+    allColumns: PropTypes.bool,
+    delimiter: PropTypes.string,
+    disableToolbarButton: PropTypes.bool,
+    escapeFormulas: PropTypes.bool,
+    fields: PropTypes.arrayOf(PropTypes.string),
+    fileName: PropTypes.string,
+    getRowsToExport: PropTypes.func,
+    includeColumnGroupsHeaders: PropTypes.bool,
+    includeHeaders: PropTypes.bool,
+    shouldAppendQuotes: PropTypes.bool,
+    utf8WithBom: PropTypes.bool
+  })
+} : void 0;
+function GridPrintExportMenuItem(props) {
   const apiRef = useGridApiContext();
   const {
       hideMenu,
@@ -41,6 +61,26 @@ export function GridPrintExportMenuItem(props) {
     children: apiRef.current.getLocaleText('toolbarExportPrint')
   }));
 }
+process.env.NODE_ENV !== "production" ? GridPrintExportMenuItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  hideMenu: PropTypes.func,
+  options: PropTypes.shape({
+    allColumns: PropTypes.bool,
+    bodyClassName: PropTypes.string,
+    copyStyles: PropTypes.bool,
+    disableToolbarButton: PropTypes.bool,
+    fields: PropTypes.arrayOf(PropTypes.string),
+    fileName: PropTypes.string,
+    getRowsToExport: PropTypes.func,
+    hideFooter: PropTypes.bool,
+    hideToolbar: PropTypes.bool,
+    includeCheckboxes: PropTypes.bool,
+    pageStyle: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+  })
+} : void 0;
 const GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport(props, ref) {
   const {
       csvOptions = {},
@@ -77,4 +117,4 @@ process.env.NODE_ENV !== "production" ? GridToolbarExport.propTypes = {
    */
   slotProps: PropTypes.object
 } : void 0;
-export { GridToolbarExport };
+export { GridToolbarExport, GridCsvExportMenuItem, GridPrintExportMenuItem };

package/modern/components/toolbar/GridToolbarFilterButton.js

@@ -3,7 +3,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize, unstable_useId as useId } from '@mui/utils';
-import Badge from '@mui/material/Badge';
 import { gridColumnLookupSelector } from "../../hooks/features/columns/gridColumnsSelector.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { gridFilterActiveItemsSelector } from "../../hooks/features/filter/gridFilterSelector.js";
@@ -104,7 +103,7 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
       "aria-controls": isOpen ? filterPanelId : undefined,
       "aria-expanded": isOpen,
       "aria-haspopup": true,
-      startIcon: /*#__PURE__*/_jsx(Badge, {
+      startIcon: /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
         badgeContent: activeFilters.length,
         color: "primary",
         children: /*#__PURE__*/_jsx(rootProps.slots.openFilterButtonIcon, {})

package/modern/components/virtualization/GridBottomContainer.js

@@ -4,9 +4,6 @@ import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
 import { gridClasses, getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { gridDimensionsSelector } from "../../hooks/features/dimensions/gridDimensionsSelectors.js";
-import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
-import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = () => {
   const slots = {
@@ -21,22 +18,8 @@ const Element = styled('div')({
 });
 export function GridBottomContainer(props) {
   const classes = useUtilityClasses();
-  const apiRef = useGridApiContext();
-  const {
-    viewportOuterSize,
-    minimumSize,
-    hasScrollX,
-    scrollbarSize
-  } = useGridSelector(apiRef, gridDimensionsSelector);
-  const scrollHeight = hasScrollX ? scrollbarSize : 0;
-  const offset = Math.max(viewportOuterSize.height - minimumSize.height -
-  // Subtract scroll height twice to account for GridVirtualScrollerFiller and horizontal scrollbar
-  2 * scrollHeight, 0);
   return /*#__PURE__*/_jsx(Element, _extends({}, props, {
     className: clsx(classes.root, gridClasses['container--bottom']),
-    style: {
-      transform: `translateY(${offset}px)`
-    },
     role: "presentation"
   }));
 }

package/modern/components/virtualization/GridMainContainer.js

@@ -7,7 +7,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridPanelAnchor = styled('div')({
   position: 'absolute',
   top: `var(--DataGrid-headersTotalHeight)`,
-  left: 0
+  left: 0,
+  width: 'calc(100% - (var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize)))'
 });
 const Element = styled('div', {
   name: 'MuiDataGrid',

package/modern/components/virtualization/GridVirtualScrollbar.js

@@ -119,6 +119,10 @@ const GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualS
   return /*#__PURE__*/_jsx(Container, {
     ref: useForkRef(ref, scrollbarRef),
     className: classes.root,
+    style: props.position === 'vertical' && rootProps.unstable_listView ? {
+      height: '100%',
+      top: 0
+    } : undefined,
     tabIndex: -1,
     "aria-hidden": "true",
     children: /*#__PURE__*/_jsx("div", {

package/modern/components/virtualization/GridVirtualScroller.js

@@ -40,6 +40,8 @@ const Scroller = styled('div', {
   flexGrow: 1,
   overflow: 'scroll',
   scrollbarWidth: 'none' /* Firefox */,
+  display: 'flex',
+  flexDirection: 'column',
   '&::-webkit-scrollbar': {
     display: 'none' /* Safari and Chrome */
   },
@@ -78,7 +80,7 @@ function GridVirtualScroller(props) {
     }, getScrollerProps(), {
       ownerState: rootProps,
       children: [/*#__PURE__*/_jsxs(TopContainer, {
-        children: [/*#__PURE__*/_jsx(GridHeaders, {}), /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
+        children: [!rootProps.unstable_listView && /*#__PURE__*/_jsx(GridHeaders, {}), /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
           position: "top",
           virtualScroller: virtualScroller
         })]
@@ -98,7 +100,7 @@ function GridVirtualScroller(props) {
       })]
     })), dimensions.hasScrollY && /*#__PURE__*/_jsx(Scrollbar, _extends({
       position: "vertical"
-    }, getScrollbarVerticalProps())), dimensions.hasScrollX && /*#__PURE__*/_jsx(Scrollbar, _extends({
+    }, getScrollbarVerticalProps())), dimensions.hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/_jsx(Scrollbar, _extends({
       position: "horizontal"
     }, getScrollbarHorizontalProps())), props.children]
   }));