@mui/x-charts-pro 8.5.3 → 8.7.0

package/internals/plugins/useChartProZoom/useChartProZoom.js

@@ -11,11 +11,12 @@ exports.useChartProZoom = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _internals = require("@mui/x-charts/internals");
-var _utils = require("@mui/material/utils");
-var _rafThrottle = require("@mui/x-internals/rafThrottle");
 var _debounce = _interopRequireDefault(require("@mui/utils/debounce"));
+var _utils = require("@mui/material/utils");
 var _calculateZoom = require("./calculateZoom");
-var _useChartProZoom = require("./useChartProZoom.utils");
+var _useZoomOnWheel = require("./gestureHooks/useZoomOnWheel");
+var _useZoomOnPinch = require("./gestureHooks/useZoomOnPinch");
+var _usePanOnDrag = require("./gestureHooks/usePanOnDrag");
 // It is helpful to avoid the need to provide the possibly auto-generated id for each axis.
 function initializeZoomData(options, zoomData) {
   const zoomDataMap = new Map();
@@ -50,10 +51,8 @@ const useChartProZoom = ({
     zoomData: paramsZoomData,
     onZoomChange: onZoomChangeProp
   } = params;
-  const drawingArea = (0, _internals.useSelector)(store, _internals.selectorChartDrawingArea);
-  const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
-  const isZoomEnabled = Object.keys(optionsLookup).length > 0;
   const onZoomChange = (0, _utils.useEventCallback)(onZoomChangeProp ?? (() => {}));
+  const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
 
   // Manage controlled state
   React.useEffect(() => {
@@ -149,228 +148,17 @@ const useChartProZoom = ({
     return () => {
       removeIsInteracting.clear();
     };
-  }, [setZoomDataCallback, removeIsInteracting]);
+  }, [removeIsInteracting]);
 
   // Add events
-  const panningEventCacheRef = React.useRef([]);
-  const zoomEventCacheRef = React.useRef([]);
-  const eventPrevDiff = React.useRef(0);
-
-  // Add event for chart panning
-  const isPanEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) || false, [optionsLookup]);
-  const isDraggingRef = React.useRef(false);
-  const touchStartRef = React.useRef(null);
-  React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null || !isPanEnabled) {
-      return () => {};
-    }
-    const throttledHandlePan = (0, _rafThrottle.rafThrottle)((touchStart, point) => {
-      const movementX = point.x - touchStart.x;
-      const movementY = (point.y - touchStart.y) * -1;
-      const newZoomData = touchStart.zoomData.map(zoom => {
-        const options = optionsLookup[zoom.axisId];
-        if (!options || !options.panning) {
-          return zoom;
-        }
-        const min = zoom.start;
-        const max = zoom.end;
-        const span = max - min;
-        const MIN_PERCENT = options.minStart;
-        const MAX_PERCENT = options.maxEnd;
-        const movement = options.axisDirection === 'x' ? movementX : movementY;
-        const dimension = options.axisDirection === 'x' ? drawingArea.width : drawingArea.height;
-        let newMinPercent = min - movement / dimension * span;
-        let newMaxPercent = max - movement / dimension * span;
-        if (newMinPercent < MIN_PERCENT) {
-          newMinPercent = MIN_PERCENT;
-          newMaxPercent = newMinPercent + span;
-        }
-        if (newMaxPercent > MAX_PERCENT) {
-          newMaxPercent = MAX_PERCENT;
-          newMinPercent = newMaxPercent - span;
-        }
-        if (newMinPercent < MIN_PERCENT || newMaxPercent > MAX_PERCENT || span < options.minSpan || span > options.maxSpan) {
-          return zoom;
-        }
-        return (0, _extends2.default)({}, zoom, {
-          start: newMinPercent,
-          end: newMaxPercent
-        });
-      });
-      setZoomDataCallback(newZoomData);
-    });
-    const handlePan = event => {
-      if (element === null || !isDraggingRef.current || panningEventCacheRef.current.length > 1) {
-        return;
-      }
-      if (touchStartRef.current == null) {
-        return;
-      }
-      const touchStart = touchStartRef.current;
-      const point = (0, _internals.getSVGPoint)(element, event);
-      throttledHandlePan(touchStart, point);
-    };
-    const handleDown = event => {
-      panningEventCacheRef.current.push(event);
-      const point = (0, _internals.getSVGPoint)(element, event);
-      if (!instance.isPointInside(point.x, point.y)) {
-        return;
-      }
-      // If there is only one pointer, prevent selecting text
-      if (panningEventCacheRef.current.length === 1) {
-        event.preventDefault();
-      }
-      isDraggingRef.current = true;
-      touchStartRef.current = {
-        x: point.x,
-        y: point.y,
-        zoomData: store.getSnapshot().zoom.zoomData
-      };
-    };
-    const handleUp = event => {
-      panningEventCacheRef.current.splice(panningEventCacheRef.current.findIndex(cachedEvent => cachedEvent.pointerId === event.pointerId), 1);
-      isDraggingRef.current = false;
-      touchStartRef.current = null;
-    };
-    element.addEventListener('pointerdown', handleDown);
-    document.addEventListener('pointermove', handlePan);
-    document.addEventListener('pointerup', handleUp);
-    document.addEventListener('pointercancel', handleUp);
-    document.addEventListener('pointerleave', handleUp);
-    return () => {
-      element.removeEventListener('pointerdown', handleDown);
-      document.removeEventListener('pointermove', handlePan);
-      document.removeEventListener('pointerup', handleUp);
-      document.removeEventListener('pointercancel', handleUp);
-      document.removeEventListener('pointerleave', handleUp);
-      throttledHandlePan.clear();
-    };
-  }, [instance, svgRef, isDraggingRef, isPanEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store]);
-
-  // Add event for chart zoom in/out
-  React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null || !isZoomEnabled) {
-      return () => {};
-    }
-    const rafThrottledSetZoomData = (0, _rafThrottle.rafThrottle)(setZoomDataCallback);
-    const wheelHandler = event => {
-      if (element === null) {
-        return;
-      }
-      const point = (0, _internals.getSVGPoint)(element, event);
-      if (!instance.isPointInside(point.x, point.y)) {
-        return;
-      }
-      event.preventDefault();
-
-      /*
-       * Need to throttle `setZoomDataCallback` instead of `wheelHandler` because we're calling `event.preventDefault()`.
-       * If we throttle the event, then some events' default behavior won't be prevented and the page will scroll while
-       * the user is trying to zoom in.
-       */
-      rafThrottledSetZoomData(prevZoomData => {
-        return prevZoomData.map(zoom => {
-          const option = optionsLookup[zoom.axisId];
-          if (!option) {
-            return zoom;
-          }
-          const centerRatio = option.axisDirection === 'x' ? (0, _useChartProZoom.getHorizontalCenterRatio)(point, drawingArea) : (0, _useChartProZoom.getVerticalCenterRatio)(point, drawingArea);
-          const {
-            scaleRatio,
-            isZoomIn
-          } = (0, _useChartProZoom.getWheelScaleRatio)(event, option.step);
-          const [newMinRange, newMaxRange] = (0, _useChartProZoom.zoomAtPoint)(centerRatio, scaleRatio, zoom, option);
-          if (!(0, _useChartProZoom.isSpanValid)(newMinRange, newMaxRange, isZoomIn, option)) {
-            return zoom;
-          }
-          return {
-            axisId: zoom.axisId,
-            start: newMinRange,
-            end: newMaxRange
-          };
-        });
-      });
-    };
-    function pointerDownHandler(event) {
-      zoomEventCacheRef.current.push(event);
-    }
-    const pointerMoveHandler = (0, _rafThrottle.rafThrottle)(function pointerMoveHandler(event) {
-      if (element === null) {
-        return;
-      }
-      const index = zoomEventCacheRef.current.findIndex(cachedEv => cachedEv.pointerId === event.pointerId);
-      zoomEventCacheRef.current[index] = event;
-
-      // Not a pinch gesture
-      if (zoomEventCacheRef.current.length !== 2) {
-        return;
-      }
-      const firstEvent = zoomEventCacheRef.current[0];
-      const curDiff = (0, _useChartProZoom.getDiff)(zoomEventCacheRef.current);
-      setZoomDataCallback(prevZoomData => {
-        const newZoomData = prevZoomData.map(zoom => {
-          const option = optionsLookup[zoom.axisId];
-          if (!option) {
-            return zoom;
-          }
-          const {
-            scaleRatio,
-            isZoomIn
-          } = (0, _useChartProZoom.getPinchScaleRatio)(curDiff, eventPrevDiff.current, option.step);
-
-          // If the scale ratio is 0, it means the pinch gesture is not valid.
-          if (scaleRatio === 0) {
-            return zoom;
-          }
-          const point = (0, _internals.getSVGPoint)(element, firstEvent);
-          const centerRatio = option.axisDirection === 'x' ? (0, _useChartProZoom.getHorizontalCenterRatio)(point, drawingArea) : (0, _useChartProZoom.getVerticalCenterRatio)(point, drawingArea);
-          const [newMinRange, newMaxRange] = (0, _useChartProZoom.zoomAtPoint)(centerRatio, scaleRatio, zoom, option);
-          if (!(0, _useChartProZoom.isSpanValid)(newMinRange, newMaxRange, isZoomIn, option)) {
-            return zoom;
-          }
-          return {
-            axisId: zoom.axisId,
-            start: newMinRange,
-            end: newMaxRange
-          };
-        });
-        eventPrevDiff.current = curDiff;
-        return newZoomData;
-      });
-    });
-    function pointerUpHandler(event) {
-      zoomEventCacheRef.current.splice(zoomEventCacheRef.current.findIndex(cachedEvent => cachedEvent.pointerId === event.pointerId), 1);
-      if (zoomEventCacheRef.current.length < 2) {
-        eventPrevDiff.current = 0;
-      }
-    }
-    element.addEventListener('wheel', wheelHandler);
-    element.addEventListener('pointerdown', pointerDownHandler);
-    element.addEventListener('pointermove', pointerMoveHandler);
-    element.addEventListener('pointerup', pointerUpHandler);
-    element.addEventListener('pointercancel', pointerUpHandler);
-    element.addEventListener('pointerout', pointerUpHandler);
-    element.addEventListener('pointerleave', pointerUpHandler);
-
-    // Prevent zooming the entire page on touch devices
-    element.addEventListener('touchstart', _useChartProZoom.preventDefault);
-    element.addEventListener('touchmove', _useChartProZoom.preventDefault);
-    return () => {
-      element.removeEventListener('wheel', wheelHandler);
-      element.removeEventListener('pointerdown', pointerDownHandler);
-      element.removeEventListener('pointermove', pointerMoveHandler);
-      element.removeEventListener('pointerup', pointerUpHandler);
-      element.removeEventListener('pointercancel', pointerUpHandler);
-      element.removeEventListener('pointerout', pointerUpHandler);
-      element.removeEventListener('pointerleave', pointerUpHandler);
-      element.removeEventListener('touchstart', _useChartProZoom.preventDefault);
-      element.removeEventListener('touchmove', _useChartProZoom.preventDefault);
-      pointerMoveHandler.clear();
-      rafThrottledSetZoomData.clear();
-    };
-  }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, instance, setZoomDataCallback]);
+  const pluginData = {
+    store,
+    instance,
+    svgRef
+  };
+  (0, _usePanOnDrag.usePanOnDrag)(pluginData, setZoomDataCallback);
+  (0, _useZoomOnWheel.useZoomOnWheel)(pluginData, setZoomDataCallback);
+  (0, _useZoomOnPinch.useZoomOnPinch)(pluginData, setZoomDataCallback);
   const zoom = React.useCallback(step => {
     setZoomDataCallback(prev => prev.map(zoomData => {
       const zoomOptions = (0, _internals.selectorChartAxisZoomOptionsLookup)(store.getSnapshot(), zoomData.axisId);

package/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts

@@ -1,12 +1,12 @@
 import { AxisId, ChartRootSelector } from '@mui/x-charts/internals';
 import { UseChartProZoomSignature } from "./useChartProZoom.types.js";
 export declare const selectorChartZoomState: ChartRootSelector<UseChartProZoomSignature>;
-export declare const selectorChartZoomIsInteracting: 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("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
+export declare const selectorChartZoomIsInteracting: 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 & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 } & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, boolean, any[]>;
-export declare const selectorChartZoomIsEnabled: 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 selectorChartZoomIsEnabled: 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;
 } & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
@@ -14,7 +14,7 @@ export declare const selectorChartZoomIsEnabled: import("reselect").Selector<imp
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, boolean, []>;
 export declare const selectorChartAxisZoomData: import("reselect").Selector<any, import("@mui/x-charts/internals").ZoomData | undefined, [axisId: AxisId]>;
-export declare const selectorChartCanZoomOut: 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("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
+export declare const selectorChartCanZoomOut: 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 & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 } & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
@@ -23,7 +23,7 @@ export declare const selectorChartCanZoomOut: import("reselect").Selector<import
 } & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, boolean, any[]>;
-export declare const selectorChartCanZoomIn: 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("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
+export declare const selectorChartCanZoomIn: 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 & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 } & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;

package/internals/slots/chartBaseSlotProps.d.ts

@@ -4,7 +4,54 @@ export type ChartBaseTooltipProps = ChartBaseCommonProps & {
   children: React.ReactElement<any, any>;
   enterDelay?: number;
   title: React.ReactNode;
+  disableInteractive?: boolean;
 };
-export type ChartBaseIconButtonProps = ChartBaseCommonProps & {
-  ref?: React.Ref<HTMLButtonElement>;
-};
+type BasePlacement = 'top' | 'bottom' | 'left' | 'right';
+type VariationPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';
+type AutoPlacement = 'auto' | 'auto-start' | 'auto-end';
+export type Placement = AutoPlacement | BasePlacement | VariationPlacement;
+type ClickAwayMouseEventHandler = 'onClick' | 'onMouseDown' | 'onMouseUp' | 'onPointerDown' | 'onPointerUp';
+type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd';
+export type ChartBasePopperProps = ChartBaseCommonProps & {
+  ref?: React.Ref<HTMLDivElement>;
+  open: boolean;
+  children?: React.ReactNode;
+  clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+  clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+  flip?: boolean;
+  focusTrap?: boolean;
+  onExited?: (node: HTMLElement | null) => void;
+  onClickAway?: (event: MouseEvent | TouchEvent) => void;
+  onDidShow?: () => void;
+  onDidHide?: () => void;
+  id?: string;
+  target?: Element | null;
+  transition?: boolean;
+  /** @default 'bottom' */
+  placement?: Placement;
+};
+export type ChartBaseMenuListProps = ChartBaseCommonProps & {
+  ref?: React.Ref<HTMLUListElement>;
+  id?: string;
+  children?: React.ReactNode;
+  autoFocus?: boolean;
+  autoFocusItem?: boolean;
+};
+export type ChartBaseMenuItemProps = ChartBaseCommonProps & {
+  autoFocus?: boolean;
+  children?: React.ReactNode;
+  /** For items that aren't interactive themselves (but may contain an interactive widget) */
+  inert?: boolean;
+  dense?: boolean;
+  disabled?: boolean;
+  iconStart?: React.ReactNode;
+  iconEnd?: React.ReactNode;
+  selected?: boolean;
+  value?: number | string | readonly string[];
+  style?: React.CSSProperties;
+};
+export type ChartBaseDividerProps = ChartBaseCommonProps & {
+  ref?: React.Ref<HTMLHRElement>;
+  orientation?: 'horizontal' | 'vertical';
+};
+export {};

package/internals/slots/chartsBaseSlots.d.ts

@@ -1,6 +1,10 @@
 import { ChartsBaseSlots } from '@mui/x-charts/models';
 import * as React from 'react';
-import { ChartBaseTooltipProps } from "./chartBaseSlotProps.js";
+import { ChartBaseDividerProps, ChartBaseMenuItemProps, ChartBaseMenuListProps, ChartBasePopperProps, ChartBaseTooltipProps } from "./chartBaseSlotProps.js";
 export interface ChartsBaseSlotsPro extends ChartsBaseSlots {
+  baseDivider: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper: React.ComponentType<ChartBasePopperProps>;
   baseTooltip: React.ComponentType<ChartBaseTooltipProps>;
 }

package/internals/slots/chartsIconSlots.d.ts

@@ -11,4 +11,9 @@ export interface ChartsIconSlotsPro extends ChartsIconSlots {
    * @default ChartsZoomOutIcon
    */
   zoomOutIcon: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon: React.ComponentType<ChartBaseIconProps>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts-pro",
-  "version": "8.5.3",
+  "version": "8.7.0",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Charts components.",
   "main": "./index.js",
@@ -33,10 +33,11 @@
     "@mui/utils": "^7.1.1",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-internals": "8.5.3",
+    "@mui/x-charts": "8.7.0",
+    "@mui/x-internal-gestures": "0.2.0",
     "@mui/x-charts-vendor": "8.5.3",
-    "@mui/x-charts": "8.5.3",
-    "@mui/x-license": "8.5.3"
+    "@mui/x-license": "8.7.0",
+    "@mui/x-internals": "8.7.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/context/useChartApiContext.d.ts

@@ -1,9 +0,0 @@
-import { ChartProApi } from "../ChartContainerPro/index.js";
-/**
- * The `useChartApiContext` 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'>>();
- */
-export declare function useChartApiContext<Api extends ChartProApi>(): import("react").RefObject<Api>;

package/esm/context/useChartApiContext.d.ts

@@ -1,9 +0,0 @@
-import { ChartProApi } from "../ChartContainerPro/index.js";
-/**
- * The `useChartApiContext` 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'>>();
- */
-export declare function useChartApiContext<Api extends ChartProApi>(): import("react").RefObject<Api>;