@mui/x-data-grid-pro 8.0.0 → 8.1.0

package/CHANGELOG.md

@@ -5,6 +5,112 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.1.0
+
+_Apr 24, 2025_
+
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Add API to print a chart or export it as PDF: `apiRef.exportAsPrint`.
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@lhilgert9, @ArturAghakaryan, @sai6855.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @JCQuintas, @joserodolfofreitas, @KenanYusuf, @LukasTy, @mapache-salvaje, @oliviertassinari, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.1.0`
+
+- [DataGrid] Allow row deselection with multiple rows selected (#17473) @arminmeh
+- [DataGrid] Fix column title truncation on touch devices (#17375) @KenanYusuf
+- [DataGrid] Remove internal usage of `material` prop (#17513) @KenanYusuf
+- [DataGrid] Fix apiRef not being passed on onCellClick params (#17335) @sai6855
+- [DataGrid] Add Armenian (hy-AM) locale (#17527) @ArturAghakaryan
+
+#### `@mui/x-data-grid-pro@8.1.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.1.0`, plus:
+
+- [DataGridPro] Fix locales.ts export (#17433) @lhilgert9
+- [DataGridPro] Avoid proptypes warnings with header filters in React 17 (#17482) @cherniavskii
+- [DataGridPro] Fix expandable rows detail content height updates (#17394) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.1.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.1.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.1.0`
+
+- [pickers] Improve `PickersInputBase` owner state typing (#17478) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.1.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.1.0`.
+
+### Charts
+
+- Add API to print a chart or export it as PDF: `apiRef.exportAsPrint`.
+
+#### `@mui/x-charts@8.1.0`
+
+- [charts] Add a localization provider (#17325) @alexfauquette
+- [charts] Add codemod for replacing legend's hidden slot prop (#17392) @bernardobelchior
+- [charts] Fix chart visual tests flakiness (#17469) @bernardobelchior
+- [charts] Fix tooltip position (#17440) @alexfauquette
+- [charts] Improve axis tooltip performances (#17398) @alexfauquette
+- [charts] Move radar from under development to preview (#17418) @alexfauquette
+- [charts] Advance time in charts regression tests (#17420) @bernardobelchior
+- [charts] Fix charts visuals flakiness (#17472) @bernardobelchior
+- [charts] Move `rafThrottle` on event handlers instead of setter (#17489) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.1.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.1.0`, plus:
+
+- [charts-pro] Add export as PDF/print functionality (#17285) @bernardobelchior
+- [charts-pro] Fix axis zoom being disabled when not specified in `initialZoom` (#17500) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.1.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.1.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.1.0`.
+
+### Docs
+
+- [docs] Fix AI Assistant Panel Trigger demo (#17426) @KenanYusuf
+- [docs] Fix DataGrid's master-detail demo for one expanded detail panel at a time (#17471) @arminmeh
+- [docs] Improve StackOverflow links (#17483) @oliviertassinari
+- [docs] Refine charts demos (#17417) @alexfauquette
+- [docs] Remove ad on paid docs pages (#17373) @oliviertassinari
+- [docs] Serve migration guides in raw markdown format (#17210) @cherniavskii
+- [docs] Fix heading structure (#17495) @oliviertassinari
+- [docs] Revise the Row Grouping doc (#16217) @mapache-salvaje
+- [docs] Fix ellipsis in the demo (#17476) @oliviertassinari
+- [docs] Add docs information for Legend HTML (#17502) @alexfauquette
+- [docs] Refine charts demos (#17417) @alexfauquette
+- [tree view][docs] Copyedit the Tree View Overview page (#17498) @mapache-salvaje
+
+### Core
+
+- [core] Bump `@types/node` (#17444) @LukasTy
+- [core] Remove `react-is` dependency (#17470) @LukasTy
+- [core] Remove redundant `overridesResolver` in `styled` components (#17466) @romgrk
+- [core] Update support table (#17425) @joserodolfofreitas
+- [code-infra] Ditch `@babel/node` (#17446) @LukasTy
+- [code-infra] Further remove `clock=fake` from pickers (#17253) @JCQuintas
+
 ## 8.0.0
 
 _Apr 17, 2025_

package/DataGridPro/DataGridPro.js

@@ -29,7 +29,7 @@ const configuration = {
     useCellAggregationResult: () => null
   }
 };
-const releaseInfo = "MTc0NDg0MDgwMDAwMA==";
+const releaseInfo = "MTc0NTQ0NTYwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo

package/components/GridDetailPanel.js

@@ -15,8 +15,7 @@ var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext
 var _jsxRuntime = require("react/jsx-runtime");
 const DetailPanel = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'DetailPanel',
-  overridesResolver: (props, styles) => styles.detailPanel
+  slot: 'DetailPanel'
 })({
   width: 'calc(var(--DataGrid-rowWidth) - var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
   backgroundColor: _internals.vars.colors.background.base,

package/components/headerFiltering/GridHeaderFilterMenu.js

@@ -86,14 +86,14 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterMenu.propTypes = {
   applyFilterChanges: _propTypes.default.func.isRequired,
   clearFilterItem: _propTypes.default.func.isRequired,
   field: _propTypes.default.string.isRequired,
-  id: _propTypes.default.string.isRequired,
+  id: _propTypes.default /* @typescript-to-proptypes-ignore */.string,
   item: _propTypes.default.shape({
     field: _propTypes.default.string.isRequired,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     operator: _propTypes.default.string.isRequired,
     value: _propTypes.default.any
   }).isRequired,
-  labelledBy: _propTypes.default.string.isRequired,
+  labelledBy: _propTypes.default /* @typescript-to-proptypes-ignore */.string,
   open: _propTypes.default.bool.isRequired,
   operators: _propTypes.default.arrayOf(_propTypes.default.shape({
     getApplyFilterFn: _propTypes.default.func.isRequired,

package/esm/DataGridPro/DataGridPro.js

@@ -22,7 +22,7 @@ const configuration = {
     useCellAggregationResult: () => null
   }
 };
-const releaseInfo = "MTc0NDg0MDgwMDAwMA==";
+const releaseInfo = "MTc0NTQ0NTYwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo

package/esm/components/GridDetailPanel.js

@@ -9,8 +9,7 @@ import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContex
 import { jsx as _jsx } from "react/jsx-runtime";
 const DetailPanel = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'DetailPanel',
-  overridesResolver: (props, styles) => styles.detailPanel
+  slot: 'DetailPanel'
 })({
   width: 'calc(var(--DataGrid-rowWidth) - var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
   backgroundColor: vars.colors.background.base,

package/esm/components/headerFiltering/GridHeaderFilterMenu.js

@@ -78,14 +78,14 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterMenu.propTypes = {
   applyFilterChanges: PropTypes.func.isRequired,
   clearFilterItem: PropTypes.func.isRequired,
   field: PropTypes.string.isRequired,
-  id: PropTypes.string.isRequired,
+  id: PropTypes /* @typescript-to-proptypes-ignore */.string,
   item: PropTypes.shape({
     field: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     operator: PropTypes.string.isRequired,
     value: PropTypes.any
   }).isRequired,
-  labelledBy: PropTypes.string.isRequired,
+  labelledBy: PropTypes /* @typescript-to-proptypes-ignore */.string,
   open: PropTypes.bool.isRequired,
   operators: PropTypes.arrayOf(PropTypes.shape({
     getApplyFilterFn: PropTypes.func.isRequired,

package/esm/hooks/features/detailPanel/useGridDetailPanel.js

@@ -44,7 +44,6 @@ function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeig
   };
 }
 export const useGridDetailPanel = (apiRef, props) => {
-  const expandedRowIds = useGridSelector(apiRef, gridDetailPanelExpandedRowIdsSelector);
   const contentCache = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
   const handleCellClick = React.useCallback((params, event) => {
     if (params.field !== GRID_DETAIL_PANEL_TOGGLE_FIELD || props.getDetailPanelContent == null) {
@@ -104,6 +103,7 @@ export const useGridDetailPanel = (apiRef, props) => {
         })
       });
     });
+    apiRef.current.requestPipeProcessorsApplication('rowHeight');
   }, [apiRef]);
   const storeDetailPanelHeight = React.useCallback((id, height) => {
     const heightCache = gridDetailPanelRawHeightCacheSelector(apiRef);
@@ -167,7 +167,8 @@ export const useGridDetailPanel = (apiRef, props) => {
     previousGetDetailPanelHeightProp.current = props.getDetailPanelHeight;
   }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
   const addDetailHeight = React.useCallback((initialValue, row) => {
-    if (!expandedRowIds || expandedRowIds.size === 0 || !expandedRowIds.has(row.id)) {
+    const expandedRowIds = gridDetailPanelExpandedRowIdsSelector(apiRef);
+    if (!expandedRowIds || !expandedRowIds.has(row.id)) {
       initialValue.detail = 0;
       return initialValue;
     }
@@ -175,7 +176,7 @@ export const useGridDetailPanel = (apiRef, props) => {
     const heightCache = gridDetailPanelRawHeightCacheSelector(apiRef);
     initialValue.detail = heightCache[row.id].height ?? 0; // Fallback to zero because the cache might not be ready yet (for example page was changed)
     return initialValue;
-  }, [apiRef, expandedRowIds, updateCachesIfNeeded]);
+  }, [apiRef, updateCachesIfNeeded]);
   const enabled = props.getDetailPanelContent !== undefined;
   useGridRegisterPipeProcessor(apiRef, 'rowHeight', addDetailHeight, enabled);
   const isFirstRender = React.useRef(true);

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v8.0.0
+ * @mui/x-data-grid-pro v8.1.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/hooks/features/detailPanel/useGridDetailPanel.js

@@ -53,7 +53,6 @@ function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeig
   };
 }
 const useGridDetailPanel = (apiRef, props) => {
-  const expandedRowIds = (0, _xDataGrid.useGridSelector)(apiRef, _gridDetailPanelSelector.gridDetailPanelExpandedRowIdsSelector);
   const contentCache = (0, _xDataGrid.useGridSelector)(apiRef, _gridDetailPanelSelector.gridDetailPanelExpandedRowsContentCacheSelector);
   const handleCellClick = React.useCallback((params, event) => {
     if (params.field !== _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD || props.getDetailPanelContent == null) {
@@ -113,6 +112,7 @@ const useGridDetailPanel = (apiRef, props) => {
         })
       });
     });
+    apiRef.current.requestPipeProcessorsApplication('rowHeight');
   }, [apiRef]);
   const storeDetailPanelHeight = React.useCallback((id, height) => {
     const heightCache = (0, _gridDetailPanelSelector.gridDetailPanelRawHeightCacheSelector)(apiRef);
@@ -176,7 +176,8 @@ const useGridDetailPanel = (apiRef, props) => {
     previousGetDetailPanelHeightProp.current = props.getDetailPanelHeight;
   }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
   const addDetailHeight = React.useCallback((initialValue, row) => {
-    if (!expandedRowIds || expandedRowIds.size === 0 || !expandedRowIds.has(row.id)) {
+    const expandedRowIds = (0, _gridDetailPanelSelector.gridDetailPanelExpandedRowIdsSelector)(apiRef);
+    if (!expandedRowIds || !expandedRowIds.has(row.id)) {
       initialValue.detail = 0;
       return initialValue;
     }
@@ -184,7 +185,7 @@ const useGridDetailPanel = (apiRef, props) => {
     const heightCache = (0, _gridDetailPanelSelector.gridDetailPanelRawHeightCacheSelector)(apiRef);
     initialValue.detail = heightCache[row.id].height ?? 0; // Fallback to zero because the cache might not be ready yet (for example page was changed)
     return initialValue;
-  }, [apiRef, expandedRowIds, updateCachesIfNeeded]);
+  }, [apiRef, updateCachesIfNeeded]);
   const enabled = props.getDetailPanelContent !== undefined;
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'rowHeight', addDetailHeight, enabled);
   const isFirstRender = React.useRef(true);

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v8.0.0
+ * @mui/x-data-grid-pro v8.1.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "The Pro plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -43,7 +43,7 @@
     "reselect": "^5.1.1",
     "@mui/x-internals": "8.0.0",
     "@mui/x-license": "8.0.0",
-    "@mui/x-data-grid": "8.0.0"
+    "@mui/x-data-grid": "8.1.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",