@mui/x-charts 7.15.0 → 7.17.0

package/LineChart/LinePlot.js

@@ -1,76 +1,83 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { LineElement } from './LineElement';
-import { getValueToPositionMapper } from '../hooks/useScale';
-import getCurveFactory from '../internals/getCurve';
-import { DEFAULT_X_AXIS_KEY } from '../constants';
-import { useChartGradient } from '../internals/components/ChartsAxesGradients';
-import { useLineSeries } from '../hooks/useSeries';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { LineElement } from "./LineElement.js";
+import { getValueToPositionMapper } from "../hooks/useScale.js";
+import getCurveFactory from "../internals/getCurve.js";
+import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
+import { useChartGradient } from "../internals/components/ChartsAxesGradients/index.js";
+import { useLineSeries } from "../hooks/useSeries.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useAggregatedData = () => {
   const seriesData = useLineSeries();
   const axisData = useCartesianContext();
-  if (seriesData === undefined) {
-    return [];
-  }
-  const {
-    series,
-    stackingGroups
-  } = seriesData;
-  const {
-    xAxis,
-    yAxis,
-    xAxisIds,
-    yAxisIds
-  } = axisData;
-  const defaultXAxisId = xAxisIds[0];
-  const defaultYAxisId = yAxisIds[0];
-  return stackingGroups.flatMap(({
-    ids: groupIds
-  }) => {
-    return groupIds.flatMap(seriesId => {
-      const {
-        xAxisId: xAxisIdProp,
-        yAxisId: yAxisIdProp,
-        xAxisKey = defaultXAxisId,
-        yAxisKey = defaultYAxisId,
-        stackedData,
-        data,
-        connectNulls
-      } = series[seriesId];
-      const xAxisId = xAxisIdProp ?? xAxisKey;
-      const yAxisId = yAxisIdProp ?? yAxisKey;
-      const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
-      const yScale = yAxis[yAxisId].scale;
-      const xData = xAxis[xAxisId].data;
-      const gradientUsed = yAxis[yAxisId].colorScale && [yAxisId, 'y'] || xAxis[xAxisId].colorScale && [xAxisId, 'x'] || undefined;
-      if (process.env.NODE_ENV !== 'production') {
-        if (xData === undefined) {
-          throw new Error(`MUI X: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
-        }
-        if (xData.length < stackedData.length) {
-          throw new Error(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+
+  // This memo prevents odd line chart behavior when hydrating.
+  const allData = React.useMemo(() => {
+    if (seriesData === undefined) {
+      return [];
+    }
+    const {
+      series,
+      stackingGroups
+    } = seriesData;
+    const {
+      xAxis,
+      yAxis,
+      xAxisIds,
+      yAxisIds
+    } = axisData;
+    const defaultXAxisId = xAxisIds[0];
+    const defaultYAxisId = yAxisIds[0];
+    return stackingGroups.flatMap(({
+      ids: groupIds
+    }) => {
+      return groupIds.flatMap(seriesId => {
+        const {
+          xAxisId: xAxisIdProp,
+          yAxisId: yAxisIdProp,
+          xAxisKey = defaultXAxisId,
+          yAxisKey = defaultYAxisId,
+          stackedData,
+          data,
+          connectNulls
+        } = series[seriesId];
+        const xAxisId = xAxisIdProp ?? xAxisKey;
+        const yAxisId = yAxisIdProp ?? yAxisKey;
+        const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
+        const yScale = yAxis[yAxisId].scale;
+        const xData = xAxis[xAxisId].data;
+        const gradientUsed = yAxis[yAxisId].colorScale && [yAxisId, 'y'] || xAxis[xAxisId].colorScale && [xAxisId, 'x'] || undefined;
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error(`MUI X: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
+          }
+          if (xData.length < stackedData.length) {
+            throw new Error(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+          }
         }
-      }
-      const linePath = d3Line().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));
-      const formattedData = xData?.map((x, index) => ({
-        x,
-        y: stackedData[index]
-      })) ?? [];
-      const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
-      const d = linePath.curve(getCurveFactory(series[seriesId].curve))(d3Data) || '';
-      return _extends({}, series[seriesId], {
-        gradientUsed,
-        d,
-        seriesId
+        const linePath = d3Line().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));
+        const formattedData = xData?.map((x, index) => ({
+          x,
+          y: stackedData[index]
+        })) ?? [];
+        const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
+        const d = linePath.curve(getCurveFactory(series[seriesId].curve))(d3Data) || '';
+        return _extends({}, series[seriesId], {
+          gradientUsed,
+          d,
+          seriesId
+        });
       });
     });
-  });
+  }, [seriesData, axisData]);
+  return allData;
 };
 
 /**

package/LineChart/MarkElement.d.ts

@@ -1,23 +1,5 @@
 import * as React from 'react';
-import { SeriesId } from '../models/seriesType/common';
-export interface MarkElementClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element when highlighted. */
-    highlighted: string;
-    /** Styles applied to the root element when faded. */
-    faded: string;
-}
-export type MarkElementClassKey = keyof MarkElementClasses;
-interface MarkElementOwnerState {
-    id: SeriesId;
-    color: string;
-    isFaded: boolean;
-    isHighlighted: boolean;
-    classes?: Partial<MarkElementClasses>;
-}
-export declare function getMarkElementUtilityClass(slot: string): string;
-export declare const markElementClasses: MarkElementClasses;
+import { MarkElementOwnerState } from './markElementClasses';
 export type MarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & {
     /**
      * If `true`, animations are skipped.

package/LineChart/MarkElement.js

@@ -1,35 +1,19 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import composeClasses from '@mui/utils/composeClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from '@mui/x-charts-vendor/d3-shape';
 import { animated, to, useSpring } from '@react-spring/web';
-import { getSymbol } from '../internals/getSymbol';
-import { InteractionContext } from '../context/InteractionProvider';
-import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
-import { useItemHighlighted } from '../context';
+import { getSymbol } from "../internals/getSymbol.js";
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
+import { useItemHighlighted } from "../context/index.js";
+import { useUtilityClasses } from "./markElementClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export function getMarkElementUtilityClass(slot) {
-  return generateUtilityClass('MuiMarkElement', slot);
-}
-export const markElementClasses = generateUtilityClasses('MuiMarkElement', ['root', 'highlighted', 'faded']);
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    id,
-    isFaded,
-    isHighlighted
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
-  };
-  return composeClasses(slots, getMarkElementUtilityClass, classes);
-};
 const MarkElementPath = styled(animated.path, {
   name: 'MuiMarkElement',
   slot: 'Root',

package/LineChart/MarkPlot.d.ts

@@ -24,6 +24,12 @@ export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<
      * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier.
      */
     onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void;
+    /**
+     * If `true` the mark element will only be able to render circle.
+     * Giving fewer customization options, but saving around 40ms per 1.000 marks.
+     * @default false
+     */
+    experimentalRendering?: boolean;
 }
 /**
  * Demos:

package/LineChart/MarkPlot.js

@@ -1,17 +1,20 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick", "experimentalRendering"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { MarkElement } from './MarkElement';
-import { getValueToPositionMapper } from '../hooks/useScale';
-import { useChartId } from '../hooks/useChartId';
-import { DEFAULT_X_AXIS_KEY } from '../constants';
-import { cleanId } from '../internals/cleanId';
-import getColor from './getColor';
-import { useLineSeries } from '../hooks/useSeries';
-import { useDrawingArea } from '../hooks/useDrawingArea';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { MarkElement } from "./MarkElement.js";
+import { getValueToPositionMapper } from "../hooks/useScale.js";
+import { useChartId } from "../hooks/useChartId.js";
+import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
+import { cleanId } from "../internals/cleanId.js";
+import getColor from "./getColor.js";
+import { useLineSeries } from "../hooks/useSeries.js";
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
+import { CircleMarkElement } from "./CircleMarkElement.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -28,14 +31,15 @@ function MarkPlot(props) {
       slots,
       slotProps,
       skipAnimation,
-      onItemClick
+      onItemClick,
+      experimentalRendering
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesData = useLineSeries();
   const axisData = useCartesianContext();
   const chartId = useChartId();
   const drawingArea = useDrawingArea();
-  const Mark = slots?.mark ?? MarkElement;
+  const Mark = slots?.mark ?? (experimentalRendering ? CircleMarkElement : MarkElement);
   if (seriesData === undefined) {
     return null;
   }
@@ -149,6 +153,12 @@ process.env.NODE_ENV !== "production" ? MarkPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * If `true` the mark element will only be able to render circle.
+   * Giving fewer customization options, but saving around 40ms per 1.000 marks.
+   * @default false
+   */
+  experimentalRendering: PropTypes.bool,
   /**
    * Callback fired when a line mark item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.

package/LineChart/formatter.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
-import { getStackingGroups } from '../internals/stackSeries';
-import { defaultizeValueFormatter } from '../internals/defaultizeValueFormatter';
+import { getStackingGroups } from "../internals/stackSeries.js";
+import { defaultizeValueFormatter } from "../internals/defaultizeValueFormatter.js";
 let warnedOnce = false;
 
 // For now it's a copy past of bar charts formatter, but maybe will diverge later

package/LineChart/index.d.ts

@@ -9,3 +9,5 @@ export * from './LineElement';
 export * from './AnimatedLine';
 export * from './MarkElement';
 export * from './LineHighlightElement';
+export type { MarkElementClasses, MarkElementClassKey } from './markElementClasses';
+export { getMarkElementUtilityClass, markElementClasses } from './markElementClasses';

package/LineChart/index.js

@@ -1,11 +1,12 @@
-export * from './LineChart';
-export * from './LinePlot';
-export * from './AreaPlot';
-export * from './MarkPlot';
-export * from './LineHighlightPlot';
-export * from './AreaElement';
-export * from './AnimatedArea';
-export * from './LineElement';
-export * from './AnimatedLine';
-export * from './MarkElement';
-export * from './LineHighlightElement';
+export * from "./LineChart.js";
+export * from "./LinePlot.js";
+export * from "./AreaPlot.js";
+export * from "./MarkPlot.js";
+export * from "./LineHighlightPlot.js";
+export * from "./AreaElement.js";
+export * from "./AnimatedArea.js";
+export * from "./LineElement.js";
+export * from "./AnimatedLine.js";
+export * from "./MarkElement.js";
+export * from "./LineHighlightElement.js";
+export { getMarkElementUtilityClass, markElementClasses } from "./markElementClasses.js";

package/LineChart/legend.js

@@ -1,4 +1,4 @@
-import { getLabel } from '../internals/getLabel';
+import { getLabel } from "../internals/getLabel.js";
 const legendGetter = params => {
   const {
     seriesOrder,
@@ -10,9 +10,10 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      id: seriesId,
+      seriesId,
       color: series[seriesId].color,
-      label: formattedLabel,
-      id: seriesId
+      label: formattedLabel
     });
     return acc;
   }, []);

package/LineChart/markElementClasses.d.ts

@@ -0,0 +1,20 @@
+import { SeriesId } from '../models/seriesType/common';
+export interface MarkElementClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element when highlighted. */
+    highlighted: string;
+    /** Styles applied to the root element when faded. */
+    faded: string;
+}
+export type MarkElementClassKey = keyof MarkElementClasses;
+export interface MarkElementOwnerState {
+    id: SeriesId;
+    color: string;
+    isFaded: boolean;
+    isHighlighted: boolean;
+    classes?: Partial<MarkElementClasses>;
+}
+export declare function getMarkElementUtilityClass(slot: string): string;
+export declare const markElementClasses: MarkElementClasses;
+export declare const useUtilityClasses: (ownerState: MarkElementOwnerState) => Record<"root", string>;

package/LineChart/markElementClasses.js

@@ -0,0 +1,19 @@
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getMarkElementUtilityClass(slot) {
+  return generateUtilityClass('MuiMarkElement', slot);
+}
+export const markElementClasses = generateUtilityClasses('MuiMarkElement', ['root', 'highlighted', 'faded']);
+export const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    id,
+    isFaded,
+    isHighlighted
+  } = ownerState;
+  const slots = {
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+  };
+  return composeClasses(slots, getMarkElementUtilityClass, classes);
+};

package/LineChart/plugin.js

@@ -1,6 +1,6 @@
-import { getExtremumX, getExtremumY } from './extremums';
-import formatter from './formatter';
-import getColor from './getColor';
+import { getExtremumX, getExtremumY } from "./extremums.js";
+import formatter from "./formatter.js";
+import getColor from "./getColor.js";
 export const plugin = {
   seriesType: 'line',
   colorProcessor: getColor,

package/LineChart/useLineChartProps.js

@@ -1,8 +1,10 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className", "experimentalMarkRendering"];
 import useId from '@mui/utils/useId';
-import { DEFAULT_X_AXIS_KEY } from '../constants';
+import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 /**
  * A helper function that extracts LineChartProps from the input props
  * and returns an object with props for the children components of LineChart.
@@ -41,7 +43,8 @@ export const useLineChartProps = props => {
       loading,
       highlightedItem,
       onHighlightChange,
-      className
+      className,
+      experimentalMarkRendering
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
@@ -99,7 +102,8 @@ export const useLineChartProps = props => {
     slots,
     slotProps,
     onItemClick: onMarkClick,
-    skipAnimation
+    skipAnimation,
+    experimentalRendering: experimentalMarkRendering
   };
   const overlayProps = {
     slots,

package/PieChart/PieArc.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["classes", "color", "cornerRadius", "dataIndex", "endAngle", "id", "innerRadius", "isFaded", "isHighlighted", "onClick", "outerRadius", "paddingAngle", "startAngle", "highlightScope"];
@@ -9,7 +11,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
+import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getPieArcUtilityClass(slot) {
   return generateUtilityClass('MuiPieArc', slot);

package/PieChart/PieArcLabel.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];

package/PieChart/PieArcLabelPlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"],
@@ -5,10 +7,10 @@ const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadi
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
-import { defaultLabelTransitionConfig } from './dataTransform/transition';
-import { useTransformData } from './dataTransform/useTransformData';
-import { PieArcLabel } from './PieArcLabel';
-import { getLabel } from '../internals/getLabel';
+import { defaultLabelTransitionConfig } from "./dataTransform/transition.js";
+import { useTransformData } from "./dataTransform/useTransformData.js";
+import { PieArcLabel } from "./PieArcLabel.js";
+import { getLabel } from "../internals/getLabel.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const RATIO = 180 / Math.PI;
 function getItemLabel(arcLabel, arcLabelMinAngle, item) {

package/PieChart/PieArcPlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"],
@@ -5,10 +7,10 @@ const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRa
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
-import { PieArc } from './PieArc';
-import { defaultTransitionConfig } from './dataTransform/transition';
-import { useTransformData } from './dataTransform/useTransformData';
-import { useHighlighted } from '../context';
+import { PieArc } from "./PieArc.js";
+import { defaultTransitionConfig } from "./dataTransform/transition.js";
+import { useTransformData } from "./dataTransform/useTransformData.js";
+import { useHighlighted } from "../context/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function PieArcPlot(props) {
   const {

package/PieChart/PieChart.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "sx", "tooltip", "axisHighlight", "skipAnimation", "legend", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
@@ -5,14 +7,14 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useRtl } from '@mui/system/RtlProvider';
 import { useThemeProps } from '@mui/material/styles';
-import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
-import { ChartsAxis } from '../ChartsAxis/ChartsAxis';
-import { DEFAULT_X_AXIS_KEY } from '../constants';
-import { ChartsTooltip } from '../ChartsTooltip';
-import { ChartsLegend } from '../ChartsLegend';
-import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
-import { PiePlot } from './PiePlot';
-import { ChartsOverlay } from '../ChartsOverlay';
+import { ResponsiveChartContainer } from "../ResponsiveChartContainer/index.js";
+import { ChartsAxis } from "../ChartsAxis/ChartsAxis.js";
+import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
+import { ChartsTooltip } from "../ChartsTooltip/index.js";
+import { ChartsLegend } from "../ChartsLegend/index.js";
+import { ChartsAxisHighlight } from "../ChartsAxisHighlight/index.js";
+import { PiePlot } from "./PiePlot.js";
+import { ChartsOverlay } from "../ChartsOverlay/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultMargin = {
   top: 5,
@@ -192,6 +194,18 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
     hidden: PropTypes.bool,
+    itemGap: PropTypes.number,
+    itemMarkHeight: PropTypes.number,
+    itemMarkWidth: PropTypes.number,
+    labelStyle: PropTypes.object,
+    markGap: PropTypes.number,
+    onItemClick: PropTypes.func,
+    padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+      bottom: PropTypes.number,
+      left: PropTypes.number,
+      right: PropTypes.number,
+      top: PropTypes.number
+    })]),
     position: PropTypes.shape({
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired

package/PieChart/PiePlot.js

@@ -1,11 +1,13 @@
+'use client';
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { DrawingContext } from '../context/DrawingProvider';
-import { PieArcPlot } from './PieArcPlot';
-import { PieArcLabelPlot } from './PieArcLabelPlot';
-import { getPercentageValue } from '../internals/getPercentageValue';
-import { getPieCoordinates } from './getPieCoordinates';
-import { usePieSeries } from '../hooks/useSeries';
+import { DrawingContext } from "../context/DrawingProvider.js";
+import { PieArcPlot } from "./PieArcPlot.js";
+import { PieArcLabelPlot } from "./PieArcLabelPlot.js";
+import { getPercentageValue } from "../internals/getPercentageValue.js";
+import { getPieCoordinates } from "./getPieCoordinates.js";
+import { usePieSeries } from "../hooks/useSeries.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:

package/PieChart/dataTransform/useTransformData.js

@@ -1,6 +1,8 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useHighlighted } from '../../context';
+import { useHighlighted } from "../../context/index.js";
 export function useTransformData(series) {
   const {
     id: seriesId,

package/PieChart/formatter.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { pie as d3Pie } from '@mui/x-charts-vendor/d3-shape';
-import { getLabel } from '../internals/getLabel';
+import { getLabel } from "../internals/getLabel.js";
 const getSortingComparator = (comparator = 'none') => {
   if (typeof comparator === 'function') {
     return comparator;

package/PieChart/getPieCoordinates.js

@@ -1,4 +1,4 @@
-import { getPercentageValue } from '../internals/getPercentageValue';
+import { getPercentageValue } from "../internals/getPercentageValue.js";
 export function getPieCoordinates(series, drawing) {
   const {
     height,

package/PieChart/index.js

@@ -1,7 +1,7 @@
-export * from './PieChart';
-export * from './PiePlot';
-export * from './PieArcPlot';
-export * from './PieArcLabelPlot';
-export * from './PieArc';
-export * from './PieArcLabel';
-export * from './getPieCoordinates';
+export * from "./PieChart.js";
+export * from "./PiePlot.js";
+export * from "./PieArcPlot.js";
+export * from "./PieArcLabelPlot.js";
+export * from "./PieArc.js";
+export * from "./PieArcLabel.js";
+export * from "./getPieCoordinates.js";