@mui/x-data-grid-premium 8.11.3 → 8.12.0

package/CHANGELOG.md

@@ -5,6 +5,151 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.12.0
+
+_Sep 25, 2025_
+
+We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🤝 Grid-Charts integration
+
+![Grid x Charts](https://github.com/user-attachments/assets/0817c36f-f87f-4688-8f30-fa0db638ca8c)
+
+  👉 [🎥 Watch the full video](https://github.com/user-attachments/assets/28f1848e-dc85-4077-8756-a3e88afd4e54)
+
+- ⌨️ Charts keyboard navigation
+- ⚡️ Charts: Add new `renderer="svg-batch"` prop to Scatter charts that provides improved performance for large datasets
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+- 🧰 Codemod requires Node >=20.19
+
+`@mui/x-codemod` minimum supported Node version is `20.19`.
+This was only the case due to using the v18 `yargs` package; this now explicitly aligns with it. (#18979)
+
+Special thanks go out to the community members for their valuable contributions:
+@deade1e, @sai6855, @thomas-mcdonald
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @flaviendelangle, @Janpot, @JCQuintas, @LukasTy, @michelengelen, @prakhargupta1, @rita-codes, @siriwatknp, @arminmeh, @romgrk
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.12.0`
+
+- [DataGrid] Fix flex column width diff calculation while resizing (#19667) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.12.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.12.0`.
+
+#### `@mui/x-data-grid-premium@8.12.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.12.0`, plus:
+
+- [DataGridPremium] Grid-Charts integration (#18021) @arminmeh
+- [DataGridPremium] Fix sorting and filtering of the tree group columns with aggregation (#19607) @arminmeh
+- [DataGridPremium] Disable aggregation on the grouping column by default (#19692) @arminmeh
+- [DataGridPremium] Do not rely on the group separation constant to retrieve the column name for the charts panel (#19677) @arminmeh
+- [DataGridPremium] Fix stale aggregation state (#19690) @arminmeh
+- [DataGridPremium] Fix pivot column being hidden on autosizing (#19699) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.12.0`
+
+- [pickers] Ensure reference value is not updated for invalid values (#19635) @michelengelen
+- [pickers] Fix `slotProps.textField.slotProps.htmlInput` resolution (#19713) @LukasTy
+- [pickers] Preserve time format when using single column layout on Time Range Picker (#19626) @sai6855
+- [pickers] Preserve time format when using single column layout on Date Time Picker and Date Time Range Picker (#19608) @sai6855
+
+#### `@mui/x-date-pickers-pro@8.12.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.12.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.12.0`
+
+- [charts] Add batch renderer for scatter chart (#19075) @bernardobelchior
+- [charts] Add renderer suffix to performance benchmarks (#19620) @bernardobelchior
+- [charts] Document how plugins can be used (#19343) @alexfauquette
+- [charts] Export chart plugins per series type (#19337) @alexfauquette
+- [charts] Export plugins (#19335) @alexfauquette
+- [charts] Fix horizontal layout and toolbar (#19655) @alexfauquette
+- [charts] Fix performance issue with JS animations (#19606) @bernardobelchior
+- [charts] Fix piecewise scale causing wrong colors in axis with min/max (#19610) @bernardobelchior
+- [charts] Fix zoom discard inconsistency (#19535) @bernardobelchior
+- [charts] Introduce keyboard navigation (#19155) @alexfauquette
+- [charts] Refactor `getAxisExtremum` (#19627) @bernardobelchior
+- [charts] Remove unused code path from `getAxisScale` (#19673) @bernardobelchior
+- [charts] Make new hideLegend prop on ChartWrapper optional (#19694) @thomas-mcdonald
+- [charts] Fix chart crash in test environment (#19711) @JCQuintas
+
+#### `@mui/x-charts-pro@8.12.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.12.0`, plus:
+
+- [charts-pro] Add `valueFormatter` to sankey (#19636) @JCQuintas
+- [charts-pro] Allow `source/target` keywords in sankey link color (#19634) @JCQuintas
+- [charts-pro] Allow exporting `SankeyChart` (#19659) @JCQuintas
+- [charts-pro] Fix axis inversion when using axis `max` and `filterMode: 'discard'` (#19200) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.12.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.12.0`, plus:
+
+- [charts-premium] Grid-Charts integration (#18021) @arminmeh
+
+### Tree View
+
+#### `@mui/x-tree-view@8.12.0`
+
+- [tree view] Allow to pass `null` to the icon slots (#19569) @flaviendelangle
+- [tree view] Fix `apiRef.current.isItemExpanded()` method (#19619) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.12.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.12.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.12.0`
+
+- [codemod] Bump `engines.node` to `>=20.19` to align with `yargs` package (#18979) @LukasTy
+
+### Docs
+
+- [docs] Add missing label to Charts example (#19616) @prakhargupta1
+- [docs] Replace axis type and axis data with a table (#19618) @prakhargupta1
+- [docs] Add Charts example collection page (#18353) @prakhargupta1
+- [docs] Add a Charts demo showcasing bar and scatter composition (#19605) @prakhargupta1
+- [docs] Add composition Charts demo for legends and tooltip (#19602) @prakhargupta1
+- [docs] Add recipe about server-side data export (#19617) @siriwatknp
+- [docs] Clarify DataGrid layout requirements (#19413) @romgrk
+- [docs] Fix `ExportServerSideData` demo layout shift (#19669) @siriwatknp
+- [docs] Improve server-side `updateRow()` description (#19554) @deade1e
+- [docs] Show how to customize drawing area background (#19682) @alexfauquette
+- [docs] Add hook documentation pages (#19334) @Copilot
+
+### Core
+
+- [code-infra] Add copilot instructions specific to x repo (#19623) @JCQuintas
+- [code-infra] Load `tsx` files in visual regression (#19595) @JCQuintas
+- [code-infra] Remove renovate automerge (#19501) @Janpot
+- [code-infra] Update `DEFAULT_TIMESTAMP` format to ISO 8601 (#19624) @Janpot
+- [code-infra] Update `findLatestTaggedVersion` to filter tags based on major version (#19693) @michelengelen
+- [code-infra] Fix changelog generation for charts premium (#19701) @JCQuintas
+- [code-infra] Run prettier on `createReleasePR.mjs` (#19702) @bernardobelchior
+- [code-infra] Make `x-charts-premium` releasable (#18959) @JCQuintas
+- [docs-infra] Ensure `create-playground` script only runs if target file is absent (#19603) @michelengelen
+- [docs-infra] Add @prakhargupta1 as a codeowner of the docs (#19679) @alexfauquette
+
+### Miscellaneous
+
+- [test] Reduce time for wheel zoom test (#19571) @alexfauquette
+- Change `matchPackageNames` to `matchDepNames` for date-fns-v2 @Janpot
+- Remove groupName for date-fns-v2 in renovate.json @Janpot
+
 ## 8.11.3
 
 _Sep 16, 2025_
@@ -27,11 +172,11 @@ The following are all team members who have contributed to this release:
 - [DataGrid] Fix numeric font size not being applied (#19552) @cherniavskii
 - [DataGrid] Improve `operator` types to display literal values (#19529) @siriwatknp
 
-#### `@mui/x-data-grid-pro@8.11.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+#### `@mui/x-data-grid-pro@8.11.3` [![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.11.3`.
 
-#### `@mui/x-data-grid-premium@8.11.3` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link "Premium plan")
+#### `@mui/x-data-grid-premium@8.11.3` [![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.11.3`.
 
@@ -41,7 +186,7 @@ Same changes as in `@mui/x-data-grid-pro@8.11.3`.
 
 - [pickers] Refactor `slots` and `slotProps` propagation strategy (#18867) @LukasTy
 
-#### `@mui/x-date-pickers-pro@8.11.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+#### `@mui/x-date-pickers-pro@8.11.3` [![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.11.3`.
 
@@ -55,7 +200,7 @@ Same changes as in `@mui/x-date-pickers@8.11.3`.
 - [charts] Rename `isBandScale` to `isDiscreteScale` (#19514) @bernardobelchior
 - [charts] Fix legend position affecting toolbar's position (#19257) @sai6855
 
-#### `@mui/x-charts-pro@8.11.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+#### `@mui/x-charts-pro@8.11.3` [![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.11.3`, plus:
 
@@ -69,7 +214,7 @@ Same changes as in `@mui/x-charts@8.11.3`, plus:
 - [tree view] Support flat DOM structure (#19350) @flaviendelangle
 - [tree view] Update cursor styles for disabled TreeItem (#19548) @sai6855
 
-#### `@mui/x-tree-view-pro@8.11.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+#### `@mui/x-tree-view-pro@8.11.3` [![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.11.3`.
 
@@ -83,7 +228,7 @@ Internal changes.
 
 - [docs] Add styling row group recipe (#19349) @siriwatknp
 - [docs] Group demos data into the dataset folder (#19549) @alexfauquette
-- [docs] Add `shiny` bar chart example at the top  (#19416) @JCQuintas
+- [docs] Add `shiny` bar chart example at the top (#19416) @JCQuintas
 
 ### Core
 

package/DataGridPremium/DataGridPremium.js

@@ -37,10 +37,23 @@ const configuration = {
         field
       });
     },
+    useSortValueGetter: apiRef => (id, field) => (0, _gridAggregationSelectors.gridCellAggregationResultSelector)(apiRef, {
+      id,
+      field
+    })?.value ?? apiRef.current.getCellValue(id, field),
+    useFilterValueGetter: (apiRef, props) => (row, column) => {
+      if (props.aggregationRowsScope === 'filtered') {
+        return apiRef.current.getRowValue(row, column);
+      }
+      return (0, _gridAggregationSelectors.gridCellAggregationResultSelector)(apiRef, {
+        id: (0, _xDataGridPro.gridRowIdSelector)(apiRef, row),
+        field: column.field
+      })?.value ?? apiRef.current.getRowValue(row, column);
+    },
     useGridRowsOverridableMethods: _useGridRowsOverridableMethods.useGridRowsOverridableMethods
   }
 };
-const releaseInfo = "MTc1ODA2NzIwMDAwMA==";
+const releaseInfo = "MTc1ODc1MTIwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo
@@ -80,6 +93,10 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * The id of the active chart.
+   */
+  activeChartId: _propTypes.default.string,
   /**
    * Aggregation functions available on the grid.
    * @default GRID_AGGREGATION_FUNCTIONS when `dataSource` is not provided, `{}` when `dataSource` is provided
@@ -196,6 +213,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Set the cell selection model of the grid.
    */
   cellSelectionModel: _propTypes.default.object,
+  /**
+   * If `true`, the charts integration feature is enabled.
+   * @default false
+   */
+  chartsIntegration: _propTypes.default.bool,
   /**
    * If `true`, the Data Grid will display an extra column with checkboxes for selecting rows.
    * @default false
@@ -407,6 +429,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, then the feature is fully disabled, and neither property nor method calls will have any effect.
    */
   experimentalFeatures: _propTypes.default.shape({
+    charts: _propTypes.default.bool,
     warnIfFocusStateIsNotSynced: _propTypes.default.bool
   }),
   /**
@@ -667,6 +690,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Nonce of the inline styles for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute).
    */
   nonce: _propTypes.default.string,
+  /**
+   * Callback fired when the active chart changes.
+   * @param {string} activeChartId The new active chart id.
+   */
+  onActiveChartIdChange: _propTypes.default.func,
   /**
    * Callback fired when the row grouping model changes.
    * @param {GridAggregationModel} model The aggregated columns.

package/DataGridPremium/useDataGridPremiumComponent.d.ts

@@ -2,4 +2,4 @@ import { RefObject } from '@mui/x-internals/types';
 import { type GridConfiguration } from '@mui/x-data-grid-pro/internals';
 import { GridPrivateApiPremium } from "../models/gridApiPremium.js";
 import { DataGridPremiumProcessedProps } from "../models/dataGridPremiumProps.js";
-export declare const useDataGridPremiumComponent: (apiRef: RefObject<GridPrivateApiPremium>, inProps: DataGridPremiumProcessedProps, configuration: GridConfiguration<GridPrivateApiPremium>) => DataGridPremiumProcessedProps;
+export declare const useDataGridPremiumComponent: (apiRef: RefObject<GridPrivateApiPremium>, inProps: DataGridPremiumProcessedProps, configuration: GridConfiguration<GridPrivateApiPremium, DataGridPremiumProcessedProps>) => DataGridPremiumProcessedProps;

package/DataGridPremium/useDataGridPremiumComponent.js

@@ -24,6 +24,7 @@ var _useGridPivoting = require("../hooks/features/pivoting/useGridPivoting");
 var _gridPivotingSelectors = require("../hooks/features/pivoting/gridPivotingSelectors");
 var _useGridAiAssistant = require("../hooks/features/aiAssistant/useGridAiAssistant");
 var _useGridSidebar = require("../hooks/features/sidebar/useGridSidebar");
+var _useGridChartsIntegration = require("../hooks/features/chartsIntegration/useGridChartsIntegration");
 // Premium-only features
 
 const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
@@ -98,6 +99,7 @@ const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   (0, _internals.useGridInitializeState)(_internals.rowsMetaStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.listViewStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridAiAssistant.aiAssistantStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_useGridChartsIntegration.chartsIntegrationStateInitializer, apiRef, props);
   (0, _internals.useGridVirtualizer)(apiRef, props);
   (0, _useGridSidebar.useGridSidebar)(apiRef, props);
   (0, _useGridPivoting.useGridPivoting)(apiRef, props, inProps.columns, inProps.rows);
@@ -121,8 +123,8 @@ const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   (0, _internals.useGridEditing)(apiRef, props);
   (0, _internals.useGridFocus)(apiRef, props);
   (0, _internals.useGridPreferencesPanel)(apiRef, props);
-  (0, _internals.useGridFilter)(apiRef, props);
-  (0, _internals.useGridSorting)(apiRef, props);
+  (0, _internals.useGridFilter)(apiRef, props, configuration);
+  (0, _internals.useGridSorting)(apiRef, props, configuration);
   (0, _internals.useGridDensity)(apiRef, props);
   (0, _internals.useGridColumnReorder)(apiRef, props);
   (0, _internals.useGridColumnResize)(apiRef, props);
@@ -146,6 +148,7 @@ const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   (0, _internals.useGridVirtualization)(apiRef, props);
   (0, _internals.useGridListView)(apiRef, props);
   (0, _useGridAiAssistant.useGridAiAssistant)(apiRef, props);
+  (0, _useGridChartsIntegration.useGridChartsIntegration)(apiRef, props);
   (0, _useGridPivoting.useGridPivotingExportState)(apiRef);
 
   // Should be the last thing to run, because all pre-processors should have been registered by now.

package/DataGridPremium/useDataGridPremiumProps.js

@@ -44,7 +44,8 @@ const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PREMIUM_PROPS_D
   },
   disablePivoting: false,
   getPivotDerivedColumns: _utils.defaultGetPivotDerivedColumns,
-  aiAssistant: false
+  aiAssistant: false,
+  chartsIntegration: false
 });
 const defaultSlots = _dataGridPremiumDefaultSlotsComponents.DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS;
 const useDataGridPremiumProps = inProps => {

package/components/GridPremiumColumnMenu.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { GridColumnMenuProps, GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
-import { GridColumnMenuAggregationItem } from "./GridColumnMenuAggregationItem.js";
-import { GridColumnMenuPivotItem } from "./GridColumnMenuPivotItem.js";
+import { GridColumnMenuAggregationItem } from "./columnMenu/menuItems/GridColumnMenuAggregationItem.js";
+import { GridColumnMenuManagePanelItem } from "./columnMenu/menuItems/GridColumnMenuManagePanelItem.js";
 export declare function GridColumnMenuGroupingItem(props: GridColumnMenuItemProps): React.JSX.Element;
 export declare const GRID_COLUMN_MENU_SLOTS_PREMIUM: {
   columnMenuAggregationItem: typeof GridColumnMenuAggregationItem;
   columnMenuGroupingItem: typeof GridColumnMenuGroupingItem;
-  columnMenuPivotItem: typeof GridColumnMenuPivotItem;
+  columnMenuManagePanelItem: typeof GridColumnMenuManagePanelItem;
   columnMenuPinningItem: typeof import("@mui/x-data-grid-pro").GridColumnMenuPinningItem;
   columnMenuSortItem: typeof import("@mui/x-data-grid").GridColumnMenuSortItem;
   columnMenuFilterItem: typeof import("@mui/x-data-grid").GridColumnMenuFilterItem;
@@ -19,7 +19,7 @@ export declare const GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM: {
   columnMenuGroupingItem: {
     displayOrder: number;
   };
-  columnMenuPivotItem: {
+  columnMenuManagePanelItem: {
     displayOrder: number;
   };
   columnMenuPinningItem: {

package/components/GridPremiumColumnMenu.js

@@ -12,11 +12,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _forwardRef = require("@mui/x-internals/forwardRef");
-var _GridColumnMenuAggregationItem = require("./GridColumnMenuAggregationItem");
+var _GridColumnMenuAggregationItem = require("./columnMenu/menuItems/GridColumnMenuAggregationItem");
 var _rowGrouping = require("../hooks/features/rowGrouping");
-var _GridColumnMenuRowGroupItem = require("./GridColumnMenuRowGroupItem");
-var _GridColumnMenuRowUngroupItem = require("./GridColumnMenuRowUngroupItem");
-var _GridColumnMenuPivotItem = require("./GridColumnMenuPivotItem");
+var _GridColumnMenuRowGroupItem = require("./columnMenu/menuItems/GridColumnMenuRowGroupItem");
+var _GridColumnMenuRowUngroupItem = require("./columnMenu/menuItems/GridColumnMenuRowUngroupItem");
+var _GridColumnMenuManagePanelItem = require("./columnMenu/menuItems/GridColumnMenuManagePanelItem");
 var _jsxRuntime = require("react/jsx-runtime");
 function GridColumnMenuGroupingItem(props) {
   const {
@@ -30,7 +30,7 @@ function GridColumnMenuGroupingItem(props) {
 const GRID_COLUMN_MENU_SLOTS_PREMIUM = exports.GRID_COLUMN_MENU_SLOTS_PREMIUM = (0, _extends2.default)({}, _xDataGridPro.GRID_COLUMN_MENU_SLOTS, {
   columnMenuAggregationItem: _GridColumnMenuAggregationItem.GridColumnMenuAggregationItem,
   columnMenuGroupingItem: GridColumnMenuGroupingItem,
-  columnMenuPivotItem: _GridColumnMenuPivotItem.GridColumnMenuPivotItem
+  columnMenuManagePanelItem: _GridColumnMenuManagePanelItem.GridColumnMenuManagePanelItem
 });
 const GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM = exports.GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM = (0, _extends2.default)({}, _xDataGridPro.GRID_COLUMN_MENU_SLOT_PROPS, {
   columnMenuAggregationItem: {
@@ -39,7 +39,7 @@ const GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM = exports.GRID_COLUMN_MENU_SLOT_PROPS_
   columnMenuGroupingItem: {
     displayOrder: 27
   },
-  columnMenuPivotItem: {
+  columnMenuManagePanelItem: {
     displayOrder: 28
   }
 });

package/components/GridPremiumToolbar.js

@@ -17,6 +17,7 @@ var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _PivotPanelTrigger = require("./pivotPanel/PivotPanelTrigger");
 var _utils = require("../hooks/features/pivoting/utils");
 var _aiAssistantPanel = require("./aiAssistantPanel");
+var _ChartsPanelTrigger = require("./chartsPanel/ChartsPanelTrigger");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["excelOptions"];
 function GridPremiumToolbar(props) {
@@ -34,6 +35,16 @@ function GridPremiumToolbar(props) {
           })
         }))
       })
+    }), rootProps.experimentalFeatures?.charts && rootProps.chartsIntegration && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsPanelTrigger.ChartsPanelTrigger, {
+      render: triggerProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+        title: apiRef.current.getLocaleText('toolbarCharts'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.ToolbarButton, (0, _extends2.default)({}, triggerProps, {
+          color: "default",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.chartsIcon, {
+            fontSize: "small"
+          })
+        }))
+      })
     }), rootProps.aiAssistant && /*#__PURE__*/(0, _jsxRuntime.jsx)(_aiAssistantPanel.AiAssistantPanelTrigger, {
       render: triggerProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
         title: apiRef.current.getLocaleText('toolbarAssistant'),

package/components/chartsIntegration/GridChartsIntegrationContext.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const GridChartsIntegrationContext: React.Context<unknown>;

package/components/chartsIntegration/GridChartsIntegrationContext.js

@@ -0,0 +1,11 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridChartsIntegrationContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+const GridChartsIntegrationContext = exports.GridChartsIntegrationContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") GridChartsIntegrationContext.displayName = "GridChartsIntegrationContext";

package/components/chartsPanel/ChartsPanelTrigger.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { RenderProp } from '@mui/x-data-grid-pro/internals';
+import { GridSlotProps } from '@mui/x-data-grid-pro';
+export interface ChartsPanelState {
+  /**
+   * If `true`, the charts integration panel is open.
+   */
+  open: boolean;
+}
+export type ChartsPanelTriggerProps = Omit<GridSlotProps['baseButton'], 'className'> & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<GridSlotProps['baseButton'], ChartsPanelState>;
+  /**
+   * A function to customize rendering of the component.
+   */
+  className?: string | ((state: ChartsPanelState) => string);
+};
+/**
+ * A button that opens and closes the charts integration panel.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Charts Panel](https://mui.com/x/react-data-grid/components/charts-panel/)
+ *
+ * API:
+ *
+ * - [ChartsPanelTrigger API](https://mui.com/x/api/data-grid/charts-panel-trigger/)
+ */
+declare const ChartsPanelTrigger: React.ForwardRefExoticComponent<ChartsPanelTriggerProps> | React.ForwardRefExoticComponent<Omit<ChartsPanelTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { ChartsPanelTrigger };

package/components/chartsPanel/ChartsPanelTrigger.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsPanelTrigger = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _gridChartsIntegrationSelectors = require("../../hooks/features/chartsIntegration/gridChartsIntegrationSelectors");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["render", "className", "onClick", "onPointerUp"];
+/**
+ * A button that opens and closes the charts integration panel.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Charts Panel](https://mui.com/x/react-data-grid/components/charts-panel/)
+ *
+ * API:
+ *
+ * - [ChartsPanelTrigger API](https://mui.com/x/api/data-grid/charts-panel-trigger/)
+ */
+const ChartsPanelTrigger = exports.ChartsPanelTrigger = (0, _forwardRef.forwardRef)(function ChartsPanelTrigger(props, ref) {
+  const {
+      render,
+      className,
+      onClick
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const buttonId = (0, _useId.default)();
+  const panelId = (0, _useId.default)();
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const open = (0, _xDataGridPro.useGridSelector)(apiRef, _gridChartsIntegrationSelectors.gridChartsPanelOpenSelector);
+  const state = {
+    open
+  };
+  const resolvedClassName = typeof className === 'function' ? className(state) : className;
+  const handleClick = event => {
+    apiRef.current.setChartsPanelOpen(!open);
+    onClick?.(event);
+  };
+  const element = (0, _useComponentRenderer.useComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseButton, {
+    id: buttonId,
+    // TODO: Hook up the panel/trigger IDs to the charts configuration panel
+    'aria-haspopup': 'true',
+    'aria-expanded': open ? 'true' : undefined,
+    'aria-controls': open ? panelId : undefined,
+    onClick: handleClick,
+    className: resolvedClassName
+  }, other, {
+    ref
+  }), state);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") ChartsPanelTrigger.displayName = "ChartsPanelTrigger";
+process.env.NODE_ENV !== "production" ? ChartsPanelTrigger.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * A function to customize rendering of the component.
+   */
+  className: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+  disabled: _propTypes.default.bool,
+  id: _propTypes.default.string,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+  role: _propTypes.default.string,
+  size: _propTypes.default.oneOf(['large', 'medium', 'small']),
+  startIcon: _propTypes.default.node,
+  style: _propTypes.default.object,
+  tabIndex: _propTypes.default.number,
+  title: _propTypes.default.string,
+  touchRippleRef: _propTypes.default.any
+} : void 0;

package/components/chartsPanel/GridChartsPanel.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { GridChartsConfigurationOptions } from '@mui/x-internals/types';
+export interface GridChartsPanelProps {
+  /**
+   * The schema of the charts configuration.
+   * @type {GridChartsConfigurationOptions}
+   * @default {}
+   */
+  schema?: GridChartsConfigurationOptions;
+  /**
+   * Override the default column name generation logic. Use field in combination with the grid state to determine the name of the column that will be shown to the user.
+   * @param {string} field The field name
+   * @returns {string | undefined} The name of the column or undefined if the column name should be determined by the grid
+   */
+  getColumnName?: (field: string) => string | undefined;
+}
+declare function GridChartsPanel(props: GridChartsPanelProps): React.JSX.Element;
+declare namespace GridChartsPanel {
+  var propTypes: any;
+}
+export { GridChartsPanel };