@mui/x-charts 8.11.3 → 8.13.0

package/ChartsWrapper/ChartsWrapper.js

@@ -34,10 +34,6 @@ const getAlignItems = position => {
   }
   return 'center';
 };
-const addToolbar = template => {
-  return `"toolbar"
-          ${template}`;
-};
 const getGridTemplateAreas = (hideLegend, direction, position) => {
   if (hideLegend) {
     return `"chart"`;
@@ -55,26 +51,25 @@ const getGridTemplateAreas = (hideLegend, direction, position) => {
   return `"legend"
           "chart"`;
 };
-const getTemplateColumns = (hideLegend, direction, position, width) => {
-  if (direction === 'vertical') {
-    if (hideLegend) {
-      return '1fr';
-    }
-    if (position?.horizontal === 'start') {
-      return 'auto 1fr';
-    }
-    return `${width ? 'auto' : '1fr'} auto`;
+const getTemplateColumns = (hideLegend = false, direction = 'horizontal', horizontalPosition = 'end', width = undefined) => {
+  const drawingAreaColumn = width ? 'auto' : '1fr';
+  if (direction === 'horizontal') {
+    return drawingAreaColumn;
+  }
+  if (hideLegend) {
+    return drawingAreaColumn;
   }
-  return '100%';
+  return horizontalPosition === 'start' ? `auto ${drawingAreaColumn}` : `${drawingAreaColumn} auto`;
 };
-const getTemplateRows = (hideLegend, direction) => {
+const getTemplateRows = (hideLegend = false, direction = 'horizontal', verticalPosition = 'top') => {
+  const drawingAreaRow = '1fr';
   if (direction === 'vertical') {
-    if (hideLegend) {
-      return 'auto';
-    }
-    return 'auto 1fr';
+    return drawingAreaRow;
+  }
+  if (hideLegend) {
+    return drawingAreaRow;
   }
-  return 'auto 1fr';
+  return verticalPosition === 'bottom' ? `${drawingAreaRow} auto` : `auto ${drawingAreaRow}`;
 };
 const Root = (0, _styles.styled)('div', {
   name: 'MuiChartsWrapper',
@@ -83,32 +78,39 @@ const Root = (0, _styles.styled)('div', {
 })(({
   ownerState,
   width
-}) => ({
-  variants: [{
-    props: {
-      extendVertically: true
+}) => {
+  const gridTemplateColumns = getTemplateColumns(ownerState.hideLegend, ownerState.legendDirection, ownerState.legendPosition?.horizontal, width);
+  const gridTemplateRows = getTemplateRows(ownerState.hideLegend, ownerState.legendDirection, ownerState.legendPosition?.vertical);
+  const gridTemplateAreas = getGridTemplateAreas(ownerState.hideLegend, ownerState.legendDirection, ownerState.legendPosition);
+  return {
+    variants: [{
+      props: {
+        extendVertically: true
+      },
+      style: {
+        height: '100%'
+      }
+    }],
+    flex: 1,
+    display: 'grid',
+    gridTemplateColumns,
+    gridTemplateRows,
+    gridTemplateAreas,
+    [`&:has(.${_Toolbar.chartsToolbarClasses.root})`]: {
+      // Add a row for toolbar if there is one.
+      gridTemplateRows: `auto ${gridTemplateRows}`,
+      gridTemplateAreas: `"${gridTemplateColumns.split(' ').map(() => 'toolbar').join(' ')}"
+        ${gridTemplateAreas}`
     },
-    style: {
-      height: '100%'
-    }
-  }],
-  flex: 1,
-  display: 'grid',
-  gridTemplateColumns: getTemplateColumns(ownerState.hideLegend, ownerState.legendDirection, ownerState.legendPosition, width),
-  gridTemplateRows: getTemplateRows(ownerState.hideLegend, ownerState.legendDirection),
-  [`&:has(.${_Toolbar.chartsToolbarClasses.root})`]: {
-    gridTemplateAreas: addToolbar(getGridTemplateAreas(ownerState.hideLegend, ownerState.legendDirection, ownerState.legendPosition))
-  },
-  [`&:not(:has(.${_Toolbar.chartsToolbarClasses.root}))`]: {
-    gridTemplateAreas: getGridTemplateAreas(ownerState.hideLegend, ownerState.legendDirection, ownerState.legendPosition)
-  },
-  justifyContent: 'center',
-  justifyItems: getJustifyItems(ownerState.legendPosition),
-  alignItems: getAlignItems(ownerState.legendPosition),
-  [`& > .${_Toolbar.chartsToolbarClasses.root}`]: {
-    justifySelf: 'center'
-  }
-}));
+    [`& .${_Toolbar.chartsToolbarClasses.root}`]: {
+      gridArea: 'toolbar',
+      justifySelf: 'center'
+    },
+    justifyContent: 'center',
+    justifyItems: getJustifyItems(ownerState.legendPosition),
+    alignItems: getAlignItems(ownerState.legendPosition)
+  };
+});
 
 /**
  * Wrapper for the charts components.
@@ -148,8 +150,9 @@ process.env.NODE_ENV !== "production" ? ChartsWrapper.propTypes = {
   extendVertically: _propTypes.default.bool,
   /**
    * If `true`, the legend is not rendered.
+   * @default false
    */
-  hideLegend: _propTypes.default.bool.isRequired,
+  hideLegend: _propTypes.default.bool,
   /**
    * The direction of the legend.
    * @default 'horizontal'

package/ChartsXAxis/useAxisTicksProps.d.ts

@@ -3685,9 +3685,11 @@ export declare function useAxisTicksProps(inProps: ChartsXAxisProps): {
     x?: number | string | undefined | undefined;
     y?: number | string | undefined | undefined;
     radius?: number | string | undefined | undefined;
+    href?: string | undefined | undefined;
     media?: string | undefined | undefined;
-    method?: string | undefined | undefined;
     target?: string | undefined | undefined;
+    from?: number | string | undefined | undefined;
+    method?: string | undefined | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     accentHeight?: number | string | undefined | undefined;
     accumulate?: "none" | "sum" | undefined | undefined;
@@ -3731,7 +3733,6 @@ export declare function useAxisTicksProps(inProps: ChartsXAxisProps): {
     focusable?: "auto" | (boolean | "true" | "false") | undefined;
     format?: number | string | undefined | undefined;
     fr?: number | string | undefined | undefined;
-    from?: number | string | undefined | undefined;
     fx?: number | string | undefined | undefined;
     fy?: number | string | undefined | undefined;
     g1?: number | string | undefined | undefined;
@@ -3744,7 +3745,6 @@ export declare function useAxisTicksProps(inProps: ChartsXAxisProps): {
     hanging?: number | string | undefined | undefined;
     horizAdvX?: number | string | undefined | undefined;
     horizOriginX?: number | string | undefined | undefined;
-    href?: string | undefined | undefined;
     ideographic?: number | string | undefined | undefined;
     in2?: number | string | undefined | undefined;
     in?: string | undefined | undefined;

package/ChartsYAxis/useAxisTicksProps.d.ts

@@ -3604,9 +3604,11 @@ export declare function useAxisTicksProps(inProps: ChartsYAxisProps): {
     x?: number | string | undefined | undefined;
     y?: number | string | undefined | undefined;
     radius?: number | string | undefined | undefined;
+    href?: string | undefined | undefined;
     media?: string | undefined | undefined;
-    method?: string | undefined | undefined;
     target?: string | undefined | undefined;
+    from?: number | string | undefined | undefined;
+    method?: string | undefined | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     accentHeight?: number | string | undefined | undefined;
     accumulate?: "none" | "sum" | undefined | undefined;
@@ -3650,7 +3652,6 @@ export declare function useAxisTicksProps(inProps: ChartsYAxisProps): {
     focusable?: "auto" | (boolean | "true" | "false") | undefined;
     format?: number | string | undefined | undefined;
     fr?: number | string | undefined | undefined;
-    from?: number | string | undefined | undefined;
     fx?: number | string | undefined | undefined;
     fy?: number | string | undefined | undefined;
     g1?: number | string | undefined | undefined;
@@ -3663,7 +3664,6 @@ export declare function useAxisTicksProps(inProps: ChartsYAxisProps): {
     hanging?: number | string | undefined | undefined;
     horizAdvX?: number | string | undefined | undefined;
     horizOriginX?: number | string | undefined | undefined;
-    href?: string | undefined | undefined;
     ideographic?: number | string | undefined | undefined;
     in2?: number | string | undefined | undefined;
     in?: string | undefined | undefined;

package/LineChart/FocusedMark.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function FocusedMark(): React.JSX.Element | null;

package/LineChart/FocusedMark.js

@@ -0,0 +1,44 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FocusedMark = FocusedMark;
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _useFocusedItem = require("../hooks/useFocusedItem");
+var _hooks = require("../hooks");
+var _jsxRuntime = require("react/jsx-runtime");
+const RADIUS = 6;
+function FocusedMark() {
+  const theme = (0, _styles.useTheme)();
+  const focusedItem = (0, _useFocusedItem.useFocusedItem)();
+  const lineSeries = (0, _hooks.useLineSeriesContext)();
+  const {
+    xAxis,
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _hooks.useYAxes)();
+  if (focusedItem === null || focusedItem.seriesType !== 'line' || !lineSeries) {
+    return null;
+  }
+  const series = lineSeries?.series[focusedItem.seriesId];
+  const xAxisId = series.xAxisId ?? xAxisIds[0];
+  const yAxisId = series.yAxisId ?? yAxisIds[0];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+    fill: "none",
+    stroke: (theme.vars ?? theme).palette.text.primary,
+    strokeWidth: 2,
+    x: xAxis[xAxisId].scale(xAxis[xAxisId].data[focusedItem.dataIndex]) - RADIUS,
+    y: yAxis[yAxisId].scale(series.stackedData[focusedItem.dataIndex][1]) - RADIUS,
+    width: 2 * RADIUS,
+    height: 2 * RADIUS,
+    rx: 3,
+    ry: 3
+  });
+}

package/LineChart/LineChart.d.ts

@@ -14,12 +14,12 @@ import { ChartsAxisSlotProps, ChartsAxisSlots } from "../models/axis.js";
 import { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from "./LineHighlightPlot.js";
 import { ChartsGridProps } from "../ChartsGrid/index.js";
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/index.js";
-import { LineChartPluginsSignatures } from "./LineChart.plugins.js";
+import { LineChartPluginSignatures } from "./LineChart.plugins.js";
 import { ChartsToolbarSlots, ChartsToolbarSlotProps } from "../Toolbar/index.js";
 export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export type LineSeries = MakeOptional<LineSeriesType, 'type'>;
-export interface LineChartProps extends Omit<ChartContainerProps<'line', LineChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+export interface LineChartProps extends Omit<ChartContainerProps<'line', LineChartPluginSignatures>, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the line chart.
    * An array of [[LineSeries]] objects.

package/LineChart/LineChart.js

@@ -27,6 +27,7 @@ var _useChartContainerProps = require("../ChartContainer/useChartContainerProps"
 var _ChartDataProvider = require("../ChartDataProvider");
 var _ChartsSurface = require("../ChartsSurface");
 var _ChartsWrapper = require("../ChartsWrapper");
+var _FocusedMark = require("./FocusedMark");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -70,7 +71,7 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
-        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedMark.FocusedMark, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, (0, _extends2.default)({}, markPlotProps))
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineHighlightPlot.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
@@ -118,6 +119,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: _propTypes.default.bool,
+  enableKeyboardNavigation: _propTypes.default.bool,
   /**
    * Options to enable features planned for the next major.
    */

package/LineChart/LineChart.plugins.d.ts

@@ -2,6 +2,7 @@ import { UseChartZAxisSignature } from "../internals/plugins/featurePlugins/useC
 import { UseChartCartesianAxisSignature } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+import { UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
-export type LineChartPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'line'>, UseChartInteractionSignature, UseChartHighlightSignature];
-export declare const LINE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<LineChartPluginsSignatures>;
+export type LineChartPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'line'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
+export declare const LINE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<LineChartPluginSignatures>;

package/LineChart/LineChart.plugins.js

@@ -8,4 +8,5 @@ var _useChartZAxis = require("../internals/plugins/featurePlugins/useChartZAxis"
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
-const LINE_CHART_PLUGINS = exports.LINE_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartCartesianAxis.useChartCartesianAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight];
+var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
+const LINE_CHART_PLUGINS = exports.LINE_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartCartesianAxis.useChartCartesianAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight, _useChartKeyboardNavigation.useChartKeyboardNavigation];

package/LineChart/index.d.ts

@@ -9,5 +9,6 @@ export * from "./LineElement.js";
 export * from "./AnimatedLine.js";
 export * from "./MarkElement.js";
 export * from "./LineHighlightElement.js";
+export * from "./LineChart.plugins.js";
 export type { MarkElementClasses, MarkElementClassKey } from "./markElementClasses.js";
 export { getMarkElementUtilityClass, markElementClasses } from "./markElementClasses.js";

package/LineChart/index.js

@@ -151,4 +151,16 @@ Object.keys(_LineHighlightElement).forEach(function (key) {
     }
   });
 });
+var _LineChart2 = require("./LineChart.plugins");
+Object.keys(_LineChart2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _LineChart2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _LineChart2[key];
+    }
+  });
+});
 var _markElementClasses = require("./markElementClasses");

package/LineChart/useLineChartProps.d.ts

@@ -12,7 +12,7 @@ import { LineHighlightPlotProps } from "./LineHighlightPlot.js";
 import { LinePlotProps } from "./LinePlot.js";
 import { MarkPlotProps } from "./MarkPlot.js";
 import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
-import { LineChartPluginsSignatures } from "./LineChart.plugins.js";
+import { LineChartPluginSignatures } from "./LineChart.plugins.js";
 /**
  * A helper function that extracts LineChartProps from the input props
  * and returns an object with props for the children components of LineChart.
@@ -22,7 +22,7 @@ import { LineChartPluginsSignatures } from "./LineChart.plugins.js";
  */
 export declare const useLineChartProps: (props: LineChartProps) => {
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
-  chartContainerProps: ChartContainerProps<"line", LineChartPluginsSignatures>;
+  chartContainerProps: ChartContainerProps<"line", LineChartPluginSignatures>;
   gridProps: ChartsGridProps;
   clipPathProps: ChartsClipPathProps;
   clipPathGroupProps: {

package/PieChart/PieArc.d.ts

@@ -12,6 +12,8 @@ export interface PieArcClasses {
    * Needs to be suffixed with the series ID: `.${pieArcClasses.series}-${seriesId}`.
    */
   series: string;
+  /** Styles applied to the focus indicator element. */
+  focusIndicator: string;
 }
 export type PieArcClassKey = keyof PieArcClasses;
 interface PieArcOwnerState {
@@ -20,6 +22,8 @@ interface PieArcOwnerState {
   color: string;
   isFaded: boolean;
   isHighlighted: boolean;
+  isFocused: boolean;
+  stroke?: string;
   classes?: Partial<PieArcClasses>;
 }
 export declare function getPieArcUtilityClass(slot: string): string;

package/PieChart/PieArc.js

@@ -13,6 +13,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _styles = require("@mui/material/styles");
@@ -21,11 +22,11 @@ var _hooks = require("../hooks");
 var _animation = require("../internals/animation/animation");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["classes", "color", "dataIndex", "id", "isFaded", "isHighlighted", "onClick", "cornerRadius", "startAngle", "endAngle", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation"];
+const _excluded = ["className", "classes", "color", "dataIndex", "id", "isFaded", "isHighlighted", "isFocused", "onClick", "cornerRadius", "startAngle", "endAngle", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "stroke"];
 function getPieArcUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPieArc', slot);
 }
-const pieArcClasses = exports.pieArcClasses = (0, _generateUtilityClasses.default)('MuiPieArc', ['root', 'highlighted', 'faded', 'series']);
+const pieArcClasses = exports.pieArcClasses = (0, _generateUtilityClasses.default)('MuiPieArc', ['root', 'highlighted', 'faded', 'series', 'focusIndicator']);
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -43,23 +44,21 @@ const PieArcRoot = (0, _styles.styled)('path', {
   name: 'MuiPieArc',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.arc // FIXME: Inconsistent naming with slot
-})(({
-  theme
-}) => ({
-  // Got to move stroke to an element prop instead of style.
-  stroke: (theme.vars || theme).palette.background.paper,
+})({
   transitionProperty: 'opacity, fill, filter',
   transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
   transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION
-}));
+});
 const PieArc = exports.PieArc = /*#__PURE__*/React.forwardRef(function PieArc(props, ref) {
   const {
+      className,
       classes: innerClasses,
       color,
       dataIndex,
       id,
       isFaded,
       isHighlighted,
+      isFocused,
       onClick,
       cornerRadius,
       startAngle,
@@ -67,16 +66,20 @@ const PieArc = exports.PieArc = /*#__PURE__*/React.forwardRef(function PieArc(pr
       innerRadius,
       outerRadius,
       paddingAngle,
-      skipAnimation
+      skipAnimation,
+      stroke: strokeProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const theme = (0, _styles.useTheme)();
+  const stroke = strokeProp ?? (theme.vars || theme).palette.background.paper;
   const ownerState = {
     id,
     dataIndex,
     classes: innerClasses,
     color,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    isFocused
   };
   const classes = useUtilityClasses(ownerState);
   const interactionProps = (0, _useInteractionItemProps.useInteractionItemProps)({
@@ -98,10 +101,11 @@ const PieArc = exports.PieArc = /*#__PURE__*/React.forwardRef(function PieArc(pr
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,
-    className: classes.root,
+    className: (0, _clsx.default)(classes.root, className),
     fill: ownerState.color,
     opacity: ownerState.isFaded ? 0.3 : 1,
     filter: ownerState.isHighlighted ? 'brightness(120%)' : 'none',
+    stroke: stroke,
     strokeWidth: 1,
     strokeLinejoin: "round",
     "data-highlighted": ownerState.isHighlighted || undefined,
@@ -121,6 +125,7 @@ process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
   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,

package/PieChart/PieArcPlot.js

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _useFocusedItem = require("../hooks/useFocusedItem");
 var _PieArc = require("./PieArc");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -33,6 +35,7 @@ function PieArcPlot(props) {
       skipAnimation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const theme = (0, _styles.useTheme)();
   const transformedData = (0, _useTransformData.useTransformData)({
     innerRadius,
     outerRadius,
@@ -43,12 +46,16 @@ function PieArcPlot(props) {
     faded,
     data
   });
+  const {
+    dataIndex: focusedIndex = -1
+  } = (0, _useFocusedItem.useFocusedItem)() ?? {};
+  const focusedItem = focusedIndex !== -1 ? transformedData[focusedIndex] : null;
   if (data.length === 0) {
     return null;
   }
   const Arc = slots?.pieArc ?? _PieArc.PieArc;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
-    children: transformedData.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Arc, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, other, {
+    children: [transformedData.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Arc, (0, _extends2.default)({
       startAngle: item.startAngle,
       endAngle: item.endAngle,
       paddingAngle: item.paddingAngle,
@@ -61,6 +68,7 @@ function PieArcPlot(props) {
       dataIndex: index,
       isFaded: item.isFaded,
       isHighlighted: item.isHighlighted,
+      isFocused: item.isFocused,
       onClick: onItemClick && (event => {
         onItemClick(event, {
           type: 'pie',
@@ -68,7 +76,24 @@ function PieArcPlot(props) {
           dataIndex: index
         }, item);
       })
-    }, slotProps?.pieArc), item.dataIndex))
+    }, slotProps?.pieArc), item.dataIndex)), focusedItem && /*#__PURE__*/(0, _jsxRuntime.jsx)(Arc, {
+      startAngle: focusedItem.startAngle,
+      endAngle: focusedItem.endAngle,
+      paddingAngle: focusedItem.paddingAngle,
+      innerRadius: focusedItem.innerRadius,
+      color: focusedItem.color,
+      outerRadius: focusedItem.outerRadius,
+      cornerRadius: focusedItem.cornerRadius,
+      skipAnimation: true,
+      stroke: (theme.vars ?? theme).palette.text.primary,
+      id: id,
+      className: _PieArc.pieArcClasses.focusIndicator,
+      dataIndex: focusedIndex,
+      isFaded: false,
+      isHighlighted: false,
+      isFocused: false,
+      strokeWidth: 3
+    })]
   }));
 }
 process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {

package/PieChart/PieChart.js

@@ -127,6 +127,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   dataset: _propTypes.default.arrayOf(_propTypes.default.object),
   desc: _propTypes.default.string,
+  enableKeyboardNavigation: _propTypes.default.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/PieChart/PieChart.plugins.d.ts

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

package/PieChart/PieChart.plugins.js

@@ -6,4 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.PIE_CHART_PLUGINS = void 0;
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
-const PIE_CHART_PLUGINS = exports.PIE_CHART_PLUGINS = [_useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight];
+var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
+const PIE_CHART_PLUGINS = exports.PIE_CHART_PLUGINS = [_useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight, _useChartKeyboardNavigation.useChartKeyboardNavigation];

package/PieChart/dataTransform/useTransformData.d.ts

@@ -12,5 +12,6 @@ export interface ValueWithHighlight extends DefaultizedPieValueType, AnimatedObj
   dataIndex: number;
   isFaded: boolean;
   isHighlighted: boolean;
+  isFocused: boolean;
 }
 export declare function useTransformData(series: Pick<DefaultizedPieSeriesType, 'cornerRadius' | 'paddingAngle' | 'id' | 'highlighted' | 'faded' | 'data'> & ComputedPieRadius): ValueWithHighlight[];

package/PieChart/dataTransform/useTransformData.js

@@ -10,6 +10,7 @@ exports.useTransformData = useTransformData;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useItemHighlightedGetter = require("../../hooks/useItemHighlightedGetter");
+var _useIsItemFocusedGetter = require("../../hooks/useIsItemFocusedGetter");
 var _angleConversion = require("../../internals/angleConversion");
 function useTransformData(series) {
   const {
@@ -27,6 +28,7 @@ function useTransformData(series) {
     isFaded: isItemFaded,
     isHighlighted: isItemHighlighted
   } = (0, _useItemHighlightedGetter.useItemHighlightedGetter)();
+  const isItemFocused = (0, _useIsItemFocusedGetter.useIsItemFocusedGetter)();
   const dataWithHighlight = React.useMemo(() => data.map((item, itemIndex) => {
     const currentItem = {
       seriesId,
@@ -34,6 +36,11 @@ function useTransformData(series) {
     };
     const isHighlighted = isItemHighlighted(currentItem);
     const isFaded = !isHighlighted && isItemFaded(currentItem);
+    const isFocused = isItemFocused({
+      seriesType: 'pie',
+      seriesId,
+      dataIndex: itemIndex
+    });
     const attributesOverride = (0, _extends2.default)({
       additionalRadius: 0
     }, isFaded && faded || isHighlighted && highlighted || {});
@@ -46,12 +53,13 @@ function useTransformData(series) {
       dataIndex: itemIndex,
       isFaded,
       isHighlighted,
+      isFocused,
       paddingAngle,
       innerRadius,
       outerRadius,
       cornerRadius,
       arcLabelRadius
     });
-  }), [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, baseArcLabelRadius, data, faded, highlighted, isItemFaded, isItemHighlighted, seriesId]);
+  }), [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, baseArcLabelRadius, data, faded, highlighted, isItemFaded, isItemHighlighted, isItemFocused, seriesId]);
   return dataWithHighlight;
 }

package/PieChart/index.d.ts

@@ -5,5 +5,6 @@ export * from "./PieArcLabelPlot.js";
 export * from "./PieArc.js";
 export * from "./PieArcLabel.js";
 export * from "./getPieCoordinates.js";
+export * from "./PieChart.plugins.js";
 export { pieClasses } from "./pieClasses.js";
 export type { PieClasses, PieClassKey } from "./pieClasses.js";

package/PieChart/index.js

@@ -96,4 +96,16 @@ Object.keys(_getPieCoordinates).forEach(function (key) {
     }
   });
 });
+var _PieChart2 = require("./PieChart.plugins");
+Object.keys(_PieChart2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PieChart2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PieChart2[key];
+    }
+  });
+});
 var _pieClasses = require("./pieClasses");

package/RadarChart/RadarChart.plugins.d.ts

@@ -2,4 +2,4 @@ import { UseChartPolarAxisSignature } from "../internals/plugins/featurePlugins/
 import { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 export declare const RADAR_PLUGINS: readonly [import("../internals/index.js").ChartPlugin<UseChartPolarAxisSignature<any>>, import("../internals/index.js").ChartPlugin<UseChartInteractionSignature>, import("../internals/index.js").ChartPlugin<UseChartHighlightSignature>];
-export type RadarChartPluginsSignatures = [UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature];
+export type RadarChartPluginSignatures = [UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature];