@mui/x-charts-pro 8.3.0 → 8.4.0

package/esm/BarChartPro/BarChartPro.js

@@ -75,11 +75,12 @@ const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(inProps,
       children: [showToolbar ? /*#__PURE__*/_jsx(ChartsToolbarPro, {}) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartZoomSlider, {}), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
-      }))]
+        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartZoomSlider, {}), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+      })), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") BarChartPro.displayName = "BarChartPro";
 process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -318,7 +319,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -381,7 +383,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -439,7 +442,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -497,7 +501,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -555,7 +560,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -613,7 +619,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -671,7 +678,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -729,7 +737,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -799,7 +808,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -861,7 +871,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -918,7 +929,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -975,7 +987,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -1032,7 +1045,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -1089,7 +1103,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -1146,7 +1161,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -1203,7 +1219,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])

package/esm/ChartContainerPro/ChartContainerPro.js

@@ -45,6 +45,7 @@ const ChartContainerPro = /*#__PURE__*/React.forwardRef(function ChartContainerP
 });
 
 // @ts-expect-error the type coercion breaks the prop types
+if (process.env.NODE_ENV !== "production") ChartContainerPro.displayName = "ChartContainerPro";
 process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/ChartDataProviderPro/ChartDataProviderPro.js

@@ -10,7 +10,7 @@ import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier';
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 import { useChartDataProviderProProps } from "./useChartDataProviderProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = "MTc0NjY1NTIwMDAwMA==";
+const releaseInfo = "MTc0Nzc3ODQwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/esm/ChartZoomSlider/index.d.ts

@@ -1,2 +1,2 @@
 export * from "./ChartZoomSlider.js";
-export { type ChartAxisZoomSliderHandleClasses, type ChartAxisZoomSliderHandleClassKey, chartAxisZoomSliderHandleClasses } from "./internals/chartAxisZoomSliderHandleClasses.js";
+export { type ChartAxisZoomSliderThumbClasses, type ChartAxisZoomSliderThumbClassKey, chartAxisZoomSliderThumbClasses } from "./internals/chartAxisZoomSliderThumbClasses.js";

package/esm/ChartZoomSlider/index.js

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

package/esm/ChartZoomSlider/internals/ChartAxisZoomSlider.js

@@ -6,17 +6,18 @@ import { getSVGPoint, selectorChartAxisZoomOptionsLookup, selectorChartDrawingAr
 import { styled } from '@mui/material/styles';
 import { useXAxes, useYAxes } from '@mui/x-charts/hooks';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { ChartsTooltipZoomSliderValue } from "./ChartsTooltipZoomSliderValue.js";
 import { selectorChartAxisZoomData } from "../../internals/plugins/useChartProZoom/index.js";
-import { ChartAxisZoomSliderHandle } from "./ChartAxisZoomSliderHandle.js";
+import { ChartAxisZoomSliderThumb } from "./ChartAxisZoomSliderThumb.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const BackgroundRect = styled('rect')(({
+const ZoomSliderTrack = styled('rect')(({
   theme
 }) => ({
   '&': {
     fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[800] : (theme.vars || theme).palette.grey[300]
   }
 }));
-const ZoomRangePreviewRect = styled('rect')(({
+const ZoomSliderActiveTrackRect = styled('rect')(({
   theme
 }) => ({
   '&': {
@@ -24,11 +25,11 @@ const ZoomRangePreviewRect = styled('rect')(({
     cursor: 'grab'
   }
 }));
-const ZOOM_SLIDER_BACKGROUND_SIZE = 8;
-const ZOOM_SLIDER_FOREGROUND_SIZE = 10;
-const ZOOM_SLIDER_HANDLE_HEIGHT = 20;
-const ZOOM_SLIDER_HANDLE_WIDTH = 10;
-const ZOOM_SLIDER_SIZE = Math.max(ZOOM_SLIDER_BACKGROUND_SIZE, ZOOM_SLIDER_FOREGROUND_SIZE, ZOOM_SLIDER_HANDLE_HEIGHT, ZOOM_SLIDER_HANDLE_WIDTH);
+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.
@@ -53,48 +54,58 @@ export function ChartAxisZoomSlider({
   let x;
   let y;
   let reverse;
+  let axisPosition;
   if (axisDirection === 'x') {
     const axis = xAxis[axisId];
-    if (!axis) {
+    if (!axis || axis.position === 'none') {
       return null;
     }
     const axisSize = axis.height;
     x = drawingArea.left;
     y = axis.position === 'bottom' ? drawingArea.top + drawingArea.height + axis.offset + axisSize + ZOOM_SLIDER_MARGIN : drawingArea.top - axis.offset - axisSize - ZOOM_SLIDER_SIZE - ZOOM_SLIDER_MARGIN;
     reverse = axis.reverse ?? false;
+    axisPosition = axis.position ?? 'bottom';
   } else {
     const axis = yAxis[axisId];
-    if (!axis) {
+    if (!axis || axis.position === 'none') {
       return null;
     }
     const axisSize = axis.width;
     x = axis.position === 'right' ? drawingArea.left + drawingArea.width + axis.offset + axisSize + ZOOM_SLIDER_MARGIN : drawingArea.left - axis.offset - axisSize - ZOOM_SLIDER_SIZE - ZOOM_SLIDER_MARGIN;
     y = drawingArea.top;
     reverse = axis.reverse ?? false;
+    axisPosition = axis.position ?? 'left';
   }
-  const backgroundRectOffset = (ZOOM_SLIDER_SIZE - ZOOM_SLIDER_BACKGROUND_SIZE) / 2;
+  const backgroundRectOffset = (ZOOM_SLIDER_SIZE - ZOOM_SLIDER_TRACK_SIZE) / 2;
   return /*#__PURE__*/_jsxs("g", {
     transform: `translate(${x} ${y})`,
-    children: [/*#__PURE__*/_jsx(BackgroundRect, {
+    children: [/*#__PURE__*/_jsx(ZoomSliderTrack, {
       x: axisDirection === 'x' ? 0 : backgroundRectOffset,
       y: axisDirection === 'x' ? backgroundRectOffset : 0,
-      height: axisDirection === 'x' ? ZOOM_SLIDER_BACKGROUND_SIZE : drawingArea.height,
-      width: axisDirection === 'x' ? drawingArea.width : ZOOM_SLIDER_BACKGROUND_SIZE,
-      rx: ZOOM_SLIDER_BACKGROUND_SIZE / 2,
-      ry: ZOOM_SLIDER_BACKGROUND_SIZE / 2
-    }), /*#__PURE__*/_jsx(ChartAxisZoomSliderSpan, {
+      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__*/_jsx(ChartAxisZoomSliderActiveTrack, {
       zoomData: zoomData,
       axisId: axisId,
+      axisPosition: axisPosition,
       axisDirection: axisDirection,
       reverse: reverse
     })]
   });
 }
-function ChartAxisZoomSliderSpan({
+const formatter = Intl.NumberFormat(undefined, {
+  maximumFractionDigits: 0
+});
+const zoomValueFormatter = value => formatter.format(value);
+function ChartAxisZoomSliderActiveTrack({
   axisId,
   axisDirection,
+  axisPosition,
   zoomData,
-  reverse
+  reverse,
+  valueFormatter = zoomValueFormatter
 }) {
   const {
     instance,
@@ -103,8 +114,11 @@ function ChartAxisZoomSliderSpan({
   const store = useStore();
   const drawingArea = useDrawingArea();
   const activePreviewRectRef = React.useRef(null);
-  const previewHandleWidth = axisDirection === 'x' ? ZOOM_SLIDER_HANDLE_WIDTH : ZOOM_SLIDER_HANDLE_HEIGHT;
-  const previewHandleHeight = axisDirection === 'x' ? ZOOM_SLIDER_HANDLE_HEIGHT : ZOOM_SLIDER_HANDLE_WIDTH;
+  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) {
@@ -145,6 +159,7 @@ function ChartAxisZoomSliderSpan({
     const onPointerUp = () => {
       activePreviewRect.removeEventListener('pointermove', onPointerMove);
       activePreviewRect.removeEventListener('pointerup', onPointerUp);
+      setShowTooltip(null);
     };
     const onPointerDown = event => {
       // Prevent text selection when dragging
@@ -176,6 +191,7 @@ function ChartAxisZoomSliderSpan({
       prevPointerZoom = pointerDownZoom;
       pointerZoomMin = pointerDownZoom - axisZoomData.start;
       pointerZoomMax = 100 - (axisZoomData.end - pointerDownZoom);
+      setShowTooltip('both');
       activePreviewRect.addEventListener('pointerup', onPointerUp);
       activePreviewRect.addEventListener('pointermove', onPointerMove);
     };
@@ -187,7 +203,7 @@ function ChartAxisZoomSliderSpan({
       onPointerMove.clear();
     };
   }, [axisDirection, axisId, instance, reverse, store, svgRef]);
-  const onResizeStart = event => {
+  const onStartThumbMove = event => {
     const element = svgRef.current;
     if (!element) {
       return;
@@ -220,7 +236,7 @@ function ChartAxisZoomSliderSpan({
       });
     });
   };
-  const onResizeEnd = event => {
+  const onEndThumbMove = event => {
     const element = svgRef.current;
     if (!element) {
       return;
@@ -257,67 +273,85 @@ function ChartAxisZoomSliderSpan({
   let previewY;
   let previewWidth;
   let previewHeight;
-  let startHandleX;
-  let startHandleY;
-  let endHandleX;
-  let endHandleY;
+  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_FOREGROUND_SIZE;
-    startHandleX = zoomData.start / 100 * drawingArea.width;
-    startHandleY = 0;
-    endHandleX = zoomData.end / 100 * drawingArea.width;
-    endHandleY = 0;
+    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;
-      startHandleX = drawingArea.width - startHandleX;
-      endHandleX = drawingArea.width - endHandleX;
+      startThumbX = drawingArea.width - startThumbX;
+      endThumbX = drawingArea.width - endThumbX;
     }
-    startHandleX -= previewHandleWidth / 2;
-    endHandleX -= previewHandleWidth / 2;
+    startThumbX -= previewThumbWidth / 2;
+    endThumbX -= previewThumbWidth / 2;
   } else {
     previewX = 0;
     previewY = drawingArea.height - zoomData.end / 100 * drawingArea.height;
-    previewWidth = ZOOM_SLIDER_FOREGROUND_SIZE;
+    previewWidth = ZOOM_SLIDER_ACTIVE_TRACK_SIZE;
     previewHeight = drawingArea.height * (zoomData.end - zoomData.start) / 100;
-    startHandleX = 0;
-    startHandleY = drawingArea.height - zoomData.start / 100 * drawingArea.height;
-    endHandleX = 0;
-    endHandleY = drawingArea.height - zoomData.end / 100 * drawingArea.height;
+    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;
-      startHandleY = drawingArea.height - startHandleY;
-      endHandleY = drawingArea.height - endHandleY;
+      startThumbY = drawingArea.height - startThumbY;
+      endThumbY = drawingArea.height - endThumbY;
     }
-    startHandleY -= previewHandleHeight / 2;
-    endHandleY -= previewHandleHeight / 2;
+    startThumbY -= previewThumbHeight / 2;
+    endThumbY -= previewThumbHeight / 2;
   }
-  const previewOffset = (ZOOM_SLIDER_HANDLE_HEIGHT - ZOOM_SLIDER_FOREGROUND_SIZE) / 2;
+  const previewOffset = (ZOOM_SLIDER_THUMB_HEIGHT - ZOOM_SLIDER_ACTIVE_TRACK_SIZE) / 2;
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(ZoomRangePreviewRect, {
+    children: [/*#__PURE__*/_jsx(ZoomSliderActiveTrackRect, {
       ref: activePreviewRectRef,
       x: previewX + (axisDirection === 'x' ? 0 : previewOffset),
       y: previewY + (axisDirection === 'x' ? previewOffset : 0),
       width: previewWidth,
-      height: previewHeight
-    }), /*#__PURE__*/_jsx(ChartAxisZoomSliderHandle, {
-      x: startHandleX,
-      y: startHandleY,
-      width: previewHandleWidth,
-      height: previewHandleHeight,
+      height: previewHeight,
+      onPointerEnter: () => setShowTooltip('both'),
+      onPointerLeave: () => setShowTooltip(null)
+    }), /*#__PURE__*/_jsx(ChartAxisZoomSliderThumb, {
+      ref: setStartThumbEl,
+      x: startThumbX,
+      y: startThumbY,
+      width: previewThumbWidth,
+      height: previewThumbHeight,
       orientation: axisDirection === 'x' ? 'horizontal' : 'vertical',
-      onResize: onResizeStart,
+      onMove: onStartThumbMove,
+      onPointerEnter: () => setShowTooltip('start'),
+      onPointerLeave: () => setShowTooltip(null),
       placement: "start"
-    }), /*#__PURE__*/_jsx(ChartAxisZoomSliderHandle, {
-      x: endHandleX,
-      y: endHandleY,
-      width: previewHandleWidth,
-      height: previewHandleHeight,
+    }), /*#__PURE__*/_jsx(ChartAxisZoomSliderThumb, {
+      ref: setEndThumbEl,
+      x: endThumbX,
+      y: endThumbY,
+      width: previewThumbWidth,
+      height: previewThumbHeight,
       orientation: axisDirection === 'x' ? 'horizontal' : 'vertical',
-      onResize: onResizeEnd,
+      onMove: onEndThumbMove,
+      onPointerEnter: () => setShowTooltip('end'),
+      onPointerLeave: () => setShowTooltip(null),
       placement: "end"
+    }), /*#__PURE__*/_jsx(ChartsTooltipZoomSliderValue, {
+      anchorEl: startThumbEl,
+      open: showTooltip === 'start' || showTooltip === 'both',
+      placement: axisPosition,
+      children: valueFormatter(zoomData.start)
+    }), /*#__PURE__*/_jsx(ChartsTooltipZoomSliderValue, {
+      anchorEl: endThumbEl,
+      open: showTooltip === 'end' || showTooltip === 'both',
+      placement: axisPosition,
+      children: valueFormatter(zoomData.end)
     })]
   });
 }

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface ChartZoomSliderThumbOwnerState {
+  onMove: (event: PointerEvent) => void;
+  orientation: 'horizontal' | 'vertical';
+  placement: 'start' | 'end';
+}
+export interface ChartZoomSliderThumbProps extends Omit<React.ComponentProps<'rect'>, 'orientation'>, ChartZoomSliderThumbOwnerState {}
+/**
+ * Renders the zoom slider thumb, which is responsible for resizing the zoom range.
+ * @internal
+ */
+export declare const ChartAxisZoomSliderThumb: React.ForwardRefExoticComponent<Omit<ChartZoomSliderThumbProps, "ref"> & React.RefAttributes<SVGRectElement>>;

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.js

@@ -0,0 +1,85 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "onMove", "orientation", "placement", "rx", "ry"];
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import useForkRef from '@mui/utils/useForkRef';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import clsx from 'clsx';
+import { chartAxisZoomSliderThumbClasses, useUtilityClasses } from "./chartAxisZoomSliderThumbClasses.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Rect = styled('rect')(({
+  theme
+}) => ({
+  [`&.${chartAxisZoomSliderThumbClasses.root}`]: {
+    fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[300] : (theme.vars || theme).palette.common.white,
+    stroke: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[600] : (theme.vars || theme).palette.grey[500]
+  },
+  [`&.${chartAxisZoomSliderThumbClasses.horizontal}`]: {
+    cursor: 'ew-resize'
+  },
+  [`&.${chartAxisZoomSliderThumbClasses.vertical}`]: {
+    cursor: 'ns-resize'
+  }
+}));
+/**
+ * Renders the zoom slider thumb, which is responsible for resizing the zoom range.
+ * @internal
+ */
+export const ChartAxisZoomSliderThumb = /*#__PURE__*/React.forwardRef(function ChartAxisZoomSliderThumb(_ref, forwardedRef) {
+  let {
+      className,
+      onMove,
+      orientation,
+      placement,
+      rx = 4,
+      ry = 4
+    } = _ref,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const classes = useUtilityClasses({
+    onMove,
+    orientation,
+    placement
+  });
+  const thumbRef = React.useRef(null);
+  const ref = useForkRef(thumbRef, forwardedRef);
+  const onMoveEvent = useEventCallback(onMove);
+  React.useEffect(() => {
+    const thumb = thumbRef.current;
+    if (!thumb) {
+      return;
+    }
+    const onPointerMove = rafThrottle(event => {
+      onMoveEvent(event);
+    });
+    const onPointerUp = () => {
+      thumb.removeEventListener('pointermove', onPointerMove);
+      thumb.removeEventListener('pointerup', onPointerUp);
+    };
+    const onPointerDown = event => {
+      // Prevent text selection when dragging the thumb
+      event.preventDefault();
+      event.stopPropagation();
+      thumb.setPointerCapture(event.pointerId);
+      thumb.addEventListener('pointerup', onPointerUp);
+      thumb.addEventListener('pointermove', onPointerMove);
+    };
+    thumb.addEventListener('pointerdown', onPointerDown);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      thumb.removeEventListener('pointerdown', onPointerDown);
+      onPointerMove.clear();
+    };
+  }, [onMoveEvent, orientation]);
+  return /*#__PURE__*/_jsx(Rect, _extends({
+    className: clsx(classes.root, className),
+    ref: ref,
+    rx: rx,
+    ry: ry
+  }, rest));
+});
+if (process.env.NODE_ENV !== "production") ChartAxisZoomSliderThumb.displayName = "ChartAxisZoomSliderThumb";

package/esm/ChartZoomSlider/internals/ChartsTooltipZoomSliderValue.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { PopperProps } from '@mui/material/Popper';
+interface ChartsTooltipZoomSliderValueProps extends Pick<PopperProps, 'anchorEl' | 'open' | 'modifiers' | 'placement'>, React.PropsWithChildren {}
+export declare function ChartsTooltipZoomSliderValue({
+  anchorEl,
+  open,
+  placement,
+  modifiers,
+  children
+}: ChartsTooltipZoomSliderValueProps): React.JSX.Element;
+export {};

package/esm/ChartZoomSlider/internals/ChartsTooltipZoomSliderValue.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import NoSsr from '@mui/material/NoSsr';
+import Popper from '@mui/material/Popper';
+import { ChartsTooltipPaper } from '@mui/x-charts/ChartsTooltip';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+
+/**
+ * The root component of the zoom slider tooltip.
+ * @ignore - internal component.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const ChartsZoomSliderTooltipRoot = styled(Popper, {
+  name: 'MuiChartsZoomSliderTooltip',
+  slot: 'Root'
+})(({
+  theme
+}) => ({
+  pointerEvents: 'none',
+  zIndex: theme.zIndex.modal
+}));
+const MODIFIERS = [{
+  name: 'offset',
+  options: {
+    offset: [0, 4]
+  }
+}];
+export function ChartsTooltipZoomSliderValue({
+  anchorEl,
+  open,
+  placement,
+  modifiers = MODIFIERS,
+  children
+}) {
+  return /*#__PURE__*/_jsx(NoSsr, {
+    children: open ? /*#__PURE__*/_jsx(ChartsZoomSliderTooltipRoot, {
+      open: open,
+      anchorEl: anchorEl,
+      placement: placement,
+      modifiers: modifiers,
+      children: /*#__PURE__*/_jsx(ChartsTooltipPaper, {
+        sx: {
+          paddingX: 0.5
+        },
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          children: children
+        })
+      })
+    }) : null
+  });
+}

package/esm/ChartZoomSlider/internals/chartAxisZoomSliderThumbClasses.d.ts

@@ -0,0 +1,17 @@
+import type { ChartZoomSliderThumbOwnerState } from "./ChartAxisZoomSliderThumb.js";
+export interface ChartAxisZoomSliderThumbClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** 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 when it is a start thumb. */
+  start: string;
+  /** Styles applied to the root element when it is an end thumb. */
+  end: string;
+}
+export type ChartAxisZoomSliderThumbClassKey = keyof ChartAxisZoomSliderThumbClasses;
+export declare const chartAxisZoomSliderThumbClasses: ChartAxisZoomSliderThumbClasses;
+export declare function getAxisZoomSliderThumbUtilityClass(slot: string): string;
+export declare const useUtilityClasses: (ownerState: ChartZoomSliderThumbOwnerState) => Record<"root", string>;