@mui/x-data-grid 8.21.0 → 8.22.0

package/CHANGELOG.md

@@ -5,6 +5,142 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.22.0
+
+_Dec 11, 2025_
+
+We'd like to extend a big thank you to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- Each Tree View component now exposes its own hook to initialize the `apiRef` object with accurate typing:
+
+  ```diff
+  -import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+  +import { useSimpleTreeViewApiRef } from '@mui/x-tree-view/hooks';
+  -const apiRef = useTreeViewApiRef();
+  +const apiRef = useSimpleTreeViewApiRef();
+
+  -import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+  +import { useRichTreeViewApiRef } from '@mui/x-tree-view/hooks';
+  -const apiRef = useTreeViewApiRef();
+  +const apiRef = useRichTreeViewApiRef();
+
+  -import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+  +import { useRichTreeViewProApiRef } from '@mui/x-tree-view-pro/hooks';
+  -const apiRef = useTreeViewApiRef();
+  +const apiRef = useRichTreeViewProApiRef();
+  ```
+
+- 📚 [Tutorial](https://mui.com/x/react-data-grid/tutorials/server-side-data/) on building a Data Grid with server-side data
+- 🐞 Bugfixes
+
+Special thanks go out to this community member for their valuable contributions:
+@kzhgit
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @JCQuintas, @mapache-salvaje, @michelengelen, @noraleonte, @oliviertassinari
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.22.0`
+
+- [DataGrid] Sync component props with theme defaults (#20590) @michelengelen
+- [DataGrid] Add fallback for CSS `color-mix` if it is unsupported (#20597) @cherniavskii
+- [DataGrid] Use `baseTooltip` slot for column header sort icon (#20460) @kzhgit
+
+#### `@mui/x-data-grid-pro@8.22.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.22.0`.
+
+#### `@mui/x-data-grid-premium@8.22.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.22.0`, plus:
+
+- [DataGridPremium] Handle pivoting column name generation for empty strings (#20608) @arminmeh
+- [DataGridPremium] Pass a row with aggregated value to the custom aggregation function `valueFormatter` (#20607) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.22.0`
+
+- [pickers] Fix invalid date tests (#20606) @michelengelen
+
+#### `@mui/x-date-pickers-pro@8.22.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.22.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.22.0`
+
+- [charts] Add consistent animation duration and timing (#20564) @JCQuintas
+- [charts] Extract a tooltip plugin from the interaction one (#20591) @alexfauquette
+- [charts] General type improvements (#20565) @JCQuintas
+- [charts] Place ordinal ticks according to a continuous scale (#19808) @alexfauquette
+- [charts] Remove layout data from the tooltip internals (#20548) @alexfauquette
+- [charts] Remove usage of focus outline for item highlight (#19856) @alexfauquette
+- [charts] Simplify `MarkPlot` by moving calculation to `useMarkPlotData` (#20570) @JCQuintas
+- [charts] Use `store.state` over `store.getSnapshot()` (#20616) @bernardobelchior
+- [charts] Vendor flatqueue (#20610) @bernardobelchior
+- [charts] Extract pie layout computation (#20611) @alexfauquette
+- [charts][infra] Enable `@typescript-eslint/consistent-type-imports` eslint rules (#20560) @JCQuintas
+- [charts][infra] Enable `import/no-cycle` eslint rules (#20554) @JCQuintas
+
+#### `@mui/x-charts-pro@8.22.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.22.0`, plus:
+
+- [charts-pro] Display sankey labels on top of nodes (#20569) @alexfauquette
+
+#### `@mui/x-charts-premium@8.22.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.22.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.22.0`
+
+- [tree view] Expose one hook per component to initialize the `apiRef` (#20235) @flaviendelangle
+- [tree view] Update the typing of `updateItemChildren()` to accept `null` (#20483) @noraleonte
+
+#### `@mui/x-tree-view-pro@8.22.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.22.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.22.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add tutorial on building a Data Grid with server-side data (DX-22) (#19782) @mapache-salvaje
+- [docs] Modify the default value for the stacking demo (#20596) @alexfauquette
+- [docs] Revise the Charts Custom Components doc (#19793) @mapache-salvaje
+- [docs] Remove copy-pasted `aria-label` (#20620) @alexfauquette
+
+### Core
+
+- [internal] Remove unsafe dependency version from range (#20574) @oliviertassinari
+
+### Miscellaneous
+
+- Bump `@mui/monorepo` digest to `800638d` (#20337) @renovate[bot]
+- Bump `@next/eslint-plugin-next` to `15.5.7` (#20575) @renovate[bot]
+- Bump GitHub Actions (#20577) @renovate[bot]
+- Bump Tanstack query to `^5.90.12` (#20582) @renovate[bot]
+- Bump Vite & Vitest (#20583) @renovate[bot]
+- Bump `eslint` to `^8.48.1` (#20576) @renovate[bot]
+- Bump `markdown-to-jsx` to `^9.3.2` (#20507) @renovate[bot]
+- Bump `motion` to `^12.23.25` (#20579) @renovate[bot]
+- Bump react monorepo to `19.2.1` (#20581) @renovate[bot]
+- Bump `react-hook-form` to `^7.68.0` (#20584) @renovate[bot]
+- Bump `react-router` to `^7.10.1` (#20341) @renovate[bot]
+- Bump `tsx` to `^4.21.0` (#20585) @renovate[bot]
+- Bump MUI infra packages (#20478) @renovate[bot]
+- [infra] Automatically add teams to release PRs (#20558) @JCQuintas
+- [infra] Fix codeowners typo (#20562) @JCQuintas
+
 ## 8.21.0
 
 _Dec 3, 2025_
@@ -115,7 +251,7 @@ Internal changes.
 - Bump react-hook-form to ^7.66.1 (#20497) @renovate[bot]
 - Bump rimraf to ^6.1.2 (#20498) @renovate[bot]
 - Bump webpack-bundle-analyzer to ^5.0.1 (#20508) @renovate[bot]
-- Bump next to ^15.5.6 [SECURITY] (#20555) @renovate[bot]
+- Bump next to ^15.5.7 [SECURITY] (#20555) @renovate[bot]
 
 ## 8.20.0
 

package/components/GridColumnSortButton.js

@@ -78,21 +78,25 @@ function GridColumnSortButton(props) {
     as: rootProps.slots.baseIconButton,
     ownerState: ownerState,
     "aria-label": apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
-    title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
     size: "small",
     disabled: disabled,
     className: (0, _clsx.default)(classes.root, className)
   }, rootProps.slotProps?.baseIconButton, other, {
     children: iconElement
   }));
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [index != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
-      badgeContent: index,
-      color: "default",
-      overlap: "circular",
-      children: iconButton
-    }), index == null && iconButton]
-  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
+    title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
+    enterDelay: 1000
+  }, rootProps.slotProps?.baseTooltip, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      children: [index != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
+        badgeContent: index,
+        color: "default",
+        overlap: "circular",
+        children: iconButton
+      }), index == null && iconButton]
+    })
+  }));
 }
 process.env.NODE_ENV !== "production" ? GridColumnSortButton.propTypes = {
   // ----------------------------- Warning --------------------------------

package/components/containers/GridRootStyles.d.ts

@@ -2,4 +2,6 @@ import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 export type OwnerState = DataGridProcessedProps;
 export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
   ownerState: OwnerState;
-}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const supportsColorMix: boolean;
+export declare const colorMixIfSupported: (colorMixValue: string, fallback: string) => string;

package/components/containers/GridRootStyles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridRootStyles = void 0;
+exports.supportsColorMix = exports.colorMixIfSupported = exports.GridRootStyles = void 0;
 var _styles = require("@mui/material/styles");
 var _gridClasses = require("../../constants/gridClasses");
 var _cssVariables = require("../../constants/cssVariables");
@@ -254,19 +254,24 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
   const selectedOpacity = _cssVariables.vars.colors.interactive.selectedOpacity;
   const selectedHoverColor = selectedColor;
   const selectedHoverOpacity = `calc(${selectedOpacity} + ${hoverOpacity})`;
-  const hoverBackground = mix(baseBackground, hoverColor, hoverOpacity);
-  const selectedBackground = mix(baseBackground, selectedColor, selectedOpacity);
-  const selectedHoverBackground = mix(baseBackground, selectedHoverColor, selectedHoverOpacity);
-  const pinnedHoverBackground = mix(pinnedBackground, hoverColor, hoverOpacity);
-  const pinnedSelectedBackground = mix(pinnedBackground, selectedColor, selectedOpacity);
-  const pinnedSelectedHoverBackground = mix(pinnedBackground, selectedHoverColor, selectedHoverOpacity);
+  const fallbackColors = {
+    hover: _cssVariables.vars.colors.interactive.hover,
+    selected: selectedColor,
+    selectedHover: selectedColor
+  };
+  const hoverBackground = mix(baseBackground, hoverColor, hoverOpacity, fallbackColors.hover);
+  const selectedBackground = mix(baseBackground, selectedColor, selectedOpacity, fallbackColors.selected);
+  const selectedHoverBackground = mix(baseBackground, selectedHoverColor, selectedHoverOpacity, fallbackColors.selectedHover);
+  const pinnedHoverBackground = mix(pinnedBackground, hoverColor, hoverOpacity, fallbackColors.hover);
+  const pinnedSelectedBackground = mix(pinnedBackground, selectedColor, selectedOpacity, fallbackColors.selected);
+  const pinnedSelectedHoverBackground = mix(pinnedBackground, selectedHoverColor, selectedHoverOpacity, fallbackColors.selectedHover);
   const getPinnedBackgroundStyles = backgroundColor => ({
     [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}, & .${_gridClasses.gridClasses['cell--pinnedRight']}`]: {
       backgroundColor,
       '&.Mui-selected': {
-        backgroundColor: mix(backgroundColor, selectedBackground, selectedOpacity),
+        backgroundColor: mix(backgroundColor, selectedBackground, selectedOpacity, fallbackColors.selected),
         '&:hover': {
-          backgroundColor: mix(backgroundColor, selectedHoverBackground, selectedHoverOpacity)
+          backgroundColor: mix(backgroundColor, selectedHoverBackground, selectedHoverOpacity, fallbackColors.selectedHover)
         }
       }
     }
@@ -897,6 +902,14 @@ function setOpacity(color, opacity) {
 function removeOpacity(color) {
   return setOpacity(color, 1);
 }
-function mix(background, overlay, opacity) {
-  return `color-mix(in srgb,${background}, ${overlay} calc(${opacity} * 100%))`;
+const supportsColorMix = exports.supportsColorMix = typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('color', 'color-mix(in srgb, red 50%, blue 50%)');
+const colorMixIfSupported = (colorMixValue, fallback) => {
+  if (!supportsColorMix) {
+    return fallback;
+  }
+  return colorMixValue;
+};
+exports.colorMixIfSupported = colorMixIfSupported;
+function mix(background, overlay, opacity, fallback) {
+  return colorMixIfSupported(`color-mix(in srgb,${background}, ${overlay} calc(${opacity} * 100%))`, fallback);
 }

package/esm/components/GridColumnSortButton.js

@@ -70,21 +70,25 @@ function GridColumnSortButton(props) {
     as: rootProps.slots.baseIconButton,
     ownerState: ownerState,
     "aria-label": apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
-    title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
     size: "small",
     disabled: disabled,
     className: clsx(classes.root, className)
   }, rootProps.slotProps?.baseIconButton, other, {
     children: iconElement
   }));
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [index != null && /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
-      badgeContent: index,
-      color: "default",
-      overlap: "circular",
-      children: iconButton
-    }), index == null && iconButton]
-  });
+  return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
+    title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
+    enterDelay: 1000
+  }, rootProps.slotProps?.baseTooltip, {
+    children: /*#__PURE__*/_jsxs("span", {
+      children: [index != null && /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
+        badgeContent: index,
+        color: "default",
+        overlap: "circular",
+        children: iconButton
+      }), index == null && iconButton]
+    })
+  }));
 }
 process.env.NODE_ENV !== "production" ? GridColumnSortButton.propTypes = {
   // ----------------------------- Warning --------------------------------

package/esm/components/containers/GridRootStyles.d.ts

@@ -2,4 +2,6 @@ import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 export type OwnerState = DataGridProcessedProps;
 export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
   ownerState: OwnerState;
-}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const supportsColorMix: boolean;
+export declare const colorMixIfSupported: (colorMixValue: string, fallback: string) => string;

package/esm/components/containers/GridRootStyles.js

@@ -248,19 +248,24 @@ export const GridRootStyles = styled('div', {
   const selectedOpacity = vars.colors.interactive.selectedOpacity;
   const selectedHoverColor = selectedColor;
   const selectedHoverOpacity = `calc(${selectedOpacity} + ${hoverOpacity})`;
-  const hoverBackground = mix(baseBackground, hoverColor, hoverOpacity);
-  const selectedBackground = mix(baseBackground, selectedColor, selectedOpacity);
-  const selectedHoverBackground = mix(baseBackground, selectedHoverColor, selectedHoverOpacity);
-  const pinnedHoverBackground = mix(pinnedBackground, hoverColor, hoverOpacity);
-  const pinnedSelectedBackground = mix(pinnedBackground, selectedColor, selectedOpacity);
-  const pinnedSelectedHoverBackground = mix(pinnedBackground, selectedHoverColor, selectedHoverOpacity);
+  const fallbackColors = {
+    hover: vars.colors.interactive.hover,
+    selected: selectedColor,
+    selectedHover: selectedColor
+  };
+  const hoverBackground = mix(baseBackground, hoverColor, hoverOpacity, fallbackColors.hover);
+  const selectedBackground = mix(baseBackground, selectedColor, selectedOpacity, fallbackColors.selected);
+  const selectedHoverBackground = mix(baseBackground, selectedHoverColor, selectedHoverOpacity, fallbackColors.selectedHover);
+  const pinnedHoverBackground = mix(pinnedBackground, hoverColor, hoverOpacity, fallbackColors.hover);
+  const pinnedSelectedBackground = mix(pinnedBackground, selectedColor, selectedOpacity, fallbackColors.selected);
+  const pinnedSelectedHoverBackground = mix(pinnedBackground, selectedHoverColor, selectedHoverOpacity, fallbackColors.selectedHover);
   const getPinnedBackgroundStyles = backgroundColor => ({
     [`& .${c['cell--pinnedLeft']}, & .${c['cell--pinnedRight']}`]: {
       backgroundColor,
       '&.Mui-selected': {
-        backgroundColor: mix(backgroundColor, selectedBackground, selectedOpacity),
+        backgroundColor: mix(backgroundColor, selectedBackground, selectedOpacity, fallbackColors.selected),
         '&:hover': {
-          backgroundColor: mix(backgroundColor, selectedHoverBackground, selectedHoverOpacity)
+          backgroundColor: mix(backgroundColor, selectedHoverBackground, selectedHoverOpacity, fallbackColors.selectedHover)
         }
       }
     }
@@ -891,6 +896,13 @@ function setOpacity(color, opacity) {
 function removeOpacity(color) {
   return setOpacity(color, 1);
 }
-function mix(background, overlay, opacity) {
-  return `color-mix(in srgb,${background}, ${overlay} calc(${opacity} * 100%))`;
+export const supportsColorMix = typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('color', 'color-mix(in srgb, red 50%, blue 50%)');
+export const colorMixIfSupported = (colorMixValue, fallback) => {
+  if (!supportsColorMix) {
+    return fallback;
+  }
+  return colorMixValue;
+};
+function mix(background, overlay, opacity, fallback) {
+  return colorMixIfSupported(`color-mix(in srgb,${background}, ${overlay} calc(${opacity} * 100%))`, fallback);
 }

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.21.0
+ * @mui/x-data-grid v8.22.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/material/index.js

@@ -29,7 +29,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import useForkRef from '@mui/utils/useForkRef';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import MUIAutocomplete from '@mui/material/Autocomplete';
 import MUIBadge from '@mui/material/Badge';
 import MUICheckbox from '@mui/material/Checkbox';
@@ -142,6 +142,10 @@ const BaseSelect = forwardRef(function BaseSelect(props, ref) {
       fullWidth
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const theme = useTheme();
+  const textFieldDefaults = theme.components?.MuiTextField?.defaultProps ?? {};
+  const computedSize = size ?? textFieldDefaults.size;
+  const computedVariant = textFieldDefaults.variant ?? 'outlined';
   const menuProps = {
     PaperProps: {
       onKeyDown
@@ -151,7 +155,7 @@ const BaseSelect = forwardRef(function BaseSelect(props, ref) {
     menuProps.onClose = onClose;
   }
   return /*#__PURE__*/_jsxs(MUIFormControl, {
-    size: size,
+    size: computedSize,
     fullWidth: fullWidth,
     style: style,
     disabled: disabled,
@@ -160,7 +164,7 @@ const BaseSelect = forwardRef(function BaseSelect(props, ref) {
       id: labelId,
       htmlFor: id,
       shrink: true,
-      variant: "outlined",
+      variant: computedVariant,
       children: label
     }), /*#__PURE__*/_jsx(MUISelect, _extends({
       id: id,
@@ -168,13 +172,12 @@ const BaseSelect = forwardRef(function BaseSelect(props, ref) {
       label: label,
       displayEmpty: true,
       onChange: onChange,
-      variant: "outlined"
+      variant: computedVariant
     }, other, {
-      notched: true,
       inputProps: slotProps?.htmlInput,
       onOpen: onOpen,
       MenuProps: menuProps,
-      size: size
+      size: computedSize
     }, material))]
   });
 });
@@ -449,8 +452,13 @@ function BaseTextField(props) {
       material
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded15);
+  const theme = useTheme();
+  const textFieldDefaults = theme.components?.MuiTextField?.defaultProps ?? {};
+  const computedVariant = other.variant ?? textFieldDefaults.variant ?? 'outlined';
+  const computedSize = other.size ?? textFieldDefaults.size;
   return /*#__PURE__*/_jsx(MUITextField, _extends({
-    variant: "outlined"
+    variant: computedVariant,
+    size: computedSize
   }, other, material, {
     inputProps: slotProps?.htmlInput,
     InputProps: transformInputProps(slotProps?.input),

package/esm/material/variables.js

@@ -3,6 +3,7 @@ import { alpha, darken, lighten } from '@mui/material/styles';
 import { useTheme } from '@mui/material/styles';
 import { hash } from '@mui/x-internals/hash';
 import { vars } from "../constants/cssVariables.js";
+import { colorMixIfSupported, supportsColorMix } from "../components/containers/GridRootStyles.js";
 export function useMaterialCSSVariables() {
   const theme = useTheme();
   return React.useMemo(() => {
@@ -17,11 +18,12 @@ export function useMaterialCSSVariables() {
 function transformTheme(t) {
   const borderColor = getBorderColor(t);
   const dataGridPalette = (t.vars || t).palette.DataGrid;
-  const backgroundBase = dataGridPalette?.bg ?? (t.palette.mode === 'dark' ? `color-mix(in srgb, ${(t.vars || t).palette.background.paper} 95%, #fff)` : (t.vars || t).palette.background.paper);
+  const paperColor = (t.vars || t).palette.background.paper;
+  const backgroundBase = dataGridPalette?.bg ?? (t.palette.mode === 'dark' ? colorMixIfSupported(`color-mix(in srgb, ${paperColor} 95%, #fff)`, paperColor) : paperColor);
   const backgroundHeader = dataGridPalette?.headerBg ?? backgroundBase;
   const backgroundPinned = dataGridPalette?.pinnedBg ?? backgroundBase;
   const backgroundBackdrop = t.vars ? `rgba(${t.vars.palette.background.defaultChannel} / ${t.vars.palette.action.disabledOpacity})` : alpha(t.palette.background.default, t.palette.action.disabledOpacity);
-  const backgroundOverlay = t.palette.mode === 'dark' ? `color-mix(in srgb, ${(t.vars || t).palette.background.paper} 90%, #fff)` : (t.vars || t).palette.background.paper;
+  const backgroundOverlay = t.palette.mode === 'dark' ? colorMixIfSupported(`color-mix(in srgb, ${paperColor} 90%, #fff)`, paperColor) : paperColor;
   const selectedColor = t.vars ? `rgb(${t.vars.palette.primary.mainChannel})` : t.palette.primary.main;
   const radius = getRadius(t);
   const fontBody = t.vars?.font?.body2 ?? formatFont(t.typography.body2);
@@ -39,13 +41,13 @@ function transformTheme(t) {
     [k.colors.foreground.accent]: (t.vars || t).palette.primary.dark,
     [k.colors.foreground.disabled]: (t.vars || t).palette.text.disabled,
     [k.colors.foreground.error]: (t.vars || t).palette.error.dark,
-    [k.colors.interactive.hover]: (t.vars || t).palette.action.hover,
+    [k.colors.interactive.hover]: supportsColorMix ? (t.vars || t).palette.action.hover : (t.vars || t).palette.grey[t.palette.mode === 'dark' ? 800 : 100],
     [k.colors.interactive.hoverOpacity]: (t.vars || t).palette.action.hoverOpacity,
     [k.colors.interactive.focus]: removeOpacity((t.vars || t).palette.primary.main),
     [k.colors.interactive.focusOpacity]: (t.vars || t).palette.action.focusOpacity,
     [k.colors.interactive.disabled]: removeOpacity((t.vars || t).palette.action.disabled),
     [k.colors.interactive.disabledOpacity]: (t.vars || t).palette.action.disabledOpacity,
-    [k.colors.interactive.selected]: selectedColor,
+    [k.colors.interactive.selected]: supportsColorMix ? selectedColor : (t.vars || t).palette.grey[t.palette.mode === 'dark' ? 700 : 200],
     [k.colors.interactive.selectedOpacity]: (t.vars || t).palette.action.selectedOpacity,
     [k.header.background.base]: backgroundHeader,
     [k.cell.background.pinned]: backgroundPinned,

package/esm/utils/ResizeObserver.js

@@ -1,5 +1,3 @@
-/* eslint-disable */
-
 /**
  * HACK: Minimal shim to get jsdom to work.
  */

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.21.0
+ * @mui/x-data-grid v8.22.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/material/index.js

@@ -155,6 +155,10 @@ const BaseSelect = (0, _forwardRef.forwardRef)(function BaseSelect(props, ref) {
       fullWidth
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const theme = (0, _styles.useTheme)();
+  const textFieldDefaults = theme.components?.MuiTextField?.defaultProps ?? {};
+  const computedSize = size ?? textFieldDefaults.size;
+  const computedVariant = textFieldDefaults.variant ?? 'outlined';
   const menuProps = {
     PaperProps: {
       onKeyDown
@@ -164,7 +168,7 @@ const BaseSelect = (0, _forwardRef.forwardRef)(function BaseSelect(props, ref) {
     menuProps.onClose = onClose;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
-    size: size,
+    size: computedSize,
     fullWidth: fullWidth,
     style: style,
     disabled: disabled,
@@ -173,7 +177,7 @@ const BaseSelect = (0, _forwardRef.forwardRef)(function BaseSelect(props, ref) {
       id: labelId,
       htmlFor: id,
       shrink: true,
-      variant: "outlined",
+      variant: computedVariant,
       children: label
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, (0, _extends2.default)({
       id: id,
@@ -181,13 +185,12 @@ const BaseSelect = (0, _forwardRef.forwardRef)(function BaseSelect(props, ref) {
       label: label,
       displayEmpty: true,
       onChange: onChange,
-      variant: "outlined"
+      variant: computedVariant
     }, other, {
-      notched: true,
       inputProps: slotProps?.htmlInput,
       onOpen: onOpen,
       MenuProps: menuProps,
-      size: size
+      size: computedSize
     }, material))]
   });
 });
@@ -462,8 +465,13 @@ function BaseTextField(props) {
       material
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded15);
+  const theme = (0, _styles.useTheme)();
+  const textFieldDefaults = theme.components?.MuiTextField?.defaultProps ?? {};
+  const computedVariant = other.variant ?? textFieldDefaults.variant ?? 'outlined';
+  const computedSize = other.size ?? textFieldDefaults.size;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, (0, _extends2.default)({
-    variant: "outlined"
+    variant: computedVariant,
+    size: computedSize
   }, other, material, {
     inputProps: slotProps?.htmlInput,
     InputProps: transformInputProps(slotProps?.input),

package/material/variables.js

@@ -9,6 +9,7 @@ var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _hash = require("@mui/x-internals/hash");
 var _cssVariables = require("../constants/cssVariables");
+var _GridRootStyles = require("../components/containers/GridRootStyles");
 function useMaterialCSSVariables() {
   const theme = (0, _styles.useTheme)();
   return React.useMemo(() => {
@@ -23,11 +24,12 @@ function useMaterialCSSVariables() {
 function transformTheme(t) {
   const borderColor = getBorderColor(t);
   const dataGridPalette = (t.vars || t).palette.DataGrid;
-  const backgroundBase = dataGridPalette?.bg ?? (t.palette.mode === 'dark' ? `color-mix(in srgb, ${(t.vars || t).palette.background.paper} 95%, #fff)` : (t.vars || t).palette.background.paper);
+  const paperColor = (t.vars || t).palette.background.paper;
+  const backgroundBase = dataGridPalette?.bg ?? (t.palette.mode === 'dark' ? (0, _GridRootStyles.colorMixIfSupported)(`color-mix(in srgb, ${paperColor} 95%, #fff)`, paperColor) : paperColor);
   const backgroundHeader = dataGridPalette?.headerBg ?? backgroundBase;
   const backgroundPinned = dataGridPalette?.pinnedBg ?? backgroundBase;
   const backgroundBackdrop = t.vars ? `rgba(${t.vars.palette.background.defaultChannel} / ${t.vars.palette.action.disabledOpacity})` : (0, _styles.alpha)(t.palette.background.default, t.palette.action.disabledOpacity);
-  const backgroundOverlay = t.palette.mode === 'dark' ? `color-mix(in srgb, ${(t.vars || t).palette.background.paper} 90%, #fff)` : (t.vars || t).palette.background.paper;
+  const backgroundOverlay = t.palette.mode === 'dark' ? (0, _GridRootStyles.colorMixIfSupported)(`color-mix(in srgb, ${paperColor} 90%, #fff)`, paperColor) : paperColor;
   const selectedColor = t.vars ? `rgb(${t.vars.palette.primary.mainChannel})` : t.palette.primary.main;
   const radius = getRadius(t);
   const fontBody = t.vars?.font?.body2 ?? formatFont(t.typography.body2);
@@ -45,13 +47,13 @@ function transformTheme(t) {
     [k.colors.foreground.accent]: (t.vars || t).palette.primary.dark,
     [k.colors.foreground.disabled]: (t.vars || t).palette.text.disabled,
     [k.colors.foreground.error]: (t.vars || t).palette.error.dark,
-    [k.colors.interactive.hover]: (t.vars || t).palette.action.hover,
+    [k.colors.interactive.hover]: _GridRootStyles.supportsColorMix ? (t.vars || t).palette.action.hover : (t.vars || t).palette.grey[t.palette.mode === 'dark' ? 800 : 100],
     [k.colors.interactive.hoverOpacity]: (t.vars || t).palette.action.hoverOpacity,
     [k.colors.interactive.focus]: removeOpacity((t.vars || t).palette.primary.main),
     [k.colors.interactive.focusOpacity]: (t.vars || t).palette.action.focusOpacity,
     [k.colors.interactive.disabled]: removeOpacity((t.vars || t).palette.action.disabled),
     [k.colors.interactive.disabledOpacity]: (t.vars || t).palette.action.disabledOpacity,
-    [k.colors.interactive.selected]: selectedColor,
+    [k.colors.interactive.selected]: _GridRootStyles.supportsColorMix ? selectedColor : (t.vars || t).palette.grey[t.palette.mode === 'dark' ? 700 : 200],
     [k.colors.interactive.selectedOpacity]: (t.vars || t).palette.action.selectedOpacity,
     [k.header.background.base]: backgroundHeader,
     [k.cell.background.pinned]: backgroundPinned,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "8.21.0",
+  "version": "8.22.0",
   "author": "MUI Team",
   "description": "The Community plan edition of the MUI X Data Grid components.",
   "license": "MIT",
@@ -42,8 +42,8 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "use-sync-external-store": "^1.6.0",
-    "@mui/x-internals": "8.21.0",
-    "@mui/x-virtualizer": "0.2.11"
+    "@mui/x-internals": "8.22.0",
+    "@mui/x-virtualizer": "0.2.12"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/utils/ResizeObserver.js

@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ResizeObserver = void 0;
-/* eslint-disable */
-
 /**
  * HACK: Minimal shim to get jsdom to work.
  */