@mui/x-charts-pro 8.2.0 → 8.3.0

package/ChartZoomSlider/internals/ChartAxisZoomSlider.js

@@ -0,0 +1,348 @@
+"use strict";
+'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 _useChartProZoom = require("../../internals/plugins/useChartProZoom");
+var _ChartAxisZoomSliderHandle = require("./ChartAxisZoomSliderHandle");
+var _jsxRuntime = require("react/jsx-runtime");
+const BackgroundRect = (0, _styles.styled)('rect')(({
+  theme
+}) => ({
+  '&': {
+    fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[800] : (theme.vars || theme).palette.grey[300]
+  }
+}));
+const ZoomRangePreviewRect = (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_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);
+
+/**
+ * Renders the zoom slider for a specific axis.
+ * @internal
+ */
+function ChartAxisZoomSlider({
+  axisDirection,
+  axisId
+}) {
+  const store = (0, _internals.useStore)();
+  const drawingArea = (0, _internals.useDrawingArea)();
+  const zoomData = (0, _internals.useSelector)(store, _useChartProZoom.selectorChartAxisZoomData, axisId);
+  const {
+    xAxis
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxis
+  } = (0, _hooks.useYAxes)();
+  if (!zoomData) {
+    return null;
+  }
+  let x;
+  let y;
+  let reverse;
+  if (axisDirection === 'x') {
+    const axis = xAxis[axisId];
+    if (!axis) {
+      return null;
+    }
+    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;
+    reverse = axis.reverse ?? false;
+  } else {
+    const axis = yAxis[axisId];
+    if (!axis) {
+      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;
+    y = drawingArea.top;
+    reverse = axis.reverse ?? false;
+  }
+  const backgroundRectOffset = (ZOOM_SLIDER_SIZE - ZOOM_SLIDER_BACKGROUND_SIZE) / 2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+    transform: `translate(${x} ${y})`,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BackgroundRect, {
+      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__*/(0, _jsxRuntime.jsx)(ChartAxisZoomSliderSpan, {
+      zoomData: zoomData,
+      axisId: axisId,
+      axisDirection: axisDirection,
+      reverse: reverse
+    })]
+  });
+}
+function ChartAxisZoomSliderSpan({
+  axisId,
+  axisDirection,
+  zoomData,
+  reverse
+}) {
+  const {
+    instance,
+    svgRef
+  } = (0, _internals.useChartContext)();
+  const store = (0, _internals.useStore)();
+  const drawingArea = (0, _internals.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;
+  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);
+    };
+    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);
+      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 onResizeStart = 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 onResizeEnd = 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 startHandleX;
+  let startHandleY;
+  let endHandleX;
+  let endHandleY;
+  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;
+    if (reverse) {
+      previewX = drawingArea.width - previewX - previewWidth;
+      startHandleX = drawingArea.width - startHandleX;
+      endHandleX = drawingArea.width - endHandleX;
+    }
+    startHandleX -= previewHandleWidth / 2;
+    endHandleX -= previewHandleWidth / 2;
+  } else {
+    previewX = 0;
+    previewY = drawingArea.height - zoomData.end / 100 * drawingArea.height;
+    previewWidth = ZOOM_SLIDER_FOREGROUND_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;
+    if (reverse) {
+      previewY = drawingArea.height - previewY - previewHeight;
+      startHandleY = drawingArea.height - startHandleY;
+      endHandleY = drawingArea.height - endHandleY;
+    }
+    startHandleY -= previewHandleHeight / 2;
+    endHandleY -= previewHandleHeight / 2;
+  }
+  const previewOffset = (ZOOM_SLIDER_HANDLE_HEIGHT - ZOOM_SLIDER_FOREGROUND_SIZE) / 2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomRangePreviewRect, {
+      ref: activePreviewRectRef,
+      x: previewX + (axisDirection === 'x' ? 0 : previewOffset),
+      y: previewY + (axisDirection === 'x' ? previewOffset : 0),
+      width: previewWidth,
+      height: previewHeight
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderHandle.ChartAxisZoomSliderHandle, {
+      x: startHandleX,
+      y: startHandleY,
+      width: previewHandleWidth,
+      height: previewHandleHeight,
+      orientation: axisDirection === 'x' ? 'horizontal' : 'vertical',
+      onResize: onResizeStart,
+      placement: "start"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderHandle.ChartAxisZoomSliderHandle, {
+      x: endHandleX,
+      y: endHandleY,
+      width: previewHandleWidth,
+      height: previewHandleHeight,
+      orientation: axisDirection === 'x' ? 'horizontal' : 'vertical',
+      onResize: onResizeEnd,
+      placement: "end"
+    })]
+  });
+}
+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/ChartAxisZoomSliderHandle.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface ChartZoomSliderHandleOwnerState {
+  onResize: (event: PointerEvent) => void;
+  orientation: 'horizontal' | 'vertical';
+  placement: 'start' | 'end';
+}
+export interface ChartZoomSliderHandleProps extends Pick<React.ComponentProps<'rect'>, 'x' | 'y' | 'width' | 'height' | 'rx' | 'ry'>, ChartZoomSliderHandleOwnerState {}
+/**
+ * Renders the zoom slider handle, which is responsible for resizing the zoom range.
+ * @internal
+ */
+export declare const ChartAxisZoomSliderHandle: React.ForwardRefExoticComponent<ChartZoomSliderHandleProps & React.RefAttributes<SVGRectElement>>;

package/ChartZoomSlider/internals/ChartAxisZoomSliderHandle.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.ChartAxisZoomSliderHandle = void 0;
+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 _chartAxisZoomSliderHandleClasses = require("./chartAxisZoomSliderHandleClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const Rect = (0, _styles.styled)('rect')(({
+  theme
+}) => ({
+  [`&.${_chartAxisZoomSliderHandleClasses.chartAxisZoomSliderHandleClasses.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]
+  },
+  [`&.${_chartAxisZoomSliderHandleClasses.chartAxisZoomSliderHandleClasses.horizontal}`]: {
+    cursor: 'ew-resize'
+  },
+  [`&.${_chartAxisZoomSliderHandleClasses.chartAxisZoomSliderHandleClasses.vertical}`]: {
+    cursor: 'ns-resize'
+  }
+}));
+/**
+ * Renders the zoom slider handle, which is responsible for resizing the zoom range.
+ * @internal
+ */
+const ChartAxisZoomSliderHandle = exports.ChartAxisZoomSliderHandle = /*#__PURE__*/React.forwardRef(function ChartPreviewHandle({
+  x,
+  y,
+  width,
+  height,
+  onResize,
+  orientation,
+  placement,
+  rx = 4,
+  ry = 4
+}, forwardedRef) {
+  const classes = (0, _chartAxisZoomSliderHandleClasses.useUtilityClasses)({
+    onResize,
+    orientation,
+    placement
+  });
+  const handleRef = React.useRef(null);
+  const ref = (0, _useForkRef.default)(handleRef, forwardedRef);
+  const onResizeEvent = (0, _useEventCallback.default)(onResize);
+  React.useEffect(() => {
+    const handle = handleRef.current;
+    if (!handle) {
+      return;
+    }
+    const onPointerMove = (0, _rafThrottle.rafThrottle)(event => {
+      onResizeEvent(event);
+    });
+    const onPointerUp = () => {
+      handle.removeEventListener('pointermove', onPointerMove);
+      handle.removeEventListener('pointerup', onPointerUp);
+    };
+    const onPointerDown = event => {
+      // Prevent text selection when dragging the handle
+      event.preventDefault();
+      event.stopPropagation();
+      handle.setPointerCapture(event.pointerId);
+      handle.addEventListener('pointerup', onPointerUp);
+      handle.addEventListener('pointermove', onPointerMove);
+    };
+    handle.addEventListener('pointerdown', onPointerDown);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      handle.removeEventListener('pointerdown', onPointerDown);
+      onPointerMove.clear();
+    };
+  }, [onResizeEvent, orientation]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Rect, {
+    className: classes.root,
+    ref: ref,
+    x: x,
+    y: y,
+    width: width,
+    height: height,
+    rx: rx,
+    ry: ry
+  });
+});

package/ChartZoomSlider/internals/chartAxisZoomSliderHandleClasses.d.ts

@@ -0,0 +1,17 @@
+import type { ChartZoomSliderHandleOwnerState } from "./ChartAxisZoomSliderHandle.js";
+export interface ChartAxisZoomSliderHandleClasses {
+  /** 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 handle. */
+  start: string;
+  /** Styles applied to the root element when it is an end handle. */
+  end: string;
+}
+export type ChartAxisZoomSliderHandleClassKey = keyof ChartAxisZoomSliderHandleClasses;
+export declare const chartAxisZoomSliderHandleClasses: ChartAxisZoomSliderHandleClasses;
+export declare function getAxisZoomSliderHandleUtilityClass(slot: string): string;
+export declare const useUtilityClasses: (ownerState: ChartZoomSliderHandleOwnerState) => Record<"root", string>;

package/ChartZoomSlider/internals/chartAxisZoomSliderHandleClasses.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.chartAxisZoomSliderHandleClasses = void 0;
+exports.getAxisZoomSliderHandleUtilityClass = getAxisZoomSliderHandleUtilityClass;
+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 useUtilityClasses = ownerState => {
+  const {
+    orientation,
+    placement
+  } = ownerState;
+  const slots = {
+    root: ['root', orientation === 'horizontal' ? 'horizontal' : 'vertical', placement === 'start' ? 'start' : 'end']
+  };
+  return (0, _composeClasses.default)(slots, getAxisZoomSliderHandleUtilityClass);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/ChartsToolbarPro/ChartsToolbarPro.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function ChartsToolbarPro(): React.JSX.Element | null;

package/ChartsToolbarPro/ChartsToolbarPro.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsToolbarPro = ChartsToolbarPro;
+var _Toolbar = require("@mui/x-charts/Toolbar");
+var React = _interopRequireWildcard(require("react"));
+var _internals = require("@mui/x-charts/internals");
+var _useChartProZoom = require("../internals/plugins/useChartProZoom");
+var _ChartsToolbarZoomInButton = require("./internal/ChartsToolbarZoomInButton");
+var _ChartsToolbarZoomOutButton = require("./internal/ChartsToolbarZoomOutButton");
+var _jsxRuntime = require("react/jsx-runtime");
+function ChartsToolbarPro() {
+  const {
+    store
+  } = (0, _internals.useChartContext)();
+  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"));
+  }
+  if (children.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.Toolbar, {
+    children: children
+  });
+}

package/ChartsToolbarPro/index.d.ts

@@ -0,0 +1 @@
+export * from "./ChartsToolbarPro.js";

package/ChartsToolbarPro/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartsToolbarPro = require("./ChartsToolbarPro");
+Object.keys(_ChartsToolbarPro).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsToolbarPro[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsToolbarPro[key];
+    }
+  });
+});

package/ChartsToolbarPro/internal/ChartsToolbarZoomInButton.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ChartsSlotsPro } from "../../internals/material/index.js";
+type ChartsToolbarZoomInButtonSlots = Partial<Pick<ChartsSlotsPro, 'baseTooltip' | 'zoomInIcon'>>;
+type ChartsToolbarZoomInButtonSlotProps = { [K in keyof Required<ChartsToolbarZoomInButtonSlots>]: React.ComponentProps<Required<ChartsToolbarZoomInButtonSlots>[K]> };
+interface ChartsToolbarZoomInButtonProps {
+  slots?: ChartsToolbarZoomInButtonSlots;
+  slotProps?: ChartsToolbarZoomInButtonSlotProps;
+}
+export declare function ChartsToolbarZoomInButton({
+  slots,
+  slotProps
+}: ChartsToolbarZoomInButtonProps): React.JSX.Element;
+export {};

package/ChartsToolbarPro/internal/ChartsToolbarZoomInButton.js

@@ -0,0 +1,36 @@
+"use strict";
+'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.ChartsToolbarZoomInButton = ChartsToolbarZoomInButton;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _Toolbar = require("@mui/x-charts/Toolbar");
+var _internals = require("@mui/x-charts/internals");
+var _hooks = require("@mui/x-charts/hooks");
+var _material = require("../../internals/material");
+var _jsxRuntime = require("react/jsx-runtime");
+function ChartsToolbarZoomInButton({
+  slots,
+  slotProps
+}) {
+  const {
+    instance
+  } = (0, _internals.useChartContext)();
+  const ZoomInIcon = slots?.zoomInIcon ?? _material.defaultSlotsMaterial.zoomInIcon;
+  const Tooltip = slots?.baseTooltip ?? _material.defaultSlotsMaterial.baseTooltip;
+  const {
+    localeText
+  } = (0, _hooks.useChartsLocalization)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
+    title: localeText.zoomIn,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarButton, {
+      onClick: () => instance.zoomIn(),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomInIcon, (0, _extends2.default)({}, slotProps?.zoomInIcon))
+    })
+  });
+}

package/ChartsToolbarPro/internal/ChartsToolbarZoomOutButton.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ChartsSlotsPro } from "../../internals/material/index.js";
+type ChartsToolbarZoomOutButtonSlots = Partial<Pick<ChartsSlotsPro, 'baseTooltip' | 'zoomOutIcon'>>;
+type ChartsToolbarZoomOutButtonSlotProps = { [K in keyof Required<ChartsToolbarZoomOutButtonSlots>]: React.ComponentProps<Required<ChartsToolbarZoomOutButtonSlots>[K]> };
+interface ChartsToolbarZoomOutButtonProps {
+  slots?: ChartsToolbarZoomOutButtonSlots;
+  slotProps?: ChartsToolbarZoomOutButtonSlotProps;
+}
+export declare function ChartsToolbarZoomOutButton({
+  slots,
+  slotProps
+}: ChartsToolbarZoomOutButtonProps): React.JSX.Element;
+export {};

package/ChartsToolbarPro/internal/ChartsToolbarZoomOutButton.js

@@ -0,0 +1,36 @@
+"use strict";
+'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.ChartsToolbarZoomOutButton = ChartsToolbarZoomOutButton;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _Toolbar = require("@mui/x-charts/Toolbar");
+var _internals = require("@mui/x-charts/internals");
+var _hooks = require("@mui/x-charts/hooks");
+var _material = require("../../internals/material");
+var _jsxRuntime = require("react/jsx-runtime");
+function ChartsToolbarZoomOutButton({
+  slots,
+  slotProps
+}) {
+  const {
+    instance
+  } = (0, _internals.useChartContext)();
+  const ZoomOutIcon = slots?.zoomOutIcon ?? _material.defaultSlotsMaterial.zoomOutIcon;
+  const Tooltip = slots?.baseTooltip ?? _material.defaultSlotsMaterial.baseTooltip;
+  const {
+    localeText
+  } = (0, _hooks.useChartsLocalization)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
+    title: localeText.zoomOut,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarButton, {
+      onClick: () => instance.zoomOut(),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomOutIcon, (0, _extends2.default)({}, slotProps?.zoomOutIcon))
+    })
+  });
+}