@mui/x-charts-pro 8.4.0 → 8.5.1

package/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -0,0 +1,283 @@
+"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'
+  }
+}));
+function ChartAxisZoomSliderActiveTrack({
+  axisId,
+  axisDirection,
+  axisPosition,
+  zoomData,
+  reverse,
+  showTooltip,
+  onPointerEnter,
+  onPointerLeave
+}) {
+  const {
+    instance,
+    svgRef
+  } = (0, _internals.useChartContext)();
+  const store = (0, _internals.useStore)();
+  const axis = (0, _internals.useSelector)(store, _internals.selectorChartAxis, axisId);
+  const drawingArea = (0, _internals.useDrawingArea)();
+  const activePreviewRectRef = React.useRef(null);
+  const [startThumbEl, setStartThumbEl] = React.useState(null);
+  const [endThumbEl, setEndThumbEl] = React.useState(null);
+  const {
+    tooltipStart,
+    tooltipEnd
+  } = getZoomSliderTooltipsText(axis, drawingArea);
+  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 && tooltipStart !== '',
+      placement: axisPosition,
+      children: tooltipStart
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipZoomSliderValue.ChartsTooltipZoomSliderValue, {
+      anchorEl: endThumbEl,
+      open: showTooltip && tooltipEnd !== '',
+      placement: axisPosition,
+      children: tooltipEnd
+    })]
+  });
+}
+
+/**
+ * Returns the text for the tooltips on the thumbs of the zoom slider.
+ */
+function getZoomSliderTooltipsText(axis, drawingArea) {
+  const formatValue = value => {
+    if (axis.valueFormatter) {
+      return axis.valueFormatter(value, {
+        location: 'zoom-slider-tooltip'
+      });
+    }
+    return `${value}`;
+  };
+  const axisDirection = axis.position === 'top' || axis.position === 'bottom' ? 'x' : 'y';
+  let start = axisDirection === 'x' ? drawingArea.left : drawingArea.top;
+  const size = axisDirection === 'x' ? drawingArea.width : drawingArea.height;
+  let end = start + size;
+  if (axisDirection === 'y') {
+    [start, end] = [end, start]; // Invert for y-axis
+  }
+  if (axis.reverse) {
+    [start, end] = [end, start]; // Reverse the start and end if the axis is reversed
+  }
+  const startValue = (0, _internals.invertScale)(axis.scale, axis.data ?? [], start) ?? axis.data?.at(0);
+  const endValue = (0, _internals.invertScale)(axis.scale, axis.data ?? [], end) ?? axis.data?.at(-1);
+  const tooltipStart = formatValue(startValue);
+  const tooltipEnd = formatValue(endValue);
+  return {
+    tooltipStart,
+    tooltipEnd
+  };
+}

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 {};

package/ChartZoomSlider/internals/ChartAxisZoomSliderTrack.js

@@ -0,0 +1,138 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartAxisZoomSliderTrack = ChartAxisZoomSliderTrack;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _internals = require("@mui/x-charts/internals");
+var _styles = require("@mui/material/styles");
+var _rafThrottle = require("@mui/x-internals/rafThrottle");
+var _system = require("@mui/system");
+var _zoomUtils = require("./zoom-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["axisId", "axisDirection", "reverse", "onSelectStart", "onSelectEnd"];
+const ZoomSliderTrack = (0, _styles.styled)('rect', {
+  shouldForwardProp: prop => (0, _system.shouldForwardProp)(prop) && prop !== 'axisDirection' && prop !== 'isSelecting'
+})(({
+  theme
+}) => ({
+  fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[800] : (theme.vars || theme).palette.grey[300],
+  cursor: 'pointer',
+  variants: [{
+    props: {
+      axisDirection: 'x',
+      isSelecting: true
+    },
+    style: {
+      cursor: 'ew-resize'
+    }
+  }, {
+    props: {
+      axisDirection: 'y',
+      isSelecting: true
+    },
+    style: {
+      cursor: 'ns-resize'
+    }
+  }]
+}));
+function ChartAxisZoomSliderTrack(_ref) {
+  let {
+      axisId,
+      axisDirection,
+      onSelectStart,
+      onSelectEnd
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const ref = React.useRef(null);
+  const {
+    instance,
+    svgRef
+  } = (0, _internals.useChartContext)();
+  const store = (0, _internals.useStore)();
+  const [isSelecting, setIsSelecting] = React.useState(false);
+  const onPointerDown = function onPointerDown(event) {
+    const rect = ref.current;
+    const element = svgRef.current;
+    if (!rect || !element) {
+      return;
+    }
+    const pointerDownPoint = (0, _internals.getSVGPoint)(element, event);
+    let zoomFromPointerDown = (0, _zoomUtils.calculateZoomFromPoint)(store.getSnapshot(), axisId, pointerDownPoint);
+    if (zoomFromPointerDown === null) {
+      return;
+    }
+    const {
+      minStart,
+      maxEnd
+    } = (0, _internals.selectorChartAxisZoomOptionsLookup)(store.getSnapshot(), axisId);
+
+    // Ensure the zoomFromPointerDown is within the min and max range
+    zoomFromPointerDown = Math.max(Math.min(zoomFromPointerDown, maxEnd), minStart);
+    const onPointerMove = (0, _rafThrottle.rafThrottle)(function onPointerMove(pointerMoveEvent) {
+      const pointerMovePoint = (0, _internals.getSVGPoint)(element, pointerMoveEvent);
+      const zoomFromPointerMove = (0, _zoomUtils.calculateZoomFromPoint)(store.getSnapshot(), axisId, pointerMovePoint);
+      if (zoomFromPointerMove === null) {
+        return;
+      }
+      const zoomOptions = (0, _internals.selectorChartAxisZoomOptionsLookup)(store.getSnapshot(), axisId);
+      instance.setAxisZoomData(axisId, prevZoomData => {
+        if (zoomFromPointerMove > zoomFromPointerDown) {
+          const end = (0, _zoomUtils.calculateZoomEnd)(zoomFromPointerMove, (0, _extends2.default)({}, prevZoomData, {
+            start: zoomFromPointerDown
+          }), zoomOptions);
+
+          /* If the starting point is too close to the end that minSpan wouldn't be respected, we need to update the
+           * start point. */
+          const start = (0, _zoomUtils.calculateZoomStart)(zoomFromPointerDown, (0, _extends2.default)({}, prevZoomData, {
+            start: zoomFromPointerDown,
+            end
+          }), zoomOptions);
+          return (0, _extends2.default)({}, prevZoomData, {
+            start,
+            end
+          });
+        }
+        const start = (0, _zoomUtils.calculateZoomStart)(zoomFromPointerMove, (0, _extends2.default)({}, prevZoomData, {
+          end: zoomFromPointerDown
+        }), zoomOptions);
+
+        /* If the starting point is too close to the start that minSpan wouldn't be respected, we need to update the
+         * start point. */
+        const end = (0, _zoomUtils.calculateZoomEnd)(zoomFromPointerDown, (0, _extends2.default)({}, prevZoomData, {
+          start,
+          end: zoomFromPointerDown
+        }), zoomOptions);
+        return (0, _extends2.default)({}, prevZoomData, {
+          start,
+          end
+        });
+      });
+    });
+    const onPointerUp = function onPointerUp(pointerUpEvent) {
+      rect.releasePointerCapture(pointerUpEvent.pointerId);
+      rect.removeEventListener('pointermove', onPointerMove);
+      document.removeEventListener('pointerup', onPointerUp);
+      setIsSelecting(false);
+      onSelectEnd?.();
+    };
+    event.preventDefault();
+    event.stopPropagation();
+    rect.setPointerCapture(event.pointerId);
+    document.addEventListener('pointerup', onPointerUp);
+    rect.addEventListener('pointermove', onPointerMove);
+    onSelectStart?.();
+    setIsSelecting(true);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomSliderTrack, (0, _extends2.default)({
+    ref: ref,
+    onPointerDown: onPointerDown,
+    axisDirection: axisDirection,
+    isSelecting: isSelecting
+  }, other));
+}

package/ChartZoomSlider/internals/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const ZOOM_SLIDER_TRACK_SIZE = 8;
+export declare const ZOOM_SLIDER_ACTIVE_TRACK_SIZE = 10;
+export declare const ZOOM_SLIDER_THUMB_HEIGHT = 20;
+export declare const ZOOM_SLIDER_THUMB_WIDTH = 10;
+export declare const ZOOM_SLIDER_SIZE: number;

package/ChartZoomSlider/internals/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ZOOM_SLIDER_TRACK_SIZE = exports.ZOOM_SLIDER_THUMB_WIDTH = exports.ZOOM_SLIDER_THUMB_HEIGHT = exports.ZOOM_SLIDER_SIZE = exports.ZOOM_SLIDER_ACTIVE_TRACK_SIZE = void 0;
+const ZOOM_SLIDER_TRACK_SIZE = exports.ZOOM_SLIDER_TRACK_SIZE = 8;
+const ZOOM_SLIDER_ACTIVE_TRACK_SIZE = exports.ZOOM_SLIDER_ACTIVE_TRACK_SIZE = 10;
+const ZOOM_SLIDER_THUMB_HEIGHT = exports.ZOOM_SLIDER_THUMB_HEIGHT = 20;
+const ZOOM_SLIDER_THUMB_WIDTH = exports.ZOOM_SLIDER_THUMB_WIDTH = 10;
+const ZOOM_SLIDER_SIZE = exports.ZOOM_SLIDER_SIZE = Math.max(ZOOM_SLIDER_TRACK_SIZE, ZOOM_SLIDER_ACTIVE_TRACK_SIZE, ZOOM_SLIDER_THUMB_HEIGHT, ZOOM_SLIDER_THUMB_WIDTH);

package/ChartZoomSlider/internals/zoom-utils.d.ts

@@ -0,0 +1,4 @@
+import { AxisId, ChartState, DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
+export declare function calculateZoomFromPoint(state: ChartState<any>, axisId: AxisId, point: DOMPoint): number | null;
+export declare function calculateZoomStart(newStart: number, currentZoom: ZoomData, options: Pick<DefaultizedZoomOptions, 'minStart' | 'minSpan' | 'maxSpan'>): number;
+export declare function calculateZoomEnd(newEnd: number, currentZoom: ZoomData, options: Pick<DefaultizedZoomOptions, 'maxEnd' | 'minSpan' | 'maxSpan'>): number;

package/ChartZoomSlider/internals/zoom-utils.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculateZoomEnd = calculateZoomEnd;
+exports.calculateZoomFromPoint = calculateZoomFromPoint;
+exports.calculateZoomStart = calculateZoomStart;
+var _internals = require("@mui/x-charts/internals");
+function calculateZoomFromPoint(state, axisId, point) {
+  const {
+    left,
+    top,
+    height,
+    width
+  } = (0, _internals.selectorChartDrawingArea)(state);
+  const axis = (0, _internals.selectorChartRawAxis)(state, axisId);
+  if (!axis) {
+    return null;
+  }
+  const axisDirection = axis.position === 'right' || axis.position === 'left' ? 'y' : 'x';
+  let pointerZoom;
+  if (axisDirection === 'x') {
+    pointerZoom = (point.x - left) / width * 100;
+  } else {
+    pointerZoom = (top + height - point.y) / height * 100;
+  }
+  if (axis.reverse) {
+    pointerZoom = 100 - pointerZoom;
+  }
+  return pointerZoom;
+}
+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/ChartsToolbarPro/ChartsToolbarPro.d.ts

@@ -1,2 +1,6 @@
+import { ChartsToolbarProps } from '@mui/x-charts/Toolbar';
 import * as React from 'react';
-export declare function ChartsToolbarPro(): React.JSX.Element | null;
+/**
+ * The chart toolbar component for the pro package.
+ */
+export declare function ChartsToolbarPro(props: ChartsToolbarProps): React.JSX.Element | null;

package/ChartsToolbarPro/ChartsToolbarPro.js

@@ -1,31 +1,59 @@
 "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.ChartsToolbarPro = ChartsToolbarPro;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _Toolbar = require("@mui/x-charts/Toolbar");
 var React = _interopRequireWildcard(require("react"));
 var _internals = require("@mui/x-charts/internals");
+var _hooks = require("@mui/x-charts/hooks");
 var _useChartProZoom = require("../internals/plugins/useChartProZoom");
-var _ChartsToolbarZoomInButton = require("./internal/ChartsToolbarZoomInButton");
-var _ChartsToolbarZoomOutButton = require("./internal/ChartsToolbarZoomOutButton");
+var _ChartsToolbarZoomInTrigger = require("./ChartsToolbarZoomInTrigger");
+var _ChartsToolbarZoomOutTrigger = require("./ChartsToolbarZoomOutTrigger");
 var _jsxRuntime = require("react/jsx-runtime");
-function ChartsToolbarPro() {
+/**
+ * The chart toolbar component for the pro package.
+ */
+function ChartsToolbarPro(props) {
+  const {
+    slots,
+    slotProps
+  } = (0, _internals.useChartsSlots)();
   const {
     store
   } = (0, _internals.useChartContext)();
+  const {
+    localeText
+  } = (0, _hooks.useChartsLocalization)();
   const isZoomEnabled = (0, _internals.useSelector)(store, _useChartProZoom.selectorChartZoomIsEnabled);
   const children = [];
   if (isZoomEnabled) {
-    children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarZoomInButton.ChartsToolbarZoomInButton, {}, "zoom-in"));
-    children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarZoomOutButton.ChartsToolbarZoomOutButton, {}, "zoom-out"));
+    const Tooltip = slots.baseTooltip;
+    const ZoomOutIcon = slots.zoomOutIcon;
+    const ZoomInIcon = slots.zoomInIcon;
+    children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, slotProps.baseTooltip, {
+      title: localeText.zoomIn,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarZoomInTrigger.ChartsToolbarZoomInTrigger, {
+        render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarButton, {}),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomInIcon, (0, _extends2.default)({}, slotProps.zoomInIcon))
+      })
+    }), "zoom-in"));
+    children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, slotProps.baseTooltip, {
+      title: localeText.zoomOut,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarZoomOutTrigger.ChartsToolbarZoomOutTrigger, {
+        render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarButton, {}),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomOutIcon, (0, _extends2.default)({}, slotProps.zoomOutIcon))
+      })
+    }), "zoom-out"));
   }
   if (children.length === 0) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.Toolbar, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.Toolbar, (0, _extends2.default)({}, props, {
     children: children
-  });
+  }));
 }

package/ChartsToolbarPro/ChartsToolbarZoomInTrigger.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ChartsSlotProps } from '@mui/x-charts/internals';
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
+interface ChartsToolbarZoomInTriggerProps {
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render?: RenderProp<ChartsSlotProps['baseButton']>;
+}
+/**
+ * A button that zooms the chart in.
+ * It renders the `baseButton` slot.
+ */
+declare const ChartsToolbarZoomInTrigger: React.ForwardRefExoticComponent<ChartsToolbarZoomInTriggerProps & {
+  children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { ChartsToolbarZoomInTrigger };

package/ChartsToolbarPro/ChartsToolbarZoomInTrigger.js

@@ -0,0 +1,57 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsToolbarZoomInTrigger = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _internals = require("@mui/x-charts/internals");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
+var _useChartProZoom = require("../internals/plugins/useChartProZoom");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["render"];
+/**
+ * A button that zooms the chart in.
+ * It renders the `baseButton` slot.
+ */
+const ChartsToolbarZoomInTrigger = exports.ChartsToolbarZoomInTrigger = /*#__PURE__*/React.forwardRef(function ChartsToolbarZoomInTrigger(_ref, ref) {
+  let {
+      render
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const {
+    slots,
+    slotProps
+  } = (0, _internals.useChartsSlots)();
+  const {
+    instance,
+    store
+  } = (0, _internals.useChartContext)();
+  const disabled = (0, _internals.useSelector)(store, _useChartProZoom.selectorChartCanZoomIn);
+  const element = (0, _useComponentRenderer.useComponentRenderer)(slots.baseButton, render, (0, _extends2.default)({}, slotProps.baseButton, {
+    onClick: () => instance.zoomIn(),
+    disabled
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") ChartsToolbarZoomInTrigger.displayName = "ChartsToolbarZoomInTrigger";
+process.env.NODE_ENV !== "production" ? ChartsToolbarZoomInTrigger.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func])
+} : void 0;