@mui/x-charts 8.11.3 → 8.12.0

package/esm/ChartsSurface/ChartsSurface.js

@@ -12,6 +12,7 @@ import { useSvgRef } from "../hooks/useSvgRef.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { selectorChartContainerSize, selectorChartPropsSize } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js";
+import { selectorChartsHasFocusedItem, selectorChartsIsKeyboardNavigationEnabled } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartsSurfaceStyles = styled('svg', {
   name: 'MuiChartsSurface',
@@ -31,7 +32,21 @@ const ChartsSurfaceStyles = styled('svg', {
   // For example, prevent page scroll & zoom.
   touchAction: 'pan-y',
   userSelect: 'none',
-  gridArea: 'chart'
+  gridArea: 'chart',
+  '&:focus': {
+    outline: 'none' // By default don't show focus on the SVG container
+  },
+  '&:focus-visible': {
+    // Show focus outline on the SVG container only when using keyboard navigation
+    outline: 'auto',
+    '&[data-has-focused-item=true]': {
+      // But not if the chart has a focused children item
+      outline: 'none'
+    }
+  },
+  '& [data-focused=true]': {
+    outline: 'auto'
+  }
 }));
 
 /**
@@ -58,6 +73,8 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
     width: propsWidth,
     height: propsHeight
   } = useSelector(store, selectorChartPropsSize);
+  const isKeyboardNavigationEnabled = useSelector(store, selectorChartsIsKeyboardNavigationEnabled);
+  const hasFocusedItem = useSelector(store, selectorChartsHasFocusedItem);
   const svgRef = useSvgRef();
   const handleRef = useForkRef(svgRef, ref);
   const themeProps = useThemeProps({
@@ -78,7 +95,9 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
       height: propsHeight
     },
     viewBox: `${0} ${0} ${svgWidth} ${svgHeight}`,
-    className: className
+    className: className,
+    tabIndex: isKeyboardNavigationEnabled ? 0 : undefined,
+    "data-has-focused-item": hasFocusedItem || undefined
   }, other, {
     ref: handleRef,
     children: [title && /*#__PURE__*/_jsx("title", {

package/esm/ChartsWrapper/ChartsWrapper.d.ts

@@ -15,8 +15,9 @@ export interface ChartsWrapperProps {
   legendDirection?: Direction;
   /**
    * If `true`, the legend is not rendered.
+   * @default false
    */
-  hideLegend: boolean;
+  hideLegend?: boolean;
   /**
    * If `true`, the chart wrapper set `height: 100%`.
    * @default `false` if the `height` prop is set. And `true` otherwise.

package/esm/ChartsWrapper/ChartsWrapper.js

@@ -26,10 +26,6 @@ const getAlignItems = position => {
   }
   return 'center';
 };
-const addToolbar = template => {
-  return `"toolbar"
-          ${template}`;
-};
 const getGridTemplateAreas = (hideLegend, direction, position) => {
   if (hideLegend) {
     return `"chart"`;
@@ -47,26 +43,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 = styled('div', {
   name: 'MuiChartsWrapper',
@@ -75,32 +70,39 @@ const Root = 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(.${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(.${chartsToolbarClasses.root})`]: {
-    gridTemplateAreas: addToolbar(getGridTemplateAreas(ownerState.hideLegend, ownerState.legendDirection, ownerState.legendPosition))
-  },
-  [`&:not(:has(.${chartsToolbarClasses.root}))`]: {
-    gridTemplateAreas: getGridTemplateAreas(ownerState.hideLegend, ownerState.legendDirection, ownerState.legendPosition)
-  },
-  justifyContent: 'center',
-  justifyItems: getJustifyItems(ownerState.legendPosition),
-  alignItems: getAlignItems(ownerState.legendPosition),
-  [`& > .${chartsToolbarClasses.root}`]: {
-    justifySelf: 'center'
-  }
-}));
+    [`& .${chartsToolbarClasses.root}`]: {
+      gridArea: 'toolbar',
+      justifySelf: 'center'
+    },
+    justifyContent: 'center',
+    justifyItems: getJustifyItems(ownerState.legendPosition),
+    alignItems: getAlignItems(ownerState.legendPosition)
+  };
+});
 
 /**
  * Wrapper for the charts components.
@@ -140,8 +142,9 @@ process.env.NODE_ENV !== "production" ? ChartsWrapper.propTypes = {
   extendVertically: PropTypes.bool,
   /**
    * If `true`, the legend is not rendered.
+   * @default false
    */
-  hideLegend: PropTypes.bool.isRequired,
+  hideLegend: PropTypes.bool,
   /**
    * The direction of the legend.
    * @default 'horizontal'

package/esm/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/esm/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/esm/LineChart/FocusedMark.d.ts

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

package/esm/LineChart/FocusedMark.js

@@ -0,0 +1,38 @@
+'use client';
+
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import { useFocusedItem } from "../hooks/useFocusedItem.js";
+import { useLineSeriesContext, useXAxes, useYAxes } from "../hooks/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const RADIUS = 6;
+export function FocusedMark() {
+  const theme = useTheme();
+  const focusedItem = useFocusedItem();
+  const lineSeries = useLineSeriesContext();
+  const {
+    xAxis,
+    xAxisIds
+  } = useXAxes();
+  const {
+    yAxis,
+    yAxisIds
+  } = 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__*/_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/esm/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/esm/LineChart/LineChart.js

@@ -20,6 +20,7 @@ import { useChartContainerProps } from "../ChartContainer/useChartContainerProps
 import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
 import { ChartsWrapper } from "../ChartsWrapper/index.js";
+import { FocusedMark } from "./FocusedMark.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -63,7 +64,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(inProps, ref)
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(AreaPlot, _extends({}, areaPlotProps)), /*#__PURE__*/_jsx(LinePlot, _extends({}, linePlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx("g", {
+        })), /*#__PURE__*/_jsx(FocusedMark, {}), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/_jsx(MarkPlot, _extends({}, markPlotProps))
         }), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
@@ -111,6 +112,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: PropTypes.bool,
+  enableKeyboardNavigation: PropTypes.bool,
   /**
    * Options to enable features planned for the next major.
    */

package/esm/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/esm/LineChart/LineChart.plugins.js

@@ -2,4 +2,5 @@ import { useChartZAxis } from "../internals/plugins/featurePlugins/useChartZAxis
 import { useChartCartesianAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-export const LINE_CHART_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight];
+import { useChartKeyboardNavigation } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+export const LINE_CHART_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartKeyboardNavigation];

package/esm/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/esm/LineChart/index.js

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

package/esm/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/esm/PieChart/PieArc.d.ts

@@ -20,6 +20,7 @@ interface PieArcOwnerState {
   color: string;
   isFaded: boolean;
   isHighlighted: boolean;
+  isFocused: boolean;
   classes?: Partial<PieArcClasses>;
 }
 export declare function getPieArcUtilityClass(slot: string): string;

package/esm/PieChart/PieArc.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["classes", "color", "dataIndex", "id", "isFaded", "isHighlighted", "onClick", "cornerRadius", "startAngle", "endAngle", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation"];
+const _excluded = ["classes", "color", "dataIndex", "id", "isFaded", "isHighlighted", "isFocused", "onClick", "cornerRadius", "startAngle", "endAngle", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
@@ -51,6 +51,7 @@ const PieArc = /*#__PURE__*/React.forwardRef(function PieArc(props, ref) {
       id,
       isFaded,
       isHighlighted,
+      isFocused,
       onClick,
       cornerRadius,
       startAngle,
@@ -67,7 +68,8 @@ const PieArc = /*#__PURE__*/React.forwardRef(function PieArc(props, ref) {
     classes: innerClasses,
     color,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    isFocused
   };
   const classes = useUtilityClasses(ownerState);
   const interactionProps = useInteractionItemProps({
@@ -96,7 +98,8 @@ const PieArc = /*#__PURE__*/React.forwardRef(function PieArc(props, ref) {
     strokeWidth: 1,
     strokeLinejoin: "round",
     "data-highlighted": ownerState.isHighlighted || undefined,
-    "data-faded": ownerState.isFaded || undefined
+    "data-faded": ownerState.isFaded || undefined,
+    "data-focused": isFocused || undefined
   }, other, interactionProps, animatedProps));
 });
 if (process.env.NODE_ENV !== "production") PieArc.displayName = "PieArc";
@@ -112,6 +115,7 @@ process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   innerRadius: PropTypes.number.isRequired,
   isFaded: PropTypes.bool.isRequired,
+  isFocused: PropTypes.bool.isRequired,
   isHighlighted: PropTypes.bool.isRequired,
   outerRadius: PropTypes.number.isRequired,
   paddingAngle: PropTypes.number.isRequired,

package/esm/PieChart/PieArcPlot.js

@@ -54,6 +54,7 @@ function PieArcPlot(props) {
       dataIndex: index,
       isFaded: item.isFaded,
       isHighlighted: item.isHighlighted,
+      isFocused: item.isFocused,
       onClick: onItemClick && (event => {
         onItemClick(event, {
           type: 'pie',

package/esm/PieChart/PieChart.js

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

package/esm/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/esm/PieChart/PieChart.plugins.js

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

package/esm/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/esm/PieChart/dataTransform/useTransformData.js

@@ -3,6 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.js";
+import { useIsItemFocusedGetter } from "../../hooks/useIsItemFocusedGetter.js";
 import { deg2rad } from "../../internals/angleConversion.js";
 export function useTransformData(series) {
   const {
@@ -20,6 +21,7 @@ export function useTransformData(series) {
     isFaded: isItemFaded,
     isHighlighted: isItemHighlighted
   } = useItemHighlightedGetter();
+  const isItemFocused = useIsItemFocusedGetter();
   const dataWithHighlight = React.useMemo(() => data.map((item, itemIndex) => {
     const currentItem = {
       seriesId,
@@ -27,6 +29,11 @@ export function useTransformData(series) {
     };
     const isHighlighted = isItemHighlighted(currentItem);
     const isFaded = !isHighlighted && isItemFaded(currentItem);
+    const isFocused = isItemFocused({
+      seriesType: 'pie',
+      seriesId,
+      dataIndex: itemIndex
+    });
     const attributesOverride = _extends({
       additionalRadius: 0
     }, isFaded && faded || isHighlighted && highlighted || {});
@@ -39,12 +46,13 @@ export 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/esm/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/esm/PieChart/index.js

@@ -5,4 +5,5 @@ 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";

package/esm/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];

package/esm/RadarChart/RadarDataProvider/RadarDataProvider.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { MakeOptional } from '@mui/x-internals/types';
-import { RadarChartPluginsSignatures } from "../RadarChart.plugins.js";
+import { RadarChartPluginSignatures } from "../RadarChart.plugins.js";
 import { RadarSeriesType } from "../../models/seriesType/radar.js";
 import { ChartDataProviderProps } from "../../ChartDataProvider/index.js";
 import { RadarConfig } from "./radar.types.js";
 import { ChartAnyPluginSignature } from "../../internals/plugins/models/plugin.js";
 export type RadarSeries = MakeOptional<RadarSeriesType, 'type'>;
-export type RadarDataProviderProps<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginsSignatures> = Omit<ChartDataProviderProps<'radar', TSignatures>, 'series' | 'rotationAxis' | 'radiusAxis' | 'dataset' | 'experimentalFeatures'> & {
+export type RadarDataProviderProps<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginSignatures> = Omit<ChartDataProviderProps<'radar', TSignatures>, 'series' | 'rotationAxis' | 'radiusAxis' | 'dataset' | 'experimentalFeatures'> & {
   /**
    * The series to display in the bar chart.
    * An array of [[RadarSeries]] objects.
@@ -22,5 +22,5 @@ export type RadarDataProviderProps<TSignatures extends readonly ChartAnyPluginSi
    */
   highlight?: 'axis' | 'series' | 'none';
 };
-declare function RadarDataProvider<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginsSignatures>(props: RadarDataProviderProps<TSignatures>): React.JSX.Element;
+declare function RadarDataProvider<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginSignatures>(props: RadarDataProviderProps<TSignatures>): React.JSX.Element;
 export { RadarDataProvider };

package/esm/RadarChart/index.d.ts

@@ -15,4 +15,5 @@ export * from "./RadarGrid/index.js";
 export * from "./RadarAxis/index.js";
 export * from "./RadarAxisHighlight/index.js";
 export * from "./RadarMetricLabels/index.js";
-export * from "./RadarSeriesPlot/index.js";
+export * from "./RadarSeriesPlot/index.js";
+export * from "./RadarChart.plugins.js";

package/esm/RadarChart/index.js

@@ -16,4 +16,5 @@ export * from "./RadarGrid/index.js";
 export * from "./RadarAxis/index.js";
 export * from "./RadarAxisHighlight/index.js";
 export * from "./RadarMetricLabels/index.js";
-export * from "./RadarSeriesPlot/index.js";
+export * from "./RadarSeriesPlot/index.js";
+export * from "./RadarChart.plugins.js";

package/esm/RadarChart/useRadarChartProps.d.ts

@@ -5,7 +5,7 @@ import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
 import { RadarDataProviderProps } from "./RadarDataProvider/RadarDataProvider.js";
 import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
 import { RadarGridProps } from "./RadarGrid/index.js";
-import { RadarChartPluginsSignatures } from "./RadarChart.plugins.js";
+import { RadarChartPluginSignatures } from "./RadarChart.plugins.js";
 import { RadarSeriesAreaProps, RadarSeriesMarksProps } from "./RadarSeriesPlot/index.js";
 /**
  * A helper function that extracts RadarChartProps from the input props
@@ -18,7 +18,7 @@ export declare const useRadarChartProps: (props: RadarChartProps) => {
   highlight: "none" | "series" | "axis";
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
   chartsSurfaceProps: ChartsSurfaceProps;
-  radarDataProviderProps: RadarDataProviderProps<RadarChartPluginsSignatures>;
+  radarDataProviderProps: RadarDataProviderProps<RadarChartPluginSignatures>;
   radarGrid: RadarGridProps;
   radarSeriesAreaProps: RadarSeriesAreaProps;
   radarSeriesMarksProps: RadarSeriesMarksProps;