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

package/node/components/cell/GridActionsCellItem.js

@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -55,7 +54,7 @@ const GridActionsCellItem = exports.GridActionsCellItem = /*#__PURE__*/React.for
       closeMenu?.();
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, (0, _extends2.default)({
     ref: ref
   }, other, {
     onClick: handleClick,

package/node/components/cell/GridCell.js

@@ -26,7 +26,7 @@ var _cellBorderUtils = require("../../utils/cellBorderUtils");
 var _gridColumnsInterfaces = require("../../hooks/features/columns/gridColumnsInterfaces");
 var _gridRowSpanningSelectors = require("../../hooks/features/rows/gridRowSpanningSelectors");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 let PinnedPosition = exports.PinnedPosition = /*#__PURE__*/function (PinnedPosition) {
   PinnedPosition[PinnedPosition["NONE"] = 0] = "NONE";
@@ -350,7 +350,6 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   align: _propTypes.default.oneOf(['center', 'left', 'right']).isRequired,
-  className: _propTypes.default.string,
   colIndex: _propTypes.default.number.isRequired,
   colSpan: _propTypes.default.number,
   column: _propTypes.default.object.isRequired,
@@ -363,13 +362,6 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   }),
   gridHasFiller: _propTypes.default.bool.isRequired,
   isNotVisible: _propTypes.default.bool.isRequired,
-  onClick: _propTypes.default.func,
-  onDoubleClick: _propTypes.default.func,
-  onDragEnter: _propTypes.default.func,
-  onDragOver: _propTypes.default.func,
-  onKeyDown: _propTypes.default.func,
-  onMouseDown: _propTypes.default.func,
-  onMouseUp: _propTypes.default.func,
   pinnedOffset: _propTypes.default.number.isRequired,
   pinnedPosition: _propTypes.default.oneOf([0, 1, 2, 3]).isRequired,
   rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,

package/node/components/cell/GridEditInputCell.js

@@ -9,7 +9,6 @@ exports.renderEditInputCell = exports.GridEditInputCell = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _InputBase = _interopRequireDefault(require("@mui/material/InputBase"));
@@ -102,71 +101,5 @@ const GridEditInputCell = exports.GridEditInputCell = /*#__PURE__*/React.forward
     }) : 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.default.object.isRequired,
-  /**
-   * The mode of the cell.
-   */
-  cellMode: _propTypes.default.oneOf(['edit', 'view']).isRequired,
-  changeReason: _propTypes.default.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
-  /**
-   * The column of the row that the current cell belongs to.
-   */
-  colDef: _propTypes.default.object.isRequired,
-  debounceMs: _propTypes.default.number,
-  /**
-   * The column field of the cell that triggered the event.
-   */
-  field: _propTypes.default.string.isRequired,
-  /**
-   * The cell value formatted with the column valueFormatter.
-   */
-  formattedValue: _propTypes.default.any,
-  /**
-   * If true, the cell is the active element.
-   */
-  hasFocus: _propTypes.default.bool.isRequired,
-  /**
-   * The grid row id.
-   */
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-  /**
-   * If true, the cell is editable.
-   */
-  isEditable: _propTypes.default.bool,
-  isProcessingProps: _propTypes.default.bool,
-  isValidating: _propTypes.default.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.default.func,
-  /**
-   * The row model of the row that the current cell belongs to.
-   */
-  row: _propTypes.default.any.isRequired,
-  /**
-   * The node of the row that the current cell belongs to.
-   */
-  rowNode: _propTypes.default.object.isRequired,
-  /**
-   * the tabIndex value.
-   */
-  tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
-  /**
-   * The cell value.
-   * If the column has `valueGetter`, use `params.row` to directly access the fields.
-   */
-  value: _propTypes.default.any
-} : void 0;
 const renderEditInputCell = params => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridEditInputCell, (0, _extends2.default)({}, params));
 exports.renderEditInputCell = renderEditInputCell;

package/node/components/containers/GridRootStyles.js

@@ -551,6 +551,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       lineHeight: 'inherit'
     },
     [`& .${_gridClasses.gridClasses.cellEmpty}`]: {
+      flex: 1,
       padding: 0,
       height: 'unset'
     },

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnMenuFilterItem = GridColumnMenuFilterItem;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
 var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _useGridApiContext = require("../../../../hooks/utils/useGridApiContext");
@@ -28,7 +27,7 @@ function GridColumnMenuFilterItem(props) {
   if (rootProps.disableColumnFilter || !colDef.filterable) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
     onClick: showFilter,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuFilterIcon, {

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnMenuHideItem = GridColumnMenuHideItem;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
 var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _useGridApiContext = require("../../../../hooks/utils/useGridApiContext");
@@ -44,7 +43,7 @@ function GridColumnMenuHideItem(props) {
   if (colDef.hideable === false) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
     onClick: toggleColumn,
     disabled: disabled,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnMenuManageItem = GridColumnMenuManageItem;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
 var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _gridPreferencePanelsValue = require("../../../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
@@ -28,7 +27,7 @@ function GridColumnMenuManageItem(props) {
   if (rootProps.disableColumnSelector) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
     onClick: showColumns,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuManageColumnsIcon, {

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnMenuSortItem = GridColumnMenuSortItem;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
 var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _useGridSelector = require("../../../../hooks/utils/useGridSelector");
@@ -45,7 +44,7 @@ function GridColumnMenuSortItem(props) {
     return typeof label === 'function' ? label(colDef) : label;
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [sortingOrder.includes('asc') && sortDirection !== 'asc' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+    children: [sortingOrder.includes('asc') && sortDirection !== 'asc' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
       onClick: onSortMenuItemClick,
       "data-value": "asc",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
@@ -55,7 +54,7 @@ function GridColumnMenuSortItem(props) {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
         children: getLabel('columnMenuSortAsc')
       })]
-    }) : null, sortingOrder.includes('desc') && sortDirection !== 'desc' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+    }) : null, sortingOrder.includes('desc') && sortDirection !== 'desc' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
       onClick: onSortMenuItemClick,
       "data-value": "desc",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
@@ -65,7 +64,7 @@ function GridColumnMenuSortItem(props) {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
         children: getLabel('columnMenuSortDesc')
       })]
-    }) : null, sortingOrder.includes(null) && sortDirection != null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+    }) : null, sortingOrder.includes(null) && sortDirection != null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
       onClick: onSortMenuItemClick,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
         children: apiRef.current.getLocaleText('columnMenuUnsort')

package/node/components/toolbar/GridToolbar.js

@@ -22,14 +22,15 @@ const _excluded = ["className", "csvOptions", "printOptions", "excelOptions", "s
 const GridToolbar = exports.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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   if (rootProps.disableColumnFilter && rootProps.disableColumnSelector && rootProps.disableDensitySelector && !showQuickFilter) {
     return null;
@@ -40,7 +41,7 @@ const GridToolbar = exports.GridToolbar = /*#__PURE__*/React.forwardRef(function
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarColumnsButton.GridToolbarColumnsButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarFilterButton.GridToolbarFilterButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarDensitySelector.GridToolbarDensitySelector, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarExport.GridToolbarExport, {
       csvOptions: csvOptions,
       printOptions: printOptions
-      // TODO: remove the reference to excelOptions in community package
+      // @ts-ignore
       ,
       excelOptions: excelOptions
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -55,6 +56,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.default.object,
+  printOptions: _propTypes.default.object,
   /**
    * Props passed to the quick filter component.
    */
@@ -64,5 +67,10 @@ process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
    * @default false
    */
   showQuickFilter: _propTypes.default.bool,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;

package/node/components/toolbar/GridToolbarColumnsButton.js

@@ -9,7 +9,7 @@ exports.GridToolbarColumnsButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/material/utils");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _gridPreferencePanelSelector = require("../../hooks/features/preferencesPanel/gridPreferencePanelSelector");
 var _gridPreferencePanelsValue = require("../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
@@ -22,8 +22,8 @@ const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = /*#__PURE__*
   } = props;
   const buttonProps = slotProps.button || {};
   const tooltipProps = slotProps.tooltip || {};
-  const columnButtonId = (0, _utils.unstable_useId)();
-  const columnPanelId = (0, _utils.unstable_useId)();
+  const columnButtonId = (0, _useId.default)();
+  const columnPanelId = (0, _useId.default)();
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const preferencePanel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);

package/node/components/toolbar/GridToolbarDensitySelector.js

@@ -10,8 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
 var _densitySelector = require("../../hooks/features/density/densitySelector");
 var _keyboardUtils = require("../../utils/keyboardUtils");
@@ -82,7 +80,7 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
   if (rootProps.disableDensitySelector) {
     return null;
   }
-  const densityElements = densityOptions.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+  const densityElements = densityOptions.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
     onClick: () => handleDensityUpdate(option.value),
     selected: option.value === density,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
@@ -113,7 +111,7 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
       target: buttonRef.current,
       onClose: handleDensitySelectorClose,
       position: "bottom-start",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuList, {
         id: densityMenuId,
         className: _gridClasses.gridClasses.menuList,
         "aria-labelledby": densityButtonId,

package/node/components/toolbar/GridToolbarExport.js

@@ -12,7 +12,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _GridToolbarExportContainer = require("./GridToolbarExportContainer");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -21,12 +21,13 @@ const _excluded = ["hideMenu", "options"],
   _excluded3 = ["csvOptions", "printOptions", "excelOptions"];
 function GridCsvExportMenuItem(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
       hideMenu,
       options
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, (0, _extends2.default)({
     onClick: () => {
       apiRef.current.exportDataAsCsv(options);
       hideMenu?.();
@@ -57,12 +58,13 @@ process.env.NODE_ENV !== "production" ? GridCsvExportMenuItem.propTypes = {
 } : void 0;
 function GridPrintExportMenuItem(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
       hideMenu,
       options
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, (0, _extends2.default)({
     onClick: () => {
       apiRef.current.exportDataAsPrint(options);
       hideMenu?.();
@@ -92,12 +94,13 @@ process.env.NODE_ENV !== "production" ? GridPrintExportMenuItem.propTypes = {
   })
 } : void 0;
 const GridToolbarExport = exports.GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport(props, ref) {
-  const {
+  const _ref = props,
+    {
       csvOptions = {},
       printOptions = {},
       excelOptions
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded3);
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded3);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const preProcessedButtons = apiRef.current.unstable_applyPipeProcessors('exportMenu', [], {
     excelOptions,

package/node/components/toolbar/GridToolbarExportContainer.js

@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 var _keyboardUtils = require("../../utils/keyboardUtils");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _GridMenu = require("../menu/GridMenu");
@@ -71,7 +70,7 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = /*#__PUR
       target: buttonRef.current,
       onClose: handleMenuClose,
       position: "bottom-start",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuList, {
         id: exportMenuId,
         className: _gridClasses.gridClasses.menuList,
         "aria-labelledby": exportButtonId,

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

@@ -202,8 +202,10 @@ 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;

package/node/hooks/features/export/useGridCsvExport.js

@@ -12,7 +12,7 @@ var _exportAs = require("../../../utils/exportAs");
 var _csvSerializer = require("./serializers/csvSerializer");
 var _utils = require("./utils");
 var _pipeProcessing = require("../../core/pipeProcessing");
-var _GridToolbarExport = require("../../../components/toolbar/GridToolbarExport");
+var _toolbar = require("../../../components/toolbar");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @requires useGridColumns (state)
@@ -71,7 +71,7 @@ const useGridCsvExport = (apiRef, props) => {
       return initialValue;
     }
     return [...initialValue, {
-      component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarExport.GridCsvExportMenuItem, {
+      component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbar.GridCsvExportMenuItem, {
         options: options.csvOptions
       }),
       componentName: 'csvExport'

package/node/hooks/features/export/useGridPrintExport.js

@@ -19,7 +19,7 @@ var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _utils2 = require("./utils");
 var _useGridPaginationModel = require("../pagination/useGridPaginationModel");
 var _pipeProcessing = require("../../core/pipeProcessing");
-var _GridToolbarExport = require("../../../components/toolbar/GridToolbarExport");
+var _toolbar = require("../../../components/toolbar");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
 var _gridCheckboxSelectionColDef = require("../../../colDef/gridCheckboxSelectionColDef");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -288,7 +288,7 @@ const useGridPrintExport = (apiRef, props) => {
       return initialValue;
     }
     return [...initialValue, {
-      component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarExport.GridPrintExportMenuItem, {
+      component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbar.GridPrintExportMenuItem, {
         options: options.printOptions
       }),
       componentName: 'printExport'

package/node/hooks/features/pagination/useGridPaginationModel.js

@@ -84,7 +84,7 @@ const useGridPaginationModel = (apiRef, props) => {
       pagination: (0, _extends2.default)({}, state.pagination, {
         paginationModel: getDerivedPaginationModel(state.pagination, props.signature, paginationModel)
       })
-    }));
+    }), 'setPaginationModel');
   }, [apiRef, logger, props.signature]);
   const paginationModelApi = {
     setPage,
@@ -122,7 +122,7 @@ const useGridPaginationModel = (apiRef, props) => {
       pagination: (0, _extends2.default)({}, state.pagination, {
         paginationModel: getDerivedPaginationModel(state.pagination, props.signature, paginationModel)
       })
-    }));
+    }), 'stateRestorePreProcessing');
     return params;
   }, [apiRef, props.autoPageSize, props.signature]);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);

package/node/hooks/features/rows/gridRowsUtils.js

@@ -8,12 +8,9 @@ exports.buildRootGroup = exports.GRID_ROOT_GROUP_ID = exports.GRID_ID_AUTOGENERA
 exports.calculatePinnedRowsHeight = calculatePinnedRowsHeight;
 exports.checkGridRowIdIsValid = checkGridRowIdIsValid;
 exports.computeRowsUpdates = computeRowsUpdates;
-exports.createRowsInternalCache = void 0;
-exports.getMinimalContentHeight = getMinimalContentHeight;
-exports.updateCacheWithNewRows = exports.rowHeightWarning = exports.isAutogeneratedRowNode = exports.isAutogeneratedRow = exports.getValidRowHeight = exports.getTreeNodeDescendants = exports.getTopLevelRowCount = exports.getRowsStateFromCache = exports.getRowIdFromRowModel = exports.getRowHeightWarning = void 0;
+exports.updateCacheWithNewRows = exports.rowHeightWarning = exports.minimalContentHeight = exports.isAutogeneratedRowNode = exports.isAutogeneratedRow = exports.getValidRowHeight = exports.getTreeNodeDescendants = exports.getTopLevelRowCount = exports.getRowsStateFromCache = exports.getRowIdFromRowModel = exports.getRowHeightWarning = exports.createRowsInternalCache = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _gridRowsSelector = require("./gridRowsSelector");
-var _gridDimensionsSelectors = require("../dimensions/gridDimensionsSelectors");
 const GRID_ROOT_GROUP_ID = exports.GRID_ROOT_GROUP_ID = `auto-generated-group-node-root`;
 const GRID_ID_AUTOGENERATED = exports.GRID_ID_AUTOGENERATED = Symbol('mui.id_autogenerated');
 const buildRootGroup = () => ({
@@ -307,10 +304,7 @@ function calculatePinnedRowsHeight(apiRef) {
     bottom: bottomPinnedRowsHeight
   };
 }
-function getMinimalContentHeight(apiRef) {
-  const dimensions = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state);
-  return `var(--DataGrid-overlayHeight, ${2 * dimensions.rowHeight}px)`;
-}
+const minimalContentHeight = exports.minimalContentHeight = 'var(--DataGrid-overlayHeight, calc(var(--height) * 2))';
 function computeRowsUpdates(apiRef, updates, getRowId) {
   const nonPinnedRowsUpdates = [];
   updates.forEach(update => {

package/node/hooks/features/virtualization/useGridVirtualScroller.js

@@ -32,11 +32,11 @@ var _utils3 = require("../../../utils/utils");
 var _gridRowSelectionSelector = require("../rowSelection/gridRowSelectionSelector");
 var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
-var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _gridVirtualizationSelectors = require("./gridVirtualizationSelectors");
 var _useGridVirtualization = require("./useGridVirtualization");
 var _gridRowSpanningSelectors = require("../rows/gridRowSpanningSelectors");
 var _gridListViewSelectors = require("../listView/gridListViewSelectors");
+var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _jsxRuntime = require("react/jsx-runtime");
 const MINIMUM_COLUMN_WIDTH = 50;
 var ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
@@ -392,11 +392,11 @@ const useGridVirtualScroller = () => {
       flexBasis: contentHeight,
       flexShrink: 0
     };
-    if (rootProps.autoHeight && currentPage.rows.length === 0) {
-      size.flexBasis = (0, _gridRowsUtils.getMinimalContentHeight)(apiRef); // Give room to show the overlay when there no rows.
+    if (size.flexBasis === 0) {
+      size.flexBasis = _gridRowsUtils.minimalContentHeight; // Give room to show the overlay when there no rows.
     }
     return size;
-  }, [apiRef, columnsTotalWidth, contentHeight, needsHorizontalScrollbar, rootProps.autoHeight, currentPage.rows.length]);
+  }, [columnsTotalWidth, contentHeight, needsHorizontalScrollbar]);
   React.useEffect(() => {
     apiRef.current.publishEvent('virtualScrollerContentSizeChange');
   }, [apiRef, contentSize]);

package/node/hooks/utils/useGridSelector.js

@@ -4,7 +4,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridSelectorV8 = exports.useGridSelector = exports.objectShallowCompare = void 0;
+exports.useGridSelectorV8 = exports.useGridSelector = exports.objectShallowCompare = exports.argsEqual = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
 var _warning = require("@mui/x-internals/warning");
@@ -30,10 +30,27 @@ function applySelectorV8(apiRef, selector, args, instanceId) {
 }
 const defaultCompare = Object.is;
 const objectShallowCompare = exports.objectShallowCompare = _fastObjectShallowCompare.fastObjectShallowCompare;
+const arrayShallowCompare = (a, b) => {
+  if (a === b) {
+    return true;
+  }
+  return a.length === b.length && a.every((v, i) => v === b[i]);
+};
+const argsEqual = (prev, curr) => {
+  let fn = Object.is;
+  if (curr instanceof Array) {
+    fn = arrayShallowCompare;
+  } else if (curr instanceof Object) {
+    fn = objectShallowCompare;
+  }
+  return fn(prev, curr);
+};
+exports.argsEqual = argsEqual;
 const createRefs = () => ({
   state: null,
   equals: null,
-  selector: null
+  selector: null,
+  args: null
 });
 
 // TODO v8: Remove this function
@@ -79,9 +96,18 @@ const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = defaultC
   refs.current.state = state;
   refs.current.equals = equals;
   refs.current.selector = selector;
+  const prevArgs = refs.current.args;
+  refs.current.args = args;
+  if (didInit && !argsEqual(prevArgs, args)) {
+    const newState = applySelectorV8(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
+    if (!refs.current.equals(refs.current.state, newState)) {
+      refs.current.state = newState;
+      setState(newState);
+    }
+  }
   (0, _useOnMount.useOnMount)(() => {
     return apiRef.current.store.subscribe(() => {
-      const newState = applySelectorV8(apiRef, refs.current.selector, args, apiRef.current.instanceId);
+      const newState = applySelectorV8(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
       if (!refs.current.equals(refs.current.state, newState)) {
         refs.current.state = newState;
         setState(newState);

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.22.2
+ * @mui/x-data-grid v8.0.0-alpha.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the