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

package/components/cell/GridCell.js

@@ -5,7 +5,7 @@ const _excluded = ["align", "children", "colIndex", "colDef", "cellMode", "field
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses, unstable_ownerDocument as ownerDocument, unstable_capitalize as capitalize } from '@mui/utils';
+import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_ownerDocument as ownerDocument, unstable_capitalize as capitalize } from '@mui/utils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { GridCellModes } from '../../models';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
@@ -40,7 +40,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 let warnedOnce = false;
-function GridCell(props) {
+const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   var _rootProps$experiment;
   const {
       align,
@@ -74,6 +74,7 @@ function GridCell(props) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const valueToRender = formattedValue == null ? value : formattedValue;
   const cellRef = React.useRef(null);
+  const handleRef = useForkRef(ref, cellRef);
   const focusElementRef = React.useRef(null);
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
@@ -175,7 +176,7 @@ function GridCell(props) {
     onDragOver: publish('cellDragOver', onDragOver)
   };
   return /*#__PURE__*/_jsx("div", _extends({
-    ref: cellRef,
+    ref: handleRef,
     className: clsx(className, classes.root),
     role: "cell",
     "data-field": field,
@@ -195,23 +196,24 @@ function GridCell(props) {
     onFocus: handleFocus,
     children: renderChildren()
   }));
-}
+});
+const MemoizedCell = /*#__PURE__*/React.memo(GridCell);
 process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  align: PropTypes.oneOf(['center', 'left', 'right']).isRequired,
+  align: PropTypes.oneOf(['center', 'left', 'right']),
   cellMode: PropTypes.oneOf(['edit', 'view']),
   children: PropTypes.node,
   className: PropTypes.string,
-  colIndex: PropTypes.number.isRequired,
+  colIndex: PropTypes.number,
   colSpan: PropTypes.number,
   disableDragEvents: PropTypes.bool,
-  field: PropTypes.string.isRequired,
+  field: PropTypes.string,
   formattedValue: PropTypes.any,
   hasFocus: PropTypes.bool,
-  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
+  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
   isEditable: PropTypes.bool,
   isSelected: PropTypes.bool,
   onClick: PropTypes.func,
@@ -221,10 +223,10 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   onKeyDown: PropTypes.func,
   onMouseDown: PropTypes.func,
   onMouseUp: PropTypes.func,
-  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   showRightBorder: PropTypes.bool,
-  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  tabIndex: PropTypes.oneOf([-1, 0]),
   value: PropTypes.any,
-  width: PropTypes.number.isRequired
+  width: PropTypes.number
 } : void 0;
-export { GridCell };
+export { MemoizedCell as GridCell };

package/components/cell/GridEditBooleanCell.js

@@ -19,7 +19,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 function GridEditBooleanCell(props) {
-  var _rootProps$components;
+  var _rootProps$slotProps;
   const {
       id: idProp,
       value,
@@ -62,13 +62,13 @@ function GridEditBooleanCell(props) {
     htmlFor: id,
     className: clsx(classes.root, className)
   }, other, {
-    children: /*#__PURE__*/_jsx(rootProps.components.BaseCheckbox, _extends({
+    children: /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
       id: id,
       inputRef: inputRef,
       checked: Boolean(valueState),
       onChange: handleChange,
       size: "small"
-    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseCheckbox))
+    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseCheckbox))
   }));
 }
 process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes = {

package/components/cell/GridEditInputCell.js

@@ -8,7 +8,6 @@ import { styled } from '@mui/material/styles';
 import InputBase from '@mui/material/InputBase';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { GridLoadIcon } from '../icons/index';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -49,10 +48,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const apiRef = useGridApiContext();
   const inputRef = React.useRef();
   const [valueState, setValueState] = React.useState(value);
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   const handleChange = React.useCallback(async event => {
     const newValue = event.target.value;
     if (onValueChange) {
@@ -87,11 +83,12 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     ref: ref,
     inputRef: inputRef,
     className: classes.root,
+    ownerState: rootProps,
     fullWidth: true,
     type: colDef.type === 'number' ? colDef.type : 'text',
     value: valueState != null ? valueState : '',
     onChange: handleChange,
-    endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(GridLoadIcon, {}) : undefined
+    endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {}) : undefined
   }, other));
 });
 process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {

package/components/cell/GridEditSingleSelectCell.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { SelectProps, SelectChangeEvent } from '@mui/material/Select';
 import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
-import { ValueOptions } from '../../models/colDef/gridColDef';
-export interface GridEditSingleSelectCellProps extends GridRenderEditCellParams, Omit<SelectProps, 'id' | 'tabIndex' | 'value'> {
+import { GridSingleSelectColDef } from '../../models/colDef/gridColDef';
+export interface GridEditSingleSelectCellProps extends GridRenderEditCellParams, Omit<SelectProps, 'id' | 'tabIndex' | 'value'>, Pick<GridSingleSelectColDef, 'getOptionLabel' | 'getOptionValue'> {
     /**
      * Callback called when the value is changed by the user.
      * @param {SelectChangeEvent<any>} event The event source of the callback.
@@ -14,12 +14,6 @@ export interface GridEditSingleSelectCellProps extends GridRenderEditCellParams,
      * If true, the select opens by default.
      */
     initialOpen?: boolean;
-    /**
-     * Used to determine the text displayed for a given value option.
-     * @param {ValueOptions} value The current value option.
-     * @returns {string} The text to be displayed.
-     */
-    getOptionLabel?: (value: ValueOptions) => string;
 }
 declare function GridEditSingleSelectCell(props: GridEditSingleSelectCellProps): JSX.Element | null;
 declare namespace GridEditSingleSelectCell {

package/components/cell/GridEditSingleSelectCell.js

@@ -1,21 +1,21 @@
 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;
 }
 function GridEditSingleSelectCell(props) {
-  var _rootProps$components, _baseSelectProps$nati, _rootProps$components2;
+  var _rootProps$slotProps, _baseSelectProps$nati, _rootProps$slotProps2;
   const rootProps = useGridRootProps();
   const {
       id,
@@ -27,14 +27,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$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
+  const baseSelectProps = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseSelect) || {};
   const isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : false;
   useEnhancedEffect(() => {
     if (hasFocus) {
@@ -58,11 +59,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);
     }
@@ -91,8 +97,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,
@@ -105,13 +113,15 @@ function GridEditSingleSelectCell(props) {
     error: error,
     native: isSelectNative,
     fullWidth: true
-  }, other, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect, {
+  }, other, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelect, {
     children: valueOptions.map(valueOption => {
-      const value = typeof valueOption === 'object' ? valueOption.value : valueOption;
-      return /*#__PURE__*/_jsx(OptionComponent, {
-        value: value,
-        children: getOptionLabel(valueOption)
-      }, value);
+      var _rootProps$slotProps3;
+      const value = getOptionValue(valueOption);
+      return /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, ((_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelectOption) || {}, {
+        native: isSelectNative,
+        key: value,
+        value: value
+      }), getOptionLabel(valueOption));
     })
   }));
 }
@@ -142,11 +152,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/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -17,7 +17,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
-  var _rootProps$components;
+  var _rootProps$slotProps;
   const {
     colDef,
     open,
@@ -38,7 +38,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,
@@ -50,8 +50,8 @@ export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
       "aria-haspopup": "true",
       "aria-controls": columnMenuId,
       id: columnMenuButtonId
-    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseIconButton, {
-      children: /*#__PURE__*/_jsx(rootProps.components.ColumnMenuIcon, {
+    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuIcon, {
         fontSize: "small"
       })
     }))

package/components/columnHeaders/GridBaseColumnHeaders.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/system';
+interface GridBaseColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement> {
+    sx?: SxProps<Theme>;
+}
+export declare const GridBaseColumnHeaders: React.ForwardRefExoticComponent<GridBaseColumnHeadersProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/{modern/components/columnHeaders/GridColumnHeaders.js → 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/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -21,7 +21,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 function GridColumnHeaderFilterIconButton(props) {
-  var _rootProps$components, _rootProps$components2;
+  var _rootProps$slotProps, _rootProps$slotProps2;
   const {
     counter,
     field,
@@ -52,22 +52,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$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseIconButton, {
-    children: /*#__PURE__*/_jsx(rootProps.components.ColumnFilteredIcon, {
+  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _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$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseTooltip, {
+  }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseTooltip, {
     children: /*#__PURE__*/_jsxs(GridIconButtonContainer, {
       children: [counter > 1 && /*#__PURE__*/_jsx(Badge, {
         badgeContent: counter,

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -33,7 +33,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 function GridColumnHeaderItem(props) {
-  var _rootProps$components, _colDef$sortingOrder, _rootProps$components2, _colDef$headerName;
+  var _rootProps$slotProps, _colDef$sortingOrder, _rootProps$slotProps2, _colDef$headerName;
   const {
     colDef,
     columnMenuOpen,
@@ -118,16 +118,16 @@ function GridColumnHeaderItem(props) {
     field: colDef.field,
     open: columnMenuOpen,
     target: iconButtonRef.current,
-    ContentComponent: rootProps.components.ColumnMenu,
-    contentComponentProps: (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.columnMenu,
+    ContentComponent: rootProps.slots.columnMenu,
+    contentComponentProps: (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.columnMenu,
     onExited: handleExited
   });
   const sortingOrder = (_colDef$sortingOrder = colDef.sortingOrder) != null ? _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$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.columnHeaderFilterIconButton)), colDef.sortable && !colDef.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
+    }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.columnHeaderFilterIconButton)), colDef.sortable && !colDef.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
       direction: sortDirection,
       index: sortIndex,
       sortingOrder: sortingOrder

package/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/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({
@@ -35,7 +35,7 @@ function getIcon(icons, direction, className, sortingOrder) {
   }, iconProps)) : null;
 }
 function GridColumnHeaderSortIconRaw(props) {
-  var _rootProps$components;
+  var _rootProps$slotProps;
   const {
     direction,
     index,
@@ -47,16 +47,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$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseIconButton, {
+  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
     children: iconElement
   }));
   return /*#__PURE__*/_jsxs(GridIconButtonContainer, {

package/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,32 +23,28 @@ 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
 function GridColumnHeaderTitle(props) {
-  var _rootProps$components;
+  var _rootProps$slotProps;
   const {
     label,
     description,
@@ -67,9 +63,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$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTooltip, {
+  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
     children: /*#__PURE__*/_jsx(ColumnHeaderInnerTitle, {
       ref: titleRef,
       children: label

package/components/columnHeaders/GridColumnHeadersInner.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SxProps, Theme } from '@mui/material/styles';
+import { SxProps, Theme } from '@mui/system';
 interface GridColumnHeadersInnerProps extends React.HTMLAttributes<HTMLDivElement> {
     isDragging: boolean;
     sx?: SxProps<Theme>;

package/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';
@@ -46,14 +46,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$getRo = (_apiRef$current$getRo2 = apiRef.current.getRootDimensions()) == null ? void 0 : _apiRef$current$getRo2.hasScrollX) != null ? _apiRef$current$getRo : false,
-    classes: rootProps.classes
-  };
+    hasScrollX: (_apiRef$current$getRo = (_apiRef$current$getRo2 = apiRef.current.getRootDimensions()) == null ? void 0 : _apiRef$current$getRo2.hasScrollX) != null ? _apiRef$current$getRo : 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/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/components/columnSelection/GridCellCheckboxRenderer.js

@@ -19,7 +19,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCellCheckboxRenderer(props, ref) {
-  var _rootProps$components;
+  var _rootProps$slotProps;
   const {
       field,
       id,
@@ -75,7 +75,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,
@@ -87,7 +87,7 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     onKeyDown: handleKeyDown,
     disabled: !isSelectable,
     touchRippleRef: rippleRef
-  }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseCheckbox, other));
+  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseCheckbox, other));
 });
 process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   // ----------------------------- Warning --------------------------------