@mui/x-charts 9.8.0 → 9.10.0

package/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -13,6 +13,7 @@ var _useStore = require("../internals/store/useStore");
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _hooks = require("../hooks");
 var _ChartsAxisHighlightPath = require("./ChartsAxisHighlightPath");
+var _getSampledBandHighlight = require("./getSampledBandHighlight");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
@@ -29,13 +30,15 @@ function ChartsXHighlight(props) {
   const store = (0, _useStore.useStore)();
   const axisXValues = store.use(_useChartCartesianAxis.selectorChartsHighlightXAxisValue);
   const xAxes = store.use(_useChartCartesianAxis.selectorChartXAxis);
+  const bucketSizeByAxis = store.use(_useChartCartesianAxis.selectorChartHighlightBucketSize);
   if (axisXValues.length === 0) {
     return null;
   }
-  return axisXValues.map(({
-    axisId,
-    value
-  }) => {
+  return axisXValues.map(axisValue => {
+    const {
+      axisId,
+      value
+    } = axisValue;
     const xAxis = xAxes.axis[axisId];
     const xScale = xAxis.scale;
     const getXPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(xScale);
@@ -46,9 +49,23 @@ function ChartsXHighlight(props) {
         console.error([`MUI X Charts: 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'));
       }
     }
+    let bandStart = 0;
+    let bandSize = 0;
+    if (isXScaleOrdinal) {
+      ({
+        bandStart,
+        bandSize
+      } = (0, _getSampledBandHighlight.getSampledBandHighlight)({
+        scale: xScale,
+        value,
+        dataIndex: axisValue.dataIndex,
+        data: xAxis.data,
+        bucketSize: bucketSizeByAxis.get(axisId) ?? 1
+      }));
+    }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [isXScaleOrdinal && xScale(value) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
-        d: `M ${xScale(value) - (xScale.step() - xScale.bandwidth()) / 2} ${top} l ${xScale.step()} 0 l 0 ${height} l ${-xScale.step()} 0 Z`,
+        d: `M ${bandStart} ${top} l ${bandSize} 0 l 0 ${height} l ${-bandSize} 0 Z`,
         className: classes.root,
         ownerState: {
           axisHighlight: 'band'

package/ChartsAxisHighlight/ChartsXAxisHighlight.mjs

@@ -4,9 +4,10 @@ import * as React from 'react';
 import { getValueToPositionMapper } from "../hooks/getValueToPositionMapper.mjs";
 import { isOrdinalScale } from "../internals/scaleGuards.mjs";
 import { useStore } from "../internals/store/useStore.mjs";
-import { selectorChartsHighlightXAxisValue, selectorChartXAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
+import { selectorChartsHighlightXAxisValue, selectorChartHighlightBucketSize, selectorChartXAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
 import { useDrawingArea } from "../hooks/index.mjs";
 import { ChartsAxisHighlightPath } from "./ChartsAxisHighlightPath.mjs";
+import { getSampledBandHighlight } from "./getSampledBandHighlight.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -23,13 +24,15 @@ export default function ChartsXHighlight(props) {
   const store = useStore();
   const axisXValues = store.use(selectorChartsHighlightXAxisValue);
   const xAxes = store.use(selectorChartXAxis);
+  const bucketSizeByAxis = store.use(selectorChartHighlightBucketSize);
   if (axisXValues.length === 0) {
     return null;
   }
-  return axisXValues.map(({
-    axisId,
-    value
-  }) => {
+  return axisXValues.map(axisValue => {
+    const {
+      axisId,
+      value
+    } = axisValue;
     const xAxis = xAxes.axis[axisId];
     const xScale = xAxis.scale;
     const getXPosition = getValueToPositionMapper(xScale);
@@ -40,9 +43,23 @@ export default function ChartsXHighlight(props) {
         console.error([`MUI X Charts: 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'));
       }
     }
+    let bandStart = 0;
+    let bandSize = 0;
+    if (isXScaleOrdinal) {
+      ({
+        bandStart,
+        bandSize
+      } = getSampledBandHighlight({
+        scale: xScale,
+        value,
+        dataIndex: axisValue.dataIndex,
+        data: xAxis.data,
+        bucketSize: bucketSizeByAxis.get(axisId) ?? 1
+      }));
+    }
     return /*#__PURE__*/_jsxs(React.Fragment, {
       children: [isXScaleOrdinal && xScale(value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
-        d: `M ${xScale(value) - (xScale.step() - xScale.bandwidth()) / 2} ${top} l ${xScale.step()} 0 l 0 ${height} l ${-xScale.step()} 0 Z`,
+        d: `M ${bandStart} ${top} l ${bandSize} 0 l 0 ${height} l ${-bandSize} 0 Z`,
         className: classes.root,
         ownerState: {
           axisHighlight: 'band'

package/ChartsAxisHighlight/ChartsYAxisHighlight.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { ChartsAxisHighlightType } from "./ChartsAxisHighlight.types.mjs";
 import type { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.mjs";
 /**
@@ -6,4 +7,4 @@ import type { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.mj
 export default function ChartsYHighlight(props: {
   type: ChartsAxisHighlightType;
   classes: ChartsAxisHighlightClasses;
-}): import("react/jsx-runtime").JSX.Element[] | null;
+}): React.JSX.Element[] | null;

package/ChartsAxisHighlight/ChartsYAxisHighlight.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { ChartsAxisHighlightType } from "./ChartsAxisHighlight.types.js";
 import type { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.js";
 /**
@@ -6,4 +7,4 @@ import type { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.js
 export default function ChartsYHighlight(props: {
   type: ChartsAxisHighlightType;
   classes: ChartsAxisHighlightClasses;
-}): import("react/jsx-runtime").JSX.Element[] | null;
+}): React.JSX.Element[] | null;

package/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -13,6 +13,7 @@ var _useStore = require("../internals/store/useStore");
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _hooks = require("../hooks");
 var _ChartsAxisHighlightPath = require("./ChartsAxisHighlightPath");
+var _getSampledBandHighlight = require("./getSampledBandHighlight");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
@@ -29,13 +30,15 @@ function ChartsYHighlight(props) {
   const store = (0, _useStore.useStore)();
   const axisYValues = store.use(_useChartCartesianAxis.selectorChartsHighlightYAxisValue);
   const yAxes = store.use(_useChartCartesianAxis.selectorChartYAxis);
+  const bucketSizeByAxis = store.use(_useChartCartesianAxis.selectorChartHighlightBucketSize);
   if (axisYValues.length === 0) {
     return null;
   }
-  return axisYValues.map(({
-    axisId,
-    value
-  }) => {
+  return axisYValues.map(axisValue => {
+    const {
+      axisId,
+      value
+    } = axisValue;
     const yAxis = yAxes.axis[axisId];
     const yScale = yAxis.scale;
     const getYPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(yScale);
@@ -46,9 +49,23 @@ function ChartsYHighlight(props) {
         console.error([`MUI X Charts: 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'));
       }
     }
+    let bandStart = 0;
+    let bandSize = 0;
+    if (isYScaleOrdinal) {
+      ({
+        bandStart,
+        bandSize
+      } = (0, _getSampledBandHighlight.getSampledBandHighlight)({
+        scale: yScale,
+        value,
+        dataIndex: axisValue.dataIndex,
+        data: yAxis.data,
+        bucketSize: bucketSizeByAxis.get(axisId) ?? 1
+      }));
+    }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [isYScaleOrdinal && yScale(value) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
-        d: `M ${left} ${yScale(value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`,
+        d: `M ${left} ${bandStart} l 0 ${bandSize} l ${width} 0 l 0 ${-bandSize} Z`,
         className: classes.root,
         ownerState: {
           axisHighlight: 'band'

package/ChartsAxisHighlight/ChartsYAxisHighlight.mjs

@@ -4,9 +4,10 @@ import * as React from 'react';
 import { getValueToPositionMapper } from "../hooks/getValueToPositionMapper.mjs";
 import { isOrdinalScale } from "../internals/scaleGuards.mjs";
 import { useStore } from "../internals/store/useStore.mjs";
-import { selectorChartsHighlightYAxisValue, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
+import { selectorChartsHighlightYAxisValue, selectorChartHighlightBucketSize, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
 import { useDrawingArea } from "../hooks/index.mjs";
 import { ChartsAxisHighlightPath } from "./ChartsAxisHighlightPath.mjs";
+import { getSampledBandHighlight } from "./getSampledBandHighlight.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -23,13 +24,15 @@ export default function ChartsYHighlight(props) {
   const store = useStore();
   const axisYValues = store.use(selectorChartsHighlightYAxisValue);
   const yAxes = store.use(selectorChartYAxis);
+  const bucketSizeByAxis = store.use(selectorChartHighlightBucketSize);
   if (axisYValues.length === 0) {
     return null;
   }
-  return axisYValues.map(({
-    axisId,
-    value
-  }) => {
+  return axisYValues.map(axisValue => {
+    const {
+      axisId,
+      value
+    } = axisValue;
     const yAxis = yAxes.axis[axisId];
     const yScale = yAxis.scale;
     const getYPosition = getValueToPositionMapper(yScale);
@@ -40,9 +43,23 @@ export default function ChartsYHighlight(props) {
         console.error([`MUI X Charts: 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'));
       }
     }
+    let bandStart = 0;
+    let bandSize = 0;
+    if (isYScaleOrdinal) {
+      ({
+        bandStart,
+        bandSize
+      } = getSampledBandHighlight({
+        scale: yScale,
+        value,
+        dataIndex: axisValue.dataIndex,
+        data: yAxis.data,
+        bucketSize: bucketSizeByAxis.get(axisId) ?? 1
+      }));
+    }
     return /*#__PURE__*/_jsxs(React.Fragment, {
       children: [isYScaleOrdinal && yScale(value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
-        d: `M ${left} ${yScale(value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`,
+        d: `M ${left} ${bandStart} l 0 ${bandSize} l ${width} 0 l 0 ${-bandSize} Z`,
         className: classes.root,
         ownerState: {
           axisHighlight: 'band'

package/ChartsAxisHighlight/getSampledBandHighlight.d.mts

@@ -0,0 +1,27 @@
+import type { D3OrdinalScale } from "../models/axis.mjs";
+interface SampledBandHighlightParams {
+  scale: D3OrdinalScale;
+  /** The highlighted value. */
+  value: number | Date;
+  /** The data index of the highlighted value, when known (O(1) lookup). */
+  dataIndex: number | undefined;
+  /** The axis data. */
+  data: readonly any[] | undefined;
+  /** The number of merged data points per band when the series is sampled. */
+  bucketSize: number;
+}
+/**
+ * Computes the band highlight rectangle along the ordinal axis.
+ * When the series is sampled (`bucketSize > 1`), the band is widened to cover the whole merged bucket.
+ */
+export declare function getSampledBandHighlight({
+  scale,
+  value,
+  dataIndex,
+  data,
+  bucketSize
+}: SampledBandHighlightParams): {
+  bandStart: number;
+  bandSize: number;
+};
+export {};

package/ChartsAxisHighlight/getSampledBandHighlight.d.ts

@@ -0,0 +1,27 @@
+import type { D3OrdinalScale } from "../models/axis.js";
+interface SampledBandHighlightParams {
+  scale: D3OrdinalScale;
+  /** The highlighted value. */
+  value: number | Date;
+  /** The data index of the highlighted value, when known (O(1) lookup). */
+  dataIndex: number | undefined;
+  /** The axis data. */
+  data: readonly any[] | undefined;
+  /** The number of merged data points per band when the series is sampled. */
+  bucketSize: number;
+}
+/**
+ * Computes the band highlight rectangle along the ordinal axis.
+ * When the series is sampled (`bucketSize > 1`), the band is widened to cover the whole merged bucket.
+ */
+export declare function getSampledBandHighlight({
+  scale,
+  value,
+  dataIndex,
+  data,
+  bucketSize
+}: SampledBandHighlightParams): {
+  bandStart: number;
+  bandSize: number;
+};
+export {};

package/ChartsAxisHighlight/getSampledBandHighlight.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSampledBandHighlight = getSampledBandHighlight;
+/**
+ * Computes the band highlight rectangle along the ordinal axis.
+ * When the series is sampled (`bucketSize > 1`), the band is widened to cover the whole merged bucket.
+ */
+function getSampledBandHighlight({
+  scale,
+  value,
+  dataIndex,
+  data,
+  bucketSize
+}) {
+  const step = scale.step();
+  const halfPadding = (step - scale.bandwidth()) / 2;
+  let bandStart = scale(value) - halfPadding;
+  let bandSize = step;
+  if (bucketSize > 1 && data) {
+    const index = dataIndex ?? data.indexOf(value);
+    if (index >= 0) {
+      const bucketStart = Math.floor(index / bucketSize) * bucketSize;
+      const bucketEnd = Math.min(bucketStart + bucketSize - 1, data.length - 1);
+      bandStart = scale(data[bucketStart]) - halfPadding;
+      bandSize = (bucketEnd - bucketStart + 1) * step;
+    }
+  }
+  return {
+    bandStart,
+    bandSize
+  };
+}

package/ChartsAxisHighlight/getSampledBandHighlight.mjs

@@ -0,0 +1,29 @@
+/**
+ * Computes the band highlight rectangle along the ordinal axis.
+ * When the series is sampled (`bucketSize > 1`), the band is widened to cover the whole merged bucket.
+ */
+export function getSampledBandHighlight({
+  scale,
+  value,
+  dataIndex,
+  data,
+  bucketSize
+}) {
+  const step = scale.step();
+  const halfPadding = (step - scale.bandwidth()) / 2;
+  let bandStart = scale(value) - halfPadding;
+  let bandSize = step;
+  if (bucketSize > 1 && data) {
+    const index = dataIndex ?? data.indexOf(value);
+    if (index >= 0) {
+      const bucketStart = Math.floor(index / bucketSize) * bucketSize;
+      const bucketEnd = Math.min(bucketStart + bucketSize - 1, data.length - 1);
+      bandStart = scale(data[bucketStart]) - halfPadding;
+      bandSize = (bucketEnd - bucketStart + 1) * step;
+    }
+  }
+  return {
+    bandStart,
+    bandSize
+  };
+}

package/ChartsAxisHighlightValue/ChartsAxisHighlightValue.d.mts

@@ -48,7 +48,7 @@ export interface ChartsAxisHighlightValueProps {
  *
  * - [ChartsAxisHighlightValue API](https://mui.com/x/api/charts/charts-axis-highlight-value/)
  */
-declare function ChartsAxisHighlightValue(props: ChartsAxisHighlightValueProps): import("react").ReactPortal | import("react/jsx-runtime").JSX.Element[] | null;
+declare function ChartsAxisHighlightValue(props: ChartsAxisHighlightValueProps): import("react").JSX.Element[] | import("react").ReactPortal | null;
 declare namespace ChartsAxisHighlightValue {
   var propTypes: any;
 }

package/ChartsAxisHighlightValue/ChartsAxisHighlightValue.d.ts

@@ -48,7 +48,7 @@ export interface ChartsAxisHighlightValueProps {
  *
  * - [ChartsAxisHighlightValue API](https://mui.com/x/api/charts/charts-axis-highlight-value/)
  */
-declare function ChartsAxisHighlightValue(props: ChartsAxisHighlightValueProps): import("react").ReactPortal | import("react/jsx-runtime").JSX.Element[] | null;
+declare function ChartsAxisHighlightValue(props: ChartsAxisHighlightValueProps): import("react").JSX.Element[] | import("react").ReactPortal | null;
 declare namespace ChartsAxisHighlightValue {
   var propTypes: any;
 }

package/ChartsAxisHighlightValue/ChartsAxisHighlightValueItem.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { SxProps } from '@mui/material/styles';
 export interface ChartsAxisHighlightValueItemProps {
   x: number;
@@ -9,5 +10,5 @@ export interface ChartsAxisHighlightValueItemProps {
   space: number;
   sx?: SxProps;
 }
-declare function ChartsAxisHighlightValueItem(props: ChartsAxisHighlightValueItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ChartsAxisHighlightValueItem(props: ChartsAxisHighlightValueItemProps): React.JSX.Element;
 export { ChartsAxisHighlightValueItem };

package/ChartsAxisHighlightValue/ChartsAxisHighlightValueItem.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { SxProps } from '@mui/material/styles';
 export interface ChartsAxisHighlightValueItemProps {
   x: number;
@@ -9,5 +10,5 @@ export interface ChartsAxisHighlightValueItemProps {
   space: number;
   sx?: SxProps;
 }
-declare function ChartsAxisHighlightValueItem(props: ChartsAxisHighlightValueItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ChartsAxisHighlightValueItem(props: ChartsAxisHighlightValueItemProps): React.JSX.Element;
 export { ChartsAxisHighlightValueItem };

package/ChartsAxisHighlightValue/chartsAxisHighlightValueClasses.d.mts

@@ -13,6 +13,6 @@ export interface ChartsAxisHighlightValueClasses {
 export type ChartsAxisHighlightValueClassKey = keyof ChartsAxisHighlightValueClasses;
 export declare function getChartsAxisHighlightValueUtilityClass(slot: string): string;
 export declare const useUtilityClasses: (ownerState: {
-  position: "top" | "right" | "bottom" | "left";
+  position: 'top' | 'right' | 'bottom' | 'left';
 }) => Record<"root", string>;
 export declare const chartsAxisHighlightValueClasses: ChartsAxisHighlightValueClasses;

package/ChartsAxisHighlightValue/chartsAxisHighlightValueClasses.d.ts

@@ -13,6 +13,6 @@ export interface ChartsAxisHighlightValueClasses {
 export type ChartsAxisHighlightValueClassKey = keyof ChartsAxisHighlightValueClasses;
 export declare function getChartsAxisHighlightValueUtilityClass(slot: string): string;
 export declare const useUtilityClasses: (ownerState: {
-  position: "top" | "right" | "bottom" | "left";
+  position: 'top' | 'right' | 'bottom' | 'left';
 }) => Record<"root", string>;
 export declare const chartsAxisHighlightValueClasses: ChartsAxisHighlightValueClasses;

package/ChartsBrushOverlay/ChartsBrushOverlay.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 export interface ChartsBrushOverlayProps {
   /**
    * A CSS class name applied to the root element.
@@ -7,7 +8,7 @@ export interface ChartsBrushOverlayProps {
 /**
  * Component that renders visual feedback during brush interaction
  */
-declare function ChartsBrushOverlay(props: ChartsBrushOverlayProps): import("react/jsx-runtime").JSX.Element | null;
+declare function ChartsBrushOverlay(props: ChartsBrushOverlayProps): React.JSX.Element | null;
 declare namespace ChartsBrushOverlay {
   var propTypes: any;
 }

package/ChartsBrushOverlay/ChartsBrushOverlay.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 export interface ChartsBrushOverlayProps {
   /**
    * A CSS class name applied to the root element.
@@ -7,7 +8,7 @@ export interface ChartsBrushOverlayProps {
 /**
  * Component that renders visual feedback during brush interaction
  */
-declare function ChartsBrushOverlay(props: ChartsBrushOverlayProps): import("react/jsx-runtime").JSX.Element | null;
+declare function ChartsBrushOverlay(props: ChartsBrushOverlayProps): React.JSX.Element | null;
 declare namespace ChartsBrushOverlay {
   var propTypes: any;
 }

package/ChartsClipPath/ChartsClipPath.d.mts

@@ -20,7 +20,7 @@ export type ChartsClipPathProps = {
  *
  * - [ChartsClipPath API](https://mui.com/x/api/charts/charts-clip-path/)
  */
-declare function ChartsClipPath(props: ChartsClipPathProps): import("react/jsx-runtime").JSX.Element;
+declare function ChartsClipPath(props: ChartsClipPathProps): import("react").JSX.Element;
 declare namespace ChartsClipPath {
   var propTypes: any;
 }

package/ChartsClipPath/ChartsClipPath.d.ts

@@ -20,7 +20,7 @@ export type ChartsClipPathProps = {
  *
  * - [ChartsClipPath API](https://mui.com/x/api/charts/charts-clip-path/)
  */
-declare function ChartsClipPath(props: ChartsClipPathProps): import("react/jsx-runtime").JSX.Element;
+declare function ChartsClipPath(props: ChartsClipPathProps): import("react").JSX.Element;
 declare namespace ChartsClipPath {
   var propTypes: any;
 }

package/ChartsDataProvider/ChartsDataProvider.d.mts

@@ -44,7 +44,7 @@ export type ChartsDataProviderProps<SeriesType extends ChartSeriesType = ChartSe
  * </ChartsDataProvider>
  * ```
  */
-declare function ChartsDataProvider<SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>>(props: ChartsDataProviderProps<SeriesType, TSignatures>): import("react/jsx-runtime").JSX.Element;
+declare function ChartsDataProvider<SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>>(props: ChartsDataProviderProps<SeriesType, TSignatures>): React.JSX.Element;
 declare namespace ChartsDataProvider {
   var propTypes: any;
 }

package/ChartsDataProvider/ChartsDataProvider.d.ts

@@ -44,7 +44,7 @@ export type ChartsDataProviderProps<SeriesType extends ChartSeriesType = ChartSe
  * </ChartsDataProvider>
  * ```
  */
-declare function ChartsDataProvider<SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>>(props: ChartsDataProviderProps<SeriesType, TSignatures>): import("react/jsx-runtime").JSX.Element;
+declare function ChartsDataProvider<SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>>(props: ChartsDataProviderProps<SeriesType, TSignatures>): React.JSX.Element;
 declare namespace ChartsDataProvider {
   var propTypes: any;
 }

package/ChartsDataProvider/useChartsDataProviderProps.d.mts

@@ -4,7 +4,7 @@ import type { ChartAnyPluginSignature } from "../internals/plugins/models/index.
 import type { ChartSeriesType } from "../models/seriesType/config.mjs";
 import type { AllPluginSignatures } from "../internals/plugins/allPlugins.mjs";
 import type { ChartsLocalizationProviderProps } from "../ChartsLocalizationProvider/index.mjs";
-export declare const useChartsDataProviderProps: <SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>>(inProps: ChartsDataProviderProps<SeriesType, TSignatures> & ChartsLocalizationProviderProps) => {
+export declare const useChartsDataProviderProps: <SeriesType extends ChartSeriesType = keyof import("../internals/index.mjs").ChartsSeriesConfig, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>>(inProps: ChartsDataProviderProps<SeriesType, TSignatures> & ChartsLocalizationProviderProps) => {
   children: import("react").ReactNode;
   localeText: Partial<import("../locales/index.mjs").ChartsLocaleText> | undefined;
   chartProviderProps: ChartsProviderProps<SeriesType, TSignatures>;

package/ChartsDataProvider/useChartsDataProviderProps.d.ts

@@ -4,7 +4,7 @@ import type { ChartAnyPluginSignature } from "../internals/plugins/models/index.
 import type { ChartSeriesType } from "../models/seriesType/config.js";
 import type { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 import type { ChartsLocalizationProviderProps } from "../ChartsLocalizationProvider/index.js";
-export declare const useChartsDataProviderProps: <SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>>(inProps: ChartsDataProviderProps<SeriesType, TSignatures> & ChartsLocalizationProviderProps) => {
+export declare const useChartsDataProviderProps: <SeriesType extends ChartSeriesType = keyof import("../internals/index.js").ChartsSeriesConfig, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>>(inProps: ChartsDataProviderProps<SeriesType, TSignatures> & ChartsLocalizationProviderProps) => {
   children: import("react").ReactNode;
   localeText: Partial<import("../locales/index.js").ChartsLocaleText> | undefined;
   chartProviderProps: ChartsProviderProps<SeriesType, TSignatures>;

package/ChartsGrid/ChartsGrid.d.mts

@@ -26,7 +26,7 @@ export interface ChartsGridProps {
  *
  * - [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/)
  */
-declare function ChartsGrid(inProps: ChartsGridProps): import("react/jsx-runtime").JSX.Element;
+declare function ChartsGrid(inProps: ChartsGridProps): import("react").JSX.Element;
 declare namespace ChartsGrid {
   var propTypes: any;
 }

package/ChartsGrid/ChartsGrid.d.ts

@@ -26,7 +26,7 @@ export interface ChartsGridProps {
  *
  * - [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/)
  */
-declare function ChartsGrid(inProps: ChartsGridProps): import("react/jsx-runtime").JSX.Element;
+declare function ChartsGrid(inProps: ChartsGridProps): import("react").JSX.Element;
 declare namespace ChartsGrid {
   var propTypes: any;
 }

package/ChartsGrid/ChartsHorizontalGrid.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { ComputedYAxis } from "../models/axis.mjs";
 import type { ChartsGridClasses } from "./chartsGridClasses.mjs";
 interface ChartsGridHorizontalProps {
@@ -9,5 +10,5 @@ interface ChartsGridHorizontalProps {
 /**
  * @ignore - internal component.
  */
-export declare function ChartsGridHorizontal(props: ChartsGridHorizontalProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartsGridHorizontal(props: ChartsGridHorizontalProps): React.JSX.Element;
 export {};

package/ChartsGrid/ChartsHorizontalGrid.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { ComputedYAxis } from "../models/axis.js";
 import type { ChartsGridClasses } from "./chartsGridClasses.js";
 interface ChartsGridHorizontalProps {
@@ -9,5 +10,5 @@ interface ChartsGridHorizontalProps {
 /**
  * @ignore - internal component.
  */
-export declare function ChartsGridHorizontal(props: ChartsGridHorizontalProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartsGridHorizontal(props: ChartsGridHorizontalProps): React.JSX.Element;
 export {};

package/ChartsGrid/ChartsVerticalGrid.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { ComputedXAxis } from "../models/axis.mjs";
 import type { ChartsGridClasses } from "./chartsGridClasses.mjs";
 interface ChartsGridVerticalProps {
@@ -9,5 +10,5 @@ interface ChartsGridVerticalProps {
 /**
  * @ignore - internal component.
  */
-export declare function ChartsGridVertical(props: ChartsGridVerticalProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartsGridVertical(props: ChartsGridVerticalProps): React.JSX.Element;
 export {};

package/ChartsGrid/ChartsVerticalGrid.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { ComputedXAxis } from "../models/axis.js";
 import type { ChartsGridClasses } from "./chartsGridClasses.js";
 interface ChartsGridVerticalProps {
@@ -9,5 +10,5 @@ interface ChartsGridVerticalProps {
 /**
  * @ignore - internal component.
  */
-export declare function ChartsGridVertical(props: ChartsGridVerticalProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartsGridVertical(props: ChartsGridVerticalProps): React.JSX.Element;
 export {};

package/ChartsLabel/labelGradientClasses.d.mts

@@ -13,4 +13,4 @@ export interface ChartsLabelGradientClasses {
 }
 export declare function getLabelGradientUtilityClass(slot: string): string;
 export declare const labelGradientClasses: ChartsLabelGradientClasses;
-export declare const useUtilityClasses: (props: ChartsLabelGradientProps) => Record<"root" | "fill" | "mask", string>;
+export declare const useUtilityClasses: (props: ChartsLabelGradientProps) => Record<"fill" | "mask" | "root", string>;

package/ChartsLabel/labelGradientClasses.d.ts

@@ -13,4 +13,4 @@ export interface ChartsLabelGradientClasses {
 }
 export declare function getLabelGradientUtilityClass(slot: string): string;
 export declare const labelGradientClasses: ChartsLabelGradientClasses;
-export declare const useUtilityClasses: (props: ChartsLabelGradientProps) => Record<"root" | "fill" | "mask", string>;
+export declare const useUtilityClasses: (props: ChartsLabelGradientProps) => Record<"fill" | "mask" | "root", string>;

package/ChartsLabel/labelMarkClasses.d.mts

@@ -14,4 +14,4 @@ export interface ChartsLabelMarkClasses {
   fill: string;
 }
 export declare const labelMarkClasses: ChartsLabelMarkClasses;
-export declare const useUtilityClasses: (props: ChartsLabelMarkProps) => Record<"root" | "fill", string>;
+export declare const useUtilityClasses: (props: ChartsLabelMarkProps) => Record<"fill" | "root", string>;

package/ChartsLabel/labelMarkClasses.d.ts

@@ -14,4 +14,4 @@ export interface ChartsLabelMarkClasses {
   fill: string;
 }
 export declare const labelMarkClasses: ChartsLabelMarkClasses;
-export declare const useUtilityClasses: (props: ChartsLabelMarkProps) => Record<"root" | "fill", string>;
+export declare const useUtilityClasses: (props: ChartsLabelMarkProps) => Record<"fill" | "root", string>;

package/ChartsLegend/chartsLegend.types.d.mts

@@ -1,3 +1,4 @@
+import type { WithDataAttributes } from '@mui/utils/types';
 import type { ChartsLegendProps } from "./ChartsLegend.mjs";
 import type { ContinuousColorLegendProps } from "./ContinuousColorLegend.mjs";
 import type { ChartsLegendPosition } from "./legend.types.mjs";
@@ -11,7 +12,7 @@ export interface ChartsLegendSlots {
   legend?: React.JSXElementConstructor<ChartsLegendProps & LegendPropsOverrides> | React.JSXElementConstructor<ContinuousColorLegendProps & LegendPropsOverrides> | React.JSXElementConstructor<PiecewiseColorLegendProps & LegendPropsOverrides>;
 }
 export interface ChartsLegendSlotProps {
-  legend?: Partial<ChartsLegendProps | ContinuousColorLegendProps | PiecewiseColorLegendProps> & ChartsLegendPosition & LegendPropsOverrides;
+  legend?: WithDataAttributes<Partial<ChartsLegendProps | ContinuousColorLegendProps | PiecewiseColorLegendProps> & ChartsLegendPosition & LegendPropsOverrides>;
 }
 export interface ChartsLegendSlotExtension {
   /**