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

package/modern/components/GridRow.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "dimensions", "renderContext", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "dimensions", "renderContext", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -26,27 +26,6 @@ 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
-}) {
-  if (!width) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx("div", {
-    role: "presentation",
-    className: clsx(gridClasses.cell, gridClasses.cellEmpty),
-    style: {
-      '--width': `${width}px`
-    }
-  });
-}
-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,
@@ -289,8 +268,6 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     onMouseOut: publish('rowMouseOut', onMouseOut),
     onMouseOver: publish('rowMouseOver', onMouseOver)
   } : null;
-  const expandedWidth = dimensions.viewportOuterSize.width - dimensions.columnsTotalWidth - scrollbarWidth;
-  const emptyCellWidth = Math.max(0, expandedWidth);
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: handleRef,
     "data-id": rowId,
@@ -305,11 +282,9 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       style: {
         width: offsetLeft
       }
-    }), cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
-      width: emptyCellWidth
-    }), rightCells.length > 0 && /*#__PURE__*/_jsx("div", {
+    }), cells, /*#__PURE__*/_jsx("div", {
       role: "presentation",
-      className: gridClasses.filler
+      className: clsx(gridClasses.cell, gridClasses.cellEmpty)
     }), rightCells, scrollbarWidth !== 0 && /*#__PURE__*/_jsx(ScrollbarFiller, {
       pinnedRight: pinnedColumns.right.length > 0
     })]

package/modern/components/base/GridOverlays.js

@@ -4,29 +4,31 @@ import PropTypes from 'prop-types';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
+import { minimalContentHeight } from "../../hooks/features/rows/gridRowsUtils.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { gridDimensionsSelector } from "../../hooks/features/dimensions/index.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { useGridVisibleRows } from "../../hooks/utils/useGridVisibleRows.js";
-import { getMinimalContentHeight } from "../../hooks/features/rows/gridRowsUtils.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridOverlayWrapperRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapper',
-  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant',
+  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant' && prop !== 'right',
   overridesResolver: (props, styles) => styles.overlayWrapper
 })(({
   overlayType,
-  loadingOverlayVariant
+  loadingOverlayVariant,
+  right
 }) =>
 // Skeleton overlay should flow with the scroll container and not be sticky
 loadingOverlayVariant !== 'skeleton' ? {
   position: 'sticky',
   // To stay in place while scrolling
   top: 'var(--DataGrid-headersTotalHeight)',
+  // TODO: take pinned rows into account
   left: 0,
+  right: `${right}px`,
   width: 0,
   // To stay above the content instead of shifting it down
   height: 0,
@@ -53,11 +55,10 @@ const useUtilityClasses = ownerState => {
 function GridOverlayWrapper(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const currentPage = useGridVisibleRows(apiRef, rootProps);
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  let height = dimensions.viewportOuterSize.height - dimensions.topContainerHeight - dimensions.bottomContainerHeight - (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
-  if (rootProps.autoHeight && currentPage.rows.length === 0 || height === 0) {
-    height = getMinimalContentHeight(apiRef);
+  let height = Math.max(dimensions.viewportOuterSize.height - dimensions.topContainerHeight - dimensions.bottomContainerHeight - (dimensions.hasScrollX ? dimensions.scrollbarSize : 0), 0);
+  if (height === 0) {
+    height = minimalContentHeight;
   }
   const classes = useUtilityClasses(_extends({}, props, {
     classes: rootProps.classes
@@ -65,6 +66,7 @@ function GridOverlayWrapper(props) {
   return /*#__PURE__*/_jsx(GridOverlayWrapperRoot, _extends({
     className: clsx(classes.root)
   }, props, {
+    right: dimensions.columnsTotalWidth - dimensions.viewportOuterSize.width,
     children: /*#__PURE__*/_jsx(GridOverlayWrapperInner, _extends({
       className: clsx(classes.inner),
       style: {

package/modern/components/cell/GridActionsCell.js

@@ -3,7 +3,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["api", "colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "focusElementRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MenuList from '@mui/material/MenuList';
 import { useRtl } from '@mui/system/RtlProvider';
 import { unstable_useId as useId } from '@mui/utils';
 import { gridClasses } from "../../constants/gridClasses.js";
@@ -172,7 +171,7 @@ function GridActionsCell(props) {
       target: buttonRef.current,
       position: position,
       onClose: hideMenu,
-      children: /*#__PURE__*/_jsx(MenuList, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseMenuList, {
         id: menuId,
         className: gridClasses.menuList,
         onKeyDown: handleListKeyDown,

package/modern/components/cell/GridActionsCellItem.js

@@ -4,7 +4,6 @@ const _excluded = ["label", "icon", "showInMenu", "onClick"],
   _excluded2 = ["label", "icon", "showInMenu", "onClick", "closeMenuOnClick", "closeMenu"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -47,7 +46,7 @@ const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       closeMenu?.();
     }
   };
-  return /*#__PURE__*/_jsxs(MenuItem, _extends({
+  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, _extends({
     ref: ref
   }, other, {
     onClick: handleClick,

package/modern/components/cell/GridCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "gridHasScrollX", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "gridHasFiller", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "gridHasFiller", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -342,7 +342,6 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   align: PropTypes.oneOf(['center', 'left', 'right']).isRequired,
-  className: PropTypes.string,
   colIndex: PropTypes.number.isRequired,
   colSpan: PropTypes.number,
   column: PropTypes.object.isRequired,
@@ -355,13 +354,6 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   }),
   gridHasFiller: PropTypes.bool.isRequired,
   isNotVisible: PropTypes.bool.isRequired,
-  onClick: PropTypes.func,
-  onDoubleClick: PropTypes.func,
-  onDragEnter: PropTypes.func,
-  onDragOver: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onMouseDown: PropTypes.func,
-  onMouseUp: PropTypes.func,
   pinnedOffset: PropTypes.number.isRequired,
   pinnedPosition: PropTypes.oneOf([0, 1, 2, 3]).isRequired,
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,

package/modern/components/cell/GridEditInputCell.js

@@ -2,7 +2,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "isValidating", "debounceMs", "isProcessingProps", "onValueChange"];
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { styled } from '@mui/material/styles';
 import InputBase from '@mui/material/InputBase';
@@ -94,71 +93,5 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     }) : undefined
   }, other));
 });
-process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * GridApi that let you manipulate the grid.
-   */
-  api: PropTypes.object.isRequired,
-  /**
-   * The mode of the cell.
-   */
-  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
-  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
-  /**
-   * The column of the row that the current cell belongs to.
-   */
-  colDef: PropTypes.object.isRequired,
-  debounceMs: PropTypes.number,
-  /**
-   * The column field of the cell that triggered the event.
-   */
-  field: PropTypes.string.isRequired,
-  /**
-   * The cell value formatted with the column valueFormatter.
-   */
-  formattedValue: PropTypes.any,
-  /**
-   * If true, the cell is the active element.
-   */
-  hasFocus: PropTypes.bool.isRequired,
-  /**
-   * The grid row id.
-   */
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  /**
-   * If true, the cell is editable.
-   */
-  isEditable: PropTypes.bool,
-  isProcessingProps: PropTypes.bool,
-  isValidating: PropTypes.bool,
-  /**
-   * Callback called when the value is changed by the user.
-   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
-   * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
-   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
-   */
-  onValueChange: PropTypes.func,
-  /**
-   * The row model of the row that the current cell belongs to.
-   */
-  row: PropTypes.any.isRequired,
-  /**
-   * The node of the row that the current cell belongs to.
-   */
-  rowNode: PropTypes.object.isRequired,
-  /**
-   * the tabIndex value.
-   */
-  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
-  /**
-   * The cell value.
-   * If the column has `valueGetter`, use `params.row` to directly access the fields.
-   */
-  value: PropTypes.any
-} : void 0;
 export { GridEditInputCell };
 export const renderEditInputCell = params => /*#__PURE__*/_jsx(GridEditInputCell, _extends({}, params));

package/modern/components/containers/GridRootStyles.js

@@ -544,6 +544,7 @@ export const GridRootStyles = styled('div', {
       lineHeight: 'inherit'
     },
     [`& .${c.cellEmpty}`]: {
+      flex: 1,
       padding: 0,
       height: 'unset'
     },

package/modern/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import { useGridApiContext } from "../../../../hooks/utils/useGridApiContext.js";
@@ -20,7 +19,7 @@ function GridColumnMenuFilterItem(props) {
   if (rootProps.disableColumnFilter || !colDef.filterable) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(MenuItem, {
+  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
     onClick: showFilter,
     children: [/*#__PURE__*/_jsx(ListItemIcon, {
       children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuFilterIcon, {

package/modern/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import { useGridApiContext } from "../../../../hooks/utils/useGridApiContext.js";
@@ -36,7 +35,7 @@ function GridColumnMenuHideItem(props) {
   if (colDef.hideable === false) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(MenuItem, {
+  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
     onClick: toggleColumn,
     disabled: disabled,
     children: [/*#__PURE__*/_jsx(ListItemIcon, {

package/modern/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import { GridPreferencePanelsValue } from "../../../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";
@@ -20,7 +19,7 @@ function GridColumnMenuManageItem(props) {
   if (rootProps.disableColumnSelector) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(MenuItem, {
+  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
     onClick: showColumns,
     children: [/*#__PURE__*/_jsx(ListItemIcon, {
       children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuManageColumnsIcon, {

package/modern/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import { useGridSelector } from "../../../../hooks/utils/useGridSelector.js";
@@ -37,7 +36,7 @@ function GridColumnMenuSortItem(props) {
     return typeof label === 'function' ? label(colDef) : label;
   };
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [sortingOrder.includes('asc') && sortDirection !== 'asc' ? /*#__PURE__*/_jsxs(MenuItem, {
+    children: [sortingOrder.includes('asc') && sortDirection !== 'asc' ? /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
       onClick: onSortMenuItemClick,
       "data-value": "asc",
       children: [/*#__PURE__*/_jsx(ListItemIcon, {
@@ -47,7 +46,7 @@ function GridColumnMenuSortItem(props) {
       }), /*#__PURE__*/_jsx(ListItemText, {
         children: getLabel('columnMenuSortAsc')
       })]
-    }) : null, sortingOrder.includes('desc') && sortDirection !== 'desc' ? /*#__PURE__*/_jsxs(MenuItem, {
+    }) : null, sortingOrder.includes('desc') && sortDirection !== 'desc' ? /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
       onClick: onSortMenuItemClick,
       "data-value": "desc",
       children: [/*#__PURE__*/_jsx(ListItemIcon, {
@@ -57,7 +56,7 @@ function GridColumnMenuSortItem(props) {
       }), /*#__PURE__*/_jsx(ListItemText, {
         children: getLabel('columnMenuSortDesc')
       })]
-    }) : null, sortingOrder.includes(null) && sortDirection != null ? /*#__PURE__*/_jsxs(MenuItem, {
+    }) : null, sortingOrder.includes(null) && sortDirection != null ? /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
       onClick: onSortMenuItemClick,
       children: [/*#__PURE__*/_jsx(ListItemIcon, {}), /*#__PURE__*/_jsx(ListItemText, {
         children: apiRef.current.getLocaleText('columnMenuUnsort')

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

@@ -7,6 +7,15 @@ import { refType, unstable_useId as useId } from '@mui/utils';
 import { styled } from '@mui/material/styles';
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const sanitizeFilterItemValue = value => {
+  if (String(value).toLowerCase() === 'true') {
+    return true;
+  }
+  if (String(value).toLowerCase() === 'false') {
+    return false;
+  }
+  return undefined;
+};
 const BooleanOperatorContainer = styled('div')({
   display: 'flex',
   alignItems: 'center',
@@ -27,7 +36,7 @@ function GridFilterInputBoolean(props) {
       variant = 'standard'
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
-  const [filterValueState, setFilterValueState] = React.useState(item.value || '');
+  const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
   const rootProps = useGridRootProps();
   const labelId = useId();
   const selectId = useId();
@@ -35,14 +44,14 @@ function GridFilterInputBoolean(props) {
   const isSelectNative = baseSelectProps.native ?? false;
   const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   const onFilterChange = React.useCallback(event => {
-    const value = event.target.value;
+    const value = sanitizeFilterItemValue(event.target.value);
     setFilterValueState(value);
     applyValue(_extends({}, item, {
-      value: Boolean(value)
+      value
     }));
   }, [applyValue, item]);
   React.useEffect(() => {
-    setFilterValueState(item.value || '');
+    setFilterValueState(sanitizeFilterItemValue(item.value));
   }, [item.value]);
   const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
   return /*#__PURE__*/_jsxs(BooleanOperatorContainer, {
@@ -57,7 +66,7 @@ function GridFilterInputBoolean(props) {
         labelId: labelId,
         id: selectId,
         label: label,
-        value: filterValueState,
+        value: filterValueState === undefined ? '' : String(filterValueState),
         onChange: onFilterChange,
         variant: variant,
         notched: variant === 'outlined' ? true : undefined,

package/modern/components/toolbar/GridToolbar.js

@@ -14,14 +14,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, ref) {
   // TODO v7: think about where export option should be passed.
   // from slotProps={{ toolbarExport: { ...exportOption } }} seems to be more appropriate
-  const {
+  const _ref = props,
+    {
       csvOptions,
       printOptions,
       excelOptions,
       showQuickFilter = false,
       quickFilterProps = {}
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
   const rootProps = useGridRootProps();
   if (rootProps.disableColumnFilter && rootProps.disableColumnSelector && rootProps.disableDensitySelector && !showQuickFilter) {
     return null;
@@ -32,7 +33,7 @@ const GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, re
     children: [/*#__PURE__*/_jsx(GridToolbarColumnsButton, {}), /*#__PURE__*/_jsx(GridToolbarFilterButton, {}), /*#__PURE__*/_jsx(GridToolbarDensitySelector, {}), /*#__PURE__*/_jsx(GridToolbarExport, {
       csvOptions: csvOptions,
       printOptions: printOptions
-      // TODO: remove the reference to excelOptions in community package
+      // @ts-ignore
       ,
       excelOptions: excelOptions
     }), /*#__PURE__*/_jsx("div", {
@@ -47,6 +48,8 @@ process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  csvOptions: PropTypes.object,
+  printOptions: PropTypes.object,
   /**
    * Props passed to the quick filter component.
    */
@@ -56,6 +59,11 @@ process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
    * @default false
    */
   showQuickFilter: PropTypes.bool,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export { GridToolbar };

package/modern/components/toolbar/GridToolbarColumnsButton.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_useId as useId } from '@mui/material/utils';
+import useId from '@mui/utils/useId';
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { gridPreferencePanelStateSelector } from "../../hooks/features/preferencesPanel/gridPreferencePanelSelector.js";
 import { GridPreferencePanelsValue } from "../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";

package/modern/components/toolbar/GridToolbarDensitySelector.js

@@ -2,8 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
-import MenuList from '@mui/material/MenuList';
-import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import { gridDensitySelector } from "../../hooks/features/density/densitySelector.js";
 import { isHideMenuKey } from "../../utils/keyboardUtils.js";
@@ -74,7 +72,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
   if (rootProps.disableDensitySelector) {
     return null;
   }
-  const densityElements = densityOptions.map((option, index) => /*#__PURE__*/_jsxs(MenuItem, {
+  const densityElements = densityOptions.map((option, index) => /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
     onClick: () => handleDensityUpdate(option.value),
     selected: option.value === density,
     children: [/*#__PURE__*/_jsx(ListItemIcon, {
@@ -105,7 +103,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
       target: buttonRef.current,
       onClose: handleDensitySelectorClose,
       position: "bottom-start",
-      children: /*#__PURE__*/_jsx(MenuList, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseMenuList, {
         id: densityMenuId,
         className: gridClasses.menuList,
         "aria-labelledby": densityButtonId,

package/modern/components/toolbar/GridToolbarExport.js

@@ -5,18 +5,19 @@ const _excluded = ["hideMenu", "options"],
   _excluded3 = ["csvOptions", "printOptions", "excelOptions"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MenuItem from '@mui/material/MenuItem';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { GridToolbarExportContainer } from "./GridToolbarExportContainer.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridCsvExportMenuItem(props) {
   const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
   const {
       hideMenu,
       options
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  return /*#__PURE__*/_jsx(MenuItem, _extends({
+  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, _extends({
     onClick: () => {
       apiRef.current.exportDataAsCsv(options);
       hideMenu?.();
@@ -47,12 +48,13 @@ process.env.NODE_ENV !== "production" ? GridCsvExportMenuItem.propTypes = {
 } : void 0;
 function GridPrintExportMenuItem(props) {
   const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
   const {
       hideMenu,
       options
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded2);
-  return /*#__PURE__*/_jsx(MenuItem, _extends({
+  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, _extends({
     onClick: () => {
       apiRef.current.exportDataAsPrint(options);
       hideMenu?.();
@@ -82,12 +84,13 @@ process.env.NODE_ENV !== "production" ? GridPrintExportMenuItem.propTypes = {
   })
 } : void 0;
 const GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport(props, ref) {
-  const {
+  const _ref = props,
+    {
       csvOptions = {},
       printOptions = {},
       excelOptions
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded3);
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded3);
   const apiRef = useGridApiContext();
   const preProcessedButtons = apiRef.current.unstable_applyPipeProcessors('exportMenu', [], {
     excelOptions,

package/modern/components/toolbar/GridToolbarExportContainer.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_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
-import MenuList from '@mui/material/MenuList';
 import { isHideMenuKey } from "../../utils/keyboardUtils.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { GridMenu } from "../menu/GridMenu.js";
@@ -63,7 +62,7 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
       target: buttonRef.current,
       onClose: handleMenuClose,
       position: "bottom-start",
-      children: /*#__PURE__*/_jsx(MenuList, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseMenuList, {
         id: exportMenuId,
         className: gridClasses.menuList,
         "aria-labelledby": exportButtonId,

package/modern/components/virtualization/GridVirtualScrollbar.js

@@ -70,6 +70,9 @@ const GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualS
   const onScrollerScroll = useEventCallback(() => {
     const scroller = apiRef.current.virtualScrollerRef.current;
     const scrollbar = scrollbarRef.current;
+    if (!scrollbar) {
+      return;
+    }
     if (scroller[propertyScroll] === lastPosition.current) {
       return;
     }
@@ -85,6 +88,9 @@ const GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualS
   const onScrollbarScroll = useEventCallback(() => {
     const scroller = apiRef.current.virtualScrollerRef.current;
     const scrollbar = scrollbarRef.current;
+    if (!scrollbar) {
+      return;
+    }
     if (isLocked.current) {
       isLocked.current = false;
       return;

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -193,8 +193,10 @@ export const useGridColumnResize = (apiRef, props) => {
     const prevWidth = refs.columnHeaderElement.offsetWidth;
     const widthDiff = newWidth - prevWidth;
     const columnWidthDiff = newWidth - refs.initialColWidth;
-    const newTotalWidth = refs.initialTotalWidth + columnWidthDiff;
-    apiRef.current.rootElementRef?.current?.style.setProperty('--DataGrid-rowWidth', `${newTotalWidth}px`);
+    if (columnWidthDiff > 0) {
+      const newTotalWidth = refs.initialTotalWidth + columnWidthDiff;
+      apiRef.current.rootElementRef?.current?.style.setProperty('--DataGrid-rowWidth', `${newTotalWidth}px`);
+    }
     refs.colDef.computedWidth = newWidth;
     refs.colDef.width = newWidth;
     refs.colDef.flex = 0;