@mui/x-charts-pro 8.6.0 → 8.7.0

package/CHANGELOG.md

@@ -5,6 +5,109 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.7.0
+
+_Jul 4, 2025_
+
+We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Add `useChartProApiRef` for easier access to the API
+- 📆 Support different start and end `referenceDate` props on range components
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+- 🌎 Improve Greek (el-GR) translations on the Charts
+- 🌎 Improve Danish (da-DK) locale on the Data Grid
+
+Special thanks go out to the community members for their valuable contributions:
+@ShahrazH, @vadimkuragkovskiy, @whythecode
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @brijeshb42, @mapache-salvaje, @arminmeh, @bernardobelchior, @bharatkashyap, @Janpot, @JCQuintas, @KenanYusuf, @LukasTy, @michelengelen, @rita-codes
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.7.0`
+
+- [DataGrid] Fix column state restore with controlled column visibility model (#18567) @arminmeh
+- [DataGrid] Fix styling virtualized column headers (#18603) @KenanYusuf
+- [l10n] Improve Danish (da-DK) locale (#18537) @ShahrazH
+
+#### `@mui/x-data-grid-pro@8.7.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.7.0`.
+
+#### `@mui/x-data-grid-premium@8.7.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.7.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.7.0`
+
+- [pickers] Support different `start` and `end` `referenceDate` props on range components (#18549) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.7.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.7.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.7.0`
+
+- [charts] Export `ChartsReferenceLineProps` (#18598) @bernardobelchior
+- [charts] Extract bar and line plot logic into reusable hooks (#18541) @bernardobelchior
+- [charts] Extract plot logic into separate files for reuse (#18522) @bernardobelchior
+- [charts] Profile charts benchmarks using chromium (#18528) @bernardobelchior
+- [l10n] Add Greek (el-GR) locale to charts (#18548) @whythecode
+
+#### `@mui/x-charts-pro@8.7.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.7.0`, plus:
+
+- [charts-pro] Add `useChartProApiRef` for easier refs (#18013) @JCQuintas
+- [charts-pro] Add tests and classes to zoom slider (#18660) @JCQuintas
+- [charts-pro] Fix geometry not handling gestures in specific scenarios (#18651) @JCQuintas
+- [charts-pro] Rename `useChartApiContext` to `useChartProApiContext` (#18565) @JCQuintas
+- [charts-pro] Zoom pointer improvements (#17480) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.7.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.7.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.7.0`, plus:
+
+- [tree view pro] Add missing `dataSource` JSDoc (#18650) @LukasTy
+
+### Docs
+
+- [docs] Add MCP stub (#18204) @bharatkashyap
+- [docs] Fix AI Assistant proxy rewrite prefix (#18661) @arminmeh
+- [docs] Improve test README.MD (#18634) @LukasTy
+- [docs] Provide workaround for pie chart composition (#18600) @alexfauquette
+- [docs][charts] Add donut chart as a special case of a pie chart (#18652) @bernardobelchior
+- [docs][charts] Centralize country and continent data (#18604) @bernardobelchior
+- [docs][data grid] Audit and revise the Pro row docs (#17926) @mapache-salvaje
+- [docs][pickers] Add mention of theme augmentation in relevant migration section (#18608) @LukasTy
+
+### Core
+
+- [core] Avoid stringifying `document` object (#18657) @vadimkuragkovskiy
+
+### Miscellaneous
+
+- [code-infra] Bump code-infra version and fix breaking changes (#18653) @brijeshb42
+- [code-infra] Ensure `material-ui/disallow-react-api-in-server-components` ESLint rule is applied (#18570) @LukasTy
+- [code-infra] Migrate to flat eslint config (#18562) @brijeshb42
+- [code-infra] Refactor eslint config (#18643) @LukasTy
+- [infra] Add renovatebot rule for latest infra packages (#18609) @Janpot
+- [infra] Move pushArgos script to code-infra (#18667) @Janpot
+- [infra] Updates release script to fetch latest major version from upstream (#18552) @michelengelen
+- [release] Add missing contributor to changelog (#18561) @bernardobelchior
+
 ## 8.6.0
 
 _Jun 27, 2025_
@@ -19,7 +122,7 @@ We'd like to extend a big thank you to the 12 contributors who made this release
 - 🌎 Improve German (de-DE) locale
 
 Special thanks go out to the community members for their valuable contributions:
-@ShahrazH, @vadimka123
+@omalyutin, @ShahrazH, @vadimka123
 
 The following are all team members who have contributed to this release:
 @arminmeh, @bernardobelchior, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @noraleonte, @rita-codes, @sai6855

package/ChartContainerPro/index.d.ts

@@ -1,3 +1,9 @@
 import "../typeOverloads/index.js";
+import type { ChartAnyPluginSignature } from '@mui/x-charts/internals';
+import type { ChartProApi as ChartProApiOriginal, ProPluginsPerSeriesType } from "../context/ChartProApi.js";
+import type { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 export * from "./ChartContainerPro.js";
-export * from "./ChartProApi.js";
+/**
+ * @deprecated Use `ChartProApi` from `@mui/x-charts/context` instead.
+ */
+export type ChartProApi<ChartType extends keyof ProPluginsPerSeriesType | undefined = undefined, Signatures extends readonly ChartAnyPluginSignature[] = (ChartType extends keyof ProPluginsPerSeriesType ? ProPluginsPerSeriesType[ChartType] : AllPluginSignatures)> = ChartProApiOriginal<ChartType, Signatures>;

package/ChartContainerPro/index.js

@@ -14,15 +14,4 @@ Object.keys(_ChartContainerPro).forEach(function (key) {
       return _ChartContainerPro[key];
     }
   });
-});
-var _ChartProApi = require("./ChartProApi");
-Object.keys(_ChartProApi).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ChartProApi[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ChartProApi[key];
-    }
-  });
 });

package/ChartDataProviderPro/ChartDataProviderPro.js

@@ -18,7 +18,7 @@ var _material = require("../internals/material");
 var _allPlugins = require("../internals/plugins/allPlugins");
 var _useChartDataProviderProProps = require("./useChartDataProviderProProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const releaseInfo = "MTc1MDk3NTIwMDAwMA==";
+const releaseInfo = "MTc1MTU4MDAwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/ChartZoomSlider/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./ChartZoomSlider.js";
-export { type ChartAxisZoomSliderThumbClasses, type ChartAxisZoomSliderThumbClassKey, chartAxisZoomSliderThumbClasses } from "./internals/chartAxisZoomSliderThumbClasses.js";
+export { type ChartAxisZoomSliderThumbClasses, type ChartAxisZoomSliderThumbClassKey, chartAxisZoomSliderThumbClasses } from "./internals/chartAxisZoomSliderThumbClasses.js";
+export { type ChartAxisZoomSliderTrackClasses, type ChartAxisZoomSliderTrackClassKey, chartAxisZoomSliderTrackClasses } from "./internals/chartAxisZoomSliderTrackClasses.js";

package/ChartZoomSlider/index.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  chartAxisZoomSliderThumbClasses: true
+  chartAxisZoomSliderThumbClasses: true,
+  chartAxisZoomSliderTrackClasses: true
 };
 Object.defineProperty(exports, "chartAxisZoomSliderThumbClasses", {
   enumerable: true,
@@ -12,6 +13,12 @@ Object.defineProperty(exports, "chartAxisZoomSliderThumbClasses", {
     return _chartAxisZoomSliderThumbClasses.chartAxisZoomSliderThumbClasses;
   }
 });
+Object.defineProperty(exports, "chartAxisZoomSliderTrackClasses", {
+  enumerable: true,
+  get: function () {
+    return _chartAxisZoomSliderTrackClasses.chartAxisZoomSliderTrackClasses;
+  }
+});
 var _ChartZoomSlider = require("./ChartZoomSlider");
 Object.keys(_ChartZoomSlider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -24,4 +31,5 @@ Object.keys(_ChartZoomSlider).forEach(function (key) {
     }
   });
 });
-var _chartAxisZoomSliderThumbClasses = require("./internals/chartAxisZoomSliderThumbClasses");
+var _chartAxisZoomSliderThumbClasses = require("./internals/chartAxisZoomSliderThumbClasses");
+var _chartAxisZoomSliderTrackClasses = require("./internals/chartAxisZoomSliderTrackClasses");

package/ChartZoomSlider/internals/ChartAxisZoomSlider.js

@@ -65,7 +65,11 @@ function ChartAxisZoomSlider({
   }
   const backgroundRectOffset = (_constants.ZOOM_SLIDER_SIZE - _constants.ZOOM_SLIDER_TRACK_SIZE) / 2;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+    "data-charts-zoom-slider": true,
     transform: `translate(${x} ${y})`,
+    style: {
+      touchAction: 'none'
+    },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderTrack.ChartAxisZoomSliderTrack, {
       x: axisDirection === 'x' ? 0 : backgroundRectOffset,
       y: axisDirection === 'x' ? backgroundRectOffset : 0,

package/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
@@ -16,6 +17,7 @@ var _ChartAxisZoomSliderThumb = require("./ChartAxisZoomSliderThumb");
 var _ChartsTooltipZoomSliderValue = require("./ChartsTooltipZoomSliderValue");
 var _zoomUtils = require("./zoom-utils");
 var _constants = require("./constants");
+var _chartAxisZoomSliderTrackClasses = require("./chartAxisZoomSliderTrackClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const ZoomSliderActiveTrackRect = (0, _styles.styled)('rect')(({
   theme
@@ -49,6 +51,9 @@ function ChartAxisZoomSliderActiveTrack({
     tooltipStart,
     tooltipEnd
   } = getZoomSliderTooltipsText(axis, drawingArea);
+  const classes = (0, _chartAxisZoomSliderTrackClasses.useUtilityClasses)({
+    axisDirection
+  });
   const previewThumbWidth = axisDirection === 'x' ? _constants.ZOOM_SLIDER_THUMB_WIDTH : _constants.ZOOM_SLIDER_THUMB_HEIGHT;
   const previewThumbHeight = axisDirection === 'x' ? _constants.ZOOM_SLIDER_THUMB_HEIGHT : _constants.ZOOM_SLIDER_THUMB_WIDTH;
   React.useEffect(() => {
@@ -202,7 +207,8 @@ function ChartAxisZoomSliderActiveTrack({
       width: previewWidth,
       height: previewHeight,
       onPointerEnter: onPointerEnter,
-      onPointerLeave: onPointerLeave
+      onPointerLeave: onPointerLeave,
+      className: classes.active
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderThumb.ChartAxisZoomSliderThumb, {
       ref: setStartThumbEl,
       x: startThumbX,

package/ChartZoomSlider/internals/ChartAxisZoomSliderTrack.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
@@ -13,7 +14,9 @@ var _internals = require("@mui/x-charts/internals");
 var _styles = require("@mui/material/styles");
 var _rafThrottle = require("@mui/x-internals/rafThrottle");
 var _system = require("@mui/system");
+var _clsx = _interopRequireDefault(require("clsx"));
 var _zoomUtils = require("./zoom-utils");
+var _chartAxisZoomSliderTrackClasses = require("./chartAxisZoomSliderTrackClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["axisId", "axisDirection", "reverse", "onSelectStart", "onSelectEnd"];
 const ZoomSliderTrack = (0, _styles.styled)('rect', {
@@ -56,6 +59,9 @@ function ChartAxisZoomSliderTrack(_ref) {
   } = (0, _internals.useChartContext)();
   const store = (0, _internals.useStore)();
   const [isSelecting, setIsSelecting] = React.useState(false);
+  const classes = (0, _chartAxisZoomSliderTrackClasses.useUtilityClasses)({
+    axisDirection
+  });
   const onPointerDown = function onPointerDown(event) {
     const rect = ref.current;
     const element = svgRef.current;
@@ -127,5 +133,7 @@ function ChartAxisZoomSliderTrack(_ref) {
     onPointerDown: onPointerDown,
     axisDirection: axisDirection,
     isSelecting: isSelecting
-  }, other));
+  }, other, {
+    className: (0, _clsx.default)(classes.background, other.className)
+  }));
 }

package/ChartZoomSlider/internals/chartAxisZoomSliderTrackClasses.d.ts

@@ -0,0 +1,15 @@
+import type { ChartAxisZoomSliderActiveTrackProps } from "./ChartAxisZoomSliderActiveTrack.js";
+export interface ChartAxisZoomSliderTrackClasses {
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element to the active part of the track. */
+  active: string;
+  /** Styles applied to the root element to the background part of the track. */
+  background: string;
+}
+export type ChartAxisZoomSliderTrackClassKey = keyof ChartAxisZoomSliderTrackClasses;
+export declare const chartAxisZoomSliderTrackClasses: ChartAxisZoomSliderTrackClasses;
+export declare function getAxisZoomSliderTrackUtilityClass(slot: string): string;
+export declare const useUtilityClasses: (props: Partial<ChartAxisZoomSliderActiveTrackProps>) => Record<"background" | "active", string>;

package/ChartZoomSlider/internals/chartAxisZoomSliderTrackClasses.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.chartAxisZoomSliderTrackClasses = void 0;
+exports.getAxisZoomSliderTrackUtilityClass = getAxisZoomSliderTrackUtilityClass;
+exports.useUtilityClasses = void 0;
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _ClassNameGenerator = _interopRequireDefault(require("@mui/utils/ClassNameGenerator"));
+const chartAxisZoomSliderTrackClasses = exports.chartAxisZoomSliderTrackClasses = ['horizontal', 'vertical', 'background', 'active'].reduce((acc, slot) => {
+  acc[slot] = getAxisZoomSliderTrackUtilityClass(slot);
+  return acc;
+}, {});
+function getAxisZoomSliderTrackUtilityClass(slot) {
+  // We use the `ClassNameGenerator` because the original `generateUtilityClass` function
+  // has a special case for the `active` slot.
+  return `${_ClassNameGenerator.default.generate('MuiChartAxisZoomSliderTrack')}-${slot}`;
+}
+const useUtilityClasses = props => {
+  const {
+    axisDirection
+  } = props;
+  const slots = {
+    background: [axisDirection === 'x' ? 'horizontal' : 'vertical', 'background'],
+    active: [axisDirection === 'x' ? 'horizontal' : 'vertical', 'active']
+  };
+  return (0, _composeClasses.default)(slots, getAxisZoomSliderTrackUtilityClass);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/ChartsToolbarPro/ChartsToolbarImageExportTrigger.js

@@ -35,7 +35,7 @@ const ChartsToolbarImageExportTrigger = exports.ChartsToolbarImageExportTrigger
     slots,
     slotProps
   } = (0, _internals.useChartsSlots)();
-  const apiRef = (0, _context.useChartApiContext)();
+  const apiRef = (0, _context.useChartProApiContext)();
   const handleClick = event => {
     apiRef.current.exportAsImage(options);
     onClick?.(event);

package/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.js

@@ -35,7 +35,7 @@ const ChartsToolbarPrintExportTrigger = exports.ChartsToolbarPrintExportTrigger
     slots,
     slotProps
   } = (0, _internals.useChartsSlots)();
-  const apiRef = (0, _context.useChartApiContext)();
+  const apiRef = (0, _context.useChartProApiContext)();
   const handleClick = event => {
     apiRef.current.exportAsPrint(options);
     onClick?.(event);

package/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.js

@@ -52,39 +52,51 @@ const useChartFunnelAxis = ({
   }, [seriesConfig, drawingArea, xAxis, yAxis, dataset, store, gap]);
   React.useEffect(() => {
     const element = svgRef.current;
-    if (!isInteractionEnabled || element === null || params.disableAxisListener) {
+    if (!isInteractionEnabled || !element || params.disableAxisListener) {
       return () => {};
     }
-    const handleOut = () => {
-      instance.cleanInteraction?.();
-    };
-    const handleMove = event => {
-      const target = 'targetTouches' in event ? event.targetTouches[0] : event;
-      const svgPoint = (0, _internals.getSVGPoint)(element, target);
-      if (!instance.isPointInside(svgPoint.x, svgPoint.y, event.target)) {
+
+    // Clean the interaction when the mouse leaves the chart.
+    const moveEndHandler = instance.addInteractionListener('moveEnd', event => {
+      if (!event.detail.activeGestures.pan) {
         instance.cleanInteraction?.();
-        return;
       }
-      instance.setPointerCoordinate?.(svgPoint);
-    };
-    const handleDown = event => {
-      const target = event.currentTarget;
-      if (!target) {
-        return;
+    });
+    const panEndHandler = instance.addInteractionListener('panEnd', event => {
+      if (!event.detail.activeGestures.move) {
+        instance.cleanInteraction?.();
       }
-      if ('hasPointerCapture' in target && target.hasPointerCapture(event.pointerId)) {
-        target.releasePointerCapture(event.pointerId);
+    });
+    const pressEndHandler = instance.addInteractionListener('quickPressEnd', event => {
+      if (!event.detail.activeGestures.move && !event.detail.activeGestures.pan) {
+        instance.cleanInteraction?.();
+      }
+    });
+    const gestureHandler = event => {
+      const srvEvent = event.detail.srcEvent;
+      const target = event.detail.target;
+      const svgPoint = (0, _internals.getSVGPoint)(element, srvEvent);
+      // Release the pointer capture if we are panning, as this would cause the tooltip to
+      // be locked to the first "section" it touches.
+      if (event.detail.srcEvent.buttons >= 1 && target?.hasPointerCapture(event.detail.srcEvent.pointerId)) {
+        target?.releasePointerCapture(event.detail.srcEvent.pointerId);
       }
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y, target)) {
+        instance.cleanInteraction?.();
+        return;
+      }
+      instance.setPointerCoordinate?.(svgPoint);
     };
-    element.addEventListener('pointerdown', handleDown);
-    element.addEventListener('pointermove', handleMove);
-    element.addEventListener('pointercancel', handleOut);
-    element.addEventListener('pointerleave', handleOut);
+    const moveHandler = instance.addInteractionListener('move', gestureHandler);
+    const panHandler = instance.addInteractionListener('pan', gestureHandler);
+    const pressHandler = instance.addInteractionListener('quickPress', gestureHandler);
     return () => {
-      element.removeEventListener('pointerdown', handleDown);
-      element.removeEventListener('pointermove', handleMove);
-      element.removeEventListener('pointercancel', handleOut);
-      element.removeEventListener('pointerleave', handleOut);
+      moveHandler.cleanup();
+      moveEndHandler.cleanup();
+      panHandler.cleanup();
+      panEndHandler.cleanup();
+      pressHandler.cleanup();
+      pressEndHandler.cleanup();
     };
   }, [svgRef, instance, params.disableAxisListener, isInteractionEnabled]);
   React.useEffect(() => {
@@ -93,8 +105,7 @@ const useChartFunnelAxis = ({
     if (element === null || !onAxisClick) {
       return () => {};
     }
-    const handleMouseClick = event => {
-      event.preventDefault();
+    const axisClickHandler = instance.addInteractionListener('tap', event => {
       const {
         axis: xAxisWithScale,
         axisIds: xAxisIds
@@ -108,7 +119,7 @@ const useChartFunnelAxis = ({
       const usedYAxis = yAxisIds[0];
       let dataIndex = null;
       let isXAxis = false;
-      const svgPoint = (0, _internals.getSVGPoint)(element, event);
+      const svgPoint = (0, _internals.getSVGPoint)(element, event.detail.srcEvent);
       const xIndex = (0, _internals.getCartesianAxisIndex)(xAxisWithScale[usedXAxis], svgPoint.x);
       isXAxis = xIndex !== -1;
       dataIndex = isXAxis ? xIndex : (0, _internals.getCartesianAxisIndex)(yAxisWithScale[usedYAxis], svgPoint.y);
@@ -129,17 +140,16 @@ const useChartFunnelAxis = ({
           seriesValues[seriesId] = seriesItem.data[dataIndex].value;
         }
       });
-      onAxisClick(event, {
+      onAxisClick(event.detail.srcEvent, {
         dataIndex,
         axisValue,
         seriesValues
       });
-    };
-    element.addEventListener('click', handleMouseClick);
+    });
     return () => {
-      element.removeEventListener('click', handleMouseClick);
+      axisClickHandler.cleanup();
     };
-  }, [params.onAxisClick, svgRef, store]);
+  }, [params.onAxisClick, svgRef, store, instance]);
   return {};
 };
 exports.useChartFunnelAxis = useChartFunnelAxis;

package/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.d.ts

@@ -3,7 +3,7 @@ import { UseChartFunnelAxisSignature } from "./useChartFunnelAxis.types.js";
 export declare const selectorFunnel: (state: ChartState<[], [UseChartFunnelAxisSignature]>) => {
   gap: number;
 } | undefined;
-export declare const selectorFunnelGap: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & Partial<Pick<import("@mui/x-charts/internals").UseChartCartesianAxisState, "cartesianAxis"> & {
+export declare const selectorFunnelGap: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<Pick<import("@mui/x-charts/internals").UseChartCartesianAxisState, "cartesianAxis"> & {
   funnel: {
     gap: number;
   };
@@ -12,7 +12,7 @@ export declare const selectorFunnelGap: import("reselect").Selector<import("@mui
 } & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, number, []>;
-export declare const selectorChartXAxis: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+export declare const selectorChartXAxis: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 } & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
@@ -33,7 +33,7 @@ export declare const selectorChartXAxis: import("reselect").Selector<import("@mu
 }> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, import("./computeAxisValue.js").ComputeResult<import("@mui/x-charts").ChartsXAxisProps>, []>;
-export declare const selectorChartYAxis: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+export declare const selectorChartYAxis: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 } & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;

package/{ChartContainerPro → context}/ChartProApi.d.ts

@@ -7,7 +7,7 @@ import { AllPluginSignatures, DefaultPluginSignatures } from "../internals/plugi
 import { FunnelChartPluginsSignatures } from "../FunnelChart/FunnelChart.plugins.js";
 import { RadarChartProPluginsSignatures } from "../RadarChartPro/RadarChartPro.plugins.js";
 import { PieChartProPluginSignatures } from "../PieChartPro/PieChartPro.plugins.js";
-type PluginsPerSeriesType = {
+export type ProPluginsPerSeriesType = {
   heatmap: HeatmapPluginsSignatures;
   line: LineChartProPluginsSignatures;
   scatter: ScatterChartProPluginsSignatures;
@@ -24,5 +24,4 @@ type PluginsPerSeriesType = {
  * If the chart is being created using composition, the `composition` value can be used.
  * @example ChartProApi<'composition'>
  */
-export type ChartProApi<TSeries extends keyof PluginsPerSeriesType | undefined = undefined, TSignatures extends readonly ChartAnyPluginSignature[] = (TSeries extends keyof PluginsPerSeriesType ? PluginsPerSeriesType[TSeries] : AllPluginSignatures)> = ChartPublicAPI<TSignatures>;
-export {};
+export type ChartProApi<ChartType extends keyof ProPluginsPerSeriesType | undefined = undefined, Signatures extends readonly ChartAnyPluginSignature[] = (ChartType extends keyof ProPluginsPerSeriesType ? ProPluginsPerSeriesType[ChartType] : AllPluginSignatures)> = ChartPublicAPI<Signatures>;

package/context/index.d.ts

@@ -1 +1,2 @@
-export * from "./useChartApiContext.js";
+export * from "./useChartProApiContext.js";
+export type { ChartProApi } from "./ChartProApi.js";

package/context/index.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _useChartApiContext = require("./useChartApiContext");
-Object.keys(_useChartApiContext).forEach(function (key) {
+var _useChartProApiContext = require("./useChartProApiContext");
+Object.keys(_useChartProApiContext).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _useChartApiContext[key]) return;
+  if (key in exports && exports[key] === _useChartProApiContext[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _useChartApiContext[key];
+      return _useChartProApiContext[key];
     }
   });
 });

package/context/useChartProApiContext.d.ts

@@ -0,0 +1,9 @@
+import { ChartProApi } from "./ChartProApi.js";
+/**
+ * The `useChartProApiContext` hook provides access to the chart API.
+ * This is only available when the chart is rendered within a chart or a `ChartDataProvider` component.
+ * If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
+ * @example
+ * const apiRef = useChartProApiContext<ChartProApi<'bar'>>();
+ */
+export declare function useChartProApiContext<Api extends ChartProApi>(): import("react").RefObject<Api>;

package/context/{useChartApiContext.js → useChartProApiContext.js}

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useChartApiContext = useChartApiContext;
+exports.useChartProApiContext = useChartProApiContext;
 var _context = require("@mui/x-charts/context");
 /**
- * The `useChartApiContext` hook provides access to the chart API.
+ * The `useChartProApiContext` hook provides access to the chart API.
  * This is only available when the chart is rendered within a chart or a `ChartDataProvider` component.
  * If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
  * @example
- * const apiRef = useChartApiContext<ChartProApi<'bar'>>();
+ * const apiRef = useChartProApiContext<ChartProApi<'bar'>>();
  */
-function useChartApiContext() {
+function useChartProApiContext() {
   return (0, _context.useChartApiContext)();
 }

package/esm/ChartContainerPro/index.d.ts

@@ -1,3 +1,9 @@
 import "../typeOverloads/index.js";
+import type { ChartAnyPluginSignature } from '@mui/x-charts/internals';
+import type { ChartProApi as ChartProApiOriginal, ProPluginsPerSeriesType } from "../context/ChartProApi.js";
+import type { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 export * from "./ChartContainerPro.js";
-export * from "./ChartProApi.js";
+/**
+ * @deprecated Use `ChartProApi` from `@mui/x-charts/context` instead.
+ */
+export type ChartProApi<ChartType extends keyof ProPluginsPerSeriesType | undefined = undefined, Signatures extends readonly ChartAnyPluginSignature[] = (ChartType extends keyof ProPluginsPerSeriesType ? ProPluginsPerSeriesType[ChartType] : AllPluginSignatures)> = ChartProApiOriginal<ChartType, Signatures>;

package/esm/ChartContainerPro/index.js

@@ -1,3 +1,6 @@
 import "../typeOverloads/index.js";
 export * from "./ChartContainerPro.js";
-export * from "./ChartProApi.js";
+
+/**
+ * @deprecated Use `ChartProApi` from `@mui/x-charts/context` instead.
+ */

package/esm/ChartDataProviderPro/ChartDataProviderPro.js

@@ -11,7 +11,7 @@ import { defaultSlotsMaterial } from "../internals/material/index.js";
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 import { useChartDataProviderProProps } from "./useChartDataProviderProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = "MTc1MDk3NTIwMDAwMA==";
+const releaseInfo = "MTc1MTU4MDAwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/esm/ChartZoomSlider/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./ChartZoomSlider.js";
-export { type ChartAxisZoomSliderThumbClasses, type ChartAxisZoomSliderThumbClassKey, chartAxisZoomSliderThumbClasses } from "./internals/chartAxisZoomSliderThumbClasses.js";
+export { type ChartAxisZoomSliderThumbClasses, type ChartAxisZoomSliderThumbClassKey, chartAxisZoomSliderThumbClasses } from "./internals/chartAxisZoomSliderThumbClasses.js";
+export { type ChartAxisZoomSliderTrackClasses, type ChartAxisZoomSliderTrackClassKey, chartAxisZoomSliderTrackClasses } from "./internals/chartAxisZoomSliderTrackClasses.js";

package/esm/ChartZoomSlider/index.js

@@ -1,2 +1,3 @@
 export * from "./ChartZoomSlider.js";
-export { chartAxisZoomSliderThumbClasses } from "./internals/chartAxisZoomSliderThumbClasses.js";
+export { chartAxisZoomSliderThumbClasses } from "./internals/chartAxisZoomSliderThumbClasses.js";
+export { chartAxisZoomSliderTrackClasses } from "./internals/chartAxisZoomSliderTrackClasses.js";

package/esm/ChartZoomSlider/internals/ChartAxisZoomSlider.js

@@ -59,7 +59,11 @@ export function ChartAxisZoomSlider({
   }
   const backgroundRectOffset = (ZOOM_SLIDER_SIZE - ZOOM_SLIDER_TRACK_SIZE) / 2;
   return /*#__PURE__*/_jsxs("g", {
+    "data-charts-zoom-slider": true,
     transform: `translate(${x} ${y})`,
+    style: {
+      touchAction: 'none'
+    },
     children: [/*#__PURE__*/_jsx(ChartAxisZoomSliderTrack, {
       x: axisDirection === 'x' ? 0 : backgroundRectOffset,
       y: axisDirection === 'x' ? backgroundRectOffset : 0,