@mui/x-data-grid 6.0.0-beta.4 → 6.0.0

package/modern/components/cell/GridEditSingleSelectCell.js

@@ -1,15 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange", "initialOpen", "getOptionLabel"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange", "initialOpen", "getOptionLabel", "getOptionValue"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import MenuItem from '@mui/material/MenuItem';
 import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
-import { getLabelFromValueOption, getValueFromValueOptions, isSingleSelectColDef } from '../panel/filterPanel/filterPanelUtils';
+import { getValueFromValueOptions, isSingleSelectColDef } from '../panel/filterPanel/filterPanelUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 function isKeyboardEvent(event) {
   return !!event.key;
@@ -26,14 +26,15 @@ function GridEditSingleSelectCell(props) {
       error,
       onValueChange,
       initialOpen = rootProps.editMode === GridEditModes.Cell,
-      getOptionLabel = getLabelFromValueOption
+      getOptionLabel: getOptionLabelProp,
+      getOptionValue: getOptionValueProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
   const ref = React.useRef();
   const inputRef = React.useRef();
   const [open, setOpen] = React.useState(initialOpen);
-  const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
+  const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? false;
   useEnhancedEffect(() => {
     if (hasFocus) {
@@ -56,11 +57,16 @@ function GridEditSingleSelectCell(props) {
   if (!valueOptions) {
     return null;
   }
+  const getOptionValue = getOptionValueProp || colDef.getOptionValue;
+  const getOptionLabel = getOptionLabelProp || colDef.getOptionLabel;
   const handleChange = async event => {
+    if (!isSingleSelectColDef(colDef) || !valueOptions) {
+      return;
+    }
     setOpen(false);
     const target = event.target;
     // NativeSelect casts the value to a string.
-    const formattedTargetValue = getValueFromValueOptions(target.value, valueOptions);
+    const formattedTargetValue = getValueFromValueOptions(target.value, valueOptions, getOptionValue);
     if (onValueChange) {
       await onValueChange(event, formattedTargetValue);
     }
@@ -89,8 +95,10 @@ function GridEditSingleSelectCell(props) {
     }
     setOpen(true);
   };
-  const OptionComponent = isSelectNative ? 'option' : MenuItem;
-  return /*#__PURE__*/_jsx(rootProps.components.BaseSelect, _extends({
+  if (!valueOptions || !colDef) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
     ref: ref,
     inputRef: inputRef,
     value: valueProp,
@@ -103,13 +111,14 @@ function GridEditSingleSelectCell(props) {
     error: error,
     native: isSelectNative,
     fullWidth: true
-  }, other, rootProps.componentsProps?.baseSelect, {
+  }, other, rootProps.slotProps?.baseSelect, {
     children: valueOptions.map(valueOption => {
-      const value = typeof valueOption === 'object' ? valueOption.value : valueOption;
-      return /*#__PURE__*/_jsx(OptionComponent, {
-        value: value,
-        children: getOptionLabel(valueOption)
-      }, value);
+      const value = getOptionValue(valueOption);
+      return /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, rootProps.slotProps?.baseSelectOption || {}, {
+        native: isSelectNative,
+        key: value,
+        value: value
+      }), getOptionLabel(valueOption));
     })
   }));
 }
@@ -140,11 +149,17 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
    */
   formattedValue: PropTypes.any,
   /**
-   * Used to determine the text displayed for a given value option.
+   * Used to determine the label displayed for a given value option.
    * @param {ValueOptions} value The current value option.
    * @returns {string} The text to be displayed.
    */
   getOptionLabel: PropTypes.func,
+  /**
+   * Used to determine the value used for a value option.
+   * @param {ValueOptions} value The current value option.
+   * @returns {string} The value to be used.
+   */
+  getOptionValue: PropTypes.func,
   /**
    * If true, the cell is the active element.
    */

package/modern/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -37,7 +37,7 @@ export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
   }, [apiRef, colDef.field]);
   return /*#__PURE__*/_jsx("div", {
     className: classes.root,
-    children: /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
+    children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
       ref: iconButtonRef,
       tabIndex: -1,
       className: classes.button,
@@ -49,8 +49,8 @@ export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
       "aria-haspopup": "true",
       "aria-controls": columnMenuId,
       id: columnMenuButtonId
-    }, rootProps.componentsProps?.baseIconButton, {
-      children: /*#__PURE__*/_jsx(rootProps.components.ColumnMenuIcon, {
+    }, rootProps.slotProps?.baseIconButton, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuIcon, {
         fontSize: "small"
       })
     }))

package/{components/columnHeaders/GridColumnHeaders.js → modern/components/columnHeaders/GridBaseColumnHeaders.js}

@@ -4,7 +4,7 @@ const _excluded = ["className"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -21,32 +21,26 @@ const GridColumnHeadersRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaders',
   overridesResolver: (props, styles) => styles.columnHeaders
-})(({
-  theme
-}) => {
-  return {
-    position: 'relative',
-    overflow: 'hidden',
-    display: 'flex',
-    alignItems: 'center',
-    boxSizing: 'border-box',
-    borderBottom: '1px solid',
-    borderTopLeftRadius: theme.shape.borderRadius,
-    borderTopRightRadius: theme.shape.borderRadius
-  };
+})({
+  position: 'relative',
+  overflow: 'hidden',
+  display: 'flex',
+  alignItems: 'center',
+  boxSizing: 'border-box',
+  borderBottom: '1px solid',
+  borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
+  borderTopRightRadius: 'var(--unstable_DataGrid-radius)'
 });
-export const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
+export const GridBaseColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
   const {
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridColumnHeadersRoot, _extends({
     ref: ref,
-    className: clsx(className, classes.root)
+    className: clsx(className, classes.root),
+    ownerState: rootProps
   }, other));
 });

package/modern/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -51,22 +51,22 @@ function GridColumnHeaderFilterIconButton(props) {
   if (!counter) {
     return null;
   }
-  const iconButton = /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
+  const iconButton = /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
     onClick: toggleFilter,
     color: "default",
     "aria-label": apiRef.current.getLocaleText('columnHeaderFiltersLabel'),
     size: "small",
     tabIndex: -1
-  }, rootProps.componentsProps?.baseIconButton, {
-    children: /*#__PURE__*/_jsx(rootProps.components.ColumnFilteredIcon, {
+  }, rootProps.slotProps?.baseIconButton, {
+    children: /*#__PURE__*/_jsx(rootProps.slots.columnFilteredIcon, {
       className: classes.icon,
       fontSize: "small"
     })
   }));
-  return /*#__PURE__*/_jsx(rootProps.components.BaseTooltip, _extends({
+  return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
     title: apiRef.current.getLocaleText('columnHeaderFiltersTooltipActive')(counter),
     enterDelay: 1000
-  }, rootProps.componentsProps?.baseTooltip, {
+  }, rootProps.slotProps?.baseTooltip, {
     children: /*#__PURE__*/_jsxs(GridIconButtonContainer, {
       children: [counter > 1 && /*#__PURE__*/_jsx(Badge, {
         badgeContent: counter,

package/modern/components/columnHeaders/GridColumnHeaderItem.js

@@ -117,16 +117,16 @@ function GridColumnHeaderItem(props) {
     field: colDef.field,
     open: columnMenuOpen,
     target: iconButtonRef.current,
-    ContentComponent: rootProps.components.ColumnMenu,
-    contentComponentProps: rootProps.componentsProps?.columnMenu,
+    ContentComponent: rootProps.slots.columnMenu,
+    contentComponentProps: rootProps.slotProps?.columnMenu,
     onExited: handleExited
   });
   const sortingOrder = colDef.sortingOrder ?? rootProps.sortingOrder;
   const columnTitleIconButtons = /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [!rootProps.disableColumnFilter && /*#__PURE__*/_jsx(rootProps.components.ColumnHeaderFilterIconButton, _extends({
+    children: [!rootProps.disableColumnFilter && /*#__PURE__*/_jsx(rootProps.slots.columnHeaderFilterIconButton, _extends({
       field: colDef.field,
       counter: filterItemsCounter
-    }, rootProps.componentsProps?.columnHeaderFilterIconButton)), colDef.sortable && !colDef.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
+    }, rootProps.slotProps?.columnHeaderFilterIconButton)), colDef.sortable && !colDef.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
       direction: sortDirection,
       index: sortIndex,
       sortingOrder: sortingOrder

package/modern/components/columnHeaders/GridColumnHeaderSeparator.js

@@ -52,7 +52,7 @@ function GridColumnHeaderSeparatorRaw(props) {
       }
     }, other, {
       onClick: stopClick,
-      children: /*#__PURE__*/_jsx(rootProps.components.ColumnResizeIcon, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.columnResizeIcon, {
         className: classes.icon
       })
     }))

package/modern/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -22,11 +22,11 @@ function getIcon(icons, direction, className, sortingOrder) {
   let Icon;
   const iconProps = {};
   if (direction === 'asc') {
-    Icon = icons.ColumnSortedAscendingIcon;
+    Icon = icons.columnSortedAscendingIcon;
   } else if (direction === 'desc') {
-    Icon = icons.ColumnSortedDescendingIcon;
+    Icon = icons.columnSortedDescendingIcon;
   } else {
-    Icon = icons.ColumnUnsortedIcon;
+    Icon = icons.columnUnsortedIcon;
     iconProps.sortingOrder = sortingOrder;
   }
   return Icon ? /*#__PURE__*/_jsx(Icon, _extends({
@@ -46,16 +46,16 @@ function GridColumnHeaderSortIconRaw(props) {
     classes: rootProps.classes
   });
   const classes = useUtilityClasses(ownerState);
-  const iconElement = getIcon(rootProps.components, direction, classes.icon, sortingOrder);
+  const iconElement = getIcon(rootProps.slots, direction, classes.icon, sortingOrder);
   if (!iconElement) {
     return null;
   }
-  const iconButton = /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
+  const iconButton = /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
     tabIndex: -1,
     "aria-label": apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
     title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
     size: "small"
-  }, rootProps.componentsProps?.baseIconButton, {
+  }, rootProps.slotProps?.baseIconButton, {
     children: iconElement
   }));
   return /*#__PURE__*/_jsxs(GridIconButtonContainer, {

package/modern/components/columnHeaders/GridColumnHeaderTitle.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { isOverflown } from '../../utils/domUtils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -23,27 +23,23 @@ const GridColumnHeaderTitleRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaderTitle',
   overridesResolver: (props, styles) => styles.columnHeaderTitle
-})(({
-  theme
-}) => ({
+})({
   textOverflow: 'ellipsis',
   overflow: 'hidden',
   whiteSpace: 'nowrap',
-  fontWeight: theme.typography.fontWeightMedium
-}));
+  fontWeight: 'var(--unstable_DataGrid-headWeight)'
+});
 const ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHeaderInnerTitle(props, ref) {
   const {
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridColumnHeaderTitleRoot, _extends({
     ref: ref,
-    className: clsx(classes.root, className)
+    className: clsx(classes.root, className),
+    ownerState: rootProps
   }, other));
 });
 // No React.memo here as if we display the sort icon, we need to recalculate the isOver
@@ -66,9 +62,9 @@ function GridColumnHeaderTitle(props) {
       }
     }
   }, [titleRef, columnWidth, description, label]);
-  return /*#__PURE__*/_jsx(rootProps.components.BaseTooltip, _extends({
+  return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
     title: description || tooltip
-  }, rootProps.componentsProps?.baseTooltip, {
+  }, rootProps.slotProps?.baseTooltip, {
     children: /*#__PURE__*/_jsx(ColumnHeaderInnerTitle, {
       ref: titleRef,
       children: label

package/modern/components/columnHeaders/GridColumnHeadersInner.js

@@ -4,7 +4,7 @@ const _excluded = ["isDragging", "className"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
@@ -45,14 +45,14 @@ export const GridColumnHeadersInner = /*#__PURE__*/React.forwardRef(function Gri
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const ownerState = {
+  const ownerState = _extends({}, rootProps, {
     isDragging,
-    hasScrollX: apiRef.current.getRootDimensions()?.hasScrollX ?? false,
-    classes: rootProps.classes
-  };
+    hasScrollX: apiRef.current.getRootDimensions()?.hasScrollX ?? false
+  });
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(GridColumnHeadersInnerRoot, _extends({
     ref: ref,
-    className: clsx(className, classes.root)
+    className: clsx(className, classes.root),
+    ownerState: ownerState
   }, other));
 });

package/modern/components/columnHeaders/GridIconButtonContainer.js

@@ -4,7 +4,7 @@ const _excluded = ["className"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -32,12 +32,10 @@ export const GridIconButtonContainer = /*#__PURE__*/React.forwardRef(function Gr
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridIconButtonContainerRoot, _extends({
     ref: ref,
-    className: clsx(classes.root, className)
+    className: clsx(classes.root, className),
+    ownerState: rootProps
   }, other));
 });

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -73,7 +73,7 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
   }
   const isSelectable = apiRef.current.isRowSelectable(id);
   const label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
-  return /*#__PURE__*/_jsx(rootProps.components.BaseCheckbox, _extends({
+  return /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
     ref: handleRef,
     tabIndex: tabIndex,
     checked: isChecked,
@@ -85,7 +85,7 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     onKeyDown: handleKeyDown,
     disabled: !isSelectable,
     touchRippleRef: rippleRef
-  }, rootProps.componentsProps?.baseCheckbox, other));
+  }, rootProps.slotProps?.baseCheckbox, other));
 });
 process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   // ----------------------------- Warning --------------------------------

package/modern/components/columnSelection/GridHeaderCheckbox.js

@@ -92,7 +92,7 @@ const GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderChec
     return apiRef.current.subscribeEvent('rowSelectionChange', handleSelectionChange);
   }, [apiRef, handleSelectionChange]);
   const label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectAllRows' : 'checkboxSelectionSelectAllRows');
-  return /*#__PURE__*/_jsx(rootProps.components.BaseCheckbox, _extends({
+  return /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
     ref: ref,
     indeterminate: isIndeterminate,
     checked: isChecked,
@@ -103,7 +103,7 @@ const GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderChec
     },
     tabIndex: tabIndex,
     onKeyDown: handleKeyDown
-  }, rootProps.componentsProps?.baseCheckbox, other));
+  }, rootProps.slotProps?.baseCheckbox, other));
 });
 process.env.NODE_ENV !== "production" ? GridHeaderCheckbox.propTypes = {
   // ----------------------------- Warning --------------------------------

package/modern/components/containers/GridFooterContainer.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -22,15 +22,12 @@ const GridFooterContainerRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FooterContainer',
   overridesResolver: (props, styles) => styles.footerContainer
-})(() => {
-  return {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    minHeight: 52,
-    // Match TablePagination min height
-    borderTop: '1px solid'
-  };
+})({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  minHeight: 52,
+  borderTop: '1px solid'
 });
 const GridFooterContainer = /*#__PURE__*/React.forwardRef(function GridFooterContainer(props, ref) {
   const {
@@ -38,13 +35,11 @@ const GridFooterContainer = /*#__PURE__*/React.forwardRef(function GridFooterCon
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridFooterContainerRoot, _extends({
     ref: ref,
-    className: clsx(classes.root, className)
+    className: clsx(classes.root, className),
+    ownerState: rootProps
   }, other));
 });
 process.env.NODE_ENV !== "production" ? GridFooterContainer.propTypes = {

package/modern/components/containers/GridMainContainer.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -26,12 +26,10 @@ const GridMainContainerRoot = styled('div', {
 }));
 export function GridMainContainer(props) {
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridMainContainerRoot, {
     className: classes.root,
+    ownerState: rootProps,
     children: props.children
   });
 }

package/modern/components/containers/GridOverlay.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { alpha, styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -22,30 +22,26 @@ const GridOverlayRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'Overlay',
   overridesResolver: (_, styles) => styles.overlay
-})(({
-  theme
-}) => ({
+})({
   width: '100%',
   height: '100%',
   display: 'flex',
   alignSelf: 'center',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.background.defaultChannel} / ${theme.vars.palette.action.disabledOpacity})` : alpha(theme.palette.background.default, theme.palette.action.disabledOpacity)
-}));
+  backgroundColor: 'var(--unstable_DataGrid-overlayBackground)'
+});
 const GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(props, ref) {
   const {
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridOverlayRoot, _extends({
     ref: ref,
-    className: clsx(classes.root, className)
+    className: clsx(classes.root, className),
+    ownerState: rootProps
   }, other));
 });
 process.env.NODE_ENV !== "production" ? GridOverlay.propTypes = {

package/modern/components/containers/GridRoot.js

@@ -41,11 +41,9 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   const rootContainerRef = React.useRef(null);
   const handleRef = useForkRef(rootContainerRef, ref);
   const pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector);
-  const ownerState = {
-    density: densityValue,
-    classes: rootProps.classes,
-    autoHeight: rootProps.autoHeight
-  };
+  const ownerState = _extends({}, rootProps, {
+    density: densityValue
+  });
   const classes = useUtilityClasses(ownerState);
   apiRef.current.register('public', {
     rootElementRef: rootContainerRef
@@ -67,6 +65,7 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   return /*#__PURE__*/_jsx(GridRootStyles, _extends({
     ref: handleRef,
     className: clsx(className, classes.root),
+    ownerState: ownerState,
     role: "grid",
     "aria-colcount": visibleColumns.length,
     "aria-rowcount": headerGroupingMaxDepth + 1 + pinnedRowsCount + totalRowCount,

package/modern/components/containers/GridRootStyles.js

@@ -132,14 +132,18 @@ export const GridRootStyles = styled('div', {
   theme
 }) => {
   const borderColor = getBorderColor(theme);
+  const radius = theme.shape.borderRadius;
   const gridStyle = _extends({
+    '--unstable_DataGrid-radius': typeof radius === 'number' ? `${radius}px` : radius,
+    '--unstable_DataGrid-headWeight': theme.typography.fontWeightMedium,
+    '--unstable_DataGrid-overlayBackground': theme.vars ? `rgba(${theme.vars.palette.background.defaultChannel} / ${theme.vars.palette.action.disabledOpacity})` : alpha(theme.palette.background.default, theme.palette.action.disabledOpacity),
     flex: 1,
     boxSizing: 'border-box',
     position: 'relative',
     borderWidth: '1px',
     borderStyle: 'solid',
     borderColor,
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: 'var(--unstable_DataGrid-radius)',
     color: (theme.vars || theme).palette.text.primary
   }, theme.typography.body2, {
     outline: 'none',
@@ -434,13 +438,13 @@ export const GridRootStyles = styled('div', {
     [`& .${gridClasses['columnHeader--dragging']}, & .${gridClasses['row--dragging']}`]: {
       background: (theme.vars || theme).palette.background.paper,
       padding: '0 12px',
-      borderRadius: theme.shape.borderRadius,
+      borderRadius: 'var(--unstable_DataGrid-radius)',
       opacity: (theme.vars || theme).palette.action.disabledOpacity
     },
     [`& .${gridClasses['row--dragging']}`]: {
       background: (theme.vars || theme).palette.background.paper,
       padding: '0 12px',
-      borderRadius: theme.shape.borderRadius,
+      borderRadius: 'var(--unstable_DataGrid-radius)',
       opacity: (theme.vars || theme).palette.action.disabledOpacity,
       [`& .${gridClasses.rowReorderCellPlaceholder}`]: {
         display: 'flex'

package/modern/components/containers/GridToolbarContainer.js

@@ -4,7 +4,7 @@ const _excluded = ["className", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -38,16 +38,14 @@ const GridToolbarContainer = /*#__PURE__*/React.forwardRef(function GridToolbarC
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   if (!children) {
     return null;
   }
   return /*#__PURE__*/_jsx(GridToolbarContainerRoot, _extends({
     ref: ref,
-    className: clsx(className, classes.root)
+    className: clsx(className, classes.root),
+    ownerState: rootProps
   }, other, {
     children: children
   }));

package/modern/components/index.js

@@ -3,7 +3,7 @@ export * from './cell';
 export * from './containers';
 export * from './columnHeaders';
 export * from './columnSelection';
-export * from './icons';
+export * from '../material/icons';
 export * from './menu';
 export * from './panel';
 export * from './toolbar';