@mui/x-charts 8.12.0 → 8.13.0

package/CHANGELOG.md

@@ -5,6 +5,151 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.13.0
+
+_Oct 1, 2025_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 The chart zoom now supports the `tapAndDrag` gesture. Zoom in/out by tapping twice and dragging vertically.
+- 🔎 Charts now allow [fine-grained control for zoom interactions](https://mui.com/x/react-charts/zoom-and-pan/#zoom-interactions-configuration).
+  ```jsx
+  <BarChartPro
+    zoomInteractionConfig={{
+      // Only zoom when Control key is pressed
+      zoom: [{ type: 'wheel', keys: ['Control'] }],
+      // Only pan when Shift key is pressed
+      pan: [{ type: 'drag', keys: ['Shift'] }],
+    }}
+  />
+  ```
+- ➡️ Data Grid grouping rows now persist their expansion state when the rows are updated.
+- 📜 Updated Data Grid vertical scrollbar to include pinned rows and aggregation sections.
+- 📌 Improved the appearance of [pinned columns](https://mui.com/x/react-data-grid/column-pinning/#pinned-columns-appearance) and [pinned rows](https://mui.com/x/react-data-grid/row-pinning/#pinned-rows-appearance) sections in the Data Grid.
+- 🚀 Tree View now fetches the children of expanded items on mount when using lazy loading.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@sai6855
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @hasdfa, @Janpot, @JCQuintas, @KenanYusuf, @mapache-salvaje, @MBilalShafi, @mnajdova, @rita-codes, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.13.0`
+
+- [DataGrid] Add scroll shadows and fix scrollbar overlap (#16476) @KenanYusuf
+- [DataGrid] Fix row spanning stale state issue (#19733) @MBilalShafi
+- [DataGrid] Fix toolbar `slotProps` not being applied (#19769) @sai6855
+- [DataGrid] Skip calling `fetchRows()` when strategy is not initialized (#19728) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@8.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.13.0`, plus:
+
+- [DataGridPro] Retain expansion state on rows update (#19697) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.13.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.13.0`, plus:
+
+- [DataGridPremium] Add `metadata.referenceId` to AI assistant prompt resolver (#19695) @hasdfa
+- [DataGridPremium] Fix aggregation value retrieval (#19724) @arminmeh
+- [DataGridPremium] Get correct active chart id while rebuilding data (#19720) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.12.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.12.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.12.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.13.0`
+
+- [charts] Add `tapAndDrag` zoom gesture (#19727) @JCQuintas
+- [charts] Add arc focus indicator that follows the arc form (#19696) @mnajdova
+- [charts] Fix outline color (#19752) @alexfauquette
+- [charts] Improve tooltip doc (#19731) @JCQuintas
+- [charts] Make axis highlight reflect the keyboard interaction (#19631) @alexfauquette
+- [charts] Prevent horizontal scroll on keyboard navigation (#19704) @alexfauquette
+- [charts] Simplify gestures by removing bindings (#19767) @JCQuintas
+
+#### `@mui/x-charts-pro@8.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.13.0`, plus:
+
+- [charts-pro] Allow zoom interactions to be configured (#18646) @JCQuintas
+- [charts-pro] Fix zoom preview having wrong domain in some cases (#19723) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.13.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.13.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.13.0`
+
+- [tree view] Export the `apiRef` type of each Tree View component (#19543) @flaviendelangle
+- [tree view] Fix indeterminate checkbox state (#19544) @flaviendelangle
+- [tree view] Improve the lazy loading initial expansion (#19284) @flaviendelangle
+- [tree view] Use Base UI utils whenever possible (#19502) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.13.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.12.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add a recipe to customize editing component with Autocomplete (#19651) @siriwatknp
+- [docs] Refine the electricity scatter tooltip (#19689) @alexfauquette
+- [docs] Revise the Axis doc (#19052) @mapache-salvaje
+- [docs] Remove reference to nonexistent `FocusedMark` API page (#19773) @bernardobelchior
+
+### Core
+
+- [code-infra] Change charts codspeed integration to use walltime (#19729) @JCQuintas
+- [code-infra] Port stylelint from core repo (#19633) @Janpot
+- [code-infra] Stabilize fake timers in regression tests (#19719) @Janpot
+- [code-infra] Stabilize size for bundles with `releaseInfo` (#19674) @Janpot
+- [code-infra] Fix `pnpm-lock.yaml` broken lockfile (#19755) @bernardobelchior
+
+## 8.12.1
+
+_Sep 25, 2025_
+
+Release highlight ✨:
+
+- 🐞 Hotfix for Grid-Charts integration issue with aggregated values
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.12.1`
+
+Internal changes.
+
+#### `@mui/x-data-grid-pro@8.12.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.12.1`.
+
+#### `@mui/x-data-grid-premium@8.12.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.12.1`, plus:
+
+- [DataGridPremium] Collect aggregated values properly for the charts integration context (#19714) @arminmeh
+
 ## 8.12.0
 
 _Sep 25, 2025_

package/ChartsSurface/ChartsSurface.js

@@ -25,7 +25,8 @@ const ChartsSurfaceStyles = (0, _styles.styled)('svg', {
   name: 'MuiChartsSurface',
   slot: 'Root'
 })(({
-  ownerState
+  ownerState,
+  theme
 }) => ({
   width: ownerState.width ?? '100%',
   height: ownerState.height ?? '100%',
@@ -45,14 +46,14 @@ const ChartsSurfaceStyles = (0, _styles.styled)('svg', {
   },
   '&:focus-visible': {
     // Show focus outline on the SVG container only when using keyboard navigation
-    outline: 'auto',
+    outline: `${(theme.vars ?? theme).palette.text.primary} solid 2px`,
     '&[data-has-focused-item=true]': {
       // But not if the chart has a focused children item
       outline: 'none'
     }
   },
   '& [data-focused=true]': {
-    outline: 'auto'
+    outline: `${(theme.vars ?? theme).palette.text.primary} solid 2px`
   }
 }));
 

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 {
@@ -21,6 +23,7 @@ interface PieArcOwnerState {
   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", "isFocused", "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,17 +44,14 @@ 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,
@@ -68,9 +66,12 @@ 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,
@@ -100,15 +101,15 @@ 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,
-    "data-faded": ownerState.isFaded || undefined,
-    "data-focused": isFocused || undefined
+    "data-faded": ownerState.isFaded || undefined
   }, other, interactionProps, animatedProps));
 });
 if (process.env.NODE_ENV !== "production") PieArc.displayName = "PieArc";

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,
@@ -69,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/esm/ChartsSurface/ChartsSurface.js

@@ -18,7 +18,8 @@ const ChartsSurfaceStyles = styled('svg', {
   name: 'MuiChartsSurface',
   slot: 'Root'
 })(({
-  ownerState
+  ownerState,
+  theme
 }) => ({
   width: ownerState.width ?? '100%',
   height: ownerState.height ?? '100%',
@@ -38,14 +39,14 @@ const ChartsSurfaceStyles = styled('svg', {
   },
   '&:focus-visible': {
     // Show focus outline on the SVG container only when using keyboard navigation
-    outline: 'auto',
+    outline: `${(theme.vars ?? theme).palette.text.primary} solid 2px`,
     '&[data-has-focused-item=true]': {
       // But not if the chart has a focused children item
       outline: 'none'
     }
   },
   '& [data-focused=true]': {
-    outline: 'auto'
+    outline: `${(theme.vars ?? theme).palette.text.primary} solid 2px`
   }
 }));
 

package/esm/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 {
@@ -21,6 +23,7 @@ interface PieArcOwnerState {
   isFaded: boolean;
   isHighlighted: boolean;
   isFocused: boolean;
+  stroke?: string;
   classes?: Partial<PieArcClasses>;
 }
 export declare function getPieArcUtilityClass(slot: string): string;

package/esm/PieChart/PieArc.js

@@ -2,12 +2,13 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["classes", "color", "dataIndex", "id", "isFaded", "isHighlighted", "isFocused", "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"];
 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/index.js";
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
@@ -16,7 +17,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export function getPieArcUtilityClass(slot) {
   return generateUtilityClass('MuiPieArc', slot);
 }
-export const pieArcClasses = generateUtilityClasses('MuiPieArc', ['root', 'highlighted', 'faded', 'series']);
+export const pieArcClasses = generateUtilityClasses('MuiPieArc', ['root', 'highlighted', 'faded', 'series', 'focusIndicator']);
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -34,17 +35,14 @@ const PieArcRoot = 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_DURATION_MS}ms`,
   transitionTimingFunction: ANIMATION_TIMING_FUNCTION
-}));
+});
 const PieArc = /*#__PURE__*/React.forwardRef(function PieArc(props, ref) {
   const {
+      className,
       classes: innerClasses,
       color,
       dataIndex,
@@ -59,9 +57,12 @@ const PieArc = /*#__PURE__*/React.forwardRef(function PieArc(props, ref) {
       innerRadius,
       outerRadius,
       paddingAngle,
-      skipAnimation
+      skipAnimation,
+      stroke: strokeProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const theme = useTheme();
+  const stroke = strokeProp ?? (theme.vars || theme).palette.background.paper;
   const ownerState = {
     id,
     dataIndex,
@@ -91,15 +92,15 @@ const PieArc = /*#__PURE__*/React.forwardRef(function PieArc(props, ref) {
     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
+    "data-faded": ownerState.isFaded || undefined
   }, other, interactionProps, animatedProps));
 });
 if (process.env.NODE_ENV !== "production") PieArc.displayName = "PieArc";

package/esm/PieChart/PieArcPlot.js

@@ -5,9 +5,11 @@ 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 { PieArc } from "./PieArc.js";
+import { useTheme } from '@mui/material/styles';
+import { useFocusedItem } from "../hooks/useFocusedItem.js";
+import { PieArc, pieArcClasses } from "./PieArc.js";
 import { useTransformData } from "./dataTransform/useTransformData.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function PieArcPlot(props) {
   const {
       slots,
@@ -26,6 +28,7 @@ function PieArcPlot(props) {
       skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const theme = useTheme();
   const transformedData = useTransformData({
     innerRadius,
     outerRadius,
@@ -36,12 +39,16 @@ function PieArcPlot(props) {
     faded,
     data
   });
+  const {
+    dataIndex: focusedIndex = -1
+  } = useFocusedItem() ?? {};
+  const focusedItem = focusedIndex !== -1 ? transformedData[focusedIndex] : null;
   if (data.length === 0) {
     return null;
   }
   const Arc = slots?.pieArc ?? PieArc;
-  return /*#__PURE__*/_jsx("g", _extends({}, other, {
-    children: transformedData.map((item, index) => /*#__PURE__*/_jsx(Arc, _extends({
+  return /*#__PURE__*/_jsxs("g", _extends({}, other, {
+    children: [transformedData.map((item, index) => /*#__PURE__*/_jsx(Arc, _extends({
       startAngle: item.startAngle,
       endAngle: item.endAngle,
       paddingAngle: item.paddingAngle,
@@ -62,7 +69,24 @@ function PieArcPlot(props) {
           dataIndex: index
         }, item);
       })
-    }, slotProps?.pieArc), item.dataIndex))
+    }, slotProps?.pieArc), item.dataIndex)), focusedItem && /*#__PURE__*/_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: pieArcClasses.focusIndicator,
+      dataIndex: focusedIndex,
+      isFaded: false,
+      isHighlighted: false,
+      isFocused: false,
+      strokeWidth: 3
+    })]
   }));
 }
 process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.12.0
+ * @mui/x-charts v8.13.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.js

@@ -1,48 +1,67 @@
 'use client';
 
 import * as React from 'react';
-import { GestureManager, MoveGesture, PanGesture, PinchGesture, PressGesture, TapGesture, TurnWheelGesture } from '@mui/x-internal-gestures/core';
+import { GestureManager, MoveGesture, PanGesture, PinchGesture, PressGesture, TapAndDragGesture, TapGesture, TurnWheelGesture } from '@mui/x-internal-gestures/core';
 const preventDefault = event => event.preventDefault();
 export const useChartInteractionListener = ({
   svgRef
 }) => {
+  const gestureManagerRef = React.useRef(null);
   React.useEffect(() => {
     const svg = svgRef.current;
-    if (!svg) {
+    if (!gestureManagerRef.current) {
+      gestureManagerRef.current = new GestureManager({
+        gestures: [
+        // We separate the zoom gestures from the gestures that are not zoom related
+        // This allows us to configure the zoom gestures based on the zoom configuration.
+        new PanGesture({
+          name: 'pan',
+          threshold: 0,
+          maxPointers: 1
+        }), new PanGesture({
+          name: 'zoomPan',
+          threshold: 0,
+          maxPointers: 1,
+          preventIf: ['zoomTapAndDrag']
+        }), new MoveGesture({
+          name: 'move',
+          preventIf: ['pan', 'zoomPinch', 'zoomPan'] // Prevent move gesture when pan is active
+        }), new PinchGesture({
+          name: 'zoomPinch',
+          threshold: 5,
+          preventIf: ['pan', 'zoomPan']
+        }), new TurnWheelGesture({
+          name: 'zoomTurnWheel',
+          sensitivity: 0.01,
+          initialDelta: 1
+        }), new TapGesture({
+          name: 'tap',
+          maxDistance: 10,
+          preventIf: ['pan', 'zoomPan', 'zoomPinch']
+        }), new PressGesture({
+          name: 'quickPress',
+          duration: 50,
+          maxDistance: 10
+        }), new TapAndDragGesture({
+          name: 'zoomTapAndDrag',
+          tapMaxDistance: 10,
+          dragThreshold: 10,
+          dragTimeout: 1000
+        })]
+      });
+    }
+
+    // Assign gesture manager after initialization
+    const gestureManager = gestureManagerRef.current;
+    if (!svg || !gestureManager) {
       return undefined;
     }
-    const gestureManager = new GestureManager({
-      gestures: [new PanGesture({
-        name: 'pan',
-        threshold: 0,
-        maxPointers: 1
-      }), new MoveGesture({
-        name: 'move',
-        preventIf: ['pan', 'pinch'] // Prevent move gesture when pan is active
-      }), new PinchGesture({
-        name: 'pinch',
-        threshold: 5,
-        preventIf: ['pan']
-      }), new TurnWheelGesture({
-        name: 'turnWheel',
-        sensitivity: 0.01,
-        initialDelta: 1
-      }), new TapGesture({
-        name: 'tap',
-        maxDistance: 10,
-        preventIf: ['pan', 'pinch']
-      }), new PressGesture({
-        name: 'quickPress',
-        duration: 50,
-        maxDistance: 10
-      })]
-    });
-    gestureManager.registerElement(['pan', 'move', 'pinch', 'turnWheel', 'tap', 'quickPress'], svg);
+    gestureManager.registerElement(['pan', 'move', 'zoomPinch', 'zoomPan', 'zoomTurnWheel', 'tap', 'quickPress', 'zoomTapAndDrag'], svg);
     return () => {
       // Cleanup gesture manager
-      gestureManager.destroy();
+      gestureManager.unregisterAllGestures(svg);
     };
-  }, [svgRef]);
+  }, [svgRef, gestureManagerRef]);
   const addInteractionListener = React.useCallback((interaction, callback, options) => {
     // Forcefully cast the svgRef to any, it is annoying to fix the types.
     const svg = svgRef.current;
@@ -51,6 +70,14 @@ export const useChartInteractionListener = ({
       cleanup: () => svg?.removeEventListener(interaction, callback)
     };
   }, [svgRef]);
+  const updateZoomInteractionListeners = React.useCallback((interaction, options) => {
+    const svg = svgRef.current;
+    const gestureManager = gestureManagerRef.current;
+    if (!gestureManager || !svg) {
+      return;
+    }
+    gestureManager.setGestureOptions(interaction, svg, options ?? {});
+  }, [svgRef, gestureManagerRef]);
   React.useEffect(() => {
     const svg = svgRef.current;
 
@@ -67,7 +94,8 @@ export const useChartInteractionListener = ({
   }, [svgRef]);
   return {
     instance: {
-      addInteractionListener
+      addInteractionListener,
+      updateZoomInteractionListeners
     }
   };
 };