@mui/x-data-grid-premium 8.21.0 → 8.22.1

package/CHANGELOG.md

@@ -5,6 +5,243 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.22.1
+
+_Dec 17, 2025_
+
+We'd like to extend a big thank you to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌎 Improve Swedish (sv-SE) locale on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@KyeongJooni, @VismaAndreasIvarsson
+
+The following team members contributed to this release:
+@alelthomas, @alexfauquette, @arminmeh, @bernardobelchior, @Janpot, @JCQuintas, @mapache-salvaje, @michelengelen, @mj12albert, @prakhargupta1, @romgrk, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.22.1`
+
+- [data grid] Fix column menu keyboard shortcut (#20621) @mj12albert
+- [data grid] Fix row checkbox disabled state on first render and keep cell focusable (ARIA) (#20641) @michelengelen
+- [data grid] Fix tree data selection bug (#20528) @michelengelen
+- [data grid] Prevent clear cell selection on edit mode (#20544) @siriwatknp
+- [data grid] Refactor column merge logic to prioritize defined properties only (#20640) @michelengelen
+- [data grid] Reset row spanning on row expansion change (#20661) @siriwatknp
+- [data grid] Resize newly added rows while resize action is happening (#20676)
+- [l10n] Improve Swedish (sv-SE) locale (#20682) @VismaAndreasIvarsson
+
+#### `@mui/x-data-grid-pro@8.22.1` [![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.1`.
+
+#### `@mui/x-data-grid-premium@8.22.1` [![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.1`, plus:
+
+- [DataGridPremium] Import `useId()` from `@mui/utils` to maintain React 17 compatibility (#20635) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.22.1`
+
+- [pickers] Add minutesStep validation test (#20672) @KyeongJooni
+- [pickers] Fix `onAccept()` returning wrong year after selecting year then month (#20639) @michelengelen
+
+#### `@mui/x-date-pickers-pro@8.22.1` [![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.1`.
+
+### Charts
+
+#### `@mui/x-charts@8.22.1`
+
+- [charts] Extract `FocusedPieArc` from `PieArcPlot` (#20613) @alexfauquette
+- [charts] Fix regression on the highlight control (#20627) @alexfauquette
+- [charts] Refactor: `useSelector()` => `store.use()` (#20681) @romgrk
+- [charts] Remove duplicated types (#20694) @alexfauquette
+- [charts] Remove unused generics from bar charts (#20642) @bernardobelchior
+- [charts] Simplify tooltip position getter for pie chart (#20625) @alexfauquette
+
+#### `@mui/x-charts-pro@8.22.1` [![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.1`, plus:
+
+- [charts-pro] Add heatmap performance benchmark (#20695) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.22.1` [![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.1`, plus:
+
+- [charts-premium] Create `BarChartPremium` (#20643) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.22.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.22.1` [![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.1`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.22.1`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add button to GitHub source code for the Data Grid advanced demos (DX-50) (#20633) @alelthomas
+- [docs] Remove `seriesConfig` to prevent future confusion (#20678) @alexfauquette
+- [docs] Revise the Data Grid's API object doc for clarity and style (#20649) @mapache-salvaje
+- [docs] Update list of charts (#20479) @prakhargupta1
+
+### Core
+
+- [code-infra] Regression tests improvements (#20441) @Janpot
+- [code-infra] Test utils upgrade (#20592) @Janpot
+- [code-infra] Try to fix the Tree View flacky tests (#20573) @JCQuintas
+
+## 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 +352,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/DataGridPremium/DataGridPremium.js

@@ -50,7 +50,7 @@ const configuration = {
     useGridParamsOverridableMethods: _useGridParamsOverridableMethods.useGridParamsOverridableMethods
   }
 };
-const releaseInfo = "MTc2NDgwNjQwMDAwMA==";
+const releaseInfo = "MTc2NjAxNjAwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo

package/components/chartsPanel/data/GridChartsPanelDataField.js

@@ -10,6 +10,7 @@ exports.AggregationSelect = AggregationSelect;
 exports.GridChartsPanelDataField = GridChartsPanelDataField;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _system = require("@mui/system");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
@@ -133,8 +134,8 @@ function AggregationSelect({
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const [aggregationMenuOpen, setAggregationMenuOpen] = React.useState(false);
   const aggregationMenuTriggerRef = React.useRef(null);
-  const aggregationMenuTriggerId = React.useId();
-  const aggregationMenuId = React.useId();
+  const aggregationMenuTriggerId = (0, _useId.default)();
+  const aggregationMenuId = (0, _useId.default)();
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const aggregationModel = (0, _aggregation.gridAggregationModelSelector)(apiRef);
   const pivotActive = (0, _internals.gridPivotActiveSelector)(apiRef);

package/esm/DataGridPremium/DataGridPremium.js

@@ -43,7 +43,7 @@ const configuration = {
     useGridParamsOverridableMethods
   }
 };
-const releaseInfo = "MTc2NDgwNjQwMDAwMA==";
+const releaseInfo = "MTc2NjAxNjAwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo

package/esm/components/chartsPanel/data/GridChartsPanelDataField.js

@@ -2,6 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import useId from '@mui/utils/useId';
 import { styled } from '@mui/system';
 import { getDataGridUtilityClass, GridMenu, useGridSelector } from '@mui/x-data-grid-pro';
 import composeClasses from '@mui/utils/composeClasses';
@@ -125,8 +126,8 @@ export function AggregationSelect({
   const rootProps = useGridRootProps();
   const [aggregationMenuOpen, setAggregationMenuOpen] = React.useState(false);
   const aggregationMenuTriggerRef = React.useRef(null);
-  const aggregationMenuTriggerId = React.useId();
-  const aggregationMenuId = React.useId();
+  const aggregationMenuTriggerId = useId();
+  const aggregationMenuId = useId();
   const apiRef = useGridApiContext();
   const aggregationModel = gridAggregationModelSelector(apiRef);
   const pivotActive = gridPivotActiveSelector(apiRef);

package/esm/hooks/features/aggregation/createAggregationLookup.js

@@ -73,7 +73,13 @@ const getGroupAggregatedValue = (groupId, apiRef, aggregationRowsScope, aggregat
       groupId,
       field: aggregatedField // Added per user request in https://github.com/mui/mui-x/issues/6995#issuecomment-1327423455
     }, publicApi);
-    const formattedValue = aggregationFunction.valueFormatter ? aggregationFunction.valueFormatter(value, rowLookup[groupId], columnsLookup[aggregatedField], apiRef) : undefined;
+
+    // Use the actual row from rowLookup if it exists, otherwise pass a new autogenerated row
+    const rowForFormatter = rowLookup[groupId] || {
+      id: groupId,
+      [aggregatedField]: value
+    };
+    const formattedValue = aggregationFunction.valueFormatter ? aggregationFunction.valueFormatter(value, rowForFormatter, columnsLookup[aggregatedField], apiRef) : undefined;
 
     // Only add to groupAggregationLookup if position is not null
     if (position !== null) {

package/esm/hooks/features/cellSelection/useGridCellSelection.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import ownerDocument from '@mui/utils/ownerDocument';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { getTotalHeaderHeight, getVisibleRows, isNavigationKey, serializeCellValue, useGridRegisterPipeProcessor } from '@mui/x-data-grid-pro/internals';
-import { useGridEvent, useGridApiMethod, GRID_ACTIONS_COLUMN_TYPE, GRID_CHECKBOX_SELECTION_COL_DEF, GRID_DETAIL_PANEL_TOGGLE_FIELD, gridClasses, gridFocusCellSelector, GRID_REORDER_COL_DEF, gridSortedRowIdsSelector, gridDimensionsSelector } from '@mui/x-data-grid-pro';
+import { useGridEvent, useGridApiMethod, GRID_ACTIONS_COLUMN_TYPE, GRID_CHECKBOX_SELECTION_COL_DEF, GRID_DETAIL_PANEL_TOGGLE_FIELD, gridClasses, gridFocusCellSelector, GRID_REORDER_COL_DEF, gridSortedRowIdsSelector, gridDimensionsSelector, GridCellModes } from '@mui/x-data-grid-pro';
 import { gridCellSelectionStateSelector } from "./gridCellSelectionSelector.js";
 export const cellSelectionStateInitializer = (state, props) => _extends({}, state, {
   cellSelection: _extends({}, props.cellSelectionModel ?? props.initialState?.cellSelection)
@@ -313,6 +313,9 @@ export const useGridCellSelection = (apiRef, props) => {
     if (!isNavigationKey(event.key) || !cellWithVirtualFocus.current) {
       return;
     }
+    if (event.key === ' ' && params.cellMode === GridCellModes.Edit) {
+      return;
+    }
     if (!event.shiftKey) {
       apiRef.current.setCellSelectionModel({});
       return;

package/esm/hooks/features/pivoting/utils.js

@@ -167,7 +167,13 @@ export const createPivotPropsFromRows = ({
         if (!column) {
           continue;
         }
-        let colValue = apiRef.current.getRowValue(row, column) ?? '(No value)';
+        const noValueString = '(No value)';
+        let colValue = apiRef.current.getRowValue(row, column) ?? noValueString;
+        // Handle empty strings to prevent issues with column grouping model
+        // https://github.com/mui/mui-x/issues/20552
+        if (colValue === '') {
+          colValue = noValueString;
+        }
         if (column.type === 'singleSelect') {
           const singleSelectColumn = column;
           if (singleSelectColumn.getOptionLabel) {

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v8.21.0
+ * @mui/x-data-grid-premium v8.22.1
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/hooks/features/aggregation/createAggregationLookup.js

@@ -80,7 +80,13 @@ const getGroupAggregatedValue = (groupId, apiRef, aggregationRowsScope, aggregat
       groupId,
       field: aggregatedField // Added per user request in https://github.com/mui/mui-x/issues/6995#issuecomment-1327423455
     }, publicApi);
-    const formattedValue = aggregationFunction.valueFormatter ? aggregationFunction.valueFormatter(value, rowLookup[groupId], columnsLookup[aggregatedField], apiRef) : undefined;
+
+    // Use the actual row from rowLookup if it exists, otherwise pass a new autogenerated row
+    const rowForFormatter = rowLookup[groupId] || {
+      id: groupId,
+      [aggregatedField]: value
+    };
+    const formattedValue = aggregationFunction.valueFormatter ? aggregationFunction.valueFormatter(value, rowForFormatter, columnsLookup[aggregatedField], apiRef) : undefined;
 
     // Only add to groupAggregationLookup if position is not null
     if (position !== null) {

package/hooks/features/cellSelection/useGridCellSelection.js

@@ -321,6 +321,9 @@ const useGridCellSelection = (apiRef, props) => {
     if (!(0, _internals.isNavigationKey)(event.key) || !cellWithVirtualFocus.current) {
       return;
     }
+    if (event.key === ' ' && params.cellMode === _xDataGridPro.GridCellModes.Edit) {
+      return;
+    }
     if (!event.shiftKey) {
       apiRef.current.setCellSelectionModel({});
       return;

package/hooks/features/pivoting/utils.js

@@ -177,7 +177,13 @@ const createPivotPropsFromRows = ({
         if (!column) {
           continue;
         }
-        let colValue = apiRef.current.getRowValue(row, column) ?? '(No value)';
+        const noValueString = '(No value)';
+        let colValue = apiRef.current.getRowValue(row, column) ?? noValueString;
+        // Handle empty strings to prevent issues with column grouping model
+        // https://github.com/mui/mui-x/issues/20552
+        if (colValue === '') {
+          colValue = noValueString;
+        }
         if (column.type === 'singleSelect') {
           const singleSelectColumn = column;
           if (singleSelectColumn.getOptionLabel) {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v8.21.0
+ * @mui/x-data-grid-premium v8.22.1
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-premium",
-  "version": "8.21.0",
+  "version": "8.22.1",
   "author": "MUI Team",
   "description": "The Premium plan edition of the MUI X Data Grid Components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -38,10 +38,10 @@
     "@mui/x-internal-exceljs-fork": "4.4.3",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-data-grid-pro": "8.21.0",
-    "@mui/x-data-grid": "8.21.0",
-    "@mui/x-internals": "8.21.0",
-    "@mui/x-license": "8.21.0"
+    "@mui/x-data-grid": "8.22.1",
+    "@mui/x-data-grid-pro": "8.22.1",
+    "@mui/x-internals": "8.22.0",
+    "@mui/x-license": "8.22.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",