@mui/x-charts 8.27.0 → 9.0.0-alpha.1

package/LineChart/seriesConfig/getSeriesWithDefaultValues.d.ts

@@ -1,3 +1,3 @@
-import type { GetSeriesWithDefaultValues } from "../../internals/plugins/models/seriesConfig/index.js";
+import type { GetSeriesWithDefaultValues } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'line'>;
 export default getSeriesWithDefaultValues;

package/LineChart/seriesConfig/index.d.ts

@@ -1,2 +1,2 @@
-import { type ChartSeriesTypeConfig } from "../../internals/plugins/models/seriesConfig/index.js";
+import { type ChartSeriesTypeConfig } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export declare const lineSeriesConfig: ChartSeriesTypeConfig<'line'>;

package/LineChart/seriesConfig/index.js

@@ -15,6 +15,7 @@ var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWit
 var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
 var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
 var _identifierSerializer = require("../../internals/identifierSerializer");
+var _identifierCleaner = require("../../internals/identifierCleaner");
 const lineSeriesConfig = exports.lineSeriesConfig = {
   colorProcessor: _getColor.default,
   seriesProcessor: _seriesProcessor.default,
@@ -26,5 +27,6 @@ const lineSeriesConfig = exports.lineSeriesConfig = {
   yExtremumGetter: _extremums.getExtremumY,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
   keyboardFocusHandler: _keyboardFocusHandler.default,
-  identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex
+  identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex,
+  identifierCleaner: _identifierCleaner.identifierCleanerSeriesIdDataIndex
 };

package/LineChart/seriesConfig/keyboardFocusHandler.d.ts

@@ -1,3 +1,4 @@
 import type { KeyboardFocusHandler } from "../../internals/plugins/featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.js";
-declare const keyboardFocusHandler: KeyboardFocusHandler<'line', 'bar' | 'line' | 'scatter'>;
+import { type ComposableCartesianChartSeriesType } from "../../internals/commonNextFocusItem.js";
+declare const keyboardFocusHandler: KeyboardFocusHandler<'line', ComposableCartesianChartSeriesType>;
 export default keyboardFocusHandler;

package/LineChart/seriesConfig/keyboardFocusHandler.js

@@ -4,20 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _createCommonKeyboardFocusHandler = require("../../internals/createCommonKeyboardFocusHandler");
 var _commonNextFocusItem = require("../../internals/commonNextFocusItem");
-const outSeriesTypes = new Set(['bar', 'line', 'scatter']);
-const keyboardFocusHandler = event => {
-  switch (event.key) {
-    case 'ArrowRight':
-      return (0, _commonNextFocusItem.createGetNextIndexFocusedItem)(outSeriesTypes);
-    case 'ArrowLeft':
-      return (0, _commonNextFocusItem.createGetPreviousIndexFocusedItem)(outSeriesTypes);
-    case 'ArrowDown':
-      return (0, _commonNextFocusItem.createGetPreviousSeriesFocusedItem)(outSeriesTypes);
-    case 'ArrowUp':
-      return (0, _commonNextFocusItem.createGetNextSeriesFocusedItem)(outSeriesTypes);
-    default:
-      return null;
-  }
-};
+const keyboardFocusHandler = (0, _createCommonKeyboardFocusHandler.createCommonKeyboardFocusHandler)(_commonNextFocusItem.composableCartesianSeriesTypes);
 var _default = exports.default = keyboardFocusHandler;

package/LineChart/seriesConfig/legend.d.ts

@@ -1,3 +1,3 @@
-import { type LegendGetter } from "../../internals/plugins/models/index.js";
+import { type LegendGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const legendGetter: LegendGetter<'line'>;
 export default legendGetter;

package/LineChart/seriesConfig/legend.js

@@ -18,7 +18,6 @@ const legendGetter = params => {
     acc.push({
       type: 'line',
       markType: series[seriesId].labelMarkType,
-      id: seriesId,
       seriesId,
       color: series[seriesId].color,
       label: formattedLabel

package/LineChart/seriesConfig/seriesProcessor.d.ts

@@ -1,3 +1,3 @@
-import { type SeriesProcessor } from "../../internals/plugins/models/index.js";
+import { type SeriesProcessor } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const seriesProcessor: SeriesProcessor<'line'>;
 export default seriesProcessor;

package/LineChart/seriesConfig/tooltip.d.ts

@@ -1,4 +1,4 @@
-import type { AxisTooltipGetter, TooltipGetter } from "../../internals/plugins/models/index.js";
+import type { AxisTooltipGetter, TooltipGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const tooltipGetter: TooltipGetter<'line'>;
 export declare const axisTooltipGetter: AxisTooltipGetter<'line', 'x' | 'y'>;
 export default tooltipGetter;

package/LineChart/seriesConfig/tooltipPosition.d.ts

@@ -1,3 +1,3 @@
-import type { TooltipItemPositionGetter } from "../../internals/plugins/models/seriesConfig/tooltipItemPositionGetter.types.js";
+import type { TooltipItemPositionGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'line'>;
 export default tooltipItemPositionGetter;

package/LineChart/useMarkPlotData.js

@@ -38,11 +38,11 @@ function useMarkPlotData(xAxes, yAxes) {
           yAxisId = defaultYAxisId,
           visibleStackedData,
           data,
-          showMark = true,
+          showMark,
           shape = 'circle',
           hidden
         } = series[seriesId];
-        if (showMark === false) {
+        if (!showMark) {
           continue;
         }
         if (!(xAxisId in xAxes) || !(yAxisId in yAxes)) {

package/PieChart/FocusedPieArc.d.ts

@@ -1,2 +1,2 @@
 import { type PieArcProps } from "./PieArc.js";
-export declare function FocusedPieArc(props: Partial<Omit<PieArcProps, 'startAngle' | 'endAngle' | 'id' | 'dataIndex' | 'isFaded' | 'isHighlighted' | 'isFocused'>>): import("react/jsx-runtime").JSX.Element | null;
+export declare function FocusedPieArc(props: Partial<Omit<PieArcProps, 'startAngle' | 'endAngle' | 'seriesId' | 'dataIndex' | 'isFaded' | 'isHighlighted' | 'isFocused'>>): import("react/jsx-runtime").JSX.Element | null;

package/PieChart/FocusedPieArc.js

@@ -50,7 +50,7 @@ function FocusedPieArc(props) {
     skipInteraction: true,
     skipAnimation: true,
     stroke: (theme.vars ?? theme).palette.text.primary,
-    id: series.id,
+    seriesId: series.id,
     className: _PieArc.pieArcClasses.focusIndicator,
     dataIndex: focusedItem.dataIndex,
     isFaded: false,

package/PieChart/PieArc.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type PieItemId } from "../models/index.js";
+import { type SeriesId } from "../models/index.js";
 export interface PieArcClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -17,7 +17,7 @@ export interface PieArcClasses {
 }
 export type PieArcClassKey = keyof PieArcClasses;
 interface PieArcOwnerState {
-  id: PieItemId;
+  seriesId: SeriesId;
   dataIndex: number;
   color: string;
   isFaded: boolean;
@@ -28,7 +28,7 @@ interface PieArcOwnerState {
 }
 export declare function getPieArcUtilityClass(slot: string): string;
 export declare const pieArcClasses: PieArcClasses;
-export type PieArcProps = Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & PieArcOwnerState & {
+export type PieArcProps = Omit<React.SVGProps<SVGPathElement>, 'ref'> & PieArcOwnerState & {
   cornerRadius: number;
   endAngle: number;
   innerRadius: number;
@@ -46,7 +46,7 @@ export type PieArcProps = Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & P
    */
   skipInteraction?: boolean;
 };
-declare const PieArc: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGPathElement>, "ref" | "id"> & PieArcOwnerState & {
+declare const PieArc: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGPathElement>, "ref"> & PieArcOwnerState & {
   cornerRadius: number;
   endAngle: number;
   innerRadius: number;

package/PieChart/PieArc.js

@@ -22,7 +22,7 @@ var _hooks = require("../hooks");
 var _animation = require("../internals/animation/animation");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "classes", "color", "dataIndex", "id", "isFaded", "isHighlighted", "isFocused", "onClick", "cornerRadius", "startAngle", "endAngle", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "stroke", "skipInteraction"];
+const _excluded = ["className", "classes", "color", "dataIndex", "seriesId", "isFaded", "isHighlighted", "isFocused", "onClick", "cornerRadius", "startAngle", "endAngle", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "stroke", "skipInteraction"];
 function getPieArcUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPieArc', slot);
 }
@@ -30,13 +30,13 @@ const pieArcClasses = exports.pieArcClasses = (0, _generateUtilityClasses.defaul
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    id,
+    seriesId,
     isFaded,
     isHighlighted,
     dataIndex
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`, `data-index-${dataIndex}`, isHighlighted && 'highlighted', isFaded && 'faded']
+    root: ['root', `series-${seriesId}`, `data-index-${dataIndex}`, isHighlighted && 'highlighted', isFaded && 'faded']
   };
   return (0, _composeClasses.default)(slots, getPieArcUtilityClass, classes);
 };
@@ -55,7 +55,7 @@ const PieArc = exports.PieArc = /*#__PURE__*/React.forwardRef(function PieArc(pr
       classes: innerClasses,
       color,
       dataIndex,
-      id,
+      seriesId,
       isFaded,
       isHighlighted,
       isFocused,
@@ -74,7 +74,7 @@ const PieArc = exports.PieArc = /*#__PURE__*/React.forwardRef(function PieArc(pr
   const theme = (0, _styles.useTheme)();
   const stroke = strokeProp ?? (theme.vars || theme).palette.background.paper;
   const ownerState = {
-    id,
+    seriesId,
     dataIndex,
     classes: innerClasses,
     color,
@@ -85,7 +85,7 @@ const PieArc = exports.PieArc = /*#__PURE__*/React.forwardRef(function PieArc(pr
   const classes = useUtilityClasses(ownerState);
   const interactionProps = (0, _useInteractionItemProps.useInteractionItemProps)({
     type: 'pie',
-    seriesId: id,
+    seriesId,
     dataIndex
   }, skipInteraction);
   const animatedProps = (0, _hooks.useAnimatePieArc)({
@@ -123,13 +123,13 @@ process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
   cornerRadius: _propTypes.default.number.isRequired,
   dataIndex: _propTypes.default.number.isRequired,
   endAngle: _propTypes.default.number.isRequired,
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   innerRadius: _propTypes.default.number.isRequired,
   isFaded: _propTypes.default.bool.isRequired,
   isFocused: _propTypes.default.bool.isRequired,
   isHighlighted: _propTypes.default.bool.isRequired,
   outerRadius: _propTypes.default.number.isRequired,
   paddingAngle: _propTypes.default.number.isRequired,
+  seriesId: _propTypes.default.string.isRequired,
   /**
    * If `true`, the animation is disabled.
    */

package/PieChart/PieArcLabel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type PieItemId } from "../models/seriesType/pie.js";
+import { type SeriesId } from "../models/index.js";
 export interface PieArcLabelClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -17,7 +17,7 @@ export interface PieArcLabelClasses {
 }
 export type PieArcLabelClassKey = keyof PieArcLabelClasses;
 interface PieArcLabelOwnerState {
-  id: PieItemId;
+  seriesId: SeriesId;
   color: string;
   isFaded: boolean;
   isHighlighted: boolean;
@@ -26,7 +26,7 @@ interface PieArcLabelOwnerState {
 }
 export declare function getPieArcLabelUtilityClass(slot: string): string;
 export declare const pieArcLabelClasses: PieArcLabelClasses;
-export type PieArcLabelProps = PieArcLabelOwnerState & Omit<React.SVGProps<SVGTextElement>, 'ref' | 'color' | 'id'> & {
+export type PieArcLabelProps = PieArcLabelOwnerState & Omit<React.SVGProps<SVGTextElement>, 'ref' | 'color'> & {
   startAngle: number;
   endAngle: number;
   innerRadius: number;
@@ -38,7 +38,7 @@ export type PieArcLabelProps = PieArcLabelOwnerState & Omit<React.SVGProps<SVGTe
   formattedArcLabel?: string | null;
   hidden?: boolean;
 };
-declare const PieArcLabel: React.ForwardRefExoticComponent<PieArcLabelOwnerState & Omit<React.SVGProps<SVGTextElement>, "ref" | "color" | "id"> & {
+declare const PieArcLabel: React.ForwardRefExoticComponent<PieArcLabelOwnerState & Omit<React.SVGProps<SVGTextElement>, "ref" | "color"> & {
   startAngle: number;
   endAngle: number;
   innerRadius: number;

package/PieChart/PieArcLabel.js

@@ -20,7 +20,7 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 var _animation = require("../internals/animation/animation");
 var _useAnimatePieArcLabel = require("../hooks/animation/useAnimatePieArcLabel");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "skipAnimation", "hidden"];
+const _excluded = ["seriesId", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "skipAnimation", "hidden"];
 function getPieArcLabelUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPieArcLabel', slot);
 }
@@ -28,13 +28,13 @@ const pieArcLabelClasses = exports.pieArcLabelClasses = (0, _generateUtilityClas
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    id,
+    seriesId,
     isFaded,
     isHighlighted,
     skipAnimation
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded', !skipAnimation && 'animate']
+    root: ['root', `series-${seriesId}`, isHighlighted && 'highlighted', isFaded && 'faded', !skipAnimation && 'animate']
   };
   return (0, _composeClasses.default)(slots, getPieArcLabelUtilityClass, classes);
 };
@@ -65,7 +65,7 @@ const PieArcLabelRoot = (0, _styles.styled)('text', {
 }));
 const PieArcLabel = exports.PieArcLabel = /*#__PURE__*/React.forwardRef(function PieArcLabel(props, ref) {
   const {
-      id,
+      seriesId,
       classes: innerClasses,
       color,
       startAngle,
@@ -81,7 +81,7 @@ const PieArcLabel = exports.PieArcLabel = /*#__PURE__*/React.forwardRef(function
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = {
-    id,
+    seriesId,
     classes: innerClasses,
     color,
     isFaded,
@@ -119,12 +119,12 @@ process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   endAngle: _propTypes.default.number.isRequired,
   formattedArcLabel: _propTypes.default.string,
   hidden: _propTypes.default.bool,
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   innerRadius: _propTypes.default.number.isRequired,
   isFaded: _propTypes.default.bool.isRequired,
   isHighlighted: _propTypes.default.bool.isRequired,
   outerRadius: _propTypes.default.number.isRequired,
   paddingAngle: _propTypes.default.number.isRequired,
+  seriesId: _propTypes.default.string.isRequired,
   skipAnimation: _propTypes.default.bool.isRequired,
   startAngle: _propTypes.default.number.isRequired
 } : void 0;

package/PieChart/PieArcLabelPlot.d.ts

@@ -7,7 +7,11 @@ export interface PieArcLabelPlotSlots {
 export interface PieArcLabelPlotSlotProps {
   pieArcLabel?: Partial<PieArcLabelProps>;
 }
-export interface PieArcLabelPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle' | 'arcLabel' | 'arcLabelMinAngle' | 'id'>, ComputedPieRadius {
+export interface PieArcLabelPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle' | 'arcLabel' | 'arcLabelMinAngle'>, ComputedPieRadius {
+  /**
+   * The id of this series.
+   */
+  seriesId: string;
   /**
    * Override the arc attributes when it is faded.
    * @default { additionalRadius: -5 }

package/PieChart/PieArcLabelPlot.js

@@ -15,7 +15,7 @@ var _useTransformData = require("./dataTransform/useTransformData");
 var _PieArcLabel = require("./PieArcLabel");
 var _getLabel = require("../internals/getLabel");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"];
+const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "seriesId", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"];
 const RATIO = 180 / Math.PI;
 function getItemLabel(arcLabel, arcLabelMinAngle, item) {
   if (!arcLabel) {
@@ -49,7 +49,7 @@ function PieArcLabelPlot(props) {
         additionalRadius: -5
       },
       highlighted,
-      id,
+      seriesId,
       innerRadius,
       outerRadius,
       paddingAngle = 0,
@@ -64,7 +64,7 @@ function PieArcLabelPlot(props) {
     arcLabelRadius,
     cornerRadius,
     paddingAngle,
-    id,
+    id: seriesId,
     highlighted,
     faded,
     data
@@ -83,7 +83,7 @@ function PieArcLabelPlot(props) {
       arcLabelRadius: item.arcLabelRadius,
       cornerRadius: item.cornerRadius,
       hidden: item.hidden,
-      id: id,
+      seriesId: seriesId,
       color: item.color,
       isFaded: item.isFaded,
       isHighlighted: item.isHighlighted,
@@ -156,7 +156,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
   /**
    * The id of this series.
    */
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  seriesId: _propTypes.default.string.isRequired,
   /**
    * The radius between circle center and the beginning of the arc.
    * @default 0

package/PieChart/PieArcPlot.d.ts

@@ -7,7 +7,11 @@ export interface PieArcPlotSlots {
 export interface PieArcPlotSlotProps {
   pieArc?: Partial<PieArcProps>;
 }
-export interface PieArcPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle' | 'id'>, ComputedPieRadius {
+export interface PieArcPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle'>, ComputedPieRadius {
+  /**
+   * The id of this series.
+   */
+  seriesId: string;
   /**
    * Override the arc attributes when it is faded.
    * @default { additionalRadius: -5 }

package/PieChart/PieArcPlot.js

@@ -14,7 +14,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _PieArc = require("./PieArc");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"];
+const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "seriesId", "highlighted", "faded", "data", "onItemClick", "skipAnimation"];
 function PieArcPlot(props) {
   const {
       slots,
@@ -23,7 +23,7 @@ function PieArcPlot(props) {
       outerRadius,
       cornerRadius = 0,
       paddingAngle = 0,
-      id,
+      seriesId,
       highlighted,
       faded = {
         additionalRadius: -5
@@ -38,7 +38,7 @@ function PieArcPlot(props) {
     outerRadius,
     cornerRadius,
     paddingAngle,
-    id,
+    id: seriesId,
     highlighted,
     faded,
     data
@@ -56,7 +56,7 @@ function PieArcPlot(props) {
       outerRadius: item.outerRadius,
       cornerRadius: item.cornerRadius,
       skipAnimation: skipAnimation ?? false,
-      id: id,
+      seriesId: seriesId,
       color: item.color,
       dataIndex: index,
       isFaded: item.isFaded,
@@ -65,7 +65,7 @@ function PieArcPlot(props) {
       onClick: onItemClick && (event => {
         onItemClick(event, {
           type: 'pie',
-          seriesId: id,
+          seriesId,
           dataIndex: index
         }, item);
       })
@@ -127,7 +127,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
   /**
    * The id of this series.
    */
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  seriesId: _propTypes.default.string.isRequired,
   /**
    * The radius between circle center and the beginning of the arc.
    * @default 0

package/PieChart/PieChart.d.ts

@@ -10,8 +10,8 @@ import { type PiePlotProps, type PiePlotSlotProps, type PiePlotSlots } from "./P
 import { type PieValueType } from "../models/seriesType/pie.js";
 import { type ChartsOverlayProps, type ChartsOverlaySlotProps, type ChartsOverlaySlots } from "../ChartsOverlay/index.js";
 import { type PieChartPluginSignatures } from "./PieChart.plugins.js";
-export interface PieChartSlots extends PiePlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
-export interface PieChartSlotProps extends PiePlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
+export interface PieChartSlots extends PiePlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots<'item' | 'none'>, ChartsToolbarSlots, Partial<ChartsSlots> {}
+export interface PieChartSlotProps extends PiePlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps<'item' | 'none'>, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export type PieSeries = MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>;
 export interface PieChartProps extends Omit<ChartContainerProps<'pie', PieChartPluginSignatures>, 'series' | 'slots' | 'slotProps' | 'experimentalFeatures'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
   /**
@@ -53,5 +53,5 @@ export interface PieChartProps extends Omit<ChartContainerProps<'pie', PieChartP
  *
  * - [PieChart API](https://mui.com/x/api/charts/pie-chart/)
  */
-declare const PieChart: React.ForwardRefExoticComponent<PieChartProps & React.RefAttributes<SVGSVGElement>>;
+declare const PieChart: React.ForwardRefExoticComponent<PieChartProps & React.RefAttributes<HTMLDivElement>>;
 export { PieChart };

package/PieChart/PieChart.js

@@ -78,7 +78,7 @@ const PieChart = exports.PieChart = /*#__PURE__*/React.forwardRef(function PieCh
     className,
     skipAnimation,
     plugins: _PieChart2.PIE_CHART_PLUGINS
-  }), ref);
+  }));
   const Tooltip = slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   const Toolbar = slots?.toolbar;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
@@ -87,6 +87,7 @@ const PieChart = exports.PieChart = /*#__PURE__*/React.forwardRef(function PieCh
       legendDirection: slotProps?.legend?.direction ?? 'vertical',
       sx: sx,
       hideLegend: hideLegend ?? false,
+      ref: ref,
       children: [showToolbar && Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, slotProps?.toolbar)) : null, !hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, {
         direction: slotProps?.legend?.direction ?? 'vertical',
         slots: slots,
@@ -155,8 +156,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   hiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['pie']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['pie'])
   })),
   /**
    * If `true`, the legend is not rendered.
@@ -168,7 +169,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   highlightedItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -198,8 +199,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   initialHiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['pie']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['pie'])
   })),
   /**
    * If `true`, a loading overlay is displayed.
@@ -277,8 +278,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   tooltipItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    type: _propTypes.default.oneOf(['pie']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['pie'])
   }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/PieChart/PiePlot.js

@@ -59,7 +59,7 @@ function PiePlot(props) {
           outerRadius: seriesLayout[seriesId].radius.outer,
           cornerRadius: cornerRadius,
           paddingAngle: paddingAngle,
-          id: seriesId,
+          seriesId: seriesId,
           data: data,
           skipAnimation: skipAnimation,
           highlighted: highlighted,
@@ -87,7 +87,7 @@ function PiePlot(props) {
           arcLabelRadius: seriesLayout[seriesId].radius.label,
           cornerRadius: cornerRadius,
           paddingAngle: paddingAngle,
-          id: seriesId,
+          seriesId: seriesId,
           data: data,
           skipAnimation: skipAnimation,
           arcLabel: arcLabel,

package/PieChart/index.d.ts

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

package/PieChart/index.js

@@ -60,6 +60,18 @@ Object.keys(_PieArcLabelPlot).forEach(function (key) {
     }
   });
 });
+var _FocusedPieArc = require("./FocusedPieArc");
+Object.keys(_FocusedPieArc).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _FocusedPieArc[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FocusedPieArc[key];
+    }
+  });
+});
 var _PieArc = require("./PieArc");
 Object.keys(_PieArc).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/PieChart/pieClasses.d.ts

@@ -9,4 +9,4 @@ export interface PieClasses {
 export type PieClassKey = keyof PieClasses;
 export declare function getPieUtilityClass(slot: string): string;
 export declare const pieClasses: PieClasses;
-export declare const useUtilityClasses: (classes?: Partial<PieClasses>) => Record<"series" | "root" | "seriesLabels", string>;
+export declare const useUtilityClasses: (classes?: Partial<PieClasses>) => Record<"root" | "series" | "seriesLabels", string>;

package/PieChart/seriesConfig/getColor.d.ts

@@ -1,3 +1,3 @@
-import { type ColorProcessor } from "../../internals/plugins/models/index.js";
+import { type ColorProcessor } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const getColor: ColorProcessor<'pie'>;
 export default getColor;

package/PieChart/seriesConfig/getSeriesWithDefaultValues.d.ts

@@ -1,3 +1,3 @@
-import type { GetSeriesWithDefaultValues } from "../../internals/plugins/models/seriesConfig/index.js";
+import type { GetSeriesWithDefaultValues } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>;
 export default getSeriesWithDefaultValues;

package/PieChart/seriesConfig/index.d.ts

@@ -1,2 +1,2 @@
-import { type ChartSeriesTypeConfig } from "../../internals/plugins/models/seriesConfig/index.js";
+import { type ChartSeriesTypeConfig } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export declare const pieSeriesConfig: ChartSeriesTypeConfig<'pie'>;

package/PieChart/seriesConfig/index.js

@@ -14,6 +14,7 @@ var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWit
 var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
 var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
 var _identifierSerializer = require("../../internals/identifierSerializer");
+var _identifierCleaner = require("../../internals/identifierCleaner");
 const pieSeriesConfig = exports.pieSeriesConfig = {
   colorProcessor: _getColor.default,
   seriesProcessor: _seriesProcessor.default,
@@ -23,5 +24,6 @@ const pieSeriesConfig = exports.pieSeriesConfig = {
   tooltipItemPositionGetter: _tooltipPosition.default,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
   keyboardFocusHandler: _keyboardFocusHandler.default,
-  identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex
+  identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex,
+  identifierCleaner: _identifierCleaner.identifierCleanerSeriesIdDataIndex
 };

package/PieChart/seriesConfig/keyboardFocusHandler.js

@@ -4,20 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _commonNextFocusItem = require("../../internals/commonNextFocusItem");
+var _createCommonKeyboardFocusHandler = require("../../internals/createCommonKeyboardFocusHandler");
 const outSeriesTypes = new Set(['pie']);
-const keyboardFocusHandler = event => {
-  switch (event.key) {
-    case 'ArrowRight':
-      return (0, _commonNextFocusItem.createGetNextIndexFocusedItem)(outSeriesTypes);
-    case 'ArrowLeft':
-      return (0, _commonNextFocusItem.createGetPreviousIndexFocusedItem)(outSeriesTypes);
-    case 'ArrowDown':
-      return (0, _commonNextFocusItem.createGetPreviousSeriesFocusedItem)(outSeriesTypes);
-    case 'ArrowUp':
-      return (0, _commonNextFocusItem.createGetNextSeriesFocusedItem)(outSeriesTypes);
-    default:
-      return null;
-  }
-};
+const keyboardFocusHandler = (0, _createCommonKeyboardFocusHandler.createCommonKeyboardFocusHandler)(outSeriesTypes);
 var _default = exports.default = keyboardFocusHandler;