@mui/x-charts-pro 8.0.0-beta.2 → 8.0.0-beta.3

package/BarChartPro/BarChartPro.js

@@ -277,6 +277,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     height: _propTypes.default.number,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -341,6 +342,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     fill: _propTypes.default.string,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),

package/CHANGELOG.md

@@ -5,6 +5,147 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-beta.3
+
+_Apr 3, 2025_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚫 Removed `react-spring` as a dependency of `@mui/x-charts`
+- 📦 Data Grid list view feature is now stable
+- 💫 Support title in Data Grid
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+Team members who have contributed to this release:
+@bernardobelchior, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @oliviertassinari, @noraleonte, @romgrk, @alexfauquette.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- The list view feature and its related props are now stable.
+
+  The `unstable_listColumn` prop has been renamed to `listViewColumn`.
+
+  The `GridListColDef` type has been renamed to `GridListViewColDef`.
+
+  ```diff
+  -const listViewColDef: GridListColDef = {
+  +const listViewColDef: GridListViewColDef = {
+     field: 'listColumn',
+     renderCell: ListViewCell,
+   };
+
+   <DataGridPro
+  -  unstable_listView
+  -  unstable_listColumn={listViewColDef}
+  +  listView
+  +  listViewColumn={listViewColDef}
+   />
+  ```
+
+- The `useGridApiEventHandler()` hook has been renamed to `useGridEvent()`.
+- The `useGridApiOptionHandler()` hook has been renamed to `useGridEventPriority()`.
+
+#### `@mui/x-data-grid@8.0.0-beta.3`
+
+- [DataGrid] Fix "is any of" autocomplete rendering (#17226) @KenanYusuf
+- [DataGrid] Rename `useGridApiEventHandler()` to `useGridEvent()` (#17159) @romgrk
+- [DataGrid] Support adding a label to the grid (#17147) @KenanYusuf
+- [DataGrid] Refactor: remove material typings (#17119) @romgrk
+
+#### `@mui/x-data-grid-pro@8.0.0-beta.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.0.0-beta.3`, plus:
+
+- [DataGridPro] Make list view feature stable (#17217) @KenanYusuf
+- [DataGridPro] Always refetch lazy-loading rows (#16827) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.0.0-beta.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.0.0-beta.3`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-beta.3`
+
+- [pickers] Add new `nextOrAccept` action bar action (#17037) @flaviendelangle
+- [pickers] Improve the Multi Section Digital Clock scrollbar thickness (#16774) @oliviertassinari
+- [TimePicker] Align the Digital Clock scrollbar thickness (#17203) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.0.0-beta.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.0.0-beta.3`.
+
+### Charts
+
+#### Breaking changes
+
+- Removed `react-spring` as a dependency of `@mui/x-charts`.
+  A consequence of this change is that the props of some slots have been changed because the `SpringValue` wrapper has been removed. The affected slots and props are:
+
+  - the type of the `x`, `y`, `width` and `height` props of the `bar` slot are now `number`;
+  - the type of `startAngle`, `endAngle`, `innerRadius`, `outerRadius`, `arcLabelRadius`, `cornerRadius` and `paddingAngle` props of `pieArc` and `pieArcLabel` slot are now `number`.
+
+  Additionally, the `pieArc` slot now receives a `skipAnimation` prop to configure whether animations should be enabled or disabled.
+
+- Tick labels in the y-axis of cartesian charts will now have an ellipsis applied to prevent overflow.
+  If your tick labels are being clipped sooner than you would like, you can increase the y-axis size by increasing its width property.
+
+- The tooltip DOM structure is modified to improve accessibility. If you relied on it to apply some style or run tests, you might be impacted by this modification.
+  - The axis tooltip displays a table per axis with the axis value in a caption.
+  - Cells containing the series label and the color mark got merged in a th cell.
+
+#### `@mui/x-charts@8.0.0-beta.3`
+
+- [charts] Adjust color palettes (#17209) @noraleonte
+- [charts] Allow multiple axes in the tooltip (#17058) @alexfauquette
+- [charts] Improve custom legend docs (#17231) @JCQuintas
+- [charts] Fix crash when item shown in tooltip is unmounted (#17169) @bernardobelchior
+- [charts] Migrate some animations from `react-spring` (#16961) @bernardobelchior
+- [charts] Remove `react-spring` (#17123) @bernardobelchior
+- [charts] Fix y-axis tick label overflow (#16846) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.0.0-beta.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.0.0-beta.3`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-beta.3`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-beta.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.0.0-beta.3`.
+
+### `@mui/x-codemod@8.0.0-beta.3`
+
+- [codemod] Add `listView` prop rename codemod (#17220) @MBilalShafi
+
+### Docs
+
+- [docs] Add "Usage with Material UI v5/v6" guide (#17164) @cherniavskii
+- [docs] Fix 301 link @oliviertassinari
+- [docs] Fix redirection getting-started (#17200) @oliviertassinari
+- [docs] Sync Stack Overflow docs with reality (#17198) @oliviertassinari
+- [docs] Update Localization Provider JSDoc link (#17207) @LukasTy
+
+### Core
+
+- [core] Cleanup `@mui` dependency versions (#17160) @LukasTy
+- [core] Sync scorecards.yml across codebase @oliviertassinari
+- [core] Revert upgrade to React 19.1 (#17206) @bernardobelchior
+- [code-infra] Fix `test:unit` warning (#17224) @JCQuintas
+- [code-infra] Fix pickers failing test after clock=fake removal (#17202) @JCQuintas
+- [code-infra] Remove clock=fake from `describeValidation` (#17150) @JCQuintas
+- [code-infra] Remove clock=fake from `describeValue` (#17199) @JCQuintas
+- [infra] Add write permission for actions in issue status label handler (#17161) @michelengelen
+
 ## 8.0.0-beta.2
 
 _Mar 27, 2025_

package/Heatmap/Heatmap.d.ts

@@ -6,7 +6,7 @@ import { ChartsAxisSlots, ChartsAxisSlotProps, ChartsXAxisProps, ChartsYAxisProp
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { HeatmapSeriesType } from "../models/seriesType/heatmap.js";
-import { HeatmapTooltipProps } from "./HeatmapTooltip.js";
+import { HeatmapTooltipProps } from "./HeatmapTooltip/HeatmapTooltip.js";
 import { HeatmapItemSlotProps, HeatmapItemSlots } from "./HeatmapItem.js";
 import { HeatmapPluginsSignatures } from "./Heatmap.plugins.js";
 export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, HeatmapItemSlots {

package/Heatmap/Heatmap.js

@@ -20,7 +20,7 @@ var _constants = require("@mui/x-charts/constants");
 var _ChartContainerPro = require("../ChartContainerPro");
 var _HeatmapPlot = require("./HeatmapPlot");
 var _seriesConfig = require("./seriesConfig");
-var _HeatmapTooltip = require("./HeatmapTooltip");
+var _HeatmapTooltip = require("./HeatmapTooltip/HeatmapTooltip");
 var _Heatmap = require("./Heatmap.plugins");
 var _jsxRuntime = require("react/jsx-runtime");
 // The GnBu: https://github.com/d3/d3-scale-chromatic/blob/main/src/sequential-multi/GnBu.js
@@ -266,6 +266,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     height: _propTypes.default.number,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -332,6 +333,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     fill: _propTypes.default.string,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),

package/Heatmap/{HeatmapTooltip.js → HeatmapTooltip/HeatmapTooltip.js}

@@ -16,12 +16,13 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
 var _hooks = require("@mui/x-charts/hooks");
 var _internals = require("@mui/x-charts/internals");
-var _useHeatmapSeries = require("../hooks/useHeatmapSeries");
+var _useHeatmapSeries = require("../../hooks/useHeatmapSeries");
+var _HeatmapTooltipAxesValue = require("./HeatmapTooltipAxesValue");
 var _jsxRuntime = require("react/jsx-runtime");
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = props => {
   const {
     classes
-  } = ownerState;
+  } = props;
   const slots = {
     root: ['root'],
     paper: ['paper'],
@@ -29,16 +30,14 @@ const useUtilityClasses = ownerState => {
     row: ['row'],
     cell: ['cell'],
     mark: ['mark'],
-    markCell: ['markCell'],
+    markContainer: ['markContainer'],
     labelCell: ['labelCell'],
     valueCell: ['valueCell']
   };
   return (0, _composeClasses.default)(slots, _ChartsTooltip.getChartsTooltipUtilityClass, classes);
 };
 function DefaultHeatmapTooltipContent(props) {
-  const {
-    classes
-  } = props;
+  const classes = useUtilityClasses(props);
   const xAxis = (0, _hooks.useXAxis)();
   const yAxis = (0, _hooks.useYAxis)();
   const heatmapSeries = (0, _useHeatmapSeries.useHeatmapSeriesContext)();
@@ -71,35 +70,32 @@ function DefaultHeatmapTooltipContent(props) {
   });
   const seriesLabel = (0, _internals.getLabel)(series[seriesId].label, 'tooltip');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipPaper, {
-    className: classes?.paper,
+    className: classes.paper,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipTable, {
-      className: classes?.table,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipRow, {
-          className: classes?.row,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
-            className: classes?.cell,
-            children: formattedX
-          }), formattedX && formattedY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
-            className: classes?.cell,
-            children: formattedY
-          })]
-        })
+      className: classes.table,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_HeatmapTooltipAxesValue.HeatmapTooltipAxesValue, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: formattedX
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: formattedY
+        })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipRow, {
-          className: classes?.row,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
-            className: (0, _clsx.default)(classes?.markCell, classes?.cell),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.ChartsLabelMark, {
-              type: markType,
-              color: color,
-              className: classes?.mark
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
-            className: (0, _clsx.default)(classes?.labelCell, classes?.cell),
-            children: seriesLabel
+          className: classes.row,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipCell, {
+            className: (0, _clsx.default)(classes.labelCell, classes.cell),
+            component: "th",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: classes.markContainer,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.ChartsLabelMark, {
+                type: markType,
+                color: color,
+                className: classes.mark
+              })
+            }), seriesLabel]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
-            className: (0, _clsx.default)(classes?.valueCell, classes?.cell),
+            className: (0, _clsx.default)(classes.valueCell, classes.cell),
+            component: "td",
             children: formattedValue
           })]
         })
@@ -155,7 +151,7 @@ process.env.NODE_ENV !== "production" ? HeatmapTooltip.propTypes = {
    * The components used for each slot inside the Popper.
    * Either a string to use a HTML element or a component.
    *
-   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    * @default {}
    */
   components: _propTypes.default.shape({
@@ -164,7 +160,7 @@ process.env.NODE_ENV !== "production" ? HeatmapTooltip.propTypes = {
   /**
    * The props used for each slot inside the Popper.
    *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    * @default {}
    */
   componentsProps: _propTypes.default.shape({

package/Heatmap/HeatmapTooltip/HeatmapTooltipAxesValue.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @ignore - internal component.
+ */
+export declare const HeatmapTooltipAxesValue: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof import("react").ClassAttributes<HTMLElement> | keyof import("react").HTMLAttributes<HTMLElement>>, {}>;

package/Heatmap/HeatmapTooltip/HeatmapTooltipAxesValue.js

@@ -0,0 +1,26 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeatmapTooltipAxesValue = void 0;
+var _styles = require("@mui/material/styles");
+/**
+ * @ignore - internal component.
+ */
+const HeatmapTooltipAxesValue = exports.HeatmapTooltipAxesValue = (0, _styles.styled)('caption', {
+  name: 'MuiChartsHeatmapTooltip',
+  slot: 'AxesValue'
+})(({
+  theme
+}) => ({
+  textAlign: 'start',
+  whiteSpace: 'nowrap',
+  padding: theme.spacing(0.5, 1.5),
+  color: (theme.vars || theme).palette.text.secondary,
+  borderBottom: `solid ${(theme.vars || theme).palette.divider} 1px`,
+  [`& span`]: {
+    marginRight: theme.spacing(1.5)
+  }
+}));

package/Heatmap/HeatmapTooltip/index.d.ts

@@ -0,0 +1 @@
+export * from "./HeatmapTooltip.js";

package/Heatmap/HeatmapTooltip/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _HeatmapTooltip = require("./HeatmapTooltip");
+Object.keys(_HeatmapTooltip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _HeatmapTooltip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _HeatmapTooltip[key];
+    }
+  });
+});

package/Heatmap/index.d.ts

@@ -1,4 +1,4 @@
 export { Heatmap } from "./Heatmap.js";
 export { HeatmapPlot } from "./HeatmapPlot.js";
-export * from "./HeatmapTooltip.js";
+export * from "./HeatmapTooltip/index.js";
 export * from "./heatmapClasses.js";

package/LineChartPro/LineChartPro.js

@@ -274,6 +274,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     height: _propTypes.default.number,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -338,6 +339,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     fill: _propTypes.default.string,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),

package/ScatterChartPro/ScatterChartPro.js

@@ -268,6 +268,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     height: _propTypes.default.number,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -332,6 +333,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     fill: _propTypes.default.string,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),

package/esm/BarChartPro/BarChartPro.js

@@ -270,6 +270,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -334,6 +335,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),

package/esm/Heatmap/Heatmap.d.ts

@@ -6,7 +6,7 @@ import { ChartsAxisSlots, ChartsAxisSlotProps, ChartsXAxisProps, ChartsYAxisProp
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { HeatmapSeriesType } from "../models/seriesType/heatmap.js";
-import { HeatmapTooltipProps } from "./HeatmapTooltip.js";
+import { HeatmapTooltipProps } from "./HeatmapTooltip/HeatmapTooltip.js";
 import { HeatmapItemSlotProps, HeatmapItemSlots } from "./HeatmapItem.js";
 import { HeatmapPluginsSignatures } from "./Heatmap.plugins.js";
 export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, HeatmapItemSlots {

package/esm/Heatmap/Heatmap.js

@@ -13,7 +13,7 @@ import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants'
 import { ChartContainerPro } from "../ChartContainerPro/index.js";
 import { HeatmapPlot } from "./HeatmapPlot.js";
 import { seriesConfig as heatmapSeriesConfig } from "./seriesConfig/index.js";
-import { HeatmapTooltip } from "./HeatmapTooltip.js";
+import { HeatmapTooltip } from "./HeatmapTooltip/HeatmapTooltip.js";
 import { HEATMAP_PLUGINS } from "./Heatmap.plugins.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The GnBu: https://github.com/d3/d3-scale-chromatic/blob/main/src/sequential-multi/GnBu.js
@@ -259,6 +259,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -325,6 +326,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),

package/{modern/Heatmap → esm/Heatmap/HeatmapTooltip}/HeatmapTooltip.js

@@ -9,12 +9,13 @@ import composeClasses from '@mui/utils/composeClasses';
 import { ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipRow, ChartsTooltipCell, useItemTooltip, getChartsTooltipUtilityClass, ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip';
 import { useXAxis, useYAxis } from '@mui/x-charts/hooks';
 import { getLabel, ChartsLabelMark } from '@mui/x-charts/internals';
-import { useHeatmapSeriesContext } from "../hooks/useHeatmapSeries.js";
+import { useHeatmapSeriesContext } from "../../hooks/useHeatmapSeries.js";
+import { HeatmapTooltipAxesValue } from "./HeatmapTooltipAxesValue.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = props => {
   const {
     classes
-  } = ownerState;
+  } = props;
   const slots = {
     root: ['root'],
     paper: ['paper'],
@@ -22,16 +23,14 @@ const useUtilityClasses = ownerState => {
     row: ['row'],
     cell: ['cell'],
     mark: ['mark'],
-    markCell: ['markCell'],
+    markContainer: ['markContainer'],
     labelCell: ['labelCell'],
     valueCell: ['valueCell']
   };
   return composeClasses(slots, getChartsTooltipUtilityClass, classes);
 };
 function DefaultHeatmapTooltipContent(props) {
-  const {
-    classes
-  } = props;
+  const classes = useUtilityClasses(props);
   const xAxis = useXAxis();
   const yAxis = useYAxis();
   const heatmapSeries = useHeatmapSeriesContext();
@@ -64,35 +63,32 @@ function DefaultHeatmapTooltipContent(props) {
   });
   const seriesLabel = getLabel(series[seriesId].label, 'tooltip');
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
-    className: classes?.paper,
+    className: classes.paper,
     children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
-      className: classes?.table,
-      children: [/*#__PURE__*/_jsx("thead", {
-        children: /*#__PURE__*/_jsxs(ChartsTooltipRow, {
-          className: classes?.row,
-          children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: classes?.cell,
-            children: formattedX
-          }), formattedX && formattedY && /*#__PURE__*/_jsx(ChartsTooltipCell, {}), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: classes?.cell,
-            children: formattedY
-          })]
-        })
+      className: classes.table,
+      children: [/*#__PURE__*/_jsxs(HeatmapTooltipAxesValue, {
+        children: [/*#__PURE__*/_jsx("span", {
+          children: formattedX
+        }), /*#__PURE__*/_jsx("span", {
+          children: formattedY
+        })]
       }), /*#__PURE__*/_jsx("tbody", {
         children: /*#__PURE__*/_jsxs(ChartsTooltipRow, {
-          className: classes?.row,
-          children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: clsx(classes?.markCell, classes?.cell),
-            children: /*#__PURE__*/_jsx(ChartsLabelMark, {
-              type: markType,
-              color: color,
-              className: classes?.mark
-            })
-          }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: clsx(classes?.labelCell, classes?.cell),
-            children: seriesLabel
+          className: classes.row,
+          children: [/*#__PURE__*/_jsxs(ChartsTooltipCell, {
+            className: clsx(classes.labelCell, classes.cell),
+            component: "th",
+            children: [/*#__PURE__*/_jsx("div", {
+              className: classes.markContainer,
+              children: /*#__PURE__*/_jsx(ChartsLabelMark, {
+                type: markType,
+                color: color,
+                className: classes.mark
+              })
+            }), seriesLabel]
           }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: clsx(classes?.valueCell, classes?.cell),
+            className: clsx(classes.valueCell, classes.cell),
+            component: "td",
             children: formattedValue
           })]
         })
@@ -148,7 +144,7 @@ process.env.NODE_ENV !== "production" ? HeatmapTooltip.propTypes = {
    * The components used for each slot inside the Popper.
    * Either a string to use a HTML element or a component.
    *
-   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    * @default {}
    */
   components: PropTypes.shape({
@@ -157,7 +153,7 @@ process.env.NODE_ENV !== "production" ? HeatmapTooltip.propTypes = {
   /**
    * The props used for each slot inside the Popper.
    *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    * @default {}
    */
   componentsProps: PropTypes.shape({

package/esm/Heatmap/HeatmapTooltip/HeatmapTooltipAxesValue.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @ignore - internal component.
+ */
+export declare const HeatmapTooltipAxesValue: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof import("react").ClassAttributes<HTMLElement> | keyof import("react").HTMLAttributes<HTMLElement>>, {}>;

package/esm/Heatmap/HeatmapTooltip/HeatmapTooltipAxesValue.js

@@ -0,0 +1,22 @@
+'use client';
+
+import { styled } from '@mui/material/styles';
+
+/**
+ * @ignore - internal component.
+ */
+export const HeatmapTooltipAxesValue = styled('caption', {
+  name: 'MuiChartsHeatmapTooltip',
+  slot: 'AxesValue'
+})(({
+  theme
+}) => ({
+  textAlign: 'start',
+  whiteSpace: 'nowrap',
+  padding: theme.spacing(0.5, 1.5),
+  color: (theme.vars || theme).palette.text.secondary,
+  borderBottom: `solid ${(theme.vars || theme).palette.divider} 1px`,
+  [`& span`]: {
+    marginRight: theme.spacing(1.5)
+  }
+}));

package/esm/Heatmap/HeatmapTooltip/index.d.ts

@@ -0,0 +1 @@
+export * from "./HeatmapTooltip.js";

package/esm/Heatmap/HeatmapTooltip/index.js

@@ -0,0 +1 @@
+export * from "./HeatmapTooltip.js";

package/esm/Heatmap/index.d.ts

@@ -1,4 +1,4 @@
 export { Heatmap } from "./Heatmap.js";
 export { HeatmapPlot } from "./HeatmapPlot.js";
-export * from "./HeatmapTooltip.js";
+export * from "./HeatmapTooltip/index.js";
 export * from "./heatmapClasses.js";

package/esm/Heatmap/index.js

@@ -1,4 +1,4 @@
 export { Heatmap } from "./Heatmap.js";
 export { HeatmapPlot } from "./HeatmapPlot.js";
-export * from "./HeatmapTooltip.js";
+export * from "./HeatmapTooltip/index.js";
 export * from "./heatmapClasses.js";

package/esm/LineChartPro/LineChartPro.js

@@ -267,6 +267,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -331,6 +332,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),