@mui/x-charts-pro 8.3.1 → 8.5.0

package/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/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.js

@@ -0,0 +1,92 @@
+"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.ChartAxisZoomSliderThumb = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _rafThrottle = require("@mui/x-internals/rafThrottle");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _chartAxisZoomSliderThumbClasses = require("./chartAxisZoomSliderThumbClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className", "onMove", "orientation", "placement", "rx", "ry"];
+const Rect = (0, _styles.styled)('rect')(({
+  theme
+}) => ({
+  [`&.${_chartAxisZoomSliderThumbClasses.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.chartAxisZoomSliderThumbClasses.horizontal}`]: {
+    cursor: 'ew-resize'
+  },
+  [`&.${_chartAxisZoomSliderThumbClasses.chartAxisZoomSliderThumbClasses.vertical}`]: {
+    cursor: 'ns-resize'
+  }
+}));
+/**
+ * Renders the zoom slider thumb, which is responsible for resizing the zoom range.
+ * @internal
+ */
+const ChartAxisZoomSliderThumb = exports.ChartAxisZoomSliderThumb = /*#__PURE__*/React.forwardRef(function ChartAxisZoomSliderThumb(_ref, forwardedRef) {
+  let {
+      className,
+      onMove,
+      orientation,
+      placement,
+      rx = 4,
+      ry = 4
+    } = _ref,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const classes = (0, _chartAxisZoomSliderThumbClasses.useUtilityClasses)({
+    onMove,
+    orientation,
+    placement
+  });
+  const thumbRef = React.useRef(null);
+  const ref = (0, _useForkRef.default)(thumbRef, forwardedRef);
+  const onMoveEvent = (0, _useEventCallback.default)(onMove);
+  React.useEffect(() => {
+    const thumb = thumbRef.current;
+    if (!thumb) {
+      return;
+    }
+    const onPointerMove = (0, _rafThrottle.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__*/(0, _jsxRuntime.jsx)(Rect, (0, _extends2.default)({
+    className: (0, _clsx.default)(classes.root, className),
+    ref: ref,
+    rx: rx,
+    ry: ry
+  }, rest));
+});
+if (process.env.NODE_ENV !== "production") ChartAxisZoomSliderThumb.displayName = "ChartAxisZoomSliderThumb";

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,160 @@
+"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);
+    let pointerMoved = false;
+    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;
+      }
+      pointerMoved = true;
+      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?.();
+      if (pointerMoved) {
+        return;
+      }
+
+      // If the pointer didn't move, we still need to respect the zoom constraints (minSpan, etc.)
+      // In that case, we assume the start to be the pointerZoom and calculate the end.
+      const pointerUpPoint = (0, _internals.getSVGPoint)(element, pointerUpEvent);
+      const zoomFromPointerUp = (0, _zoomUtils.calculateZoomFromPoint)(store.getSnapshot(), axisId, pointerUpPoint);
+      if (zoomFromPointerUp === null) {
+        return;
+      }
+      const zoomOptions = (0, _internals.selectorChartAxisZoomOptionsLookup)(store.getSnapshot(), axisId);
+      instance.setAxisZoomData(axisId, prev => (0, _extends2.default)({}, prev, {
+        start: zoomFromPointerUp,
+        end: (0, _zoomUtils.calculateZoomEnd)(zoomFromPointerUp, prev, zoomOptions)
+      }));
+    };
+    event.preventDefault();
+    event.stopPropagation();
+    rect.setPointerCapture(event.pointerId);
+    document.addEventListener('pointerup', onPointerUp);
+    rect.addEventListener('pointermove', onPointerMove);
+    onSelectStart?.();
+    setIsSelecting(true);
+    instance.setAxisZoomData(axisId, prev => (0, _extends2.default)({}, prev, {
+      start: zoomFromPointerDown,
+      end: zoomFromPointerDown
+    }));
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomSliderTrack, (0, _extends2.default)({
+    ref: ref,
+    onPointerDown: onPointerDown,
+    axisDirection: axisDirection,
+    isSelecting: isSelecting
+  }, other));
+}

package/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/ChartZoomSlider/internals/ChartsTooltipZoomSliderValue.js

@@ -0,0 +1,58 @@
+"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.ChartsTooltipZoomSliderValue = ChartsTooltipZoomSliderValue;
+var React = _interopRequireWildcard(require("react"));
+var _NoSsr = _interopRequireDefault(require("@mui/material/NoSsr"));
+var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
+var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _styles = require("@mui/material/styles");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * The root component of the zoom slider tooltip.
+ * @ignore - internal component.
+ */const ChartsZoomSliderTooltipRoot = (0, _styles.styled)(_Popper.default, {
+  name: 'MuiChartsZoomSliderTooltip',
+  slot: 'Root'
+})(({
+  theme
+}) => ({
+  pointerEvents: 'none',
+  zIndex: theme.zIndex.modal
+}));
+const MODIFIERS = [{
+  name: 'offset',
+  options: {
+    offset: [0, 4]
+  }
+}];
+function ChartsTooltipZoomSliderValue({
+  anchorEl,
+  open,
+  placement,
+  modifiers = MODIFIERS,
+  children
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.default, {
+    children: open ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsZoomSliderTooltipRoot, {
+      open: open,
+      anchorEl: anchorEl,
+      placement: placement,
+      modifiers: modifiers,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipPaper, {
+        sx: {
+          paddingX: 0.5
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: "caption",
+          children: children
+        })
+      })
+    }) : null
+  });
+}

package/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>;

package/ChartZoomSlider/internals/{chartAxisZoomSliderHandleClasses.js → chartAxisZoomSliderThumbClasses.js}

@@ -4,15 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.chartAxisZoomSliderHandleClasses = void 0;
-exports.getAxisZoomSliderHandleUtilityClass = getAxisZoomSliderHandleUtilityClass;
+exports.chartAxisZoomSliderThumbClasses = void 0;
+exports.getAxisZoomSliderThumbUtilityClass = getAxisZoomSliderThumbUtilityClass;
 exports.useUtilityClasses = void 0;
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
-const chartAxisZoomSliderHandleClasses = exports.chartAxisZoomSliderHandleClasses = (0, _generateUtilityClasses.default)('MuiChartAxisZoomSliderHandle', ['root', 'horizontal', 'vertical', 'start', 'end']);
-function getAxisZoomSliderHandleUtilityClass(slot) {
-  return (0, _generateUtilityClass.default)('MuiChartAxisZoomSliderHandle', slot);
+const chartAxisZoomSliderThumbClasses = exports.chartAxisZoomSliderThumbClasses = (0, _generateUtilityClasses.default)('MuiChartAxisZoomSliderThumb', ['root', 'horizontal', 'vertical', 'start', 'end']);
+function getAxisZoomSliderThumbUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiChartAxisZoomSliderThumb', slot);
 }
 const useUtilityClasses = ownerState => {
   const {
@@ -22,6 +22,6 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', orientation === 'horizontal' ? 'horizontal' : 'vertical', placement === 'start' ? 'start' : 'end']
   };
-  return (0, _composeClasses.default)(slots, getAxisZoomSliderHandleUtilityClass);
+  return (0, _composeClasses.default)(slots, getAxisZoomSliderThumbUtilityClass);
 };
 exports.useUtilityClasses = useUtilityClasses;

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,9 @@
+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: React.PropsWithChildren<ChartsToolbarProps>): React.JSX.Element | null;
+export declare namespace ChartsToolbarPro {
+  var propTypes: any;
+}

package/ChartsToolbarPro/ChartsToolbarPro.js

@@ -1,31 +1,65 @@
 "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 _propTypes = _interopRequireDefault(require("prop-types"));
 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 _ChartsToolbarZoomInButton = require("./ChartsToolbarZoomInButton");
+var _ChartsToolbarZoomOutButton = require("./ChartsToolbarZoomOutButton");
 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)(_ChartsToolbarZoomInButton.ChartsToolbarZoomInButton, {
+        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)(_ChartsToolbarZoomOutButton.ChartsToolbarZoomOutButton, {
+        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
-  });
-}
+  }));
+}
+process.env.NODE_ENV !== "production" ? ChartsToolbarPro.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  className: _propTypes.default.string
+} : void 0;

package/ChartsToolbarPro/ChartsToolbarZoomInButton.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ChartsSlotProps } from '@mui/x-charts/internals';
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
+interface ChartsToolbarZoomInButtonProps {
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render?: RenderProp<ChartsSlotProps['baseIconButton']>;
+}
+/**
+ * The zoom-in button for the chart toolbar.
+ */
+declare const ChartsToolbarZoomInButton: React.ForwardRefExoticComponent<ChartsToolbarZoomInButtonProps & {
+  children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { ChartsToolbarZoomInButton };

package/ChartsToolbarPro/ChartsToolbarZoomInButton.js

@@ -0,0 +1,56 @@
+"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.ChartsToolbarZoomInButton = 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"];
+/**
+ * The zoom-in button for the chart toolbar.
+ */
+const ChartsToolbarZoomInButton = exports.ChartsToolbarZoomInButton = /*#__PURE__*/React.forwardRef(function ChartsToolbarZoomInButton(_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.baseIconButton, render, (0, _extends2.default)({}, slotProps?.baseIconButton, {
+    onClick: () => instance.zoomIn(),
+    disabled
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") ChartsToolbarZoomInButton.displayName = "ChartsToolbarZoomInButton";
+process.env.NODE_ENV !== "production" ? ChartsToolbarZoomInButton.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;

package/ChartsToolbarPro/ChartsToolbarZoomOutButton.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ChartsSlotProps } from '@mui/x-charts/internals';
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
+interface ChartsToolbarZoomOutButtonProps {
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render?: RenderProp<ChartsSlotProps['baseIconButton']>;
+}
+/**
+ * The zoom-out button for the chart toolbar.
+ */
+declare const ChartsToolbarZoomOutButton: React.ForwardRefExoticComponent<ChartsToolbarZoomOutButtonProps & {
+  children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { ChartsToolbarZoomOutButton };