@mui/x-charts 8.0.0-beta.1 → 8.0.0-beta.3

package/BarChart/useBarChartProps.js

@@ -2,12 +2,14 @@
 'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useBarChartProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _constants = require("../constants");
 var _BarChart = require("./BarChart.plugins");
@@ -49,29 +51,34 @@ const useBarChartProps = props => {
   const id = (0, _useId.default)();
   const clipPathId = `${id}-clip-path`;
   const hasHorizontalSeries = layout === 'horizontal' || layout === undefined && series.some(item => item.layout === 'horizontal');
-  const defaultAxisConfig = {
+  const defaultBandXAxis = React.useMemo(() => [{
+    id: _constants.DEFAULT_X_AXIS_KEY,
     scaleType: 'band',
     data: Array.from({
       length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
     }, (_, index) => index)
-  };
+  }], [dataset, series]);
+  const defaultBandYAxis = React.useMemo(() => [{
+    id: _constants.DEFAULT_Y_AXIS_KEY,
+    scaleType: 'band',
+    data: Array.from({
+      length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
+    }, (_, index) => index)
+  }], [dataset, series]);
+  const seriesWithDefault = React.useMemo(() => series.map(s => (0, _extends2.default)({
+    type: 'bar'
+  }, s, {
+    layout: hasHorizontalSeries ? 'horizontal' : 'vertical'
+  })), [hasHorizontalSeries, series]);
   const chartContainerProps = (0, _extends2.default)({}, rest, {
-    series: series.map(s => (0, _extends2.default)({
-      type: 'bar'
-    }, s, {
-      layout: hasHorizontalSeries ? 'horizontal' : 'vertical'
-    })),
+    series: seriesWithDefault,
     width,
     height,
     margin,
     colors,
     dataset,
-    xAxis: xAxis ?? (hasHorizontalSeries ? undefined : [(0, _extends2.default)({
-      id: _constants.DEFAULT_X_AXIS_KEY
-    }, defaultAxisConfig)]),
-    yAxis: yAxis ?? (hasHorizontalSeries ? [(0, _extends2.default)({
-      id: _constants.DEFAULT_Y_AXIS_KEY
-    }, defaultAxisConfig)] : undefined),
+    xAxis: xAxis ?? (hasHorizontalSeries ? undefined : defaultBandXAxis),
+    yAxis: yAxis ?? (hasHorizontalSeries ? defaultBandYAxis : undefined),
     highlightedItem,
     onHighlightChange,
     disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',

package/CHANGELOG.md

@@ -5,6 +5,241 @@
 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_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔍 Update the Data Grid quick filter to be collapsed when not in use
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@lhilgert9.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @flaviendelangle, @hasdfa, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @mnajdova, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.0.0-beta.2`
+
+- [DataGrid] Fix error caused by trying to render rows that are not in the state anymore (#17057) @arminmeh
+- [DataGrid] Refactor: remove more material (#16922) @romgrk
+- [DataGrid] Update Quick Filter component to be expandable (#16862) @KenanYusuf
+- [DataGrid] Fix crash when used with `@mui/styled-engine-sc` (#17154) @KenanYusuf
+
+#### `@mui/x-data-grid-pro@8.0.0-beta.2` [![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.2`, plus:
+
+- [DataGridPro] Data source: Allow expanding groups with unknown children (#17144) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.0.0-beta.2` [![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.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-beta.2`
+
+- [fields] Extract the props of each field slot into a standalone hook for easier re-use (#17114) @flaviendelangle
+- [pickers] Fix visual regression in Date Range Calendar's day (#17148) @flaviendelangle
+- [pickers] Remove all code duplication to apply default values to validation props (#17038) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-beta.2` [![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.2`.
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-beta.2`
+
+- [charts] Memoize axes and series with default (#17156) @alexfauquette
+- [charts] Add pie benchmark (#17115) @JCQuintas
+- [charts] Fix CSS vars support for dark theme (#17106) @alexfauquette
+- [charts] Fix radar hover (#17134) @alexfauquette
+- [charts] Move axis interaction to selectors (#17039) @alexfauquette
+- [charts] Fix Pie benchmark (#17125) @JCQuintas
+
+#### `@mui/x-charts-pro@8.0.0-beta.2` [![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.2`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-beta.2`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-beta.2` [![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.2`.
+
+### `@mui/x-codemod@8.0.0-beta.1`
+
+- [codemod] Add Data Grid codemods (#17121, #17124) @MBilalShafi
+
+### Docs
+
+- [docs] Fix example import for `ExportExcel` component (#17110) @KenanYusuf
+
+### Core
+
+- [code-infra] Remove `@mui/styles` dependency & patches (#17071) @mnajdova
+- [code-infra] Add more tests to slow screenshot tests (#17075) @JCQuintas
+- [code-infra] Fix pickers codecov (#17120) @JCQuintas
+- [code-infra] Move `isDeepEqual` to @mui/x-internals (#17129) @JCQuintas
+- [code-infra] Remove `test_regressions` step from React 18 pipeline (#17108) @LukasTy
+- [code-infra] Update some data-grid tests for vitest (#17078, #17104, #17146) @JCQuintas
+- [code-infra] Update some date-pickers tests for vitest (#17083) @JCQuintas
+- [infra] Update `issue-status-label-handler.yml` @michelengelen
+- [infra] Added reusable issue status label handler workflow (#17145) @michelengelen
+- [infra] Switch to reusable 'stale issues/PRs' workflow (#17107) @michelengelen
+- [telemetry] Improve request body size, update dependencies, and optimize SSR handling (#17008) @hasdfa
+
 ## 8.0.0-beta.1
 
 _Mar 21, 2025_

package/ChartContainer/ChartContainer.js

@@ -158,6 +158,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     height: _propTypes.default.number,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -215,6 +216,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     height: _propTypes.default.number,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelGap: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
@@ -295,6 +297,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.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]),
@@ -350,6 +353,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.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/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -11,7 +11,7 @@ var _useScale = require("../hooks/useScale");
 var _isBandScale = require("../internals/isBandScale");
 var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
-var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _hooks = require("../hooks");
 var _ChartsAxisHighlightPath = require("./ChartsAxisHighlightPath");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -28,26 +28,26 @@ var _jsxRuntime = require("react/jsx-runtime");
   } = (0, _hooks.useDrawingArea)();
   const xScale = (0, _useScale.useXScale)();
   const store = (0, _useStore.useStore)();
-  const axisX = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionXAxis);
+  const axisXValue = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsInteractionXAxisValue);
   const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
-  const isBandScaleX = type === 'band' && axisX !== null && (0, _isBandScale.isBandScale)(xScale);
+  const isBandScaleX = type === 'band' && axisXValue !== null && (0, _isBandScale.isBandScale)(xScale);
   if (process.env.NODE_ENV !== 'production') {
-    const isError = isBandScaleX && xScale(axisX.value) === undefined;
+    const isError = isBandScaleX && xScale(axisXValue) === undefined;
     if (isError) {
       console.error([`MUI X: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
     }
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [isBandScaleX && xScale(axisX.value) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath
+    children: [isBandScaleX && xScale(axisXValue) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath
     // @ts-expect-error, xScale value is checked in the statement above
     , {
-      d: `M ${xScale(axisX.value) - (xScale.step() - xScale.bandwidth()) / 2} ${top} l ${xScale.step()} 0 l 0 ${height} l ${-xScale.step()} 0 Z`,
+      d: `M ${xScale(axisXValue) - (xScale.step() - xScale.bandwidth()) / 2} ${top} l ${xScale.step()} 0 l 0 ${height} l ${-xScale.step()} 0 Z`,
       className: classes.root,
       ownerState: {
         axisHighlight: 'band'
       }
-    }), type === 'line' && axisX !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
-      d: `M ${getXPosition(axisX.value)} ${top} L ${getXPosition(axisX.value)} ${top + height}`,
+    }), type === 'line' && axisXValue !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
+      d: `M ${getXPosition(axisXValue)} ${top} L ${getXPosition(axisXValue)} ${top + height}`,
       className: classes.root,
       ownerState: {
         axisHighlight: 'line'

package/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -11,7 +11,7 @@ var _useScale = require("../hooks/useScale");
 var _isBandScale = require("../internals/isBandScale");
 var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
-var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _hooks = require("../hooks");
 var _ChartsAxisHighlightPath = require("./ChartsAxisHighlightPath");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -28,26 +28,26 @@ var _jsxRuntime = require("react/jsx-runtime");
   } = (0, _hooks.useDrawingArea)();
   const yScale = (0, _useScale.useYScale)();
   const store = (0, _useStore.useStore)();
-  const axisY = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionYAxis);
+  const axisYValue = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsInteractionYAxisValue);
   const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
-  const isBandScaleY = type === 'band' && axisY !== null && (0, _isBandScale.isBandScale)(yScale);
+  const isBandScaleY = type === 'band' && axisYValue !== null && (0, _isBandScale.isBandScale)(yScale);
   if (process.env.NODE_ENV !== 'production') {
-    const isError = isBandScaleY && yScale(axisY.value) === undefined;
+    const isError = isBandScaleY && yScale(axisYValue) === undefined;
     if (isError) {
       console.error([`MUI X: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
     }
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [isBandScaleY && yScale(axisY.value) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
+    children: [isBandScaleY && yScale(axisYValue) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
       d: `M ${left} ${
       // @ts-expect-error, yScale value is checked in the statement above
-      yScale(axisY.value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`,
+      yScale(axisYValue) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`,
       className: classes.root,
       ownerState: {
         axisHighlight: 'band'
       }
-    }), type === 'line' && axisY !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
-      d: `M ${left} ${getYPosition(axisY.value)} L ${left + width} ${getYPosition(axisY.value)}`,
+    }), type === 'line' && axisYValue !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
+      d: `M ${left} ${getYPosition(axisYValue)} L ${left + width} ${getYPosition(axisYValue)}`,
       className: classes.root,
       ownerState: {
         axisHighlight: 'line'

package/ChartsLabel/ChartsLabelMark.js

@@ -24,15 +24,11 @@ const Root = (0, _styles.styled)('div', {
 })(() => {
   return {
     display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
     width: 14,
     height: 14,
     [`&.${_labelMarkClasses.labelMarkClasses.line}`]: {
       width: 16,
       height: 'unset',
-      display: 'flex',
       alignItems: 'center',
       [`.${_labelMarkClasses.labelMarkClasses.mask}`]: {
         height: 4,

package/ChartsLabel/index.d.ts

@@ -1,4 +1,5 @@
 export type { ChartsLabelMarkProps, ChartsLabelCustomMarkProps } from './ChartsLabelMark';
+export { ChartsLabelMark } from "./ChartsLabelMark.js";
 export { labelClasses } from "./labelClasses.js";
 export type { ChartsLabelClasses } from './labelClasses';
 export { labelMarkClasses } from "./labelMarkClasses.js";

package/ChartsLabel/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ChartsLabelMark", {
+  enumerable: true,
+  get: function () {
+    return _ChartsLabelMark.ChartsLabelMark;
+  }
+});
 Object.defineProperty(exports, "labelClasses", {
   enumerable: true,
   get: function () {
@@ -21,6 +27,7 @@ Object.defineProperty(exports, "labelMarkClasses", {
     return _labelMarkClasses.labelMarkClasses;
   }
 });
+var _ChartsLabelMark = require("./ChartsLabelMark");
 var _labelClasses = require("./labelClasses");
 var _labelMarkClasses = require("./labelMarkClasses");
 var _labelGradientClasses = require("./labelGradientClasses");

package/ChartsLegend/continuousColorLegendClasses.d.ts

@@ -22,5 +22,5 @@ export interface ContinuousColorLegendClasses {
   /** Styles applied to the series label. */
   label: string;
 }
-export declare const useUtilityClasses: (props: ContinuousColorLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "minLabel" | "maxLabel" | "gradient", string>;
+export declare const useUtilityClasses: (props: ContinuousColorLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "gradient" | "minLabel" | "maxLabel", string>;
 export declare const continuousColorLegendClasses: ContinuousColorLegendClasses;

package/ChartsOverlay/ChartsLoadingOverlay.js

@@ -18,7 +18,7 @@ const StyledText = (0, _styles.styled)('text')(({
   theme
 }) => (0, _extends2.default)({}, theme.typography.body2, {
   stroke: 'none',
-  fill: theme.palette.text.primary,
+  fill: (theme.vars || theme).palette.text.primary,
   shapeRendering: 'crispEdges',
   textAnchor: 'middle',
   dominantBaseline: 'middle'

package/ChartsOverlay/ChartsNoDataOverlay.js

@@ -18,7 +18,7 @@ const StyledText = (0, _styles.styled)('text')(({
   theme
 }) => (0, _extends2.default)({}, theme.typography.body2, {
   stroke: 'none',
-  fill: theme.palette.text.primary,
+  fill: (theme.vars || theme).palette.text.primary,
   shapeRendering: 'crispEdges',
   textAnchor: 'middle',
   dominantBaseline: 'middle'

package/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -13,7 +13,7 @@ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _chartsTooltipClasses = require("./chartsTooltipClasses");
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
-var _useAxisTooltip = require("./useAxisTooltip");
+var _useAxesTooltip = require("./useAxesTooltip");
 var _hooks = require("../hooks");
 var _ChartsLabelMark = require("../ChartsLabel/ChartsLabelMark");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -22,70 +22,62 @@ function ChartsAxisTooltipContent(props) {
     classes: propClasses,
     sx
   } = props;
-  const tooltipData = (0, _useAxisTooltip.useAxisTooltip)();
+  const tooltipData = (0, _useAxesTooltip.useAxesTooltip)();
   const xAxis = (0, _hooks.useXAxis)();
   const yAxis = (0, _hooks.useYAxis)();
   const classes = (0, _chartsTooltipClasses.useUtilityClasses)(propClasses);
   if (tooltipData === null) {
     return null;
   }
-  const {
-    axisDirection,
-    axisValue,
-    axisFormattedValue,
-    seriesItems
-  } = tooltipData;
-  const axis = axisDirection === 'x' ? xAxis : yAxis;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipPaper, {
     sx: sx,
     className: classes.paper,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipTable, {
-      className: classes.table,
-      children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipRow, {
-          className: classes.row,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-            colSpan: 3,
-            className: (0, _clsx.default)(classes.cell, classes.axisValueCell),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-              children: axisFormattedValue
-            })
-          })
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
-        children: seriesItems.map(({
-          seriesId,
-          color,
-          formattedValue,
-          formattedLabel,
-          markType
-        }) => {
-          if (formattedValue == null) {
-            return null;
-          }
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
-            className: classes.row,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-              className: (0, _clsx.default)(classes.markCell, classes.cell),
-              children: color && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
-                type: markType,
-                color: color,
-                className: classes.mark
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-              className: (0, _clsx.default)(classes.labelCell, classes.cell),
-              children: formattedLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-                children: formattedLabel
-              }) : null
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-              className: (0, _clsx.default)(classes.valueCell, classes.cell),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    children: tooltipData.map(({
+      axisId,
+      axisDirection,
+      axisValue,
+      axisFormattedValue,
+      seriesItems
+    }) => {
+      const axis = axisDirection === 'x' ? xAxis : yAxis;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipTable, {
+        className: classes.table,
+        children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          component: "caption",
+          children: axisFormattedValue
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+          children: seriesItems.map(({
+            seriesId,
+            color,
+            formattedValue,
+            formattedLabel,
+            markType
+          }) => {
+            if (formattedValue == null) {
+              return null;
+            }
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
+              className: classes.row,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.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)(_ChartsLabelMark.ChartsLabelMark, {
+                    type: markType,
+                    color: color,
+                    className: classes.mark
+                  })
+                }), formattedLabel || null]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+                className: (0, _clsx.default)(classes.valueCell, classes.cell),
+                component: "td",
                 children: formattedValue
-              })
-            })]
-          }, seriesId);
-        })
-      })]
+              })]
+            }, seriesId);
+          })
+        })]
+      }, axisId);
     })
   });
 }

package/ChartsTooltip/ChartsItemTooltipContent.js

@@ -39,18 +39,20 @@ function ChartsItemTooltipContent(props) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
           className: classes.row,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-            className: (0, _clsx.default)(classes.markCell, classes.cell),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
-              type: markType,
-              color: color,
-              className: classes.mark
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipCell, {
             className: (0, _clsx.default)(classes.labelCell, classes.cell),
-            children: label
+            component: "th",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: classes.markContainer,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
+                type: markType,
+                color: color,
+                className: classes.mark
+              })
+            }), label]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
             className: (0, _clsx.default)(classes.valueCell, classes.cell),
+            component: "td",
             children: formattedValue
           })]
         })