@mui/x-charts 8.22.0 → 8.23.0

package/esm/BarChart/BarLabel/BarLabelItem.d.ts

@@ -67,7 +67,7 @@ export type BarLabelItemProps<V extends BarValueType | null> = Omit<BarLabelOwne
    * @param {BarLabelContext} context data about the bar.
    * @returns {string} The formatted label.
    */
-  barLabel?: 'value' | ((item: BarItem<V>, context: BarLabelContext) => string | null | undefined);
+  barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
   /**
    * The placement of the bar label.
    * It controls whether the label is rendered in the center or outside the bar.

package/esm/BarChart/BarLabel/BarLabelPlot.d.ts

@@ -3,29 +3,29 @@ import { type BarLabelItemProps } from "./BarLabelItem.js";
 import type { SeriesId } from "../../models/seriesType/common.js";
 import { type BarSeriesType, type BarValueType } from "../../models/seriesType/bar.js";
 import { type BarLabelFunction } from "./BarLabel.types.js";
-interface BarLabelPlotProps<V extends BarValueType | null = BarValueType | null> {
-  processedSeries: ProcessedBarLabelSeriesData<V>;
+interface BarLabelPlotProps {
+  processedSeries: ProcessedBarLabelSeriesData;
   className: string;
   skipAnimation?: boolean;
-  barLabel?: BarLabelItemProps<V | null>['barLabel'];
+  barLabel?: BarLabelItemProps<BarValueType | null>['barLabel'];
 }
-export interface ProcessedBarLabelSeriesData<V extends BarValueType | null> {
+export interface ProcessedBarLabelSeriesData {
   seriesId: SeriesId;
-  data: ProcessedBarLabelData<V>[];
-  barLabel?: 'value' | BarLabelFunction<V>;
+  data: ProcessedBarLabelData[];
+  barLabel?: 'value' | BarLabelFunction;
   barLabelPlacement?: BarSeriesType['barLabelPlacement'];
   layout?: 'vertical' | 'horizontal';
   xOrigin: number;
   yOrigin: number;
 }
-export interface ProcessedBarLabelData<V extends BarValueType | null> extends AnimationData {
+export interface ProcessedBarLabelData extends AnimationData {
   seriesId: SeriesId;
   dataIndex: number;
   color: string;
-  value: V;
+  value: BarValueType | null;
 }
 /**
  * @ignore - internal component.
  */
-declare function BarLabelPlot<V extends BarValueType | null = BarValueType | null>(props: BarLabelPlotProps<V>): import("react/jsx-runtime").JSX.Element | null;
+declare function BarLabelPlot(props: BarLabelPlotProps): import("react/jsx-runtime").JSX.Element | null;
 export { BarLabelPlot };

package/esm/BarChart/BarLabel/getBarLabel.d.ts

@@ -1,9 +1,9 @@
 import { type SeriesId } from "../../models/seriesType/common.js";
 import { type BarLabelFunction } from "./BarLabel.types.js";
 import { type BarValueType } from "../../models/seriesType/bar.js";
-export declare function getBarLabel<V extends BarValueType | null = BarValueType | null>(options: {
-  barLabel: 'value' | BarLabelFunction<V>;
-  value: V;
+export declare function getBarLabel(options: {
+  barLabel: 'value' | BarLabelFunction;
+  value: BarValueType | null;
   dataIndex: number;
   seriesId: SeriesId;
   height: number;

package/esm/BarChart/FocusedBar.js

@@ -19,7 +19,7 @@ export function FocusedBar(props) {
     yAxis,
     yAxisIds
   } = useYAxes();
-  if (focusedItem === null || focusedItem.seriesType !== 'bar' || !barSeries) {
+  if (focusedItem === null || focusedItem.type !== 'bar' || !barSeries) {
     return null;
   }
   const series = barSeries?.series[focusedItem.seriesId];

package/esm/BarChart/seriesConfig/bar/getSeriesWithDefaultValues.d.ts

@@ -1,5 +1,22 @@
 import { type AllSeriesType } from "../../../models/seriesType/index.js";
-export declare function getSeriesWithDefaultValues<T extends 'bar'>(seriesData: AllSeriesType<T>, seriesIndex: number, colors: readonly string[]): AllSeriesType<T> & {
+export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'bar'>, seriesIndex: number, colors: readonly string[]): {
   id: import("../../../index.js").SeriesId;
   color: string;
+  type: "bar";
+  data?: ReadonlyArray<import("../../../index.js").BarValueType | null>;
+  dataKey?: string;
+  label?: string | ((location: "tooltip" | "legend") => string);
+  layout?: "horizontal" | "vertical";
+  stackOffset?: import("../../../index.js").StackOffsetType;
+  minBarSize?: number;
+  barLabel?: "value" | ((item: import("../../index.js").BarItem, context: import("../../index.js").BarLabelContext) => string | null | undefined);
+  barLabelPlacement?: "center" | "outside";
+  valueFormatter?: import("../../../internals/index.js").SeriesValueFormatter<number | null> | undefined;
+  highlightScope?: import("../../../index.js").HighlightScope;
+  labelMarkType?: import("../../../internals/index.js").ChartsLabelMarkType;
+  colorGetter?: ((data: import("../../../internals/index.js").ColorCallbackValue<number | null>) => string) | undefined;
+  xAxisId?: import("../../../internals/index.js").AxisId;
+  yAxisId?: import("../../../internals/index.js").AxisId;
+  stack?: string;
+  stackOrder?: import("../../../index.js").StackOrderType;
 };

package/esm/BarChart/seriesConfig/bar/keyboardFocusHandler.d.ts

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

package/esm/BarChart/seriesConfig/bar/keyboardFocusHandler.js

@@ -0,0 +1,17 @@
+import { createGetNextIndexFocusedItem, createGetPreviousIndexFocusedItem, createGetNextSeriesFocusedItem, createGetPreviousSeriesFocusedItem } from "../../../internals/commonNextFocusItem.js";
+const outSeriesTypes = new Set(['bar', 'line', 'scatter']);
+const keyboardFocusHandler = event => {
+  switch (event.key) {
+    case 'ArrowRight':
+      return createGetNextIndexFocusedItem(outSeriesTypes);
+    case 'ArrowLeft':
+      return createGetPreviousIndexFocusedItem(outSeriesTypes);
+    case 'ArrowDown':
+      return createGetPreviousSeriesFocusedItem(outSeriesTypes);
+    case 'ArrowUp':
+      return createGetNextSeriesFocusedItem(outSeriesTypes);
+    default:
+      return null;
+  }
+};
+export default keyboardFocusHandler;

package/esm/BarChart/seriesConfig/bar/seriesProcessor.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 { warnOnce } from '@mui/x-internals/warning';
-import { getStackingGroups } from "../../../internals/stackSeries.js";
+import { getStackingGroups } from "../../../internals/stacking/index.js";
 const barValueFormatter = v => v == null ? '' : v.toLocaleString();
 const seriesProcessor = (params, dataset) => {
   const {

package/esm/BarChart/seriesConfig/index.js

@@ -2,6 +2,7 @@ import { getExtremumX, getExtremumY } from "./bar/extremums.js";
 import seriesProcessor from "./bar/seriesProcessor.js";
 import legendGetter from "./bar/legend.js";
 import getColor from "./bar/getColor.js";
+import keyboardFocusHandler from "./bar/keyboardFocusHandler.js";
 import tooltipGetter, { axisTooltipGetter } from "./bar/tooltip.js";
 import tooltipItemPositionGetter from "./bar/tooltipPosition.js";
 import { getSeriesWithDefaultValues } from "./bar/getSeriesWithDefaultValues.js";
@@ -14,5 +15,6 @@ export const barSeriesConfig = {
   axisTooltipGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
-  getSeriesWithDefaultValues
+  getSeriesWithDefaultValues,
+  keyboardFocusHandler
 };

package/esm/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { getValueToPositionMapper } from "../hooks/useScale.js";
 import { isOrdinalScale } from "../internals/scaleGuards.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { selectorChartsHighlightXAxisValue, selectorChartXAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useDrawingArea } from "../hooks/index.js";
@@ -22,8 +21,8 @@ export default function ChartsXHighlight(props) {
     height
   } = useDrawingArea();
   const store = useStore();
-  const axisXValues = useSelector(store, selectorChartsHighlightXAxisValue);
-  const xAxes = useSelector(store, selectorChartXAxis);
+  const axisXValues = store.use(selectorChartsHighlightXAxisValue);
+  const xAxes = store.use(selectorChartXAxis);
   if (axisXValues.length === 0) {
     return null;
   }

package/esm/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { getValueToPositionMapper } from "../hooks/useScale.js";
 import { isOrdinalScale } from "../internals/scaleGuards.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { selectorChartsHighlightYAxisValue, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useDrawingArea } from "../hooks/index.js";
@@ -22,8 +21,8 @@ export default function ChartsYHighlight(props) {
     width
   } = useDrawingArea();
   const store = useStore();
-  const axisYValues = useSelector(store, selectorChartsHighlightYAxisValue);
-  const yAxes = useSelector(store, selectorChartYAxis);
+  const axisYValues = store.use(selectorChartsHighlightYAxisValue);
+  const yAxes = store.use(selectorChartYAxis);
   if (axisYValues.length === 0) {
     return null;
   }

package/esm/ChartsBrushOverlay/ChartsBrushOverlay.js

@@ -7,7 +7,6 @@ import { useTheme } from '@mui/material/styles';
 import { brushOverlayClasses } from "./ChartsBrushOverlay.classes.js";
 import { selectorChartDrawingArea } from "../internals/plugins/corePlugins/useChartDimensions/index.js";
 import { selectorBrushStartX, selectorBrushStartY, selectorBrushCurrentX, selectorBrushCurrentY, selectorBrushConfig } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function BrushRect(props) {
@@ -23,13 +22,13 @@ function BrushRect(props) {
  */
 export function ChartsBrushOverlay(props) {
   const store = useStore();
-  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const drawingArea = store.use(selectorChartDrawingArea);
   const theme = useTheme();
-  const brushStartX = useSelector(store, selectorBrushStartX);
-  const brushStartY = useSelector(store, selectorBrushStartY);
-  const brushCurrentX = useSelector(store, selectorBrushCurrentX);
-  const brushCurrentY = useSelector(store, selectorBrushCurrentY);
-  const brushConfig = useSelector(store, selectorBrushConfig);
+  const brushStartX = store.use(selectorBrushStartX);
+  const brushStartY = store.use(selectorBrushStartY);
+  const brushCurrentX = store.use(selectorBrushCurrentX);
+  const brushCurrentY = store.use(selectorBrushCurrentY);
+  const brushConfig = store.use(selectorBrushConfig);
   if (brushStartX === null || brushStartY === null || brushCurrentX === null || brushCurrentY === null) {
     return null;
   }

package/esm/ChartsSurface/ChartsSurface.js

@@ -10,7 +10,6 @@ import useForkRef from '@mui/utils/useForkRef';
 import clsx from 'clsx';
 import { ChartsAxesGradients } from "../internals/components/ChartsAxesGradients/index.js";
 import { useSvgRef } from "../hooks/useSvgRef.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { selectorChartPropsHeight, selectorChartPropsWidth, selectorChartSvgWidth, selectorChartSvgHeight } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js";
 import { selectorChartsHasFocusedItem, selectorChartsIsKeyboardNavigationEnabled } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
@@ -57,13 +56,13 @@ const ChartsSurfaceStyles = styled('svg', {
  */
 const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inProps, ref) {
   const store = useStore();
-  const svgWidth = useSelector(store, selectorChartSvgWidth);
-  const svgHeight = useSelector(store, selectorChartSvgHeight);
-  const propsWidth = useSelector(store, selectorChartPropsWidth);
-  const propsHeight = useSelector(store, selectorChartPropsHeight);
-  const isKeyboardNavigationEnabled = useSelector(store, selectorChartsIsKeyboardNavigationEnabled);
-  const hasFocusedItem = useSelector(store, selectorChartsHasFocusedItem);
-  const hasZoom = useSelector(store, selectorChartHasZoom);
+  const svgWidth = store.use(selectorChartSvgWidth);
+  const svgHeight = store.use(selectorChartSvgHeight);
+  const propsWidth = store.use(selectorChartPropsWidth);
+  const propsHeight = store.use(selectorChartPropsHeight);
+  const isKeyboardNavigationEnabled = store.use(selectorChartsIsKeyboardNavigationEnabled);
+  const hasFocusedItem = store.use(selectorChartsHasFocusedItem);
+  const hasZoom = store.use(selectorChartHasZoom);
   const svgRef = useSvgRef();
   const handleRef = useForkRef(svgRef, ref);
   const themeProps = useThemeProps({

package/esm/ChartsTooltip/ChartsTooltipContainer.js

@@ -13,7 +13,6 @@ import NoSsr from '@mui/material/NoSsr';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { useIsFineMainPointer, usePointerType } from "./utils.js";
 import { useUtilityClasses } from "./chartsTooltipClasses.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { selectorChartsLastInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { selectorChartsTooltipItemIsDefined, selectorChartsTooltipItemPosition } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
@@ -83,11 +82,11 @@ function ChartsTooltipContainer(inProps) {
   }));
   const axisSystem = useAxisSystem();
   const store = useStore();
-  const shouldPreventBecauseOfBrush = useSelector(store, selectorBrushShouldPreventTooltip);
-  const isOpen = useSelector(store, getIsOpenSelector(trigger, axisSystem, shouldPreventBecauseOfBrush));
-  const lastInteraction = useSelector(store, selectorChartsLastInteraction);
+  const shouldPreventBecauseOfBrush = store.use(selectorBrushShouldPreventTooltip);
+  const isOpen = store.use(getIsOpenSelector(trigger, axisSystem, shouldPreventBecauseOfBrush));
+  const lastInteraction = store.use(selectorChartsLastInteraction);
   const computedAnchor = lastInteraction === 'keyboard' ? 'node' : anchor;
-  const itemPosition = useSelector(store, trigger === 'item' && computedAnchor === 'node' ? selectorChartsTooltipItemPosition : selectorReturnNull, position);
+  const itemPosition = store.use(trigger === 'item' && computedAnchor === 'node' ? selectorChartsTooltipItemPosition : selectorReturnNull, position);
   React.useEffect(() => {
     const svgElement = svgRef.current;
     if (svgElement === null) {

package/esm/ChartsTooltip/useAxisTooltip.js

@@ -3,7 +3,6 @@
 import { useSeries } from "../hooks/useSeries.js";
 import { useColorProcessor } from "../internals/plugins/corePlugins/useChartSeries/useColorProcessor.js";
 import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { getLabel } from "../internals/getLabel.js";
 import { isCartesianSeriesType } from "../internals/isCartesian.js";
 import { utcFormatter } from "./utils.js";
@@ -43,9 +42,9 @@ export function useAxisTooltip(params = {}) {
   const defaultYAxis = useYAxis();
   const defaultRotationAxis = useRotationAxis();
   const store = useStore();
-  const tooltipXAxes = useSelector(store, selectorChartsInteractionTooltipXAxes);
-  const tooltipYAxes = useSelector(store, selectorChartsInteractionTooltipYAxes);
-  const tooltipRotationAxes = useSelector(store, selectorChartsInteractionTooltipRotationAxes);
+  const tooltipXAxes = store.use(selectorChartsInteractionTooltipXAxes);
+  const tooltipYAxes = store.use(selectorChartsInteractionTooltipYAxes);
+  const tooltipRotationAxes = store.use(selectorChartsInteractionTooltipRotationAxes);
   const series = useSeries();
   const {
     xAxis

package/esm/ChartsTooltip/useItemTooltip.js

@@ -2,7 +2,6 @@
 
 import { useSeries } from "../hooks/useSeries.js";
 import { selectorChartsTooltipItem } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { useRotationAxes, useXAxes, useYAxes } from "../hooks/useAxis.js";
 import { useZAxes } from "../hooks/useZAxis.js";
@@ -10,8 +9,8 @@ import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useC
 import { isCartesianSeries } from "../internals/isCartesian.js";
 export function useInternalItemTooltip() {
   const store = useStore();
-  const identifier = useSelector(store, selectorChartsTooltipItem);
-  const seriesConfig = useSelector(store, selectorChartSeriesConfig);
+  const identifier = store.use(selectorChartsTooltipItem);
+  const seriesConfig = store.use(selectorChartSeriesConfig);
   const series = useSeries();
   const {
     xAxis,

package/esm/ChartsWrapper/ChartsWrapper.js

@@ -4,7 +4,6 @@ import { styled } from '@mui/material/styles';
 import { shouldForwardProp } from '@mui/system/createStyled';
 import { useChartRootRef } from "../hooks/useChartRootRef.js";
 import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { selectorChartPropsHeight, selectorChartPropsWidth } from "../internals/plugins/corePlugins/useChartDimensions/index.js";
 import { chartsToolbarClasses } from "../Toolbar/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -117,8 +116,8 @@ function ChartsWrapper(props) {
   } = props;
   const chartRootRef = useChartRootRef();
   const store = useStore();
-  const propsWidth = useSelector(store, selectorChartPropsWidth);
-  const propsHeight = useSelector(store, selectorChartPropsHeight);
+  const propsWidth = store.use(selectorChartPropsWidth);
+  const propsHeight = store.use(selectorChartPropsHeight);
   return /*#__PURE__*/_jsx(Root, {
     ref: chartRootRef,
     ownerState: props,

package/esm/LineChart/FocusedLineMark.js

@@ -17,7 +17,7 @@ export function FocusedLineMark() {
     yAxis,
     yAxisIds
   } = useYAxes();
-  if (focusedItem === null || focusedItem.seriesType !== 'line' || !lineSeries) {
+  if (focusedItem === null || focusedItem.type !== 'line' || !lineSeries) {
     return null;
   }
   const series = lineSeries?.series[focusedItem.seriesId];

package/esm/LineChart/LineHighlightPlot.js

@@ -6,7 +6,6 @@ const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { LineHighlightElement } from "./LineHighlightElement.js";
 import { getValueToPositionMapper } from "../hooks/useScale.js";
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
@@ -45,7 +44,7 @@ function LineHighlightPlot(props) {
     instance
   } = useChartContext();
   const store = useStore();
-  const highlightedIndexes = useSelector(store, selectorChartsHighlightXAxisIndex);
+  const highlightedIndexes = store.use(selectorChartsHighlightXAxisIndex);
   if (highlightedIndexes.length === 0) {
     return null;
   }

package/esm/LineChart/MarkPlot.js

@@ -11,7 +11,6 @@ import { MarkElement } from "./MarkElement.js";
 import { useItemHighlightedGetter, useXAxes, useYAxes } from "../hooks/index.js";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
 import { selectorChartsHighlightXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
 import { useMarkPlotData } from "./useMarkPlotData.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -48,7 +47,7 @@ function MarkPlot(props) {
     isFaded,
     isHighlighted
   } = useItemHighlightedGetter();
-  const xAxisHighlightIndexes = useSelector(store, selectorChartsHighlightXAxisIndex);
+  const xAxisHighlightIndexes = store.use(selectorChartsHighlightXAxisIndex);
   const highlightedItems = React.useMemo(() => {
     const rep = {};
     for (const {

package/esm/LineChart/seriesConfig/index.js

@@ -5,6 +5,7 @@ import legendGetter from "./legend.js";
 import tooltipGetter, { axisTooltipGetter } from "./tooltip.js";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
 import tooltipItemPositionGetter from "./tooltipPosition.js";
+import keyboardFocusHandler from "./keyboardFocusHandler.js";
 export const lineSeriesConfig = {
   colorProcessor: getColor,
   seriesProcessor,
@@ -14,5 +15,6 @@ export const lineSeriesConfig = {
   axisTooltipGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
-  getSeriesWithDefaultValues
+  getSeriesWithDefaultValues,
+  keyboardFocusHandler
 };

package/esm/LineChart/seriesConfig/keyboardFocusHandler.d.ts

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

package/esm/LineChart/seriesConfig/keyboardFocusHandler.js

@@ -0,0 +1,17 @@
+import { createGetNextIndexFocusedItem, createGetPreviousIndexFocusedItem, createGetNextSeriesFocusedItem, createGetPreviousSeriesFocusedItem } from "../../internals/commonNextFocusItem.js";
+const outSeriesTypes = new Set(['bar', 'line', 'scatter']);
+const keyboardFocusHandler = event => {
+  switch (event.key) {
+    case 'ArrowRight':
+      return createGetNextIndexFocusedItem(outSeriesTypes);
+    case 'ArrowLeft':
+      return createGetPreviousIndexFocusedItem(outSeriesTypes);
+    case 'ArrowDown':
+      return createGetPreviousSeriesFocusedItem(outSeriesTypes);
+    case 'ArrowUp':
+      return createGetNextSeriesFocusedItem(outSeriesTypes);
+    default:
+      return null;
+  }
+};
+export default keyboardFocusHandler;

package/esm/LineChart/seriesConfig/seriesProcessor.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 { warnOnce } from '@mui/x-internals/warning';
-import { getStackingGroups } from "../../internals/stackSeries.js";
+import { getStackingGroups } from "../../internals/stacking/index.js";
 const seriesProcessor = (params, dataset) => {
   const {
     seriesOrder,

package/esm/PieChart/FocusedPieArc.d.ts

@@ -0,0 +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;

package/esm/PieChart/FocusedPieArc.js

@@ -0,0 +1,51 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import { useFocusedItem } from "../hooks/useFocusedItem.js";
+import { usePieSeriesContext, usePieSeriesLayout } from "../hooks/usePieSeries.js";
+import { PieArc, pieArcClasses } from "./PieArc.js";
+import { useItemHighlighted } from "../hooks/useItemHighlighted.js";
+import { getModifiedArcProperties } from "./dataTransform/getModifiedArcProperties.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FocusedPieArc(props) {
+  const theme = useTheme();
+  const focusedItem = useFocusedItem();
+  const pieSeriesLayout = usePieSeriesLayout();
+  const {
+    isHighlighted,
+    isFaded
+  } = useItemHighlighted(focusedItem);
+  const pieSeries = usePieSeriesContext();
+  if (focusedItem === null || focusedItem.type !== 'pie' || !pieSeries) {
+    return null;
+  }
+  const series = pieSeries?.series[focusedItem.seriesId];
+  const {
+    center,
+    radius
+  } = pieSeriesLayout[focusedItem.seriesId];
+  if (!series || !center || !radius) {
+    return null;
+  }
+  const item = series.data[focusedItem.dataIndex];
+  const arcSizes = getModifiedArcProperties(series, pieSeriesLayout[focusedItem.seriesId], isHighlighted, isFaded);
+  return /*#__PURE__*/_jsx(PieArc, _extends({
+    transform: `translate(${pieSeriesLayout[series.id].center.x}, ${pieSeriesLayout[series.id].center.y})`,
+    startAngle: item.startAngle,
+    endAngle: item.endAngle,
+    color: "transparent",
+    pointerEvents: "none",
+    skipInteraction: true,
+    skipAnimation: true,
+    stroke: (theme.vars ?? theme).palette.text.primary,
+    id: series.id,
+    className: pieArcClasses.focusIndicator,
+    dataIndex: focusedItem.dataIndex,
+    isFaded: false,
+    isHighlighted: false,
+    isFocused: false,
+    strokeWidth: 3
+  }, arcSizes, props));
+}

package/esm/PieChart/PieArcPlot.js

@@ -5,11 +5,9 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useTheme } from '@mui/material/styles';
-import { useFocusedItem } from "../hooks/useFocusedItem.js";
-import { PieArc, pieArcClasses } from "./PieArc.js";
+import { PieArc } from "./PieArc.js";
 import { useTransformData } from "./dataTransform/useTransformData.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 function PieArcPlot(props) {
   const {
       slots,
@@ -28,7 +26,6 @@ function PieArcPlot(props) {
       skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const theme = useTheme();
   const transformedData = useTransformData({
     innerRadius,
     outerRadius,
@@ -39,18 +36,12 @@ function PieArcPlot(props) {
     faded,
     data
   });
-  const {
-    dataIndex,
-    seriesId,
-    seriesType
-  } = useFocusedItem() ?? {};
-  const focusedItem = dataIndex !== undefined && seriesId === id && seriesType === 'pie' ? transformedData[dataIndex] : null;
   if (data.length === 0) {
     return null;
   }
   const Arc = slots?.pieArc ?? PieArc;
-  return /*#__PURE__*/_jsxs("g", _extends({}, other, {
-    children: [transformedData.map((item, index) => /*#__PURE__*/_jsx(Arc, _extends({
+  return /*#__PURE__*/_jsx("g", _extends({}, other, {
+    children: transformedData.map((item, index) => /*#__PURE__*/_jsx(Arc, _extends({
       startAngle: item.startAngle,
       endAngle: item.endAngle,
       paddingAngle: item.paddingAngle,
@@ -71,26 +62,7 @@ function PieArcPlot(props) {
           dataIndex: index
         }, item);
       })
-    }, slotProps?.pieArc), item.dataIndex)), focusedItem && /*#__PURE__*/_jsx(Arc, {
-      startAngle: focusedItem.startAngle,
-      endAngle: focusedItem.endAngle,
-      paddingAngle: focusedItem.paddingAngle,
-      innerRadius: focusedItem.innerRadius,
-      color: "transparent",
-      pointerEvents: "none",
-      skipInteraction: true,
-      outerRadius: focusedItem.outerRadius,
-      cornerRadius: focusedItem.cornerRadius,
-      skipAnimation: true,
-      stroke: (theme.vars ?? theme).palette.text.primary,
-      id: id,
-      className: pieArcClasses.focusIndicator,
-      dataIndex: focusedItem.dataIndex,
-      isFaded: false,
-      isHighlighted: false,
-      isFocused: false,
-      strokeWidth: 3
-    })]
+    }, slotProps?.pieArc), item.dataIndex))
   }));
 }
 process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {

package/esm/PieChart/PieChart.js

@@ -17,6 +17,7 @@ import { useChartContainerProps } from "../ChartContainer/useChartContainerProps
 import { ChartsWrapper } from "../ChartsWrapper/index.js";
 import { PIE_CHART_PLUGINS } from "./PieChart.plugins.js";
 import { defaultizeMargin } from "../internals/defaultizeMargin.js";
+import { FocusedPieArc } from "./FocusedPieArc.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -88,7 +89,7 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
           slots: slots,
           slotProps: slotProps,
           onItemClick: onItemClick
-        }), /*#__PURE__*/_jsx(ChartsOverlay, {
+        }), /*#__PURE__*/_jsx(FocusedPieArc, {}), /*#__PURE__*/_jsx(ChartsOverlay, {
           loading: loading,
           slots: slots,
           slotProps: slotProps

package/esm/PieChart/dataTransform/getModifiedArcProperties.d.ts

@@ -0,0 +1,11 @@
+import type { DefaultizedPieSeriesType, PieSeriesLayout } from "../../models/seriesType/pie.js";
+/**
+ * Function that returns arc properties after applying transformation from highlight/fade states.
+ */
+export declare function getModifiedArcProperties(seriesDef: Pick<DefaultizedPieSeriesType, 'cornerRadius' | 'paddingAngle' | 'id' | 'highlighted' | 'faded' | 'data'>, seriesLayout: Pick<PieSeriesLayout, 'radius'>, isHighlighted: boolean, isFaded: boolean): {
+  paddingAngle: number;
+  innerRadius: number;
+  outerRadius: number;
+  cornerRadius: number;
+  arcLabelRadius: number;
+};

package/esm/PieChart/dataTransform/getModifiedArcProperties.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { deg2rad } from "../../internals/angleConversion.js";
+
+/**
+ * Function that returns arc properties after applying transformation from highlight/fade states.
+ */
+export function getModifiedArcProperties(seriesDef, seriesLayout, isHighlighted, isFaded) {
+  const {
+    faded,
+    highlighted,
+    paddingAngle: basePaddingAngle = 0,
+    cornerRadius: baseCornerRadius = 0
+  } = seriesDef;
+  const {
+    radius: {
+      inner: baseInnerRadius = 0,
+      label: baseArcLabelRadius,
+      outer: baseOuterRadius
+    }
+  } = seriesLayout;
+  const attributesOverride = _extends({
+    additionalRadius: 0
+  }, isFaded && faded || isHighlighted && highlighted || {});
+  const paddingAngle = Math.max(0, deg2rad(attributesOverride.paddingAngle ?? basePaddingAngle));
+  const innerRadius = Math.max(0, attributesOverride.innerRadius ?? baseInnerRadius);
+  const outerRadius = Math.max(0, attributesOverride.outerRadius ?? baseOuterRadius + attributesOverride.additionalRadius);
+  const cornerRadius = attributesOverride.cornerRadius ?? baseCornerRadius;
+  const arcLabelRadius = attributesOverride.arcLabelRadius ?? baseArcLabelRadius ?? (innerRadius + outerRadius) / 2;
+  return {
+    paddingAngle,
+    innerRadius,
+    outerRadius,
+    cornerRadius,
+    arcLabelRadius
+  };
+}