@mui/x-data-grid 8.0.0-alpha.3 → 8.0.0-alpha.5

package/modern/DataGrid/DataGrid.js

@@ -38,7 +38,7 @@ const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref
       style: props.style,
       sx: props.sx,
       ref: ref
-    }, props.forwardedProps, {
+    }, props.slotProps?.root, {
       children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {}), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
     }))
   });
@@ -95,6 +95,7 @@ DataGridRaw.propTypes = {
    */
   autosizeOptions: PropTypes.shape({
     columns: PropTypes.arrayOf(PropTypes.string),
+    disableColumnVirtualization: PropTypes.bool,
     expand: PropTypes.bool,
     includeHeaders: PropTypes.bool,
     includeOutliers: PropTypes.bool,
@@ -248,11 +249,6 @@ DataGridRaw.propTypes = {
     quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
     quickFilterValues: PropTypes.array
   }),
-  /**
-   * Forwarded props for the Data Grid root element.
-   * @ignore - do not document.
-   */
-  forwardedProps: PropTypes.object,
   /**
    * Function that applies CSS classes dynamically on cells.
    * @param {GridCellParams} params With all properties from [[GridCellParams]].
@@ -701,6 +697,11 @@ DataGridRaw.propTypes = {
    * @default "margin"
    */
   rowSpacingType: PropTypes.oneOf(['border', 'margin']),
+  /**
+   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
+   * @default false
+   */
+  rowSpanning: PropTypes.bool,
   /**
    * Override the height/width of the Data Grid inner scrollbar.
    */
@@ -746,11 +747,6 @@ DataGridRaw.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
-   * @default false
-   */
-  unstable_rowSpanning: PropTypes.bool,
   /**
    * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.
    * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.

package/modern/DataGrid/useDataGridProps.js

@@ -3,7 +3,7 @@ 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 { computeSlots, useProps } from "../internals/utils/index.js";
+import { computeSlots } from "../internals/utils/index.js";
 import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../constants/dataGridPropsDefaultValues.js";
 const DATA_GRID_FORCED_PROPS = {
   disableMultipleColumnsFiltering: true,
@@ -19,12 +19,12 @@ const DATA_GRID_FORCED_PROPS = {
 };
 const defaultSlots = DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 export const useDataGridProps = inProps => {
-  const themedProps = useProps(
+  const themedProps =
   // eslint-disable-next-line material-ui/mui-name-matches-component-name
   useThemeProps({
     props: inProps,
     name: 'MuiDataGrid'
-  }));
+  });
   const localeText = React.useMemo(() => _extends({}, GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
   const slots = React.useMemo(() => computeSlots({
     defaultSlots,

package/modern/components/GridRow.js

@@ -25,6 +25,7 @@ import { GridScrollbarFillerCell as ScrollbarFiller } from "./GridScrollbarFille
 import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
 import { useGridConfiguration } from "../hooks/utils/useGridConfiguration.js";
 import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
+import { gridVirtualizationColumnEnabledSelector } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const {
@@ -68,6 +69,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   const editing = apiRef.current.getRowMode(rowId) === GridRowModes.Edit;
   const editable = rootProps.editMode === GridEditModes.Row;
+  const hasColumnVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
   const hasFocusCell = focusedColumnIndex !== undefined;
   const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < renderContext.firstColumnIndex;
   const hasVirtualFocusCellRight = hasFocusCell && focusedColumnIndex < visibleColumns.length - pinnedColumns.right.length && focusedColumnIndex >= renderContext.lastColumnIndex;
@@ -144,7 +146,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     disableColumnReorder
   } = rootProps;
   const rowReordering = rootProps.rowReordering;
-  const heightEntry = useGridSelector(apiRef, () => _extends({}, apiRef.current.getRowHeightEntry(rowId)), objectShallowCompare);
+  const heightEntry = useGridSelector(apiRef, () => _extends({}, apiRef.current.getRowHeightEntry(rowId)), undefined, objectShallowCompare);
   const style = React.useMemo(() => {
     if (isNotVisible) {
       return {
@@ -249,7 +251,16 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   if (hasVirtualFocusCellLeft) {
     cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, PinnedPosition.VIRTUAL));
   }
-  for (let i = renderContext.firstColumnIndex; i < renderContext.lastColumnIndex; i += 1) {
+  let firstColumnIndex;
+  let lastColumnIndex;
+  if (!rootProps.disableVirtualization && !hasColumnVirtualization) {
+    firstColumnIndex = 0;
+    lastColumnIndex = visibleColumns.length;
+  } else {
+    firstColumnIndex = renderContext.firstColumnIndex;
+    lastColumnIndex = renderContext.lastColumnIndex;
+  }
+  for (let i = firstColumnIndex; i < lastColumnIndex; i += 1) {
     const column = visibleColumns[i];
     const indexInSection = i - pinnedColumns.left.length;
     if (!column) {

package/modern/components/cell/GridActionsCell.js

@@ -89,6 +89,13 @@ function GridActionsCell(props) {
   const hideMenu = () => {
     setOpen(false);
   };
+  const toggleMenu = () => {
+    if (open) {
+      hideMenu();
+    } else {
+      showMenu();
+    }
+  };
   const handleTouchRippleRef = index => instance => {
     touchRippleRefs.current[index] = instance;
   };
@@ -159,7 +166,7 @@ function GridActionsCell(props) {
       "aria-controls": open ? menuId : undefined,
       role: "menuitem",
       size: "small",
-      onClick: showMenu,
+      onClick: toggleMenu,
       touchRippleRef: handleTouchRippleRef(buttonId),
       tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1
     }, rootProps.slotProps?.baseIconButton, {

package/modern/components/cell/GridActionsCellItem.js

@@ -4,9 +4,8 @@ const _excluded = ["label", "icon", "showInMenu", "onClick"],
   _excluded2 = ["label", "icon", "showInMenu", "onClick", "closeMenuOnClick", "closeMenu"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import ListItemIcon from '@mui/material/ListItemIcon';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const rootProps = useGridRootProps();
   if (!props.showInMenu) {
@@ -46,13 +45,12 @@ const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       closeMenu?.();
     }
   };
-  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, _extends({
+  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, _extends({
     ref: ref
   }, other, {
     onClick: handleClick,
-    children: [icon && /*#__PURE__*/_jsx(ListItemIcon, {
-      children: icon
-    }), label]
+    iconStart: icon,
+    children: label
   }));
 });
 process.env.NODE_ENV !== "production" ? GridActionsCellItem.propTypes = {

package/modern/components/cell/GridCell.js

@@ -120,7 +120,7 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     const result = apiRef.current.getCellParams(rowId, field);
     result.api = apiRef.current;
     return result;
-  }, objectShallowCompare);
+  }, undefined, objectShallowCompare);
   const isSelected = useGridSelector(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
     id: rowId,
     field

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

@@ -1,10 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import { useGridApiContext } from "../../../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../../../hooks/utils/useGridRootProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 function GridColumnMenuFilterItem(props) {
   const {
     colDef,
@@ -19,15 +17,12 @@ function GridColumnMenuFilterItem(props) {
   if (rootProps.disableColumnFilter || !colDef.filterable) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
     onClick: showFilter,
-    children: [/*#__PURE__*/_jsx(ListItemIcon, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuFilterIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/_jsx(ListItemText, {
-      children: apiRef.current.getLocaleText('columnMenuFilter')
-    })]
+    iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuFilterIcon, {
+      fontSize: "small"
+    }),
+    children: apiRef.current.getLocaleText('columnMenuFilter')
   });
 }
 process.env.NODE_ENV !== "production" ? GridColumnMenuFilterItem.propTypes = {

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

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import { useGridApiContext } from "../../../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../../../hooks/utils/useGridRootProps.js";
 import { gridVisibleColumnDefinitionsSelector } from "../../../../hooks/features/columns/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 function GridColumnMenuHideItem(props) {
   const {
     colDef,
@@ -35,16 +33,13 @@ function GridColumnMenuHideItem(props) {
   if (colDef.hideable === false) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
     onClick: toggleColumn,
     disabled: disabled,
-    children: [/*#__PURE__*/_jsx(ListItemIcon, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuHideIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/_jsx(ListItemText, {
-      children: apiRef.current.getLocaleText('columnMenuHideColumn')
-    })]
+    iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuHideIcon, {
+      fontSize: "small"
+    }),
+    children: apiRef.current.getLocaleText('columnMenuHideColumn')
   });
 }
 process.env.NODE_ENV !== "production" ? GridColumnMenuHideItem.propTypes = {

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

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import { GridPreferencePanelsValue } from "../../../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";
 import { useGridApiContext } from "../../../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../../../hooks/utils/useGridRootProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 function GridColumnMenuManageItem(props) {
   const {
     onClick
@@ -19,15 +17,12 @@ function GridColumnMenuManageItem(props) {
   if (rootProps.disableColumnSelector) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
     onClick: showColumns,
-    children: [/*#__PURE__*/_jsx(ListItemIcon, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuManageColumnsIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/_jsx(ListItemText, {
-      children: apiRef.current.getLocaleText('columnMenuManageColumns')
-    })]
+    iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuManageColumnsIcon, {
+      fontSize: "small"
+    }),
+    children: apiRef.current.getLocaleText('columnMenuManageColumns')
   });
 }
 process.env.NODE_ENV !== "production" ? GridColumnMenuManageItem.propTypes = {

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

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import { useGridSelector } from "../../../../hooks/utils/useGridSelector.js";
 import { gridSortModelSelector } from "../../../../hooks/features/sorting/gridSortingSelector.js";
 import { useGridApiContext } from "../../../../hooks/utils/useGridApiContext.js";
@@ -36,31 +34,24 @@ function GridColumnMenuSortItem(props) {
     return typeof label === 'function' ? label(colDef) : label;
   };
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [sortingOrder.includes('asc') && sortDirection !== 'asc' ? /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+    children: [sortingOrder.includes('asc') && sortDirection !== 'asc' ? /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
       onClick: onSortMenuItemClick,
       "data-value": "asc",
-      children: [/*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuSortAscendingIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/_jsx(ListItemText, {
-        children: getLabel('columnMenuSortAsc')
-      })]
-    }) : null, sortingOrder.includes('desc') && sortDirection !== 'desc' ? /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+      iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuSortAscendingIcon, {
+        fontSize: "small"
+      }),
+      children: getLabel('columnMenuSortAsc')
+    }) : null, sortingOrder.includes('desc') && sortDirection !== 'desc' ? /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
       onClick: onSortMenuItemClick,
       "data-value": "desc",
-      children: [/*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuSortDescendingIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/_jsx(ListItemText, {
-        children: getLabel('columnMenuSortDesc')
-      })]
-    }) : null, sortingOrder.includes(null) && sortDirection != null ? /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+      iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuSortDescendingIcon, {
+        fontSize: "small"
+      }),
+      children: getLabel('columnMenuSortDesc')
+    }) : null, sortingOrder.includes(null) && sortDirection != null ? /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
       onClick: onSortMenuItemClick,
-      children: [/*#__PURE__*/_jsx(ListItemIcon, {}), /*#__PURE__*/_jsx(ListItemText, {
-        children: apiRef.current.getLocaleText('columnMenuUnsort')
-      })]
+      iconStart: "",
+      children: apiRef.current.getLocaleText('columnMenuUnsort')
     }) : null]
   });
 }

package/modern/components/panel/GridColumnsPanel.js

@@ -2,13 +2,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GridPanelWrapper } from "./GridPanelWrapper.js";
-import { GridColumnsManagement } from "../columnsManagement/index.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridColumnsPanel(props) {
   const rootProps = useGridRootProps();
   return /*#__PURE__*/_jsx(GridPanelWrapper, _extends({}, props, {
-    children: /*#__PURE__*/_jsx(GridColumnsManagement, _extends({}, rootProps.slotProps?.columnsManagement))
+    children: /*#__PURE__*/_jsx(rootProps.slots.columnsManagement, _extends({}, rootProps.slotProps?.columnsManagement))
   }));
 }
 process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {

package/modern/components/panel/GridPanelContent.js

@@ -22,13 +22,17 @@ const GridPanelContentRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'PanelContent',
   overridesResolver: (props, styles) => styles.panelContent
-})({
+})(({
+  theme
+}) => ({
   display: 'flex',
   flexDirection: 'column',
   overflow: 'auto',
   flex: '1 1',
-  maxHeight: 400
-});
+  maxHeight: 400,
+  padding: theme.spacing(2.5, 1.5, 2, 1),
+  gap: theme.spacing(2.5)
+}));
 function GridPanelContent(props) {
   const {
       className

package/modern/components/panel/GridPanelFooter.js

@@ -4,7 +4,7 @@ const _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
@@ -25,9 +25,10 @@ const GridPanelFooterRoot = styled('div', {
 })(({
   theme
 }) => ({
-  padding: theme.spacing(0.5),
+  padding: theme.spacing(1),
   display: 'flex',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  borderTop: `1px solid ${theme.palette.divider}`
 }));
 function GridPanelFooter(props) {
   const {

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

@@ -39,27 +39,22 @@ const GridFilterFormRoot = styled('div', {
   theme
 }) => ({
   display: 'flex',
-  padding: theme.spacing(1)
+  gap: theme.spacing(1.5)
 }));
 const FilterFormDeleteIcon = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormDeleteIcon',
   overridesResolver: (_, styles) => styles.filterFormDeleteIcon
-})(({
-  theme
-}) => ({
+})({
   flexShrink: 0,
-  justifyContent: 'flex-end',
-  marginRight: theme.spacing(0.5),
-  marginBottom: theme.spacing(0.2)
-}));
+  justifyContent: 'center'
+});
 const FilterFormLogicOperatorInput = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormLogicOperatorInput',
   overridesResolver: (_, styles) => styles.filterFormLogicOperatorInput
 })({
-  minWidth: 55,
-  marginRight: 5,
+  minWidth: 75,
   justifyContent: 'end'
 });
 const FilterFormColumnInput = styled('div', {
@@ -261,7 +256,6 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     ownerState: rootProps
   }, other, {
     children: [/*#__PURE__*/_jsx(FilterFormDeleteIcon, _extends({
-      variant: "standard",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, deleteIconProps, {
       className: clsx(classes.deleteIcon, baseFormControlProps.className, deleteIconProps.className),
@@ -278,7 +272,8 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         })
       }))
     })), /*#__PURE__*/_jsx(FilterFormLogicOperatorInput, _extends({
-      variant: "standard",
+      variant: "outlined",
+      size: "small",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, logicOperatorInputProps, {
       sx: [hasLogicOperatorColumn ? {
@@ -308,7 +303,8 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         }), apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))))
       }))
     })), /*#__PURE__*/_jsxs(FilterFormColumnInput, _extends({
-      variant: "standard",
+      variant: "outlined",
+      size: "small",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, columnInputProps, {
       className: clsx(classes.columnInput, baseFormControlProps.className, columnInputProps.className),
@@ -333,7 +329,8 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         }), getColumnLabel(col)))
       }))]
     })), /*#__PURE__*/_jsxs(FilterFormOperatorInput, _extends({
-      variant: "standard",
+      variant: "outlined",
+      size: "small",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, operatorInputProps, {
       className: clsx(classes.operatorInput, baseFormControlProps.className, operatorInputProps.className),
@@ -359,12 +356,15 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         }), operator.label || apiRef.current.getLocaleText(`filterOperator${capitalize(operator.value)}`)))
       }))]
     })), /*#__PURE__*/_jsx(FilterFormValueInput, _extends({
-      variant: "standard",
+      variant: "outlined",
+      size: "small",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, valueInputPropsOther, {
       className: clsx(classes.valueInput, baseFormControlProps.className, valueInputPropsOther.className),
       ownerState: rootProps,
       children: currentOperator?.InputComponent ? /*#__PURE__*/_jsx(currentOperator.InputComponent, _extends({
+        variant: "outlined",
+        size: "small",
         apiRef: apiRef,
         item: item,
         applyValue: applyFilterChanges,

package/modern/components/toolbar/GridToolbarDensitySelector.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 ListItemIcon from '@mui/material/ListItemIcon';
 import { gridDensitySelector } from "../../hooks/features/density/densitySelector.js";
 import { isHideMenuKey } from "../../utils/keyboardUtils.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
@@ -72,12 +71,11 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
   if (rootProps.disableDensitySelector) {
     return null;
   }
-  const densityElements = densityOptions.map((option, index) => /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+  const densityElements = densityOptions.map((option, index) => /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
     onClick: () => handleDensityUpdate(option.value),
     selected: option.value === density,
-    children: [/*#__PURE__*/_jsx(ListItemIcon, {
-      children: option.icon
-    }), option.label]
+    iconStart: option.icon,
+    children: option.label
   }, index));
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({

package/modern/components/toolbar/GridToolbarFilterButton.js

@@ -31,6 +31,9 @@ const GridToolbarFilterListRoot = styled('ul', {
   margin: theme.spacing(1, 1, 0.5),
   padding: theme.spacing(0, 1)
 }));
+
+// FIXME(v8:romgrk): override slotProps
+
 const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbarFilterButton(props, ref) {
   const {
     slotProps = {}

package/modern/components/toolbar/GridToolbarQuickFilter.js

@@ -8,6 +8,7 @@ import TextField from '@mui/material/TextField';
 import { styled } from '@mui/material/styles';
 import { unstable_debounce as debounce } from '@mui/utils';
 import composeClasses from '@mui/utils/composeClasses';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
 import { getDataGridUtilityClass } from "../../constants/index.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
@@ -31,13 +32,8 @@ const GridToolbarQuickFilterRoot = styled(TextField, {
 })(({
   theme
 }) => ({
-  width: 'auto',
-  paddingBottom: theme.spacing(0.5),
-  '& input': {
-    marginLeft: theme.spacing(0.5)
-  },
-  '& .MuiInput-underline:before': {
-    borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
+  [`.${outlinedInputClasses.root}`]: {
+    fontSize: theme.typography.body2.fontSize
   },
   [`& input[type="search"]::-webkit-search-decoration,
   & input[type="search"]::-webkit-search-cancel-button,
@@ -91,7 +87,8 @@ function GridToolbarQuickFilter(props) {
   return /*#__PURE__*/_jsx(GridToolbarQuickFilterRoot, _extends({
     as: rootProps.slots.baseTextField,
     ownerState: rootProps,
-    variant: "standard",
+    variant: "outlined",
+    size: "small",
     value: searchValue,
     onChange: handleSearchValueChange,
     className: clsx(classes.root, className),
@@ -100,23 +97,30 @@ function GridToolbarQuickFilter(props) {
     type: "search"
   }, other, {
     InputProps: _extends({
-      startAdornment: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {
-        fontSize: "small"
-      }),
-      endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-        "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
-        size: "small",
-        sx: [searchValue ? {
-          visibility: 'visible'
-        } : {
-          visibility: 'hidden'
-        }],
-        onClick: handleSearchReset
-      }, rootProps.slotProps?.baseIconButton, {
-        children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {
+      startAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
+        position: "start",
+        children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {
           fontSize: "small"
         })
-      }))
+      }),
+      endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
+        position: "end",
+        children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+          "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
+          size: "small",
+          edge: "end",
+          sx: [searchValue ? {
+            visibility: 'visible'
+          } : {
+            visibility: 'hidden'
+          }],
+          onClick: handleSearchReset
+        }, rootProps.slotProps?.baseIconButton, {
+          children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {
+            fontSize: "small"
+          })
+        }))
+      })
     }, other.InputProps)
   }, rootProps.slotProps?.baseTextField));
 }

package/modern/components/virtualization/GridMainContainer.js

@@ -30,7 +30,7 @@ export const GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     ownerState: rootProps,
     className: props.className,
     tabIndex: -1
-  }, ariaAttributes, {
+  }, ariaAttributes, rootProps.slotProps?.main, {
     children: [/*#__PURE__*/_jsx(GridPanelAnchor, {
       role: "presentation",
       "data-id": "gridPanelAnchor"

package/modern/constants/dataGridPropsDefaultValues.js

@@ -48,11 +48,11 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   rows: [],
   rowSelection: true,
   rowSpacingType: 'margin',
+  rowSpanning: false,
   showCellVerticalBorder: false,
   showColumnVerticalBorder: false,
   sortingMode: 'client',
   sortingOrder: ['asc', 'desc', null],
   throttleRowsMs: 0,
-  unstable_rowSpanning: false,
   virtualizeColumnsWithAutoRowHeight: false
 };

package/modern/hooks/core/useGridStateInitialization.js

@@ -24,8 +24,8 @@ export const useGridStateInitialization = apiRef => {
     const updatedControlStateIds = [];
     Object.keys(controlStateMapRef.current).forEach(stateId => {
       const controlState = controlStateMapRef.current[stateId];
-      const oldSubState = controlState.stateSelector(apiRef.current.state, apiRef.current.instanceId);
-      const newSubState = controlState.stateSelector(newState, apiRef.current.instanceId);
+      const oldSubState = controlState.stateSelector(apiRef.current.state, undefined, apiRef.current.instanceId);
+      const newSubState = controlState.stateSelector(newState, undefined, apiRef.current.instanceId);
       if (newSubState === oldSubState) {
         return;
       }
@@ -57,7 +57,7 @@ export const useGridStateInitialization = apiRef => {
         hasPropChanged
       } = updatedControlStateIds[0];
       const controlState = controlStateMapRef.current[stateId];
-      const model = controlState.stateSelector(newState, apiRef.current.instanceId);
+      const model = controlState.stateSelector(newState, undefined, apiRef.current.instanceId);
       if (controlState.propOnChange && hasPropChanged) {
         controlState.propOnChange(model, {
           reason,