@mui/x-charts 8.0.0-alpha.8 → 8.0.0-beta.0

package/modern/LineChart/useLineChartProps.js

@@ -2,10 +2,10 @@
 
 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", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className", "experimentalMarkRendering"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
-import { calculateMargins } from "../internals/calculateMargins.js";
+import { LINE_CHART_PLUGINS } from "./LineChart.plugins.js";
 
 /**
  * A helper function that extracts LineChartProps from the input props
@@ -25,18 +25,12 @@ export const useLineChartProps = props => {
       colors,
       dataset,
       sx,
-      onAxisClick,
       onAreaClick,
       onLineClick,
       onMarkClick,
       axisHighlight,
       disableLineItemHighlight,
-      hideLegend,
       grid,
-      topAxis,
-      leftAxis,
-      rightAxis,
-      bottomAxis,
       children,
       slots,
       slotProps,
@@ -44,8 +38,7 @@ export const useLineChartProps = props => {
       loading,
       highlightedItem,
       onHighlightChange,
-      className,
-      experimentalMarkRendering
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
@@ -57,12 +50,7 @@ export const useLineChartProps = props => {
     }, s)),
     width,
     height,
-    margin: calculateMargins({
-      margin,
-      hideLegend,
-      slotProps,
-      series
-    }),
+    margin,
     colors,
     dataset,
     xAxis: xAxis ?? [{
@@ -75,13 +63,11 @@ export const useLineChartProps = props => {
     yAxis,
     highlightedItem,
     onHighlightChange,
-    disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     className,
-    skipAnimation
+    skipAnimation,
+    plugins: LINE_CHART_PLUGINS
   });
-  const axisClickHandlerProps = {
-    onAxisClick
-  };
   const gridProps = {
     vertical: grid?.vertical,
     horizontal: grid?.horizontal
@@ -106,8 +92,7 @@ export const useLineChartProps = props => {
     slots,
     slotProps,
     onItemClick: onMarkClick,
-    skipAnimation,
-    experimentalRendering: experimentalMarkRendering
+    skipAnimation
   };
   const overlayProps = {
     slots,
@@ -115,10 +100,6 @@ export const useLineChartProps = props => {
     loading
   };
   const chartsAxisProps = {
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
     slots,
     slotProps
   };
@@ -141,7 +122,6 @@ export const useLineChartProps = props => {
   return {
     chartsWrapperProps,
     chartContainerProps,
-    axisClickHandlerProps,
     gridProps,
     clipPathProps,
     clipPathGroupProps,

package/modern/PieChart/PieArc.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { SpringValue } from '@react-spring/web';
+import { PieItemId } from "../models/index.js";
+export interface PieArcClasses {
+  /** 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 PieArcClassKey = keyof PieArcClasses;
+interface PieArcOwnerState {
+  id: PieItemId;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<PieArcClasses>;
+}
+export declare function getPieArcUtilityClass(slot: string): string;
+export declare const pieArcClasses: PieArcClasses;
+export type PieArcProps = Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & PieArcOwnerState & {
+  cornerRadius: SpringValue<number>;
+  endAngle: SpringValue<number>;
+  innerRadius: SpringValue<number>;
+  onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
+  outerRadius: SpringValue<number>;
+  paddingAngle: SpringValue<number>;
+  startAngle: SpringValue<number>;
+};
+declare function PieArc(props: PieArcProps): React.JSX.Element;
+declare namespace PieArc {
+  var propTypes: any;
+}
+export { PieArc };

package/modern/PieChart/PieArc.js

@@ -67,7 +67,11 @@ function PieArc(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  const getInteractionItemProps = useInteractionItemProps();
+  const interactionProps = useInteractionItemProps({
+    type: 'pie',
+    seriesId: id,
+    dataIndex
+  });
   return /*#__PURE__*/_jsx(PieArcRoot, _extends({
     d: to([startAngle, endAngle, paddingAngle, innerRadius, outerRadius, cornerRadius], (sA, eA, pA, iR, oR, cR) => d3Arc().cornerRadius(cR)({
       padAngle: pA,
@@ -88,11 +92,7 @@ function PieArc(props) {
     filter: ownerState.isHighlighted ? 'brightness(120%)' : 'none',
     strokeWidth: 1,
     strokeLinejoin: "round"
-  }, other, getInteractionItemProps({
-    type: 'pie',
-    seriesId: id,
-    dataIndex
-  })));
+  }, other, interactionProps));
 }
 process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
   // ----------------------------- Warning --------------------------------

package/modern/PieChart/PieArcLabel.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { SpringValue } from '@react-spring/web';
+import { PieItemId } from "../models/seriesType/pie.js";
+export interface PieArcLabelClasses {
+  /** 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 PieArcLabelClassKey = keyof PieArcLabelClasses;
+interface PieArcLabelOwnerState {
+  id: PieItemId;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<PieArcLabelClasses>;
+}
+export declare function getPieArcLabelUtilityClass(slot: string): string;
+export declare const pieArcLabelClasses: PieArcLabelClasses;
+export type PieArcLabelProps = PieArcLabelOwnerState & Omit<React.SVGProps<SVGTextElement>, 'ref' | 'color' | 'id'> & {
+  startAngle: SpringValue<number>;
+  endAngle: SpringValue<number>;
+  innerRadius: SpringValue<number>;
+  outerRadius: SpringValue<number>;
+  arcLabelRadius: SpringValue<number>;
+  cornerRadius: SpringValue<number>;
+  paddingAngle: SpringValue<number>;
+} & {
+  formattedArcLabel?: string | null;
+};
+declare function PieArcLabel(props: PieArcLabelProps): React.JSX.Element;
+declare namespace PieArcLabel {
+  var propTypes: any;
+}
+export { PieArcLabel };

package/modern/PieChart/PieArcLabelPlot.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { ComputedPieRadius, DefaultizedPieSeriesType } from "../models/seriesType/pie.js";
+import { PieArcLabelProps } from "./PieArcLabel.js";
+export interface PieArcLabelPlotSlots {
+  pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
+}
+export interface PieArcLabelPlotSlotProps {
+  pieArcLabel?: Partial<PieArcLabelProps>;
+}
+export interface PieArcLabelPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle' | 'arcLabel' | 'arcLabelMinAngle' | 'id'>, ComputedPieRadius {
+  /**
+   * Override the arc attributes when it is faded.
+   * @default { additionalRadius: -5 }
+   */
+  faded?: DefaultizedPieSeriesType['faded'];
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieArcLabelPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieArcLabelPlotSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+}
+declare function PieArcLabelPlot(props: PieArcLabelPlotProps): React.JSX.Element | null;
+declare namespace PieArcLabelPlot {
+  var propTypes: any;
+}
+export { PieArcLabelPlot };

package/modern/PieChart/PieArcLabelPlot.js

@@ -130,10 +130,10 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
     color: PropTypes.string.isRequired,
     endAngle: PropTypes.number.isRequired,
     formattedValue: PropTypes.string.isRequired,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     index: PropTypes.number.isRequired,
     label: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-    labelMarkType: PropTypes.oneOf(['circle', 'line', 'square']),
+    labelMarkType: PropTypes.oneOfType([PropTypes.oneOf(['circle', 'line', 'square']), PropTypes.func]),
     padAngle: PropTypes.number.isRequired,
     startAngle: PropTypes.number.isRequired,
     value: PropTypes.number.isRequired

package/modern/PieChart/PieArcPlot.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { PieArcProps } from "./PieArc.js";
+import { ComputedPieRadius, DefaultizedPieSeriesType, DefaultizedPieValueType, PieItemIdentifier } from "../models/seriesType/pie.js";
+export interface PieArcPlotSlots {
+  pieArc?: React.JSXElementConstructor<PieArcProps>;
+}
+export interface PieArcPlotSlotProps {
+  pieArc?: Partial<PieArcProps>;
+}
+export interface PieArcPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle' | 'id'>, ComputedPieRadius {
+  /**
+   * Override the arc attributes when it is faded.
+   * @default { additionalRadius: -5 }
+   */
+  faded?: DefaultizedPieSeriesType['faded'];
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieArcPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieArcPlotSlotProps;
+  /**
+   * Callback fired when a pie item is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
+   * @param {DefaultizedPieValueType} item The pie item.
+   */
+  onItemClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+}
+declare function PieArcPlot(props: PieArcPlotProps): React.JSX.Element | null;
+declare namespace PieArcPlot {
+  var propTypes: any;
+}
+export { PieArcPlot };

package/modern/PieChart/PieArcPlot.js

@@ -96,10 +96,10 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
     color: PropTypes.string.isRequired,
     endAngle: PropTypes.number.isRequired,
     formattedValue: PropTypes.string.isRequired,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     index: PropTypes.number.isRequired,
     label: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-    labelMarkType: PropTypes.oneOf(['circle', 'line', 'square']),
+    labelMarkType: PropTypes.oneOfType([PropTypes.oneOf(['circle', 'line', 'square']), PropTypes.func]),
     padAngle: PropTypes.number.isRequired,
     startAngle: PropTypes.number.isRequired,
     value: PropTypes.number.isRequired

package/modern/PieChart/PieChart.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { MakeOptional } from '@mui/x-internals/types';
+import { ChartContainerProps } from "../ChartContainer/index.js";
+import { PieSeriesType } from "../models/seriesType/index.js";
+import { ChartsTooltipSlots, ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
+import { ChartsLegendSlotProps, ChartsLegendSlots } from "../ChartsLegend/index.js";
+import { PiePlotProps, PiePlotSlotProps, PiePlotSlots } from "./PiePlot.js";
+import { PieValueType } from "../models/seriesType/pie.js";
+import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/index.js";
+import { PieChartPluginSignatures } from "./PieChart.plugins.js";
+export interface PieChartSlots extends PiePlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots {}
+export interface PieChartSlotProps extends PiePlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps {}
+export interface PieChartProps extends Omit<ChartContainerProps<'pie', PieChartPluginSignatures>, 'series'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
+  /**
+   * The series to display in the pie chart.
+   * An array of [[PieSeriesType]] objects.
+   */
+  series: Readonly<MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>[]>;
+  /**
+   * If `true`, the legend is not rendered.
+   */
+  hideLegend?: boolean;
+  /**
+   * Callback fired when a pie arc is clicked.
+   */
+  onItemClick?: PiePlotProps['onItemClick'];
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieChartSlotProps;
+}
+/**
+ * Demos:
+ *
+ * - [Pie](https://mui.com/x/react-charts/pie/)
+ * - [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
+ *
+ * API:
+ *
+ * - [PieChart API](https://mui.com/x/api/charts/pie-chart/)
+ */
+declare const PieChart: React.ForwardRefExoticComponent<PieChartProps & React.RefAttributes<SVGSVGElement>>;
+export { PieChart };

package/modern/PieChart/PieChart.js

@@ -2,7 +2,7 @@
 
 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", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["series", "width", "height", "margin", "colors", "sx", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
@@ -11,9 +11,11 @@ import { ChartsLegend } from "../ChartsLegend/index.js";
 import { PiePlot } from "./PiePlot.js";
 import { ChartsOverlay } from "../ChartsOverlay/index.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
-import { ChartDataProvider } from "../context/index.js";
+import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
 import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
+import { PIE_CHART_PLUGINS } from "./PieChart.plugins.js";
+import { defaultizeMargin } from "../internals/defaultizeMargin.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultMargin = {
   top: 5,
@@ -56,7 +58,7 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const margin = _extends({}, defaultMargin, marginProps);
+  const margin = defaultizeMargin(marginProps, defaultMargin);
   const {
     chartDataProviderProps,
     chartsSurfaceProps
@@ -68,11 +70,11 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
     height,
     margin,
     colors,
-    disableAxisListener: true,
     highlightedItem,
     onHighlightChange,
     className,
-    skipAnimation
+    skipAnimation,
+    plugins: PIE_CHART_PLUGINS
   }), ref);
   const Tooltip = slots?.tooltip ?? ChartsTooltip;
   return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
@@ -112,7 +114,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
+   * @default rainbowSurgePalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**
@@ -120,12 +122,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   dataset: PropTypes.arrayOf(PropTypes.object),
   desc: PropTypes.string,
-  /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
-   */
-  disableAxisListener: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -135,11 +131,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   hideLegend: PropTypes.bool,
   /**
-   * The item currently highlighted. Turns highlighting into a controlled prop.
+   * The highlighted item.
+   * Used when the highlight is controlled.
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -154,14 +151,15 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
-   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
    */
-  margin: PropTypes.shape({
+  margin: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
     bottom: PropTypes.number,
     left: PropTypes.number,
     right: PropTypes.number,
     top: PropTypes.number
-  }),
+  })]),
   /**
    * The callback fired when the highlighted item changes.
    *
@@ -198,110 +196,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
-  width: PropTypes.number,
-  /**
-   * The configuration of the x-axes.
-   * If not provided, a default axis config is used.
-   * An array of [[AxisConfig]] objects.
-   */
-  xAxis: PropTypes.arrayOf(PropTypes.shape({
-    classes: PropTypes.object,
-    colorMap: PropTypes.oneOfType([PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
-    }), PropTypes.shape({
-      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
-      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      type: PropTypes.oneOf(['continuous']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
-      type: PropTypes.oneOf(['piecewise']).isRequired
-    })]),
-    data: PropTypes.array,
-    dataKey: PropTypes.string,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    fill: PropTypes.string,
-    hideTooltip: PropTypes.bool,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    label: PropTypes.string,
-    labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'top']),
-    reverse: PropTypes.bool,
-    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: PropTypes.number,
-    valueFormatter: PropTypes.func
-  })),
-  /**
-   * The configuration of the y-axes.
-   * If not provided, a default axis config is used.
-   * An array of [[AxisConfig]] objects.
-   */
-  yAxis: PropTypes.arrayOf(PropTypes.shape({
-    classes: PropTypes.object,
-    colorMap: PropTypes.oneOfType([PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
-    }), PropTypes.shape({
-      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
-      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      type: PropTypes.oneOf(['continuous']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
-      type: PropTypes.oneOf(['piecewise']).isRequired
-    })]),
-    data: PropTypes.array,
-    dataKey: PropTypes.string,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    fill: PropTypes.string,
-    hideTooltip: PropTypes.bool,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    label: PropTypes.string,
-    labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['left', 'right']),
-    reverse: PropTypes.bool,
-    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: PropTypes.number,
-    valueFormatter: PropTypes.func
-  }))
+  width: PropTypes.number
 } : void 0;
 export { PieChart };

package/modern/PieChart/PieChart.plugins.d.ts

@@ -0,0 +1,5 @@
+import { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
+export type PieChartPluginSignatures = [UseChartInteractionSignature, UseChartHighlightSignature];
+export declare const PIE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<PieChartPluginSignatures>;

package/modern/PieChart/PieChart.plugins.js

@@ -0,0 +1,3 @@
+import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export const PIE_CHART_PLUGINS = [useChartInteraction, useChartHighlight];

package/modern/PieChart/PiePlot.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { PieArcPlotProps, PieArcPlotSlotProps, PieArcPlotSlots } from "./PieArcPlot.js";
+import { PieArcLabelPlotSlots, PieArcLabelPlotSlotProps } from "./PieArcLabelPlot.js";
+export interface PiePlotSlots extends PieArcPlotSlots, PieArcLabelPlotSlots {}
+export interface PiePlotSlotProps extends PieArcPlotSlotProps, PieArcLabelPlotSlotProps {}
+export interface PiePlotProps extends Pick<PieArcPlotProps, 'skipAnimation' | 'onItemClick'> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PiePlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PiePlotSlotProps;
+}
+/**
+ * Demos:
+ *
+ * - [Pie](https://mui.com/x/react-charts/pie/)
+ * - [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
+ *
+ * API:
+ *
+ * - [PiePlot API](https://mui.com/x/api/charts/pie-plot/)
+ */
+declare function PiePlot(props: PiePlotProps): React.JSX.Element | null;
+declare namespace PiePlot {
+  var propTypes: any;
+}
+export { PiePlot };

package/modern/PieChart/PiePlot.js

@@ -6,7 +6,7 @@ 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 { usePieSeriesContext } from "../hooks/usePieSeries.js";
 import { useSkipAnimation } from "../context/AnimationProvider/index.js";
 import { useDrawingArea } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -27,7 +27,7 @@ function PiePlot(props) {
     slotProps,
     onItemClick
   } = props;
-  const seriesData = usePieSeries();
+  const seriesData = usePieSeriesContext();
   const {
     left,
     top,

package/modern/PieChart/dataTransform/transition.d.ts

@@ -0,0 +1,4 @@
+import { UseTransitionProps } from '@react-spring/web';
+import { ValueWithHighlight } from "./useTransformData.js";
+export declare const getDefaultTransitionConfig: (skipAnimation?: boolean) => UseTransitionProps<ValueWithHighlight>;
+export declare const getDefaultLabelTransitionConfig: (skipAnimation?: boolean) => UseTransitionProps<ValueWithHighlight>;

package/modern/PieChart/dataTransform/transition.js

@@ -1,5 +1,5 @@
 export const getDefaultTransitionConfig = skipAnimation => ({
-  keys: item => item.id,
+  keys: item => item.id ?? item.dataIndex,
   from: skipAnimation ? undefined : ({
     innerRadius,
     outerRadius,
@@ -66,7 +66,7 @@ export const getDefaultTransitionConfig = skipAnimation => ({
   }
 });
 export const getDefaultLabelTransitionConfig = skipAnimation => ({
-  keys: item => item.id,
+  keys: item => item.id ?? item.dataIndex,
   from: skipAnimation ? undefined : ({
     innerRadius,
     outerRadius,