@mui/x-charts 9.7.0 → 9.9.0

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").ReactPortal | import("react").JSX.Element[] | 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").ReactPortal | import("react").JSX.Element[] | 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/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/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/ChartsLocalizationProvider/ChartsLocalizationProvider.d.mts

@@ -20,7 +20,7 @@ export interface ChartsLocalizationProviderProps {
  *
  * - [ChartsLocalizationProvider API](https://mui.com/x/api/charts/charts-localization-provider/)
  */
-declare function ChartsLocalizationProvider(inProps: ChartsLocalizationProviderProps): import("react/jsx-runtime").JSX.Element;
+declare function ChartsLocalizationProvider(inProps: ChartsLocalizationProviderProps): React.JSX.Element;
 declare namespace ChartsLocalizationProvider {
   var propTypes: any;
 }

package/ChartsLocalizationProvider/ChartsLocalizationProvider.d.ts

@@ -20,7 +20,7 @@ export interface ChartsLocalizationProviderProps {
  *
  * - [ChartsLocalizationProvider API](https://mui.com/x/api/charts/charts-localization-provider/)
  */
-declare function ChartsLocalizationProvider(inProps: ChartsLocalizationProviderProps): import("react/jsx-runtime").JSX.Element;
+declare function ChartsLocalizationProvider(inProps: ChartsLocalizationProviderProps): React.JSX.Element;
 declare namespace ChartsLocalizationProvider {
   var propTypes: any;
 }

package/ChartsOverlay/ChartsLoadingOverlay.d.mts

@@ -1,2 +1,2 @@
 import type { CommonOverlayProps } from "./ChartsOverlay.mjs";
-export declare function ChartsLoadingOverlay(props: CommonOverlayProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartsLoadingOverlay(props: CommonOverlayProps): import("react").JSX.Element;

package/ChartsOverlay/ChartsLoadingOverlay.d.ts

@@ -1,2 +1,2 @@
 import type { CommonOverlayProps } from "./ChartsOverlay.js";
-export declare function ChartsLoadingOverlay(props: CommonOverlayProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartsLoadingOverlay(props: CommonOverlayProps): import("react").JSX.Element;

package/ChartsOverlay/ChartsNoDataOverlay.d.mts

@@ -1,2 +1,2 @@
 import type { CommonOverlayProps } from "./ChartsOverlay.mjs";
-export declare function ChartsNoDataOverlay(props: CommonOverlayProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartsNoDataOverlay(props: CommonOverlayProps): import("react").JSX.Element;

package/ChartsOverlay/ChartsNoDataOverlay.d.ts

@@ -1,2 +1,2 @@
 import type { CommonOverlayProps } from "./ChartsOverlay.js";
-export declare function ChartsNoDataOverlay(props: CommonOverlayProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartsNoDataOverlay(props: CommonOverlayProps): import("react").JSX.Element;

package/ChartsOverlay/ChartsOverlay.d.mts

@@ -39,4 +39,4 @@ export interface ChartsOverlayProps {
    */
   slotProps?: ChartsOverlaySlotProps;
 }
-export declare function ChartsOverlay(props: ChartsOverlayProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ChartsOverlay(props: ChartsOverlayProps): React.JSX.Element | null;

package/ChartsOverlay/ChartsOverlay.d.ts

@@ -39,4 +39,4 @@ export interface ChartsOverlayProps {
    */
   slotProps?: ChartsOverlaySlotProps;
 }
-export declare function ChartsOverlay(props: ChartsOverlayProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ChartsOverlay(props: ChartsOverlayProps): React.JSX.Element | null;

package/ChartsRadialAxisHighlight/ChartsRadialAxisHighlight.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { ChartsRadialAxisHighlightProps } from "./ChartsRadialAxisHighlight.types.mjs";
 /**
  * Demos:
@@ -8,7 +9,7 @@ import type { ChartsRadialAxisHighlightProps } from "./ChartsRadialAxisHighlight
  *
  * - [ChartsRadialAxisHighlight API](https://mui.com/x/api/charts/charts-radial-axis-highlight/)
  */
-declare function ChartsRadialAxisHighlight(props: ChartsRadialAxisHighlightProps): import("react/jsx-runtime").JSX.Element;
+declare function ChartsRadialAxisHighlight(props: ChartsRadialAxisHighlightProps): React.JSX.Element;
 declare namespace ChartsRadialAxisHighlight {
   var propTypes: any;
 }

package/ChartsRadialAxisHighlight/ChartsRadialAxisHighlight.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { ChartsRadialAxisHighlightProps } from "./ChartsRadialAxisHighlight.types.js";
 /**
  * Demos:
@@ -8,7 +9,7 @@ import type { ChartsRadialAxisHighlightProps } from "./ChartsRadialAxisHighlight
  *
  * - [ChartsRadialAxisHighlight API](https://mui.com/x/api/charts/charts-radial-axis-highlight/)
  */
-declare function ChartsRadialAxisHighlight(props: ChartsRadialAxisHighlightProps): import("react/jsx-runtime").JSX.Element;
+declare function ChartsRadialAxisHighlight(props: ChartsRadialAxisHighlightProps): React.JSX.Element;
 declare namespace ChartsRadialAxisHighlight {
   var propTypes: any;
 }

package/ChartsRadialAxisHighlight/ChartsRadiusAxisHighlight.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { ChartsRadialAxisHighlightRadiusType } from "./ChartsRadialAxisHighlight.types.mjs";
 import type { ChartsRadialAxisHighlightClasses } from "./chartsRadialAxisHighlightClasses.mjs";
 /**
@@ -6,4 +7,4 @@ import type { ChartsRadialAxisHighlightClasses } from "./chartsRadialAxisHighlig
 export default function ChartsRadiusAxisHighlight(props: {
   type: ChartsRadialAxisHighlightRadiusType;
   classes: ChartsRadialAxisHighlightClasses;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): React.JSX.Element | null;

package/ChartsRadialAxisHighlight/ChartsRadiusAxisHighlight.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { ChartsRadialAxisHighlightRadiusType } from "./ChartsRadialAxisHighlight.types.js";
 import type { ChartsRadialAxisHighlightClasses } from "./chartsRadialAxisHighlightClasses.js";
 /**
@@ -6,4 +7,4 @@ import type { ChartsRadialAxisHighlightClasses } from "./chartsRadialAxisHighlig
 export default function ChartsRadiusAxisHighlight(props: {
   type: ChartsRadialAxisHighlightRadiusType;
   classes: ChartsRadialAxisHighlightClasses;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): React.JSX.Element | null;

package/ChartsRadialAxisHighlight/ChartsRotationAxisHighlight.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { ChartsRadialAxisHighlightRotationType } from "./ChartsRadialAxisHighlight.types.mjs";
 import type { ChartsRadialAxisHighlightClasses } from "./chartsRadialAxisHighlightClasses.mjs";
 /**
@@ -6,4 +7,4 @@ import type { ChartsRadialAxisHighlightClasses } from "./chartsRadialAxisHighlig
 export default function ChartsRotationAxisHighlight(props: {
   type: ChartsRadialAxisHighlightRotationType;
   classes: ChartsRadialAxisHighlightClasses;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): React.JSX.Element | null;

package/ChartsRadialAxisHighlight/ChartsRotationAxisHighlight.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { ChartsRadialAxisHighlightRotationType } from "./ChartsRadialAxisHighlight.types.js";
 import type { ChartsRadialAxisHighlightClasses } from "./chartsRadialAxisHighlightClasses.js";
 /**
@@ -6,4 +7,4 @@ import type { ChartsRadialAxisHighlightClasses } from "./chartsRadialAxisHighlig
 export default function ChartsRotationAxisHighlight(props: {
   type: ChartsRadialAxisHighlightRotationType;
   classes: ChartsRadialAxisHighlightClasses;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): React.JSX.Element | null;

package/ChartsRadialDataProvider/ChartsRadialDataProvider.d.mts

@@ -31,7 +31,7 @@ export type ChartsRadialDataProviderProps<SeriesType extends PolarChartSeriesTyp
  *
  * - [ChartsRadialDataProvider API](https://mui.com/x/api/charts/charts-radial-data-provider/)
  */
-declare function ChartsRadialDataProvider<SeriesType extends PolarChartSeriesType = PolarChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = RadialPluginSignatures<SeriesType>>(props: ChartsRadialDataProviderProps<SeriesType, TSignatures>): import("react/jsx-runtime").JSX.Element;
+declare function ChartsRadialDataProvider<SeriesType extends PolarChartSeriesType = PolarChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = RadialPluginSignatures<SeriesType>>(props: ChartsRadialDataProviderProps<SeriesType, TSignatures>): React.JSX.Element;
 declare namespace ChartsRadialDataProvider {
   var propTypes: any;
 }

package/ChartsRadialDataProvider/ChartsRadialDataProvider.d.ts

@@ -31,7 +31,7 @@ export type ChartsRadialDataProviderProps<SeriesType extends PolarChartSeriesTyp
  *
  * - [ChartsRadialDataProvider API](https://mui.com/x/api/charts/charts-radial-data-provider/)
  */
-declare function ChartsRadialDataProvider<SeriesType extends PolarChartSeriesType = PolarChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = RadialPluginSignatures<SeriesType>>(props: ChartsRadialDataProviderProps<SeriesType, TSignatures>): import("react/jsx-runtime").JSX.Element;
+declare function ChartsRadialDataProvider<SeriesType extends PolarChartSeriesType = PolarChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = RadialPluginSignatures<SeriesType>>(props: ChartsRadialDataProviderProps<SeriesType, TSignatures>): React.JSX.Element;
 declare namespace ChartsRadialDataProvider {
   var propTypes: any;
 }

package/ChartsRadialGrid/ChartsRadialGrid.d.mts

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

package/ChartsRadialGrid/ChartsRadialGrid.d.ts

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

package/ChartsRadialGrid/ChartsRadiusGrid.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { ChartsRadialGridClasses } from "./chartsRadialGridClasses.mjs";
 import type { PolarAxisDefaultized } from "../models/axis.mjs";
 interface ChartsRadiusGridProps {
@@ -10,5 +11,5 @@ interface ChartsRadiusGridProps {
 /**
  * @ignore - internal component.
  */
-export declare function ChartsRadiusGrid(props: ChartsRadiusGridProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartsRadiusGrid(props: ChartsRadiusGridProps): React.JSX.Element;
 export {};

package/ChartsRadialGrid/ChartsRadiusGrid.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { ChartsRadialGridClasses } from "./chartsRadialGridClasses.js";
 import type { PolarAxisDefaultized } from "../models/axis.js";
 interface ChartsRadiusGridProps {
@@ -10,5 +11,5 @@ interface ChartsRadiusGridProps {
 /**
  * @ignore - internal component.
  */
-export declare function ChartsRadiusGrid(props: ChartsRadiusGridProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartsRadiusGrid(props: ChartsRadiusGridProps): React.JSX.Element;
 export {};

package/ChartsRadialGrid/ChartsRotationGrid.d.mts

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