@mui/x-charts-pro 9.4.0 → 9.5.0

package/internals/plugins/zoomGestures/useWheelGesture.mjs

@@ -0,0 +1,72 @@
+'use client';
+
+import * as React from 'react';
+import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { getChartPoint } from '@mui/x-charts/internals';
+/**
+ * Generic wheel gesture binding.
+ *
+ * It owns the listener lifecycle, and lets you create your own interactions from the focal point and wheel event it forwards to `onWheel`.
+ */
+export function useWheelGesture(instance, options) {
+  const {
+    enabled,
+    requiredKeys,
+    onWheel
+  } = options;
+  const {
+    chartsLayerContainerRef
+  } = instance;
+  const startedOutsideRef = React.useRef(false);
+  const startedOutsideTimeoutRef = React.useRef(null);
+  const onWheelRef = React.useRef(onWheel);
+  React.useEffect(() => {
+    onWheelRef.current = onWheel;
+  });
+  React.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('zoomTurnWheel', {
+      requiredKeys
+    });
+  }, [enabled, requiredKeys, instance]);
+  React.useEffect(() => {
+    const element = chartsLayerContainerRef.current;
+    if (element === null || !enabled) {
+      return () => {};
+    }
+    const rafThrottledOnWheel = rafThrottle(onWheelRef.current);
+    const handler = instance.addInteractionListener('zoomTurnWheel', event => {
+      const point = getChartPoint(element, {
+        clientX: event.detail.centroid.x,
+        clientY: event.detail.centroid.y
+      });
+
+      // Ignore wheel events that started outside the chart area (e.g. while page-scrolling
+      // over the chart). The timeout debounces re-entry caused by the scroll itself.
+      if (startedOutsideRef.current || !instance.isPointInside(point.x, point.y)) {
+        startedOutsideRef.current = true;
+        if (startedOutsideTimeoutRef.current) {
+          clearTimeout(startedOutsideTimeoutRef.current);
+        }
+        startedOutsideTimeoutRef.current = setTimeout(() => {
+          startedOutsideRef.current = false;
+          startedOutsideTimeoutRef.current = null;
+        }, 100);
+        return;
+      }
+      event.detail.srcEvent.preventDefault();
+      rafThrottledOnWheel(point, event.detail.srcEvent);
+    });
+    return () => {
+      handler.cleanup();
+      if (startedOutsideTimeoutRef.current) {
+        clearTimeout(startedOutsideTimeoutRef.current);
+        startedOutsideTimeoutRef.current = null;
+      }
+      startedOutsideRef.current = false;
+      rafThrottledOnWheel.clear();
+    };
+  }, [chartsLayerContainerRef, enabled, instance]);
+}

package/internals/plugins/zoomGestures/zoomGestures.types.d.mts

@@ -0,0 +1,29 @@
+import type * as React from 'react';
+import type { KeyboardKey, PointerMode } from '@mui/x-internal-gestures/core';
+import type { UseChartInteractionListenerInstance } from '@mui/x-charts/internals';
+/**
+ * The minimal slice of a chart instance required to bind zoom/pan gestures.
+ */
+export interface GestureInstance {
+  chartsLayerContainerRef: React.RefObject<HTMLDivElement | null>;
+  addInteractionListener: UseChartInteractionListenerInstance['addInteractionListener'];
+  updateZoomInteractionListeners: UseChartInteractionListenerInstance['updateZoomInteractionListeners'];
+  isPointInside: (x: number, y: number, targetElement?: Element | EventTarget | null) => boolean;
+}
+/**
+ * Pointer and keyboard gating for a pan gesture.
+ */
+export interface PanGestureConfig {
+  requiredKeys?: KeyboardKey[];
+  pointerMode?: PointerMode[];
+  mouse?: {
+    requiredKeys?: KeyboardKey[];
+  };
+  touch?: {
+    requiredKeys?: KeyboardKey[];
+  };
+}
+export interface ChartPoint {
+  x: number;
+  y: number;
+}

package/internals/plugins/zoomGestures/zoomGestures.types.d.ts

@@ -0,0 +1,29 @@
+import type * as React from 'react';
+import type { KeyboardKey, PointerMode } from '@mui/x-internal-gestures/core';
+import type { UseChartInteractionListenerInstance } from '@mui/x-charts/internals';
+/**
+ * The minimal slice of a chart instance required to bind zoom/pan gestures.
+ */
+export interface GestureInstance {
+  chartsLayerContainerRef: React.RefObject<HTMLDivElement | null>;
+  addInteractionListener: UseChartInteractionListenerInstance['addInteractionListener'];
+  updateZoomInteractionListeners: UseChartInteractionListenerInstance['updateZoomInteractionListeners'];
+  isPointInside: (x: number, y: number, targetElement?: Element | EventTarget | null) => boolean;
+}
+/**
+ * Pointer and keyboard gating for a pan gesture.
+ */
+export interface PanGestureConfig {
+  requiredKeys?: KeyboardKey[];
+  pointerMode?: PointerMode[];
+  mouse?: {
+    requiredKeys?: KeyboardKey[];
+  };
+  touch?: {
+    requiredKeys?: KeyboardKey[];
+  };
+}
+export interface ChartPoint {
+  x: number;
+  y: number;
+}

package/internals/plugins/zoomGestures/zoomGestures.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/internals/plugins/zoomGestures/zoomGestures.types.mjs

@@ -0,0 +1 @@
+export {};

package/models/seriesType/heatmap.d.mts

@@ -1,7 +1,7 @@
 import { type DefaultizedProps } from '@mui/x-internals/types';
 import { type CommonDefaultizedProps, type CommonSeriesType, type CartesianSeriesType, type DatasetElementType } from '@mui/x-charts/internals';
 export type HeatmapValueType = readonly [number, number, number];
-export interface HeatmapSeriesType extends Omit<CommonSeriesType<HeatmapValueType, 'heatmap'>, 'color' | 'colorGetter' | 'valueFormatter'>, CartesianSeriesType {
+export interface HeatmapSeriesType extends Omit<CommonSeriesType<'heatmap'>, 'color' | 'colorGetter' | 'valueFormatter'>, CartesianSeriesType {
   type: 'heatmap';
   /**
    * Data associated to each cell in the heatmap.

package/models/seriesType/heatmap.d.ts

@@ -1,7 +1,7 @@
 import { type DefaultizedProps } from '@mui/x-internals/types';
 import { type CommonDefaultizedProps, type CommonSeriesType, type CartesianSeriesType, type DatasetElementType } from '@mui/x-charts/internals';
 export type HeatmapValueType = readonly [number, number, number];
-export interface HeatmapSeriesType extends Omit<CommonSeriesType<HeatmapValueType, 'heatmap'>, 'color' | 'colorGetter' | 'valueFormatter'>, CartesianSeriesType {
+export interface HeatmapSeriesType extends Omit<CommonSeriesType<'heatmap'>, 'color' | 'colorGetter' | 'valueFormatter'>, CartesianSeriesType {
   type: 'heatmap';
   /**
    * Data associated to each cell in the heatmap.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts-pro",
-  "version": "9.4.0",
+  "version": "9.5.0",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Charts components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -31,10 +31,10 @@
     "@mui/utils": "9.0.1",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-charts": "^9.4.0",
-    "@mui/x-internal-gestures": "^9.3.0",
+    "@mui/x-charts": "^9.5.0",
     "@mui/x-charts-vendor": "^9.4.0",
     "@mui/x-internals": "^9.1.0",
+    "@mui/x-internal-gestures": "^9.3.0",
     "@mui/x-license": "^9.4.0"
   },
   "peerDependencies": {