@mui/x-data-grid 8.17.0 → 8.18.0

package/CHANGELOG.md

@@ -5,6 +5,106 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.18.0
+
+<!-- generated comparing v8.17.0..master -->
+
+_Nov 13, 2025_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- Add `barLabelPlacement` property to customize the bar label position in bar charts, enabling labels to be placed above bars.
+
+  ![image](https://github.com/user-attachments/assets/4bc3a75b-74b8-4c6d-896b-5f5bf837bcda)
+
+- Add `source` property to the date/time picker lifecycle and event handler context, enabling clearer differentiation between changes initiated by the picker UI and those from direct field input.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@htollefsen, @sai6855, @Sigdriv
+
+The following team members contributed to this release:
+@arminmeh, @bernardobelchior, @brijeshb42, @cherniavskii, @flaviendelangle, @JCQuintas, @michelengelen, @noraleonte, @prakhargupta1, @rita-codes, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.18.0`
+
+- [DataGrid] Allow default event in the column action cell item click event handler (#20272) @arminmeh
+- [DataGrid] Remove unnecessary generic from `useGridApiRef` (#20277) @cherniavskii
+
+#### `@mui/x-data-grid-pro@8.18.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.18.0`.
+
+#### `@mui/x-data-grid-premium@8.18.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.18.0`, plus:
+
+- [DataGridPremium] Return the correct `cellParams` value from the aggregation cells (#20224) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.18.0`
+
+- [pickers] Keep invalid date state consistent (#20040) @michelengelen
+- [pickers] Adds new `source` property to `onChange` and `onAccept` context object (#20234) @michelengelen
+
+#### `@mui/x-date-pickers-pro@8.18.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.18.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.18.0`
+
+- [charts] Add prop for positioning a bar label (#20194) @Sigdriv
+- [charts] Fix applying dark mode styles in `ChartAxisZoomSliderThumb` (#20232) @sai6855
+
+#### `@mui/x-charts-pro@8.18.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.18.0`, plus:
+
+- [charts-pro] Allow specifying Content Security Policy nonce on export (#20053) @bernardobelchior
+- [charts-pro] Fix applying dark mode styles to slider (#20220) @sai6855
+- [charts-pro] Sankey should respect node order (#20065) @JCQuintas
+
+#### `@mui/x-charts-premium@8.18.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.18.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.18.0`
+
+- [tree view] Prepare tests for the new store structure (#20225) @flaviendelangle
+- [tree view] Prepare the item plugin files for the store migration (#20240) @flaviendelangle
+- [tree view] Use `TreeItemId` type instead of raw string (#20233) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.18.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.18.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.18.0`
+
+Internal changes.
+
+### Docs
+
+- [charts] Add a demo for a custom tick label (#20073) @prakhargupta1
+- [charts] Create `useAxes()` hook documentation page (#20229) @JCQuintas
+- [charts] Fix logo alignment (#20228) @JCQuintas
+- [charts] Fixes typo in import example (#20236) @htollefsen
+- [Data Grid] Add recipe for cursor pagination with data source (#19700) @siriwatknp
+- [Data Grid] Add a demo for pinned rows aggregation (#20198) @cherniavskii
+
+### Core
+
+- [docs-infra] Use deployment config from docs-infra package (#20243) @brijeshb42
+
 ## 8.17.0
 
 _Nov 5, 2025_

package/components/cell/GridActionsCell.js

@@ -112,8 +112,6 @@ function GridActionsCell(props) {
     touchRippleRefs.current[index] = instance;
   };
   const handleButtonClick = (index, onClick) => event => {
-    event.stopPropagation();
-    event.preventDefault();
     setFocusedButtonIndex(index);
     ignoreCallToFocus.current = true;
     if (onClick) {

package/components/cell/GridActionsCellItem.js

@@ -24,8 +24,6 @@ const GridActionsCellItem = exports.GridActionsCellItem = (0, _forwardRef.forwar
       } = props,
       other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
     const handleClick = event => {
-      event.stopPropagation();
-      event.preventDefault();
       onClick?.(event);
     };
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
@@ -50,8 +48,6 @@ const GridActionsCellItem = exports.GridActionsCellItem = (0, _forwardRef.forwar
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
   const handleClick = event => {
-    event.stopPropagation();
-    event.preventDefault();
     onClick?.(event);
     if (closeMenuOnClick) {
       closeMenu?.();

package/esm/components/cell/GridActionsCell.js

@@ -104,8 +104,6 @@ function GridActionsCell(props) {
     touchRippleRefs.current[index] = instance;
   };
   const handleButtonClick = (index, onClick) => event => {
-    event.stopPropagation();
-    event.preventDefault();
     setFocusedButtonIndex(index);
     ignoreCallToFocus.current = true;
     if (onClick) {

package/esm/components/cell/GridActionsCellItem.js

@@ -16,8 +16,6 @@ const GridActionsCellItem = forwardRef((props, ref) => {
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded);
     const handleClick = event => {
-      event.stopPropagation();
-      event.preventDefault();
       onClick?.(event);
     };
     return /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
@@ -42,8 +40,6 @@ const GridActionsCellItem = forwardRef((props, ref) => {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded2);
   const handleClick = event => {
-    event.stopPropagation();
-    event.preventDefault();
     onClick?.(event);
     if (closeMenuOnClick) {
       closeMenu?.();

package/esm/hooks/features/rows/gridRowSpanningUtils.js

@@ -1,3 +1,4 @@
+import { getRowValue } from "./gridRowsUtils.js";
 export function getUnprocessedRange(testRange, processedRange) {
   if (testRange.firstRowIndex >= processedRange.firstRowIndex && testRange.lastRowIndex <= processedRange.lastRowIndex) {
     return null;
@@ -33,10 +34,12 @@ export const getCellValue = (row, colDef, apiRef) => {
   if (!row) {
     return null;
   }
-  let cellValue = row[colDef.field];
-  const valueGetter = colDef.rowSpanValueGetter ?? colDef.valueGetter;
-  if (valueGetter) {
-    cellValue = valueGetter(cellValue, row, colDef, apiRef);
+  const cellValue = row[colDef.field];
+  if (colDef.rowSpanValueGetter) {
+    return colDef.rowSpanValueGetter(cellValue, row, colDef, apiRef);
   }
-  return cellValue;
+
+  // This util is also called during the state initialization
+  // Use util method directly instead of calling apiRef.current.getRowValue
+  return getRowValue(row, colDef, apiRef);
 };

package/esm/hooks/features/rows/useGridParamsApi.js

@@ -40,18 +40,8 @@ export function useGridParamsApi(apiRef, props, configuration) {
     value: forcedValue,
     formattedValue: forcedFormattedValue
   }) => {
-    let value = row[field];
-    if (forcedValue !== undefined) {
-      value = forcedValue;
-    } else if (colDef?.valueGetter) {
-      value = colDef.valueGetter(value, row, colDef, apiRef);
-    }
-    let formattedValue = value;
-    if (forcedFormattedValue !== undefined) {
-      formattedValue = forcedFormattedValue;
-    } else if (colDef?.valueFormatter) {
-      formattedValue = colDef.valueFormatter(value, row, colDef, apiRef);
-    }
+    const value = forcedValue !== undefined ? forcedValue : apiRef.current.getRowValue(row, colDef);
+    const formattedValue = forcedFormattedValue !== undefined ? forcedFormattedValue : apiRef.current.getRowFormattedValue(row, colDef);
     const params = {
       id,
       field,

package/esm/hooks/utils/useGridApiRef.d.ts

@@ -1,7 +1,6 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridApiCommon } from "../../models/index.js";
 import { GridApiCommunity } from "../../models/api/gridApiCommunity.js";
 /**
  * Hook that instantiate a [[GridApiRef]].
  */
-export declare const useGridApiRef: <Api extends GridApiCommon = GridApiCommunity>() => RefObject<Api | null>;
+export declare const useGridApiRef: () => RefObject<GridApiCommunity | null>;

package/esm/index.js

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

package/hooks/features/rows/gridRowSpanningUtils.js

@@ -7,6 +7,7 @@ exports.getCellValue = void 0;
 exports.getUnprocessedRange = getUnprocessedRange;
 exports.isRowContextInitialized = isRowContextInitialized;
 exports.isRowRangeUpdated = isRowRangeUpdated;
+var _gridRowsUtils = require("./gridRowsUtils");
 function getUnprocessedRange(testRange, processedRange) {
   if (testRange.firstRowIndex >= processedRange.firstRowIndex && testRange.lastRowIndex <= processedRange.lastRowIndex) {
     return null;
@@ -42,11 +43,13 @@ const getCellValue = (row, colDef, apiRef) => {
   if (!row) {
     return null;
   }
-  let cellValue = row[colDef.field];
-  const valueGetter = colDef.rowSpanValueGetter ?? colDef.valueGetter;
-  if (valueGetter) {
-    cellValue = valueGetter(cellValue, row, colDef, apiRef);
+  const cellValue = row[colDef.field];
+  if (colDef.rowSpanValueGetter) {
+    return colDef.rowSpanValueGetter(cellValue, row, colDef, apiRef);
   }
-  return cellValue;
+
+  // This util is also called during the state initialization
+  // Use util method directly instead of calling apiRef.current.getRowValue
+  return (0, _gridRowsUtils.getRowValue)(row, colDef, apiRef);
 };
 exports.getCellValue = getCellValue;

package/hooks/features/rows/useGridParamsApi.js

@@ -49,18 +49,8 @@ function useGridParamsApi(apiRef, props, configuration) {
     value: forcedValue,
     formattedValue: forcedFormattedValue
   }) => {
-    let value = row[field];
-    if (forcedValue !== undefined) {
-      value = forcedValue;
-    } else if (colDef?.valueGetter) {
-      value = colDef.valueGetter(value, row, colDef, apiRef);
-    }
-    let formattedValue = value;
-    if (forcedFormattedValue !== undefined) {
-      formattedValue = forcedFormattedValue;
-    } else if (colDef?.valueFormatter) {
-      formattedValue = colDef.valueFormatter(value, row, colDef, apiRef);
-    }
+    const value = forcedValue !== undefined ? forcedValue : apiRef.current.getRowValue(row, colDef);
+    const formattedValue = forcedFormattedValue !== undefined ? forcedFormattedValue : apiRef.current.getRowFormattedValue(row, colDef);
     const params = {
       id,
       field,

package/hooks/utils/useGridApiRef.d.ts

@@ -1,7 +1,6 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridApiCommon } from "../../models/index.js";
 import { GridApiCommunity } from "../../models/api/gridApiCommunity.js";
 /**
  * Hook that instantiate a [[GridApiRef]].
  */
-export declare const useGridApiRef: <Api extends GridApiCommon = GridApiCommunity>() => RefObject<Api | null>;
+export declare const useGridApiRef: () => RefObject<GridApiCommunity | null>;

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "8.17.0",
+  "version": "8.18.0",
   "author": "MUI Team",
   "description": "The Community plan edition of the MUI X Data Grid components.",
   "license": "MIT",
@@ -38,12 +38,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.4",
-    "@mui/utils": "^7.3.3",
+    "@mui/utils": "^7.3.5",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "use-sync-external-store": "^1.6.0",
-    "@mui/x-internals": "8.17.0",
-    "@mui/x-virtualizer": "0.2.7"
+    "@mui/x-internals": "8.18.0",
+    "@mui/x-virtualizer": "0.2.8"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",