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

package/CHANGELOG.md

@@ -3,6 +3,60 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-beta.5
+
+_Feb 23, 2023_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡️ Add web worker support for Excel export (#7770) @m4theushw
+- 🎁 Add a button to remove all filters on the data grid filter panel (#7326) @MBilalShafi
+- ⚙️ Allow to customize options label and value in the data grid `singleSelect` column (#7684) @m4theushw
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-beta.5` / `@mui/x-data-grid-pro@v6.0.0-beta.5` / `@mui/x-data-grid-premium@v6.0.0-beta.5`
+
+#### Changes
+
+- [DataGrid] Allow to customize label and value for `singleSelect` (#7684) @m4theushw
+- [DataGrid] Fix `ownerState` being `undefined` in theme style overrides (#7964) @lolaignatova
+- [DataGrid] Introduce `slots` and deprecate `components` (#7882) @MBilalShafi
+- [DataGridPro] Add `Remove All` option in filter panel (#7326) @MBilalShafi
+- [DataGridPremium] Add web worker support for Excel export (#7770) @m4theushw
+
+### `@mui/x-date-pickers@v6.0.0-beta.5` / `@mui/x-date-pickers-pro@v6.0.0-beta.5`
+
+#### Breaking changes
+
+- The `MuiDateSectionName` type was renamed to `FieldSectionType`
+
+#### Changes
+
+- [fields] Fix multi input range fields validation when uncontrolled (#8002) @LukasTy
+- [fields] Fix single input time range fields slot props (#7988) @LukasTy
+- [fields] Make the `ArrowUp` / `ArrowDown` edition only impact the active section (#7993) @flaviendelangle
+- [fields] Fix single input range fields clearing (#7995) @flaviendelangle
+- [fields] Clean the section object (#8009) @flaviendelangle
+- [pickers] Fix `textField` slot `error` prop propagation (#7987) @LukasTy
+
+### `@mui/x-codemod@v6.0.0-beta.5`
+
+#### Changes
+
+- [codemod] Add `apiRef.current.getRowIndex` to `DataGrid` renaming codemod (#8001) @MBilalShafi
+
+### Docs
+
+- [docs] Fine tune range fields demos (#7992) @LukasTy
+- [docs] Fix a few scroll issues on mobile (#7900) @oliviertassinari
+- [docs] Fix inconsistency in the data grid migration guide (#7963) @MBilalShafi
+
+### Core
+
+- [core] Fix `moment` locale on adapter tests (#8020) @flaviendelangle
+- [test] Support all adapters on the field tests about the formats (#7996) @flaviendelangle
+
 ## 6.0.0-beta.4
 
 _Feb 16, 2023_
@@ -2179,6 +2233,26 @@ You can find more information about the new api, including how to set those tran
 - [test] Skip tests for column pinning and dynamic row height (#5997) @m4theushw
 - [website] Improve security header @oliviertassinari
 
+## 5.17.25
+
+_Feb 23, 2023_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.25` / `@mui/x-data-grid-pro@v5.17.25` / `@mui/x-data-grid-premium@v5.17.25`
+
+#### Changes
+
+- [DataGrid] Fix `ownerState` being `undefined` in theme style overrides (#7757) @lolaignatova
+
+### `@mui/x-date-pickers@v5.0.20` / `@mui/x-date-pickers-pro@v5.0.20`
+
+#### Changes
+
+- [DateTimePicker] Ensure toolbar `viewType` is correctly updated (#7942) @LukasTy
+
 ## 5.17.24
 
 _Feb 16, 2023_

package/DataGrid/DataGrid.js

@@ -103,10 +103,12 @@ DataGridRaw.propTypes = {
   columnVisibilityModel: PropTypes.object,
   /**
    * Overrideable components.
+   * @deprecated Use `slots` instead.
    */
   components: PropTypes.object,
   /**
    * Overrideable components props dynamically passed to the component at rendering.
+   * @deprecated Use the `slotProps` prop instead.
    */
   componentsProps: PropTypes.object,
   /**
@@ -581,6 +583,14 @@ DataGridRaw.propTypes = {
    * @default false
    */
   showColumnVerticalBorder: PropTypes.bool,
+  /**
+   * Overrideable components props dynamically passed to the component at rendering.
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overrideable components.
+   */
+  slots: PropTypes.object,
   /**
    * Sorting can be processed on the server or client-side.
    * Set it to 'client' if you would like to handle sorting on the client-side.

package/DataGrid/useDataGridProps.js

@@ -1,9 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["components", "componentsProps"];
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { GRID_DEFAULT_LOCALE_TEXT } from '../constants';
 import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '../constants/defaultGridSlotsComponents';
 import { GridEditModes } from '../models';
+import { computeSlots, uncapitalizeObjectKeys } from '../internals/utils';
 const DATA_GRID_FORCED_PROPS = {
   disableMultipleColumnsFiltering: true,
   disableMultipleColumnsSorting: true,
@@ -65,25 +68,29 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   keepNonExistentRowsSelected: false,
   keepColumnPositionIfDraggedOutside: false
 };
+const defaultSlots = uncapitalizeObjectKeys(DATA_GRID_DEFAULT_SLOTS_COMPONENTS);
 export const useDataGridProps = inProps => {
-  const themedProps = useThemeProps({
-    props: inProps,
-    name: 'MuiDataGrid'
-  });
+  const _useThemeProps = useThemeProps({
+      props: inProps,
+      name: 'MuiDataGrid'
+    }),
+    {
+      components,
+      componentsProps
+    } = _useThemeProps,
+    themedProps = _objectWithoutPropertiesLoose(_useThemeProps, _excluded);
   const localeText = React.useMemo(() => _extends({}, GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
-  const components = React.useMemo(() => {
-    const overrides = themedProps.components;
-    if (!overrides) {
-      return _extends({}, DATA_GRID_DEFAULT_SLOTS_COMPONENTS);
-    }
-    const mergedComponents = {};
-    Object.entries(DATA_GRID_DEFAULT_SLOTS_COMPONENTS).forEach(([key, defaultComponent]) => {
-      mergedComponents[key] = overrides[key] === undefined ? defaultComponent : overrides[key];
-    });
-    return mergedComponents;
-  }, [themedProps.components]);
-  return React.useMemo(() => _extends({}, DATA_GRID_PROPS_DEFAULT_VALUES, themedProps, {
-    localeText,
+  const slots = React.useMemo(() => computeSlots({
+    defaultSlots,
+    slots: themedProps.slots,
     components
-  }, DATA_GRID_FORCED_PROPS), [themedProps, localeText, components]);
+  }), [components, themedProps.slots]);
+  return React.useMemo(() => {
+    var _themedProps$slotProp;
+    return _extends({}, DATA_GRID_PROPS_DEFAULT_VALUES, themedProps, {
+      localeText,
+      slots,
+      slotProps: (_themedProps$slotProp = themedProps.slotProps) != null ? _themedProps$slotProp : componentsProps
+    }, DATA_GRID_FORCED_PROPS);
+  }, [themedProps, localeText, slots, componentsProps]);
 };

package/colDef/gridSingleSelectColDef.js

@@ -2,12 +2,21 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { GRID_STRING_COL_DEF } from './gridStringColDef';
 import { renderEditSingleSelectCell } from '../components/cell/GridEditSingleSelectCell';
 import { getGridSingleSelectOperators } from './gridSingleSelectOperators';
-import { getLabelFromValueOption, isSingleSelectColDef } from '../components/panel/filterPanel/filterPanelUtils';
+import { isSingleSelectColDef } from '../components/panel/filterPanel/filterPanelUtils';
+import { isObject } from '../utils/utils';
 const isArrayOfObjects = options => {
   return typeof options[0] === 'object';
 };
+const defaultGetOptionValue = value => {
+  return isObject(value) ? value.value : value;
+};
+const defaultGetOptionLabel = value => {
+  return isObject(value) ? value.label : String(value);
+};
 export const GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'singleSelect',
+  getOptionLabel: defaultGetOptionLabel,
+  getOptionValue: defaultGetOptionValue,
   valueFormatter(params) {
     const {
       id,
@@ -36,10 +45,10 @@ export const GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
       return value;
     }
     if (!isArrayOfObjects(valueOptions)) {
-      return getLabelFromValueOption(value);
+      return colDef.getOptionLabel(value);
     }
-    const valueOption = valueOptions.find(option => option.value === value);
-    return valueOption ? getLabelFromValueOption(valueOption) : '';
+    const valueOption = valueOptions.find(option => colDef.getOptionValue(option) === value);
+    return valueOption ? colDef.getOptionLabel(valueOption) : '';
   },
   renderEditCell: renderEditSingleSelectCell,
   filterOperators: getGridSingleSelectOperators()

package/components/GridFooter.js

@@ -13,7 +13,7 @@ import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
-  var _rootProps$components;
+  var _rootProps$slotProps;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const totalTopLevelRowCount = useGridSelector(apiRef, gridTopLevelRowCountSelector);
@@ -26,7 +26,7 @@ const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref)
     rowCount: totalTopLevelRowCount,
     visibleRowCount: visibleTopLevelRowCount
   }) : null;
-  const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.components.Pagination && /*#__PURE__*/_jsx(rootProps.components.Pagination, _extends({}, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.pagination));
+  const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && /*#__PURE__*/_jsx(rootProps.slots.pagination, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.pagination));
   return /*#__PURE__*/_jsxs(GridFooterContainer, _extends({
     ref: ref
   }, props, {

package/components/GridHeader.js

@@ -4,11 +4,11 @@ import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const GridHeader = /*#__PURE__*/React.forwardRef(function GridHeader(props, ref) {
-  var _rootProps$components, _rootProps$components2;
+  var _rootProps$slotProps, _rootProps$slotProps2;
   const rootProps = useGridRootProps();
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: ref
   }, props, {
-    children: [/*#__PURE__*/_jsx(rootProps.components.PreferencesPanel, _extends({}, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.preferencesPanel)), rootProps.components.Toolbar && /*#__PURE__*/_jsx(rootProps.components.Toolbar, _extends({}, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.toolbar))]
+    children: [/*#__PURE__*/_jsx(rootProps.slots.preferencesPanel, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.preferencesPanel)), rootProps.slots.toolbar && /*#__PURE__*/_jsx(rootProps.slots.toolbar, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.toolbar))]
   }));
 });

package/components/GridRow.js

@@ -180,7 +180,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     publish('rowClick', onClick)(event);
   }, [apiRef, onClick, publish, rowId]);
   const getCell = React.useCallback((column, cellProps) => {
-    var _rootProps$components;
+    var _rootProps$slotProps;
     const cellParams = apiRef.current.getCellParams(rowId, column.field);
     const classNames = apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
       id: rowId,
@@ -223,7 +223,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       id: rowId,
       field: column.field
     });
-    return /*#__PURE__*/_jsx(rootProps.components.Cell, _extends({
+    return /*#__PURE__*/_jsx(rootProps.slots.cell, _extends({
       value: cellParams.value,
       field: column.field,
       width: cellProps.width,
@@ -241,7 +241,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       className: clsx(classNames),
       colSpan: cellProps.colSpan,
       disableDragEvents: disableDragEvents
-    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.cell, {
+    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.cell, {
       children: content
     }), column.field);
   }, [apiRef, cellTabIndex, editRowsState, cellFocus, rootProps, rowHeight, rowId, treeDepth, sortModel.length]);
@@ -319,7 +319,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
           width
         } = cellColSpanInfo.cellProps;
         const contentWidth = Math.round(randomNumber());
-        cells.push( /*#__PURE__*/_jsx(rootProps.components.SkeletonCell, {
+        cells.push( /*#__PURE__*/_jsx(rootProps.slots.skeletonCell, {
           width: width,
           contentWidth: contentWidth,
           field: column.field,

package/components/GridRowCount.js

@@ -38,10 +38,7 @@ const GridRowCount = /*#__PURE__*/React.forwardRef(function GridRowCount(props,
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
-  const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
+  const ownerState = useGridRootProps();
   const classes = useUtilityClasses(ownerState);
   if (rowCount === 0) {
     return null;
@@ -49,7 +46,8 @@ const GridRowCount = /*#__PURE__*/React.forwardRef(function GridRowCount(props,
   const text = visibleRowCount < rowCount ? apiRef.current.getLocaleText('footerTotalVisibleRows')(visibleRowCount, rowCount) : rowCount.toLocaleString();
   return /*#__PURE__*/_jsxs(GridRowCountRoot, _extends({
     ref: ref,
-    className: clsx(classes.root, className)
+    className: clsx(classes.root, className),
+    ownerState: ownerState
   }, other, {
     children: [apiRef.current.getLocaleText('footerTotalRows'), " ", text]
   }));

package/components/GridScrollArea.js

@@ -58,8 +58,8 @@ function GridScrollAreaRaw(props) {
     top: 0
   });
   const rootProps = useGridRootProps();
-  const ownerState = _extends({}, props, {
-    classes: rootProps.classes
+  const ownerState = _extends({}, rootProps, {
+    scrollDirection
   });
   const classes = useUtilityClasses(ownerState);
   const headerHeight = Math.floor(rootProps.columnHeaderHeight * densityFactor);
@@ -99,6 +99,7 @@ function GridScrollAreaRaw(props) {
   return dragging ? /*#__PURE__*/_jsx(GridScrollAreaRawRoot, {
     ref: rootRef,
     className: clsx(classes.root),
+    ownerState: ownerState,
     onDragOver: handleDragOver,
     style: {
       height: headerHeight

package/components/GridSelectedRowCount.js

@@ -45,15 +45,13 @@ const GridSelectedRowCount = /*#__PURE__*/React.forwardRef(function GridSelected
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
-  const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
+  const ownerState = useGridRootProps();
   const classes = useUtilityClasses(ownerState);
   const rowSelectedText = apiRef.current.getLocaleText('footerRowSelected')(selectedRowCount);
   return /*#__PURE__*/_jsx(GridSelectedRowCountRoot, _extends({
     ref: ref,
-    className: clsx(classes.root, className)
+    className: clsx(classes.root, className),
+    ownerState: ownerState
   }, other, {
     children: rowSelectedText
   }));

package/components/base/GridFooterPlaceholder.js

@@ -3,10 +3,10 @@ import * as React from 'react';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function GridFooterPlaceholder() {
-  var _rootProps$components;
+  var _rootProps$slotProps;
   const rootProps = useGridRootProps();
   if (rootProps.hideFooter) {
     return null;
   }
-  return /*#__PURE__*/_jsx(rootProps.components.Footer, _extends({}, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.footer));
+  return /*#__PURE__*/_jsx(rootProps.slots.footer, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.footer));
 }

package/components/base/GridOverlays.js

@@ -89,16 +89,16 @@ export function GridOverlays() {
   const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;
   let overlay = null;
   if (showNoRowsOverlay) {
-    var _rootProps$components;
-    overlay = /*#__PURE__*/_jsx(rootProps.components.NoRowsOverlay, _extends({}, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.noRowsOverlay));
+    var _rootProps$slotProps;
+    overlay = /*#__PURE__*/_jsx(rootProps.slots.noRowsOverlay, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.noRowsOverlay));
   }
   if (showNoResultsOverlay) {
-    var _rootProps$components2;
-    overlay = /*#__PURE__*/_jsx(rootProps.components.NoResultsOverlay, _extends({}, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.noResultsOverlay));
+    var _rootProps$slotProps2;
+    overlay = /*#__PURE__*/_jsx(rootProps.slots.noResultsOverlay, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.noResultsOverlay));
   }
   if (loading) {
-    var _rootProps$components3;
-    overlay = /*#__PURE__*/_jsx(rootProps.components.LoadingOverlay, _extends({}, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.loadingOverlay));
+    var _rootProps$slotProps3;
+    overlay = /*#__PURE__*/_jsx(rootProps.slots.loadingOverlay, _extends({}, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.loadingOverlay));
   }
   if (overlay === null) {
     return null;

package/components/cell/GridActionsCell.js

@@ -14,7 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const hasActions = colDef => typeof colDef.getActions === 'function';
 function GridActionsCell(props) {
-  var _rootProps$components;
+  var _rootProps$slotProps;
   const {
       colDef,
       id,
@@ -148,7 +148,7 @@ function GridActionsCell(props) {
       touchRippleRef: handleTouchRippleRef(index),
       onClick: handleButtonClick(index, button.props.onClick),
       tabIndex: focusedButtonIndex === index ? tabIndex : -1
-    })), menuButtons.length > 0 && buttonId && /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
+    })), menuButtons.length > 0 && buttonId && /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
       ref: buttonRef,
       id: buttonId,
       "aria-label": apiRef.current.getLocaleText('actionsCellMore'),
@@ -160,8 +160,8 @@ function GridActionsCell(props) {
       onClick: showMenu,
       touchRippleRef: handleTouchRippleRef(buttonId),
       tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1
-    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseIconButton, {
-      children: /*#__PURE__*/_jsx(rootProps.components.MoreActionsIcon, {
+    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.moreActionsIcon, {
         fontSize: "small"
       })
     })), menuButtons.length > 0 && /*#__PURE__*/_jsx(GridMenu, {

package/components/cell/GridActionsCellItem.js

@@ -23,15 +23,15 @@ const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
   };
   if (!showInMenu) {
-    var _rootProps$components;
-    return /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
+    var _rootProps$slotProps;
+    return /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
       ref: ref,
       size: "small",
       role: "menuitem",
       "aria-label": label
     }, other, {
       onClick: handleClick
-    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseIconButton, {
+    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
       children: /*#__PURE__*/React.cloneElement(icon, {
         fontSize: 'small'
       })

package/components/cell/GridBooleanCell.js

@@ -29,7 +29,7 @@ function GridBooleanCellRaw(props) {
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
-  const Icon = React.useMemo(() => value ? rootProps.components.BooleanCellTrueIcon : rootProps.components.BooleanCellFalseIcon, [rootProps.components.BooleanCellFalseIcon, rootProps.components.BooleanCellTrueIcon, value]);
+  const Icon = React.useMemo(() => value ? rootProps.slots.booleanCellTrueIcon : rootProps.slots.booleanCellFalseIcon, [rootProps.slots.booleanCellFalseIcon, rootProps.slots.booleanCellTrueIcon, value]);
   return /*#__PURE__*/_jsx(Icon, _extends({
     fontSize: "small",
     className: classes.root,

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

@@ -49,10 +49,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,6 +84,7 @@ 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 : '',

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,6 +1,6 @@
 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';
@@ -8,14 +8,14 @@ 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 { 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);
     }
@@ -92,7 +98,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,9 +114,9 @@ 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;
+      const value = getOptionValue(valueOption);
       return /*#__PURE__*/_jsx(OptionComponent, {
         value: value,
         children: getOptionLabel(valueOption)
@@ -142,11 +151,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"
       })
     }))