Merge branch 'master' into retain-expansion-state

Author: MBilalShafi

docs/pages/x/api/charts/pie-arc.json

@@ -14,6 +14,12 @@
       "description": "Styles applied to the root element when faded.",
       "isGlobal": false
     },
+    {
+      "key": "focusIndicator",
+      "className": "MuiPieArc-focusIndicator",
+      "description": "Styles applied to the focus indicator element.",
+      "isGlobal": false
+    },
     {
       "key": "highlighted",
       "className": "MuiPieArc-highlighted",

docs/translations/api-docs/charts/pie-arc/pie-arc.json

@@ -7,6 +7,10 @@
       "nodeName": "the root element",
       "conditions": "faded"
     },
+    "focusIndicator": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the focus indicator element"
+    },
     "highlighted": {
       "description": "Styles applied to {{nodeName}} when {{conditions}}.",
       "nodeName": "the root element",

packages/x-charts/src/PieChart/PieArc.tsx

@@ -1,9 +1,10 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { useAnimatePieArc } from '../hooks';
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from '../internals/animation/animation';
@@ -22,6 +23,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;
@@ -33,6 +36,7 @@ interface PieArcOwnerState {
   isFaded: boolean;
   isHighlighted: boolean;
   isFocused: boolean;
+  stroke?: string;
   classes?: Partial<PieArcClasses>;
 }
 
@@ -45,6 +49,7 @@ export const pieArcClasses: PieArcClasses = generateUtilityClasses('MuiPieArc',
   'highlighted',
   'faded',
   'series',
+  'focusIndicator',
 ]);
 
 const useUtilityClasses = (ownerState: PieArcOwnerState) => {
@@ -66,13 +71,11 @@ const PieArcRoot = styled('path', {
   name: 'MuiPieArc',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.arc, // FIXME: Inconsistent naming with slot
-})<{ ownerState: PieArcOwnerState }>(({ theme }) => ({
-  // Got to move stroke to an element prop instead of style.
-  stroke: (theme.vars || theme).palette.background.paper,
+})<{ ownerState: PieArcOwnerState }>({
   transitionProperty: 'opacity, fill, filter',
   transitionDuration: `${ANIMATION_DURATION_MS}ms`,
   transitionTimingFunction: ANIMATION_TIMING_FUNCTION,
-}));
+});
 
 export type PieArcProps = Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> &
   PieArcOwnerState & {
@@ -89,6 +92,7 @@ export type PieArcProps = Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> &
 
 const PieArc = React.forwardRef<SVGPathElement, PieArcProps>(function PieArc(props, ref) {
   const {
+    className,
     classes: innerClasses,
     color,
     dataIndex,
@@ -104,9 +108,13 @@ const PieArc = React.forwardRef<SVGPathElement, PieArcProps>(function PieArc(pro
     outerRadius,
     paddingAngle,
     skipAnimation,
+    stroke: strokeProp,
     ...other
   } = props;
 
+  const theme = useTheme();
+  const stroke = strokeProp ?? (theme.vars || theme).palette.background.paper;
+
   const ownerState = {
     id,
     dataIndex,
@@ -135,15 +143,15 @@ const PieArc = React.forwardRef<SVGPathElement, PieArcProps>(function PieArc(pro
       onClick={onClick}
       cursor={onClick ? 'pointer' : 'unset'}
       ownerState={ownerState}
-      className={classes.root}
+      className={clsx(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}
       data-faded={ownerState.isFaded || undefined}
-      data-focused={isFocused || undefined}
       {...other}
       {...interactionProps}
       {...animatedProps}

packages/x-charts/src/PieChart/PieArcPlot.tsx

@@ -1,7 +1,9 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { PieArc, PieArcProps } from './PieArc';
+import { useTheme } from '@mui/material/styles';
+import { useFocusedItem } from '../hooks/useFocusedItem';
+import { PieArc, PieArcProps, pieArcClasses } from './PieArc';
 import {
   ComputedPieRadius,
   DefaultizedPieSeriesType,
@@ -74,6 +76,8 @@ function PieArcPlot(props: PieArcPlotProps) {
     ...other
   } = props;
 
+  const theme = useTheme();
+
   const transformedData = useTransformData({
     innerRadius,
     outerRadius,
@@ -85,6 +89,9 @@ function PieArcPlot(props: PieArcPlotProps) {
     data,
   });
 
+  const { dataIndex: focusedIndex = -1 } = useFocusedItem() ?? {};
+  const focusedItem = focusedIndex !== -1 ? transformedData[focusedIndex] : null;
+
   if (data.length === 0) {
     return null;
   }
@@ -118,6 +125,27 @@ function PieArcPlot(props: PieArcPlotProps) {
           {...slotProps?.pieArc}
         />
       ))}
+      {/* Render the focus indicator last, so it can align nicely over all arcs */}
+      {focusedItem && (
+        <Arc
+          startAngle={focusedItem.startAngle}
+          endAngle={focusedItem.endAngle}
+          paddingAngle={focusedItem.paddingAngle}
+          innerRadius={focusedItem.innerRadius}
+          color={focusedItem.color}
+          outerRadius={focusedItem.outerRadius}
+          cornerRadius={focusedItem.cornerRadius}
+          skipAnimation
+          stroke={(theme.vars ?? theme).palette.text.primary}
+          id={id}
+          className={pieArcClasses.focusIndicator}
+          dataIndex={focusedIndex}
+          isFaded={false}
+          isHighlighted={false}
+          isFocused={false}
+          strokeWidth={3}
+        />
+      )}
     </g>
   );
 }

packages/x-charts/src/PieChart/PieChart.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer, screen } from '@mui/internal-test-utils/createRenderer';
+import { createRenderer, screen, act } from '@mui/internal-test-utils';
 import { describeConformance } from 'test/utils/describeConformance';
 import { pieArcClasses, PieChart } from '@mui/x-charts/PieChart';
 
@@ -75,4 +75,42 @@ describe('<PieChart />', () => {
 
     expect(screen.queryByRole('tooltip')).to.equal(null);
   });
+
+  it('should show focus indicator when navigating with keyboard', async () => {
+    const { container, user } = render(
+      <PieChart
+        enableKeyboardNavigation
+        data-testid="chart"
+        height={100}
+        width={100}
+        series={[
+          {
+            data: [
+              { id: 0, value: 10 },
+              { id: 1, value: 20 },
+            ],
+          },
+        ]}
+        hideLegend
+      />,
+    );
+
+    // by default does not show focus indicator
+    expect(container.querySelector(`.${pieArcClasses.focusIndicator}`)).not.toBeTruthy();
+
+    // focus the chart
+    await act(async () => screen.getByTestId('chart').focus());
+
+    // Focus the first arc
+    await user.keyboard('{ArrowRight}');
+    expect(
+      container.querySelector(`.${pieArcClasses.focusIndicator}.MuiPieArc-data-index-0`),
+    ).toBeTruthy();
+
+    // Focus the second arc
+    await user.keyboard('{ArrowRight}');
+    expect(
+      container.querySelector(`.${pieArcClasses.focusIndicator}.MuiPieArc-data-index-1`),
+    ).toBeTruthy();
+  });
 });