@mui/x-charts 7.15.0 → 7.17.0

package/ChartsLegend/LegendPerItem.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { DrawingArea } from '../context/DrawingProvider';
-import { DefaultizedProps } from '../models/helpers';
 import { ChartsTextStyle } from '../ChartsText';
 import { CardinalDirections } from '../models/layout';
-import type { ChartsLegendProps } from './ChartsLegend';
 import { LegendItemParams } from './chartsLegend.types';
-import { AnchorPosition, Direction } from './legend.types';
+import { AnchorPosition, Direction, LegendPlacement } from './legend.types';
+import { ChartsLegendClasses } from './chartsLegendClasses';
+import { DefaultizedProps } from '../models/helpers';
 export type ChartsLegendRootOwnerState = {
     position: AnchorPosition;
     direction: Direction;
@@ -15,12 +15,15 @@ export type ChartsLegendRootOwnerState = {
     seriesNumber: number;
 };
 export declare const ChartsLegendRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.SVGProps<SVGGElement>, keyof React.SVGProps<SVGGElement>>, {}>;
-export interface LegendPerItemProps extends DefaultizedProps<Omit<ChartsLegendProps, 'slots' | 'slotProps'>, 'direction' | 'position'> {
+export interface LegendPerItemProps extends DefaultizedProps<LegendPlacement, keyof LegendPlacement> {
     /**
      * The ordered array of item to display in the legend.
      */
     itemsToDisplay: LegendItemParams[];
-    classes?: Record<'mark' | 'series' | 'root', string>;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<ChartsLegendClasses>;
     /**
      * Style applied to legend labels.
      * @default theme.typography.subtitle1
@@ -52,10 +55,11 @@ export interface LegendPerItemProps extends DefaultizedProps<Omit<ChartsLegendPr
      * @default 10
      */
     padding?: number | Partial<CardinalDirections<number>>;
+    onItemClick?: (event: React.MouseEvent<SVGRectElement, MouseEvent>, index: number) => void;
 }
 /**
  * Internal component to display an array of items as a legend.
  * Used for series legend, and threshold color legend.
  * @ignore - Do not document
  */
-export declare function LegendPerItem(props: LegendPerItemProps): React.JSX.Element | null;
+export declare function LegendPerItem(props: LegendPerItemProps): React.JSX.Element;

package/ChartsLegend/LegendPerItem.js

@@ -1,15 +1,17 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["rotate", "dominantBaseline"];
 import * as React from 'react';
 import NoSsr from '@mui/material/NoSsr';
 import { useTheme, styled } from '@mui/material/styles';
-import { useRtl } from '@mui/system/RtlProvider';
-import { ChartsText } from '../ChartsText';
-import { getWordsByLines } from '../internals/getWordsByLines';
-import { legendItemPlacements } from './legendItemsPlacement';
-import { useDrawingArea } from '../hooks/useDrawingArea';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getWordsByLines } from "../internals/getWordsByLines.js";
+import { legendItemPlacements } from "./legendItemsPlacement.js";
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
+import { ChartsLegendItem } from "./ChartsLegendItem.js";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const ChartsLegendRoot = styled('g', {
   name: 'MuiChartsLegend',
   slot: 'Root',
@@ -42,7 +44,6 @@ const getStandardizedPadding = padding => {
  */
 export function LegendPerItem(props) {
   const {
-    hidden,
     position,
     direction,
     itemsToDisplay,
@@ -52,10 +53,10 @@ export function LegendPerItem(props) {
     markGap = 5,
     itemGap = 10,
     padding: paddingProps = 10,
-    labelStyle: inLabelStyle
+    labelStyle: inLabelStyle,
+    onItemClick
   } = props;
   const theme = useTheme();
-  const isRtl = useRtl();
   const drawingArea = useDrawingArea();
   const labelStyle = React.useMemo(() => _extends({}, theme.typography.subtitle1, {
     color: 'inherit',
@@ -108,35 +109,21 @@ export function LegendPerItem(props) {
         return (totalHeight - legendHeight) / 2;
     }
   }, [position.vertical, padding.top, padding.bottom, totalHeight, legendHeight]);
-  if (hidden) {
-    return null;
-  }
   return /*#__PURE__*/_jsx(NoSsr, {
     children: /*#__PURE__*/_jsx(ChartsLegendRoot, {
       className: classes?.root,
-      children: itemsWithPosition.map(({
-        id,
-        label,
-        color,
-        positionX,
-        positionY
-      }) => /*#__PURE__*/_jsxs("g", {
-        className: classes?.series,
-        transform: `translate(${gapX + (isRtl ? legendWidth - positionX : positionX)} ${gapY + positionY})`,
-        children: [/*#__PURE__*/_jsx("rect", {
-          className: classes?.mark,
-          x: isRtl ? -itemMarkWidth : 0,
-          y: -itemMarkHeight / 2,
-          width: itemMarkWidth,
-          height: itemMarkHeight,
-          fill: color
-        }), /*#__PURE__*/_jsx(ChartsText, {
-          style: labelStyle,
-          text: label,
-          x: (isRtl ? -1 : 1) * (itemMarkWidth + markGap),
-          y: 0
-        })]
-      }, id))
+      children: itemsWithPosition.map((item, i) => /*#__PURE__*/_createElement(ChartsLegendItem, _extends({}, item, {
+        key: item.id,
+        gapX: gapX,
+        gapY: gapY,
+        legendWidth: legendWidth,
+        itemMarkHeight: itemMarkHeight,
+        itemMarkWidth: itemMarkWidth,
+        markGap: markGap,
+        labelStyle: labelStyle,
+        classes: classes,
+        onClick: onItemClick ? e => onItemClick(e, i) : undefined
+      })))
     })
   });
 }

package/ChartsLegend/PiecewiseColorLegend.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { ColorLegendSelector, PiecewiseLabelFormatterParams } from './legend.types';
 import { LegendPerItemProps } from './LegendPerItem';
-export interface PiecewiseColorLegendProps extends ColorLegendSelector, Omit<LegendPerItemProps, 'itemsToDisplay'> {
+import { PiecewiseColorLegendItemContext } from './chartsLegend.types';
+export interface PiecewiseColorLegendProps extends ColorLegendSelector, Omit<LegendPerItemProps, 'itemsToDisplay' | 'onItemClick'> {
     /**
      * Hide the first item of the legend, corresponding to the [-infinity, min] piece.
      * @default false
@@ -18,6 +19,13 @@ export interface PiecewiseColorLegendProps extends ColorLegendSelector, Omit<Leg
      * @returns {string|null} The displayed label, or `null` to skip the item.
      */
     labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+    /**
+     * Callback fired when a legend item is clicked.
+     * @param {React.MouseEvent<SVGRectElement, MouseEvent>} event The click event.
+     * @param {PiecewiseColorLegendItemContext} legendItem The legend item data.
+     * @param {number} index The index of the clicked legend item.
+     */
+    onItemClick?: (event: React.MouseEvent<SVGRectElement, MouseEvent>, legendItem: PiecewiseColorLegendItemContext, index: number) => void;
 }
 declare function PiecewiseColorLegend(props: PiecewiseColorLegendProps): React.JSX.Element | null;
 declare namespace PiecewiseColorLegend {

package/ChartsLegend/PiecewiseColorLegend.js

@@ -1,11 +1,13 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["axisDirection", "axisId", "hideFirst", "hideLast", "labelFormatter"];
+const _excluded = ["axisDirection", "axisId", "hideFirst", "hideLast", "labelFormatter", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useAxis } from './useAxis';
-import { LegendPerItem } from './LegendPerItem';
-import { notNull } from '../internals/notNull';
+import { useAxis } from "./useAxis.js";
+import { LegendPerItem } from "./LegendPerItem.js";
+import { notNull } from "../internals/notNull.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function defaultLabelFormatter(params) {
   if (params.min === null) {
@@ -16,13 +18,21 @@ function defaultLabelFormatter(params) {
   }
   return `${params.formattedMin}-${params.formattedMax}`;
 }
+const piecewiseColorContextBuilder = context => ({
+  type: 'piecewiseColor',
+  color: context.color,
+  label: context.label,
+  maxValue: context.maxValue,
+  minValue: context.minValue
+});
 function PiecewiseColorLegend(props) {
   const {
       axisDirection,
       axisId,
       hideFirst,
       hideLast,
-      labelFormatter = defaultLabelFormatter
+      labelFormatter = defaultLabelFormatter,
+      onItemClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const axisItem = useAxis({
@@ -43,30 +53,34 @@ function PiecewiseColorLegend(props) {
     if (hideFirst && isFirst || hideLast && isLast) {
       return null;
     }
-    const label = labelFormatter(_extends({}, index === 0 ? {
+    const data = _extends({}, isFirst ? {
       min: null,
       formattedMin: null
     } : {
       min: colorMap.thresholds[index - 1],
       formattedMin: formattedLabels[index - 1]
-    }, index === colorMap.colors.length - 1 ? {
+    }, isLast ? {
       max: null,
       formattedMax: null
     } : {
       max: colorMap.thresholds[index],
       formattedMax: formattedLabels[index]
-    }));
+    });
+    const label = labelFormatter(data);
     if (label === null) {
       return null;
     }
     return {
       id: label,
       color,
-      label
+      label,
+      minValue: data.min,
+      maxValue: data.max
     };
   }).filter(notNull);
   return /*#__PURE__*/_jsx(LegendPerItem, _extends({}, other, {
-    itemsToDisplay: itemsToDisplay
+    itemsToDisplay: itemsToDisplay,
+    onItemClick: onItemClick ? (e, i) => onItemClick(e, piecewiseColorContextBuilder(itemsToDisplay[i]), i) : undefined
   }));
 }
 process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
@@ -93,11 +107,6 @@ process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
    * The default depends on the chart.
    */
   direction: PropTypes.oneOf(['column', 'row']).isRequired,
-  /**
-   * Set to true to hide the legend.
-   * @default false
-   */
-  hidden: PropTypes.bool,
   /**
    * Hide the first item of the legend, corresponding to the [-infinity, min] piece.
    * @default false
@@ -139,6 +148,13 @@ process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
    * @default 5
    */
   markGap: PropTypes.number,
+  /**
+   * Callback fired when a legend item is clicked.
+   * @param {React.MouseEvent<SVGRectElement, MouseEvent>} event The click event.
+   * @param {PiecewiseColorLegendItemContext} legendItem The legend item data.
+   * @param {number} index The index of the clicked legend item.
+   */
+  onItemClick: PropTypes.func,
   /**
    * Legend padding (in px).
    * Can either be a single number, or an object with top, left, bottom, right properties.

package/ChartsLegend/chartsLegend.types.d.ts

@@ -1,5 +1,7 @@
 import { ChartsTextStyle } from '../ChartsText';
-export interface LegendItemParams {
+import { PieItemId } from '../models';
+import { SeriesId } from '../models/seriesType/common';
+interface LegendItemContextBase {
     /**
      * The color used in the legend
      */
@@ -8,12 +10,47 @@ export interface LegendItemParams {
      * The label displayed in the legend
      */
     label: string;
+}
+export interface LegendItemParams extends Partial<Omit<SeriesLegendItemContext, 'type' | keyof LegendItemContextBase>>, Partial<Omit<PiecewiseColorLegendItemContext, 'type' | keyof LegendItemContextBase>>, LegendItemContextBase {
     /**
      * The identifier of the legend element.
      * Used for internal purpose such as `key` props
      */
     id: number | string;
 }
+export interface SeriesLegendItemContext extends LegendItemContextBase {
+    /**
+     * The type of the legend item
+     * - `series` is used for series legend item
+     * - `piecewiseColor` is used for piecewise color legend item
+     */
+    type: 'series';
+    /**
+     * The identifier of the series
+     */
+    seriesId: SeriesId;
+    /**
+     * The identifier of the pie item
+     */
+    itemId?: PieItemId;
+}
+export interface PiecewiseColorLegendItemContext extends LegendItemContextBase {
+    /**
+     * The type of the legend item
+     * - `series` is used for series legend item
+     * - `piecewiseColor` is used for piecewise color legend item
+     */
+    type: 'piecewiseColor';
+    /**
+     * The minimum value of the category
+     */
+    minValue: number | Date | null;
+    /**
+     * The maximum value of the category
+     */
+    maxValue: number | Date | null;
+}
+export type LegendItemContext = SeriesLegendItemContext | PiecewiseColorLegendItemContext;
 export interface LegendItemWithPosition extends LegendItemParams {
     positionX: number;
     positionY: number;
@@ -29,3 +66,4 @@ export type GetItemSpaceType = (label: string, inStyle?: ChartsTextStyle) => {
     outerWidth: number;
     outerHeight: number;
 };
+export {};

package/ChartsLegend/chartsLegendClasses.d.ts

@@ -3,6 +3,8 @@ export interface ChartsLegendClasses {
     root: string;
     /** Styles applied to a series element. */
     series: string;
+    /** Styles applied to the item background. */
+    itemBackground: string;
     /** Styles applied to series mark element. */
     mark: string;
     /** Styles applied to the series label. */

package/ChartsLegend/chartsLegendClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClass as generateUtilityClass, unstable_generat
 export function getLegendUtilityClass(slot) {
   return generateUtilityClass('MuiChartsLegend', slot);
 }
-export const legendClasses = generateUtilityClasses('MuiChartsLegend', ['root', 'series', 'mark', 'label', 'column', 'row']);
+export const legendClasses = generateUtilityClasses('MuiChartsLegend', ['root', 'series', 'itemBackground', 'mark', 'label', 'column', 'row']);

package/ChartsLegend/index.js

@@ -1,6 +1,6 @@
-export * from './ChartsLegend';
-export * from './DefaultChartsLegend';
-export * from './ContinuousColorLegend';
-export * from './PiecewiseColorLegend';
-export * from './chartsLegendClasses';
-export * from './utils';
+export * from "./ChartsLegend.js";
+export * from "./DefaultChartsLegend.js";
+export * from "./ContinuousColorLegend.js";
+export * from "./PiecewiseColorLegend.js";
+export * from "./chartsLegendClasses.js";
+export * from "./utils.js";

package/ChartsLegend/useAxis.js

@@ -1,6 +1,8 @@
+'use client';
+
 import * as React from 'react';
-import { ZAxisContext } from '../context/ZAxisContextProvider';
-import { useCartesianContext } from '../context/CartesianProvider/useCartesianContext';
+import { ZAxisContext } from "../context/ZAxisContextProvider.js";
+import { useCartesianContext } from "../context/CartesianProvider/useCartesianContext.js";
 /**
  * Helper to select an axis definition according to its direction and id.
  */

package/ChartsLegend/utils.js

@@ -1,7 +1,7 @@
-import getBarLegend from '../BarChart/legend';
-import getScatterLegend from '../ScatterChart/legend';
-import getLineLegend from '../LineChart/legend';
-import getPieLegend from '../PieChart/legend';
+import getBarLegend from "../BarChart/legend.js";
+import getScatterLegend from "../ScatterChart/legend.js";
+import getLineLegend from "../LineChart/legend.js";
+import getPieLegend from "../PieChart/legend.js";
 const legendGetter = {
   bar: getBarLegend,
   scatter: getScatterLegend,

package/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -1,9 +1,11 @@
+'use client';
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { InteractionContext } from '../context/InteractionProvider';
-import { useSeries } from '../hooks/useSeries';
-import { useSvgRef } from '../hooks';
-import { useCartesianContext } from '../context/CartesianProvider';
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useSeries } from "../hooks/useSeries.js";
+import { useSvgRef } from "../hooks/index.js";
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsOnAxisClickHandler(props) {
   const {
@@ -27,7 +29,7 @@ function ChartsOnAxisClickHandler(props) {
     }
     const handleMouseClick = event => {
       event.preventDefault();
-      const isXaxis = (axis.x && axis.x.index) !== undefined;
+      const isXaxis = axis.x && axis.x.index !== -1;
       const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
       const dataIndex = isXaxis ? axis.x && axis.x.index : axis.y && axis.y.index;
       if (dataIndex == null) {

package/ChartsOnAxisClickHandler/index.js

@@ -1 +1 @@
-export * from './ChartsOnAxisClickHandler';
+export * from "./ChartsOnAxisClickHandler.js";

package/ChartsOverlay/ChartsLoadingOverlay.js

@@ -1,9 +1,11 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["message"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import { useDrawingArea } from '../hooks/useDrawingArea';
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledText = styled('text')(({
   theme

package/ChartsOverlay/ChartsNoDataOverlay.js

@@ -1,9 +1,11 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["message"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import { useDrawingArea } from '../hooks/useDrawingArea';
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledText = styled('text')(({
   theme

package/ChartsOverlay/ChartsOverlay.js

@@ -1,8 +1,10 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { ChartsLoadingOverlay } from './ChartsLoadingOverlay';
-import { useSeries } from '../hooks/useSeries';
-import { ChartsNoDataOverlay } from './ChartsNoDataOverlay';
+import { ChartsLoadingOverlay } from "./ChartsLoadingOverlay.js";
+import { useSeries } from "../hooks/useSeries.js";
+import { ChartsNoDataOverlay } from "./ChartsNoDataOverlay.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function useNoData() {
   const seriesPerType = useSeries();

package/ChartsOverlay/index.js

@@ -1,3 +1,3 @@
-export { ChartsOverlay } from './ChartsOverlay';
-export { ChartsLoadingOverlay } from './ChartsLoadingOverlay';
-export { ChartsNoDataOverlay } from './ChartsNoDataOverlay';
+export { ChartsOverlay } from "./ChartsOverlay.js";
+export { ChartsLoadingOverlay } from "./ChartsLoadingOverlay.js";
+export { ChartsNoDataOverlay } from "./ChartsNoDataOverlay.js";

package/ChartsReferenceLine/ChartsReferenceLine.js

@@ -1,8 +1,10 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { ChartsXReferenceLine } from './ChartsXReferenceLine';
-import { ChartsYReferenceLine } from './ChartsYReferenceLine';
+import { ChartsXReferenceLine } from "./ChartsXReferenceLine.js";
+import { ChartsYReferenceLine } from "./ChartsYReferenceLine.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsReferenceLine(props) {
   const {

package/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -1,11 +1,13 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
-import { useDrawingArea, useXScale } from '../hooks';
-import { ReferenceLineRoot } from './common';
-import { ChartsText } from '../ChartsText';
-import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
-import { warnOnce } from '../internals/warning';
+import { warnOnce } from '@mui/x-internals/warning';
+import { useDrawingArea, useXScale } from "../hooks/index.js";
+import { ReferenceLineRoot } from "./common.js";
+import { ChartsText } from "../ChartsText/index.js";
+import { getReferenceLineUtilityClass } from "./chartsReferenceLineClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getTextParams = ({
   top,

package/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -1,11 +1,13 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
-import { useDrawingArea, useYScale } from '../hooks';
-import { ReferenceLineRoot } from './common';
-import { ChartsText } from '../ChartsText';
-import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
-import { warnOnce } from '../internals/warning';
+import { warnOnce } from '@mui/x-internals/warning';
+import { useDrawingArea, useYScale } from "../hooks/index.js";
+import { ReferenceLineRoot } from "./common.js";
+import { ChartsText } from "../ChartsText/index.js";
+import { getReferenceLineUtilityClass } from "./chartsReferenceLineClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getTextParams = ({
   left,

package/ChartsReferenceLine/common.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { styled } from '@mui/material/styles';
-import { referenceLineClasses } from './chartsReferenceLineClasses';
+import { referenceLineClasses } from "./chartsReferenceLineClasses.js";
 export const ReferenceLineRoot = styled('g')(({
   theme
 }) => ({

package/ChartsReferenceLine/index.js

@@ -1,2 +1,2 @@
-export * from './ChartsReferenceLine';
-export * from './chartsReferenceLineClasses';
+export * from "./ChartsReferenceLine.js";
+export * from "./chartsReferenceLineClasses.js";

package/ChartsSurface/ChartsSurface.js

@@ -1,10 +1,12 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className", "title", "desc"];
 import { styled, useThemeProps } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { useAxisEvents } from '../hooks/useAxisEvents';
+import { useAxisEvents } from "../hooks/useAxisEvents.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartChartsSurfaceStyles = styled('svg', {
   name: 'MuiChartsSurface',

package/ChartsSurface/index.js

@@ -1 +1 @@
-export * from './ChartsSurface';
+export * from "./ChartsSurface.js";

package/ChartsText/ChartsText.js

@@ -1,10 +1,12 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["x", "y", "style", "text", "ownerState"],
   _excluded2 = ["angle", "textAnchor", "dominantBaseline"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { getWordsByLines } from '../internals/getWordsByLines';
+import { getWordsByLines } from "../internals/getWordsByLines.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Helper component to manage multiline text in SVG

package/ChartsText/index.js

@@ -1 +1 @@
-export { ChartsText } from './ChartsText';
+export { ChartsText } from "./ChartsText.js";

package/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { DefaultChartsAxisTooltipContent } from './DefaultChartsAxisTooltipContent';
-import { ZAxisContext } from '../context/ZAxisContextProvider';
-import { useColorProcessor } from '../context/PluginProvider/useColorProcessor';
-import { isCartesianSeriesType } from '../internals/isCartesian';
-import { useSeries } from '../hooks/useSeries';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { DefaultChartsAxisTooltipContent } from "./DefaultChartsAxisTooltipContent.js";
+import { ZAxisContext } from "../context/ZAxisContextProvider.js";
+import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
+import { isCartesianSeriesType } from "../internals/isCartesian.js";
+import { useSeries } from "../hooks/useSeries.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.

package/ChartsTooltip/ChartsItemTooltipContent.d.ts

@@ -9,7 +9,7 @@ export interface ChartsItemContentProps<T extends ChartSeriesType> {
      */
     itemData: ItemInteractionData<T>;
     /**
-     * The series linked to the triggered axis.
+     * The series linked to the triggered item.
      */
     series: ChartSeriesDefaultized<T>;
     /**

package/ChartsTooltip/ChartsItemTooltipContent.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
-import { DefaultChartsItemTooltipContent } from './DefaultChartsItemTooltipContent';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { ZAxisContext } from '../context/ZAxisContextProvider';
-import { useColorProcessor } from '../context/PluginProvider/useColorProcessor';
-import { useSeries } from '../hooks/useSeries';
+import { DefaultChartsItemTooltipContent } from "./DefaultChartsItemTooltipContent.js";
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { ZAxisContext } from "../context/ZAxisContextProvider.js";
+import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
+import { useSeries } from "../hooks/useSeries.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.