@mui/x-charts-pro 8.6.0 → 8.7.0

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { styled } from '@mui/material/styles';
 import { getSVGPoint, invertScale, selectorChartAxis, selectorChartAxisZoomOptionsLookup, useChartContext, useDrawingArea, useSelector, useStore } from '@mui/x-charts/internals';
@@ -8,6 +10,7 @@ import { ChartAxisZoomSliderThumb } from "./ChartAxisZoomSliderThumb.js";
 import { ChartsTooltipZoomSliderValue } from "./ChartsTooltipZoomSliderValue.js";
 import { calculateZoomEnd, calculateZoomFromPoint, calculateZoomStart } from "./zoom-utils.js";
 import { ZOOM_SLIDER_ACTIVE_TRACK_SIZE, ZOOM_SLIDER_THUMB_HEIGHT, ZOOM_SLIDER_THUMB_WIDTH } from "./constants.js";
+import { useUtilityClasses } from "./chartAxisZoomSliderTrackClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ZoomSliderActiveTrackRect = styled('rect')(({
   theme
@@ -41,6 +44,9 @@ export function ChartAxisZoomSliderActiveTrack({
     tooltipStart,
     tooltipEnd
   } = getZoomSliderTooltipsText(axis, drawingArea);
+  const classes = useUtilityClasses({
+    axisDirection
+  });
   const previewThumbWidth = axisDirection === 'x' ? ZOOM_SLIDER_THUMB_WIDTH : ZOOM_SLIDER_THUMB_HEIGHT;
   const previewThumbHeight = axisDirection === 'x' ? ZOOM_SLIDER_THUMB_HEIGHT : ZOOM_SLIDER_THUMB_WIDTH;
   React.useEffect(() => {
@@ -194,7 +200,8 @@ export function ChartAxisZoomSliderActiveTrack({
       width: previewWidth,
       height: previewHeight,
       onPointerEnter: onPointerEnter,
-      onPointerLeave: onPointerLeave
+      onPointerLeave: onPointerLeave,
+      className: classes.active
     }), /*#__PURE__*/_jsx(ChartAxisZoomSliderThumb, {
       ref: setStartThumbEl,
       x: startThumbX,

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderTrack.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["axisId", "axisDirection", "reverse", "onSelectStart", "onSelectEnd"];
@@ -6,7 +8,9 @@ import { useChartContext, getSVGPoint, selectorChartAxisZoomOptionsLookup, useSt
 import { styled } from '@mui/material/styles';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { shouldForwardProp } from '@mui/system';
+import clsx from 'clsx';
 import { calculateZoomEnd, calculateZoomFromPoint, calculateZoomStart } from "./zoom-utils.js";
+import { useUtilityClasses } from "./chartAxisZoomSliderTrackClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ZoomSliderTrack = styled('rect', {
   shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'axisDirection' && prop !== 'isSelecting'
@@ -48,6 +52,9 @@ export function ChartAxisZoomSliderTrack(_ref) {
   } = useChartContext();
   const store = useStore();
   const [isSelecting, setIsSelecting] = React.useState(false);
+  const classes = useUtilityClasses({
+    axisDirection
+  });
   const onPointerDown = function onPointerDown(event) {
     const rect = ref.current;
     const element = svgRef.current;
@@ -119,5 +126,7 @@ export function ChartAxisZoomSliderTrack(_ref) {
     onPointerDown: onPointerDown,
     axisDirection: axisDirection,
     isSelecting: isSelecting
-  }, other));
+  }, other, {
+    className: clsx(classes.background, other.className)
+  }));
 }

package/esm/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/esm/ChartZoomSlider/internals/chartAxisZoomSliderTrackClasses.js

@@ -0,0 +1,21 @@
+import composeClasses from '@mui/utils/composeClasses';
+import ClassNameGenerator from '@mui/utils/ClassNameGenerator';
+export const chartAxisZoomSliderTrackClasses = ['horizontal', 'vertical', 'background', 'active'].reduce((acc, slot) => {
+  acc[slot] = getAxisZoomSliderTrackUtilityClass(slot);
+  return acc;
+}, {});
+export function getAxisZoomSliderTrackUtilityClass(slot) {
+  // We use the `ClassNameGenerator` because the original `generateUtilityClass` function
+  // has a special case for the `active` slot.
+  return `${ClassNameGenerator.generate('MuiChartAxisZoomSliderTrack')}-${slot}`;
+}
+export const useUtilityClasses = props => {
+  const {
+    axisDirection
+  } = props;
+  const slots = {
+    background: [axisDirection === 'x' ? 'horizontal' : 'vertical', 'background'],
+    active: [axisDirection === 'x' ? 'horizontal' : 'vertical', 'active']
+  };
+  return composeClasses(slots, getAxisZoomSliderTrackUtilityClass);
+};

package/esm/ChartsToolbarPro/ChartsToolbarImageExportTrigger.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import { useChartsSlots } from '@mui/x-charts/internals';
-import { useChartApiContext } from "../context/index.js";
+import { useChartProApiContext } from "../context/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * A button that triggers an image export.
@@ -27,7 +27,7 @@ const ChartsToolbarImageExportTrigger = forwardRef(function ChartsToolbarImageEx
     slots,
     slotProps
   } = useChartsSlots();
-  const apiRef = useChartApiContext();
+  const apiRef = useChartProApiContext();
   const handleClick = event => {
     apiRef.current.exportAsImage(options);
     onClick?.(event);

package/esm/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import { useChartsSlots } from '@mui/x-charts/internals';
-import { useChartApiContext } from "../context/index.js";
+import { useChartProApiContext } from "../context/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * A button that triggers a print export.
@@ -27,7 +27,7 @@ const ChartsToolbarPrintExportTrigger = forwardRef(function ChartsToolbarPrintEx
     slots,
     slotProps
   } = useChartsSlots();
-  const apiRef = useChartApiContext();
+  const apiRef = useChartProApiContext();
   const handleClick = event => {
     apiRef.current.exportAsPrint(options);
     onClick?.(event);

package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.js

@@ -45,39 +45,51 @@ export 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 = 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 = 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(() => {
@@ -86,8 +98,7 @@ export const useChartFunnelAxis = ({
     if (element === null || !onAxisClick) {
       return () => {};
     }
-    const handleMouseClick = event => {
-      event.preventDefault();
+    const axisClickHandler = instance.addInteractionListener('tap', event => {
       const {
         axis: xAxisWithScale,
         axisIds: xAxisIds
@@ -101,7 +112,7 @@ export const useChartFunnelAxis = ({
       const usedYAxis = yAxisIds[0];
       let dataIndex = null;
       let isXAxis = false;
-      const svgPoint = getSVGPoint(element, event);
+      const svgPoint = getSVGPoint(element, event.detail.srcEvent);
       const xIndex = getCartesianAxisIndex(xAxisWithScale[usedXAxis], svgPoint.x);
       isXAxis = xIndex !== -1;
       dataIndex = isXAxis ? xIndex : getCartesianAxisIndex(yAxisWithScale[usedYAxis], svgPoint.y);
@@ -122,17 +133,16 @@ export 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 {};
 };
 useChartFunnelAxis.params = {

package/esm/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/esm/{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/esm/context/index.d.ts

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

package/esm/context/index.js

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

package/esm/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/esm/context/{useChartApiContext.js → useChartProApiContext.js}

@@ -1,11 +1,11 @@
 import { useChartApiContext as useChartApiContextCommunity } from '@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'>>();
  */
-export function useChartApiContext() {
+export function useChartProApiContext() {
   return useChartApiContextCommunity();
 }

package/esm/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./useHeatmapSeries.js";
 export * from "./useFunnelSeries.js";
-export * from "./zoom/index.js";
+export * from "./zoom/index.js";
+export * from "./useChartProApiRef.js";

package/esm/hooks/index.js

@@ -1,3 +1,4 @@
 export * from "./useHeatmapSeries.js";
 export * from "./useFunnelSeries.js";
-export * from "./zoom/index.js";
+export * from "./zoom/index.js";
+export * from "./useChartProApiRef.js";

package/esm/hooks/useChartProApiRef.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { ChartAnyPluginSignature } from '@mui/x-charts/internals';
+import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+import { ProPluginsPerSeriesType, type ChartProApi } from "../context/ChartProApi.js";
+/**
+ * Hook that instantiates a [[ChartProApiRef]].
+ * The chart type needs to be given as the generic parameter to narrow down the API to the specific chart type.
+ * @example
+ * ```tsx
+ * const barApiRef = useChartProApiRef<'bar'>();
+ * ```
+ * @example
+ * ```tsx
+ * // The API can be passed to the chart component and used to interact with the chart.
+ * <BarChart apiRef={barApiRef} />
+ * ```
+ * @example
+ * ```tsx
+ * // The API can be used to access chart methods and properties.
+ * barApiRef.current?.getSeries();
+ * ```
+ */
+export declare const useChartProApiRef: <ChartType extends keyof ProPluginsPerSeriesType = never, Signatures extends readonly ChartAnyPluginSignature[] = (ChartType extends keyof ProPluginsPerSeriesType ? ProPluginsPerSeriesType[ChartType] : AllPluginSignatures)>() => React.RefObject<ChartProApi<ChartType, Signatures> | undefined>;

package/esm/hooks/useChartProApiRef.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+/**
+ * Hook that instantiates a [[ChartProApiRef]].
+ * The chart type needs to be given as the generic parameter to narrow down the API to the specific chart type.
+ * @example
+ * ```tsx
+ * const barApiRef = useChartProApiRef<'bar'>();
+ * ```
+ * @example
+ * ```tsx
+ * // The API can be passed to the chart component and used to interact with the chart.
+ * <BarChart apiRef={barApiRef} />
+ * ```
+ * @example
+ * ```tsx
+ * // The API can be used to access chart methods and properties.
+ * barApiRef.current?.getSeries();
+ * ```
+ */
+export const useChartProApiRef = () => React.useRef(undefined);

package/esm/index.d.ts

@@ -1,6 +1,6 @@
 import "./typeOverloads/modules.js";
 export * from '@mui/x-charts/constants';
-export * from '@mui/x-charts/context';
+export type { FadeOptions, HighlightItemData, HighlightOptions, HighlightScope } from '@mui/x-charts/context';
 export * from '@mui/x-charts/hooks';
 export * from '@mui/x-charts/colorPalettes';
 export * from '@mui/x-charts/models';
@@ -26,9 +26,11 @@ export * from '@mui/x-charts/ChartsSurface';
 export * from '@mui/x-charts/ChartDataProvider';
 export * from '@mui/x-charts/ChartsLabel';
 export type { ZoomData, ZoomFilterMode, ZoomSliderShowTooltip, ZoomOptions, ZoomSliderOptions } from '@mui/x-charts/internals';
+export * from "./context/index.js";
 export * from "./hooks/index.js";
 export * from "./Heatmap/index.js";
-export * from "./ChartContainerPro/index.js";
+export { ChartContainerPro } from "./ChartContainerPro/index.js";
+export type { ChartContainerProProps } from "./ChartContainerPro/index.js";
 export * from "./ChartDataProviderPro/index.js";
 export * from "./ScatterChartPro/index.js";
 export * from "./BarChartPro/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.6.0
+ * @mui/x-charts-pro v8.7.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -9,7 +9,6 @@ import "./typeOverloads/modules.js";
 
 // exports from MIT package
 export * from '@mui/x-charts/constants';
-export * from '@mui/x-charts/context';
 export * from '@mui/x-charts/hooks';
 export * from '@mui/x-charts/colorPalettes';
 export * from '@mui/x-charts/models';
@@ -35,9 +34,10 @@ export * from '@mui/x-charts/ChartsSurface';
 export * from '@mui/x-charts/ChartDataProvider';
 export * from '@mui/x-charts/ChartsLabel';
 // Pro components
+export * from "./context/index.js";
 export * from "./hooks/index.js";
 export * from "./Heatmap/index.js";
-export * from "./ChartContainerPro/index.js";
+export { ChartContainerPro } from "./ChartContainerPro/index.js";
 export * from "./ChartDataProviderPro/index.js";
 export * from "./ScatterChartPro/index.js";
 export * from "./BarChartPro/index.js";

package/esm/internals/plugins/allPlugins.d.ts

@@ -3,7 +3,7 @@ import { UseChartProExportSignature } from "./useChartProExport/index.js";
 import { UseChartProZoomSignature } from "./useChartProZoom/index.js";
 export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export type AllPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<AllPluginSignatures<TSeries>>;
-export declare const ALL_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartPolarAxisSignature<any>>)[];
+export declare const ALL_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartPolarAxisSignature<any>>)[];
 export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export type DefaultPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<DefaultPluginSignatures<TSeries>>;
-export declare const DEFAULT_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>>)[];
+export declare const DEFAULT_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature>)[];

package/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ChartPlugin, ZoomData } from '@mui/x-charts/internals';
+import { UseChartProZoomSignature } from "../useChartProZoom.types.js";
+export declare const usePanOnDrag: ({
+  store,
+  instance,
+  svgRef
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

package/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.js

@@ -0,0 +1,58 @@
+'use client';
+
+import * as React from 'react';
+import { useSelector, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { translateZoom } from "./useZoom.utils.js";
+export const usePanOnDrag = ({
+  store,
+  instance,
+  svgRef
+}, setZoomDataCallback) => {
+  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
+  const startRef = React.useRef(null);
+
+  // Add event for chart panning
+  const isPanEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) || false, [optionsLookup]);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !isPanEnabled) {
+      return () => {};
+    }
+    const handlePanStart = event => {
+      if (!event.detail.target?.closest('[data-charts-zoom-slider]')) {
+        startRef.current = store.value.zoom.zoomData;
+      }
+    };
+    const handlePanEnd = () => {
+      startRef.current = null;
+    };
+    const throttledCallback = rafThrottle((event, zoomData) => {
+      const newZoomData = translateZoom(zoomData, {
+        x: event.detail.activeDeltaX,
+        y: -event.detail.activeDeltaY
+      }, {
+        width: drawingArea.width,
+        height: drawingArea.height
+      }, optionsLookup);
+      setZoomDataCallback(newZoomData);
+    });
+    const handlePan = event => {
+      const zoomData = startRef.current;
+      if (!zoomData) {
+        return;
+      }
+      throttledCallback(event, zoomData);
+    };
+    const panHandler = instance.addInteractionListener('pan', handlePan);
+    const panStartHandler = instance.addInteractionListener('panStart', handlePanStart);
+    const panEndHandler = instance.addInteractionListener('panEnd', handlePanEnd);
+    return () => {
+      panStartHandler.cleanup();
+      panHandler.cleanup();
+      panEndHandler.cleanup();
+      throttledCallback.clear();
+    };
+  }, [instance, svgRef, isPanEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store, startRef]);
+};

package/esm/internals/plugins/useChartProZoom/{useChartProZoom.utils.d.ts → gestureHooks/useZoom.utils.d.ts}

@@ -17,14 +17,6 @@ export declare function getWheelScaleRatio(event: WheelEvent, step: number): {
   scaleRatio: number;
   isZoomIn: boolean;
 };
-/**
- * Get the scale ratio and if it's a zoom in or out from a pinch gesture.
- */
-export declare function getPinchScaleRatio(curDiff: number, prevDiff: number, step: number): {
-  scaleRatio: number;
-  isZoomIn: boolean;
-};
-export declare function getDiff(eventCache: PointerEvent[]): number;
 /**
  * Get the ratio of the point in the horizontal center of the area.
  */
@@ -35,11 +27,23 @@ export declare function getHorizontalCenterRatio(point: {
   left: number;
   width: number;
 }): number;
-export declare function preventDefault(event: TouchEvent): void;
+/**
+ * Get the ratio of the point in the vertical center of the area.
+ */
 export declare function getVerticalCenterRatio(point: {
   x: number;
   y: number;
 }, area: {
   top: number;
   height: number;
-}): number;
+}): number;
+/**
+ * Translate the zoom data by a given movement.
+ */
+export declare function translateZoom(initialZoomData: readonly ZoomData[], movement: {
+  x: number;
+  y: number;
+}, drawingArea: {
+  width: number;
+  height: number;
+}, optionsLookup: Record<string | number, DefaultizedZoomOptions>): ZoomData[];