@mui/x-charts-pro 8.4.0 → 8.5.0

package/ChartZoomSlider/internals/ChartAxisZoomSlider.js

@@ -2,44 +2,18 @@
 'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartAxisZoomSlider = ChartAxisZoomSlider;
-exports.calculateZoomEnd = calculateZoomEnd;
-exports.calculateZoomStart = calculateZoomStart;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _internals = require("@mui/x-charts/internals");
-var _styles = require("@mui/material/styles");
 var _hooks = require("@mui/x-charts/hooks");
-var _rafThrottle = require("@mui/x-internals/rafThrottle");
-var _ChartsTooltipZoomSliderValue = require("./ChartsTooltipZoomSliderValue");
+var _constants = require("./constants");
 var _useChartProZoom = require("../../internals/plugins/useChartProZoom");
-var _ChartAxisZoomSliderThumb = require("./ChartAxisZoomSliderThumb");
+var _ChartAxisZoomSliderTrack = require("./ChartAxisZoomSliderTrack");
+var _ChartAxisZoomSliderActiveTrack = require("./ChartAxisZoomSliderActiveTrack");
 var _jsxRuntime = require("react/jsx-runtime");
-const ZoomSliderTrack = (0, _styles.styled)('rect')(({
-  theme
-}) => ({
-  '&': {
-    fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[800] : (theme.vars || theme).palette.grey[300]
-  }
-}));
-const ZoomSliderActiveTrackRect = (0, _styles.styled)('rect')(({
-  theme
-}) => ({
-  '&': {
-    fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[500] : (theme.vars || theme).palette.grey[600],
-    cursor: 'grab'
-  }
-}));
-const ZOOM_SLIDER_TRACK_SIZE = 8;
-const ZOOM_SLIDER_ACTIVE_TRACK_SIZE = 10;
-const ZOOM_SLIDER_THUMB_HEIGHT = 20;
-const ZOOM_SLIDER_THUMB_WIDTH = 10;
-const ZOOM_SLIDER_SIZE = Math.max(ZOOM_SLIDER_TRACK_SIZE, ZOOM_SLIDER_ACTIVE_TRACK_SIZE, ZOOM_SLIDER_THUMB_HEIGHT, ZOOM_SLIDER_THUMB_WIDTH);
-
 /**
  * Renders the zoom slider for a specific axis.
  * @internal
@@ -51,6 +25,7 @@ function ChartAxisZoomSlider({
   const store = (0, _internals.useStore)();
   const drawingArea = (0, _internals.useDrawingArea)();
   const zoomData = (0, _internals.useSelector)(store, _useChartProZoom.selectorChartAxisZoomData, axisId);
+  const [showTooltip, setShowTooltip] = React.useState(false);
   const {
     xAxis
   } = (0, _hooks.useXAxes)();
@@ -64,6 +39,7 @@ function ChartAxisZoomSlider({
   let y;
   let reverse;
   let axisPosition;
+  let tooltipConditions;
   if (axisDirection === 'x') {
     const axis = xAxis[axisId];
     if (!axis || axis.position === 'none') {
@@ -71,312 +47,46 @@ function ChartAxisZoomSlider({
     }
     const axisSize = axis.height;
     x = drawingArea.left;
-    y = axis.position === 'bottom' ? drawingArea.top + drawingArea.height + axis.offset + axisSize + _internals.ZOOM_SLIDER_MARGIN : drawingArea.top - axis.offset - axisSize - ZOOM_SLIDER_SIZE - _internals.ZOOM_SLIDER_MARGIN;
+    y = axis.position === 'bottom' ? drawingArea.top + drawingArea.height + axis.offset + axisSize + _internals.ZOOM_SLIDER_MARGIN : drawingArea.top - axis.offset - axisSize - _constants.ZOOM_SLIDER_SIZE - _internals.ZOOM_SLIDER_MARGIN;
     reverse = axis.reverse ?? false;
     axisPosition = axis.position ?? 'bottom';
+    tooltipConditions = axis.zoom?.slider?.showTooltip ?? _internals.DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP;
   } else {
     const axis = yAxis[axisId];
     if (!axis || axis.position === 'none') {
       return null;
     }
     const axisSize = axis.width;
-    x = axis.position === 'right' ? drawingArea.left + drawingArea.width + axis.offset + axisSize + _internals.ZOOM_SLIDER_MARGIN : drawingArea.left - axis.offset - axisSize - ZOOM_SLIDER_SIZE - _internals.ZOOM_SLIDER_MARGIN;
+    x = axis.position === 'right' ? drawingArea.left + drawingArea.width + axis.offset + axisSize + _internals.ZOOM_SLIDER_MARGIN : drawingArea.left - axis.offset - axisSize - _constants.ZOOM_SLIDER_SIZE - _internals.ZOOM_SLIDER_MARGIN;
     y = drawingArea.top;
     reverse = axis.reverse ?? false;
     axisPosition = axis.position ?? 'left';
+    tooltipConditions = axis.zoom?.slider?.showTooltip ?? _internals.DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP;
   }
-  const backgroundRectOffset = (ZOOM_SLIDER_SIZE - ZOOM_SLIDER_TRACK_SIZE) / 2;
+  const backgroundRectOffset = (_constants.ZOOM_SLIDER_SIZE - _constants.ZOOM_SLIDER_TRACK_SIZE) / 2;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
     transform: `translate(${x} ${y})`,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomSliderTrack, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderTrack.ChartAxisZoomSliderTrack, {
       x: axisDirection === 'x' ? 0 : backgroundRectOffset,
       y: axisDirection === 'x' ? backgroundRectOffset : 0,
-      height: axisDirection === 'x' ? ZOOM_SLIDER_TRACK_SIZE : drawingArea.height,
-      width: axisDirection === 'x' ? drawingArea.width : ZOOM_SLIDER_TRACK_SIZE,
-      rx: ZOOM_SLIDER_TRACK_SIZE / 2,
-      ry: ZOOM_SLIDER_TRACK_SIZE / 2
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartAxisZoomSliderActiveTrack, {
+      height: axisDirection === 'x' ? _constants.ZOOM_SLIDER_TRACK_SIZE : drawingArea.height,
+      width: axisDirection === 'x' ? drawingArea.width : _constants.ZOOM_SLIDER_TRACK_SIZE,
+      rx: _constants.ZOOM_SLIDER_TRACK_SIZE / 2,
+      ry: _constants.ZOOM_SLIDER_TRACK_SIZE / 2,
+      axisId: axisId,
+      axisDirection: axisDirection,
+      reverse: reverse,
+      onSelectStart: tooltipConditions === 'hover' ? () => setShowTooltip(true) : undefined,
+      onSelectEnd: tooltipConditions === 'hover' ? () => setShowTooltip(false) : undefined
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderActiveTrack.ChartAxisZoomSliderActiveTrack, {
       zoomData: zoomData,
       axisId: axisId,
       axisPosition: axisPosition,
       axisDirection: axisDirection,
-      reverse: reverse
-    })]
-  });
-}
-const formatter = Intl.NumberFormat(undefined, {
-  maximumFractionDigits: 0
-});
-const zoomValueFormatter = value => formatter.format(value);
-function ChartAxisZoomSliderActiveTrack({
-  axisId,
-  axisDirection,
-  axisPosition,
-  zoomData,
-  reverse,
-  valueFormatter = zoomValueFormatter
-}) {
-  const {
-    instance,
-    svgRef
-  } = (0, _internals.useChartContext)();
-  const store = (0, _internals.useStore)();
-  const drawingArea = (0, _internals.useDrawingArea)();
-  const activePreviewRectRef = React.useRef(null);
-  const [startThumbEl, setStartThumbEl] = React.useState(null);
-  const [endThumbEl, setEndThumbEl] = React.useState(null);
-  const [showTooltip, setShowTooltip] = React.useState(null);
-  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(() => {
-    const activePreviewRect = activePreviewRectRef.current;
-    if (!activePreviewRect) {
-      return;
-    }
-
-    /* min and max values of zoom to ensure the pointer anchor in the slider is maintained  */
-    let pointerZoomMin;
-    let pointerZoomMax;
-    let prevPointerZoom = 0;
-    const onPointerMove = (0, _rafThrottle.rafThrottle)(event => {
-      const {
-        left,
-        top,
-        height,
-        width
-      } = (0, _internals.selectorChartDrawingArea)(store.getSnapshot());
-      const axisZoomData = (0, _useChartProZoom.selectorChartAxisZoomData)(store.getSnapshot(), axisId);
-      const element = svgRef.current;
-      if (!axisZoomData || !element) {
-        return;
-      }
-      const point = (0, _internals.getSVGPoint)(element, event);
-      let pointerZoom;
-      if (axisDirection === 'x') {
-        pointerZoom = (point.x - left) / width * 100;
-      } else {
-        pointerZoom = (top + height - point.y) / height * 100;
-      }
-      if (reverse) {
-        pointerZoom = 100 - pointerZoom;
-      }
-      pointerZoom = Math.max(pointerZoomMin, Math.min(pointerZoomMax, pointerZoom));
-      const deltaZoom = pointerZoom - prevPointerZoom;
-      prevPointerZoom = pointerZoom;
-      instance.moveZoomRange(axisId, deltaZoom);
-    });
-    const onPointerUp = () => {
-      activePreviewRect.removeEventListener('pointermove', onPointerMove);
-      activePreviewRect.removeEventListener('pointerup', onPointerUp);
-      setShowTooltip(null);
-    };
-    const onPointerDown = event => {
-      // Prevent text selection when dragging
-      event.preventDefault();
-      activePreviewRect.setPointerCapture(event.pointerId);
-      const {
-        left,
-        top,
-        height,
-        width
-      } = (0, _internals.selectorChartDrawingArea)(store.getSnapshot());
-      const axisZoomData = (0, _useChartProZoom.selectorChartAxisZoomData)(store.getSnapshot(), axisId);
-      const element = svgRef.current;
-      if (!axisZoomData || !element) {
-        return;
-      }
-      const point = (0, _internals.getSVGPoint)(element, event);
-
-      // The corresponding value of zoom where the pointer was pressed
-      let pointerDownZoom;
-      if (axisDirection === 'x') {
-        pointerDownZoom = (point.x - left) / width * 100;
-      } else {
-        pointerDownZoom = (top + height - point.y) / height * 100;
-      }
-      if (reverse) {
-        pointerDownZoom = 100 - pointerDownZoom;
-      }
-      prevPointerZoom = pointerDownZoom;
-      pointerZoomMin = pointerDownZoom - axisZoomData.start;
-      pointerZoomMax = 100 - (axisZoomData.end - pointerDownZoom);
-      setShowTooltip('both');
-      activePreviewRect.addEventListener('pointerup', onPointerUp);
-      activePreviewRect.addEventListener('pointermove', onPointerMove);
-    };
-    activePreviewRect.addEventListener('pointerdown', onPointerDown);
-
-    // eslint-disable-next-line consistent-return
-    return () => {
-      activePreviewRect.removeEventListener('pointerdown', onPointerDown);
-      onPointerMove.clear();
-    };
-  }, [axisDirection, axisId, instance, reverse, store, svgRef]);
-  const onStartThumbMove = event => {
-    const element = svgRef.current;
-    if (!element) {
-      return;
-    }
-    const point = (0, _internals.getSVGPoint)(element, event);
-    instance.setZoomData(prevZoomData => {
-      const {
-        left,
-        top,
-        width,
-        height
-      } = (0, _internals.selectorChartDrawingArea)(store.value);
-      const zoomOptions = (0, _internals.selectorChartAxisZoomOptionsLookup)(store.value, axisId);
-      return prevZoomData.map(zoom => {
-        if (zoom.axisId === axisId) {
-          let newStart;
-          if (axisDirection === 'x') {
-            newStart = (point.x - left) / width * 100;
-          } else {
-            newStart = (top + height - point.y) / height * 100;
-          }
-          if (reverse) {
-            newStart = 100 - newStart;
-          }
-          return (0, _extends2.default)({}, zoom, {
-            start: calculateZoomStart(newStart, zoom, zoomOptions)
-          });
-        }
-        return zoom;
-      });
-    });
-  };
-  const onEndThumbMove = event => {
-    const element = svgRef.current;
-    if (!element) {
-      return;
-    }
-    const point = (0, _internals.getSVGPoint)(element, event);
-    instance.setZoomData(prevZoomData => {
-      const {
-        left,
-        top,
-        width,
-        height
-      } = (0, _internals.selectorChartDrawingArea)(store.value);
-      const zoomOptions = (0, _internals.selectorChartAxisZoomOptionsLookup)(store.value, axisId);
-      return prevZoomData.map(zoom => {
-        if (zoom.axisId === axisId) {
-          let newEnd;
-          if (axisDirection === 'x') {
-            newEnd = (point.x - left) / width * 100;
-          } else {
-            newEnd = (top + height - point.y) / height * 100;
-          }
-          if (reverse) {
-            newEnd = 100 - newEnd;
-          }
-          return (0, _extends2.default)({}, zoom, {
-            end: calculateZoomEnd(newEnd, zoom, zoomOptions)
-          });
-        }
-        return zoom;
-      });
-    });
-  };
-  let previewX;
-  let previewY;
-  let previewWidth;
-  let previewHeight;
-  let startThumbX;
-  let startThumbY;
-  let endThumbX;
-  let endThumbY;
-  if (axisDirection === 'x') {
-    previewX = zoomData.start / 100 * drawingArea.width;
-    previewY = 0;
-    previewWidth = drawingArea.width * (zoomData.end - zoomData.start) / 100;
-    previewHeight = ZOOM_SLIDER_ACTIVE_TRACK_SIZE;
-    startThumbX = zoomData.start / 100 * drawingArea.width;
-    startThumbY = 0;
-    endThumbX = zoomData.end / 100 * drawingArea.width;
-    endThumbY = 0;
-    if (reverse) {
-      previewX = drawingArea.width - previewX - previewWidth;
-      startThumbX = drawingArea.width - startThumbX;
-      endThumbX = drawingArea.width - endThumbX;
-    }
-    startThumbX -= previewThumbWidth / 2;
-    endThumbX -= previewThumbWidth / 2;
-  } else {
-    previewX = 0;
-    previewY = drawingArea.height - zoomData.end / 100 * drawingArea.height;
-    previewWidth = ZOOM_SLIDER_ACTIVE_TRACK_SIZE;
-    previewHeight = drawingArea.height * (zoomData.end - zoomData.start) / 100;
-    startThumbX = 0;
-    startThumbY = drawingArea.height - zoomData.start / 100 * drawingArea.height;
-    endThumbX = 0;
-    endThumbY = drawingArea.height - zoomData.end / 100 * drawingArea.height;
-    if (reverse) {
-      previewY = drawingArea.height - previewY - previewHeight;
-      startThumbY = drawingArea.height - startThumbY;
-      endThumbY = drawingArea.height - endThumbY;
-    }
-    startThumbY -= previewThumbHeight / 2;
-    endThumbY -= previewThumbHeight / 2;
-  }
-  const previewOffset = (ZOOM_SLIDER_THUMB_HEIGHT - ZOOM_SLIDER_ACTIVE_TRACK_SIZE) / 2;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomSliderActiveTrackRect, {
-      ref: activePreviewRectRef,
-      x: previewX + (axisDirection === 'x' ? 0 : previewOffset),
-      y: previewY + (axisDirection === 'x' ? previewOffset : 0),
-      width: previewWidth,
-      height: previewHeight,
-      onPointerEnter: () => setShowTooltip('both'),
-      onPointerLeave: () => setShowTooltip(null)
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderThumb.ChartAxisZoomSliderThumb, {
-      ref: setStartThumbEl,
-      x: startThumbX,
-      y: startThumbY,
-      width: previewThumbWidth,
-      height: previewThumbHeight,
-      orientation: axisDirection === 'x' ? 'horizontal' : 'vertical',
-      onMove: onStartThumbMove,
-      onPointerEnter: () => setShowTooltip('start'),
-      onPointerLeave: () => setShowTooltip(null),
-      placement: "start"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderThumb.ChartAxisZoomSliderThumb, {
-      ref: setEndThumbEl,
-      x: endThumbX,
-      y: endThumbY,
-      width: previewThumbWidth,
-      height: previewThumbHeight,
-      orientation: axisDirection === 'x' ? 'horizontal' : 'vertical',
-      onMove: onEndThumbMove,
-      onPointerEnter: () => setShowTooltip('end'),
-      onPointerLeave: () => setShowTooltip(null),
-      placement: "end"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipZoomSliderValue.ChartsTooltipZoomSliderValue, {
-      anchorEl: startThumbEl,
-      open: showTooltip === 'start' || showTooltip === 'both',
-      placement: axisPosition,
-      children: valueFormatter(zoomData.start)
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipZoomSliderValue.ChartsTooltipZoomSliderValue, {
-      anchorEl: endThumbEl,
-      open: showTooltip === 'end' || showTooltip === 'both',
-      placement: axisPosition,
-      children: valueFormatter(zoomData.end)
+      reverse: reverse,
+      showTooltip: showTooltip && tooltipConditions !== 'never' || tooltipConditions === 'always',
+      onPointerEnter: tooltipConditions === 'hover' ? () => setShowTooltip(true) : undefined,
+      onPointerLeave: tooltipConditions === 'hover' ? () => setShowTooltip(false) : undefined
     })]
   });
-}
-function calculateZoomStart(newStart, currentZoom, options) {
-  const {
-    minStart,
-    minSpan,
-    maxSpan
-  } = options;
-  return Math.max(minStart, currentZoom.end - maxSpan, Math.min(currentZoom.end - minSpan, newStart));
-}
-function calculateZoomEnd(newEnd, currentZoom, options) {
-  const {
-    maxEnd,
-    minSpan,
-    maxSpan
-  } = options;
-  return Math.min(maxEnd, currentZoom.start + maxSpan, Math.max(currentZoom.start + minSpan, newEnd));
 }

package/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.d.ts

@@ -0,0 +1,24 @@
+import { AxisId, ZoomData } from '@mui/x-charts/internals';
+import * as React from 'react';
+export interface ChartAxisZoomSliderActiveTrackProps {
+  axisId: AxisId;
+  axisDirection: 'x' | 'y';
+  axisPosition: 'top' | 'bottom' | 'left' | 'right';
+  zoomData: ZoomData;
+  reverse?: boolean;
+  valueFormatter?: (value: number) => string;
+  showTooltip: boolean;
+  onPointerEnter?: () => void;
+  onPointerLeave?: () => void;
+}
+export declare function ChartAxisZoomSliderActiveTrack({
+  axisId,
+  axisDirection,
+  axisPosition,
+  zoomData,
+  reverse,
+  valueFormatter,
+  showTooltip,
+  onPointerEnter,
+  onPointerLeave
+}: ChartAxisZoomSliderActiveTrackProps): React.JSX.Element;

package/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -0,0 +1,251 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartAxisZoomSliderActiveTrack = ChartAxisZoomSliderActiveTrack;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _styles = require("@mui/material/styles");
+var _internals = require("@mui/x-charts/internals");
+var React = _interopRequireWildcard(require("react"));
+var _rafThrottle = require("@mui/x-internals/rafThrottle");
+var _useChartProZoom = require("../../internals/plugins/useChartProZoom");
+var _ChartAxisZoomSliderThumb = require("./ChartAxisZoomSliderThumb");
+var _ChartsTooltipZoomSliderValue = require("./ChartsTooltipZoomSliderValue");
+var _zoomUtils = require("./zoom-utils");
+var _constants = require("./constants");
+var _jsxRuntime = require("react/jsx-runtime");
+const ZoomSliderActiveTrackRect = (0, _styles.styled)('rect')(({
+  theme
+}) => ({
+  '&': {
+    fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[500] : (theme.vars || theme).palette.grey[600],
+    cursor: 'grab'
+  }
+}));
+const formatter = Intl.NumberFormat(undefined, {
+  maximumFractionDigits: 0
+});
+const zoomValueFormatter = value => formatter.format(value);
+function ChartAxisZoomSliderActiveTrack({
+  axisId,
+  axisDirection,
+  axisPosition,
+  zoomData,
+  reverse,
+  valueFormatter = zoomValueFormatter,
+  showTooltip,
+  onPointerEnter,
+  onPointerLeave
+}) {
+  const {
+    instance,
+    svgRef
+  } = (0, _internals.useChartContext)();
+  const store = (0, _internals.useStore)();
+  const drawingArea = (0, _internals.useDrawingArea)();
+  const activePreviewRectRef = React.useRef(null);
+  const [startThumbEl, setStartThumbEl] = React.useState(null);
+  const [endThumbEl, setEndThumbEl] = React.useState(null);
+  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(() => {
+    const activePreviewRect = activePreviewRectRef.current;
+    if (!activePreviewRect) {
+      return;
+    }
+
+    /* min and max values of zoom to ensure the pointer anchor in the slider is maintained  */
+    let pointerZoomMin;
+    let pointerZoomMax;
+    let prevPointerZoom = 0;
+    const onPointerMove = (0, _rafThrottle.rafThrottle)(event => {
+      const element = svgRef.current;
+      if (!element) {
+        return;
+      }
+      const point = (0, _internals.getSVGPoint)(element, event);
+      let pointerZoom = (0, _zoomUtils.calculateZoomFromPoint)(store.getSnapshot(), axisId, point);
+      if (pointerZoom === null) {
+        return;
+      }
+      pointerZoom = Math.max(pointerZoomMin, Math.min(pointerZoomMax, pointerZoom));
+      const deltaZoom = pointerZoom - prevPointerZoom;
+      prevPointerZoom = pointerZoom;
+      instance.moveZoomRange(axisId, deltaZoom);
+    });
+    const onPointerUp = () => {
+      activePreviewRect.removeEventListener('pointermove', onPointerMove);
+      document.removeEventListener('pointerup', onPointerUp);
+    };
+    const onPointerDown = event => {
+      // Prevent text selection when dragging
+      event.preventDefault();
+      activePreviewRect.setPointerCapture(event.pointerId);
+      const axisZoomData = (0, _useChartProZoom.selectorChartAxisZoomData)(store.getSnapshot(), axisId);
+      const element = svgRef.current;
+      if (!axisZoomData || !element) {
+        return;
+      }
+      const point = (0, _internals.getSVGPoint)(element, event);
+      const pointerDownZoom = (0, _zoomUtils.calculateZoomFromPoint)(store.getSnapshot(), axisId, point);
+      if (pointerDownZoom === null) {
+        return;
+      }
+      prevPointerZoom = pointerDownZoom;
+      pointerZoomMin = pointerDownZoom - axisZoomData.start;
+      pointerZoomMax = 100 - (axisZoomData.end - pointerDownZoom);
+      document.addEventListener('pointerup', onPointerUp);
+      activePreviewRect.addEventListener('pointermove', onPointerMove);
+    };
+    activePreviewRect.addEventListener('pointerdown', onPointerDown);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      activePreviewRect.removeEventListener('pointerdown', onPointerDown);
+      onPointerMove.clear();
+    };
+  }, [axisDirection, axisId, instance, reverse, store, svgRef]);
+  const onStartThumbMove = event => {
+    const element = svgRef.current;
+    if (!element) {
+      return;
+    }
+    const point = (0, _internals.getSVGPoint)(element, event);
+    instance.setZoomData(prevZoomData => {
+      const zoomOptions = (0, _internals.selectorChartAxisZoomOptionsLookup)(store.getSnapshot(), axisId);
+      return prevZoomData.map(zoom => {
+        if (zoom.axisId === axisId) {
+          const newStart = (0, _zoomUtils.calculateZoomFromPoint)(store.getSnapshot(), axisId, point);
+          if (newStart === null) {
+            return zoom;
+          }
+          return (0, _extends2.default)({}, zoom, {
+            start: (0, _zoomUtils.calculateZoomStart)(newStart, zoom, zoomOptions)
+          });
+        }
+        return zoom;
+      });
+    });
+  };
+  const onEndThumbMove = event => {
+    const element = svgRef.current;
+    if (!element) {
+      return;
+    }
+    const point = (0, _internals.getSVGPoint)(element, event);
+    instance.setZoomData(prevZoomData => {
+      const {
+        left,
+        top,
+        width,
+        height
+      } = (0, _internals.selectorChartDrawingArea)(store.getSnapshot());
+      const zoomOptions = (0, _internals.selectorChartAxisZoomOptionsLookup)(store.getSnapshot(), axisId);
+      return prevZoomData.map(zoom => {
+        if (zoom.axisId === axisId) {
+          let newEnd;
+          if (axisDirection === 'x') {
+            newEnd = (point.x - left) / width * 100;
+          } else {
+            newEnd = (top + height - point.y) / height * 100;
+          }
+          if (reverse) {
+            newEnd = 100 - newEnd;
+          }
+          return (0, _extends2.default)({}, zoom, {
+            end: (0, _zoomUtils.calculateZoomEnd)(newEnd, zoom, zoomOptions)
+          });
+        }
+        return zoom;
+      });
+    });
+  };
+  let previewX;
+  let previewY;
+  let previewWidth;
+  let previewHeight;
+  let startThumbX;
+  let startThumbY;
+  let endThumbX;
+  let endThumbY;
+  if (axisDirection === 'x') {
+    previewX = zoomData.start / 100 * drawingArea.width;
+    previewY = 0;
+    previewWidth = drawingArea.width * (zoomData.end - zoomData.start) / 100;
+    previewHeight = _constants.ZOOM_SLIDER_ACTIVE_TRACK_SIZE;
+    startThumbX = zoomData.start / 100 * drawingArea.width;
+    startThumbY = 0;
+    endThumbX = zoomData.end / 100 * drawingArea.width;
+    endThumbY = 0;
+    if (reverse) {
+      previewX = drawingArea.width - previewX - previewWidth;
+      startThumbX = drawingArea.width - startThumbX;
+      endThumbX = drawingArea.width - endThumbX;
+    }
+    startThumbX -= previewThumbWidth / 2;
+    endThumbX -= previewThumbWidth / 2;
+  } else {
+    previewX = 0;
+    previewY = drawingArea.height - zoomData.end / 100 * drawingArea.height;
+    previewWidth = _constants.ZOOM_SLIDER_ACTIVE_TRACK_SIZE;
+    previewHeight = drawingArea.height * (zoomData.end - zoomData.start) / 100;
+    startThumbX = 0;
+    startThumbY = drawingArea.height - zoomData.start / 100 * drawingArea.height;
+    endThumbX = 0;
+    endThumbY = drawingArea.height - zoomData.end / 100 * drawingArea.height;
+    if (reverse) {
+      previewY = drawingArea.height - previewY - previewHeight;
+      startThumbY = drawingArea.height - startThumbY;
+      endThumbY = drawingArea.height - endThumbY;
+    }
+    startThumbY -= previewThumbHeight / 2;
+    endThumbY -= previewThumbHeight / 2;
+  }
+  const previewOffset = (_constants.ZOOM_SLIDER_THUMB_HEIGHT - _constants.ZOOM_SLIDER_ACTIVE_TRACK_SIZE) / 2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomSliderActiveTrackRect, {
+      ref: activePreviewRectRef,
+      x: previewX + (axisDirection === 'x' ? 0 : previewOffset),
+      y: previewY + (axisDirection === 'x' ? previewOffset : 0),
+      width: previewWidth,
+      height: previewHeight,
+      onPointerEnter: onPointerEnter,
+      onPointerLeave: onPointerLeave
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderThumb.ChartAxisZoomSliderThumb, {
+      ref: setStartThumbEl,
+      x: startThumbX,
+      y: startThumbY,
+      width: previewThumbWidth,
+      height: previewThumbHeight,
+      orientation: axisDirection === 'x' ? 'horizontal' : 'vertical',
+      onMove: onStartThumbMove,
+      onPointerEnter: onPointerEnter,
+      onPointerLeave: onPointerLeave,
+      placement: "start"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderThumb.ChartAxisZoomSliderThumb, {
+      ref: setEndThumbEl,
+      x: endThumbX,
+      y: endThumbY,
+      width: previewThumbWidth,
+      height: previewThumbHeight,
+      orientation: axisDirection === 'x' ? 'horizontal' : 'vertical',
+      onMove: onEndThumbMove,
+      onPointerEnter: onPointerEnter,
+      onPointerLeave: onPointerLeave,
+      placement: "end"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipZoomSliderValue.ChartsTooltipZoomSliderValue, {
+      anchorEl: startThumbEl,
+      open: showTooltip,
+      placement: axisPosition,
+      children: valueFormatter(zoomData.start)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipZoomSliderValue.ChartsTooltipZoomSliderValue, {
+      anchorEl: endThumbEl,
+      open: showTooltip,
+      placement: axisPosition,
+      children: valueFormatter(zoomData.end)
+    })]
+  });
+}

package/ChartZoomSlider/internals/ChartAxisZoomSliderTrack.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { AxisId } from '@mui/x-charts/internals';
+interface ChartAxisZoomSliderTrackProps extends React.ComponentProps<'rect'> {
+  axisId: AxisId;
+  axisDirection: 'x' | 'y';
+  reverse: boolean;
+  onSelectStart?: () => void;
+  onSelectEnd?: () => void;
+}
+export declare function ChartAxisZoomSliderTrack({
+  axisId,
+  axisDirection,
+  reverse,
+  onSelectStart,
+  onSelectEnd,
+  ...other
+}: ChartAxisZoomSliderTrackProps): React.JSX.Element;
+export {};