@mui/x-charts-pro 8.3.1 → 8.5.0

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/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/esm/ChartZoomSlider/internals/ChartAxisZoomSliderTrack.js

@@ -0,0 +1,152 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["axisId", "axisDirection", "reverse", "onSelectStart", "onSelectEnd"];
+import * as React from 'react';
+import { useChartContext, getSVGPoint, selectorChartAxisZoomOptionsLookup, useStore } from '@mui/x-charts/internals';
+import { styled } from '@mui/material/styles';
+import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { shouldForwardProp } from '@mui/system';
+import { calculateZoomEnd, calculateZoomFromPoint, calculateZoomStart } from "./zoom-utils.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ZoomSliderTrack = styled('rect', {
+  shouldForwardProp: prop => 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'
+    }
+  }]
+}));
+export function ChartAxisZoomSliderTrack(_ref) {
+  let {
+      axisId,
+      axisDirection,
+      onSelectStart,
+      onSelectEnd
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const ref = React.useRef(null);
+  const {
+    instance,
+    svgRef
+  } = useChartContext();
+  const store = 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 = getSVGPoint(element, event);
+    let zoomFromPointerDown = calculateZoomFromPoint(store.getSnapshot(), axisId, pointerDownPoint);
+    if (zoomFromPointerDown === null) {
+      return;
+    }
+    const {
+      minStart,
+      maxEnd
+    } = 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 = rafThrottle(function onPointerMove(pointerMoveEvent) {
+      const pointerMovePoint = getSVGPoint(element, pointerMoveEvent);
+      const zoomFromPointerMove = calculateZoomFromPoint(store.getSnapshot(), axisId, pointerMovePoint);
+      if (zoomFromPointerMove === null) {
+        return;
+      }
+      pointerMoved = true;
+      const zoomOptions = selectorChartAxisZoomOptionsLookup(store.getSnapshot(), axisId);
+      instance.setAxisZoomData(axisId, prevZoomData => {
+        if (zoomFromPointerMove > zoomFromPointerDown) {
+          const end = calculateZoomEnd(zoomFromPointerMove, _extends({}, 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 = calculateZoomStart(zoomFromPointerDown, _extends({}, prevZoomData, {
+            start: zoomFromPointerDown,
+            end
+          }), zoomOptions);
+          return _extends({}, prevZoomData, {
+            start,
+            end
+          });
+        }
+        const start = calculateZoomStart(zoomFromPointerMove, _extends({}, 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 = calculateZoomEnd(zoomFromPointerDown, _extends({}, prevZoomData, {
+          start,
+          end: zoomFromPointerDown
+        }), zoomOptions);
+        return _extends({}, 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 = getSVGPoint(element, pointerUpEvent);
+      const zoomFromPointerUp = calculateZoomFromPoint(store.getSnapshot(), axisId, pointerUpPoint);
+      if (zoomFromPointerUp === null) {
+        return;
+      }
+      const zoomOptions = selectorChartAxisZoomOptionsLookup(store.getSnapshot(), axisId);
+      instance.setAxisZoomData(axisId, prev => _extends({}, prev, {
+        start: zoomFromPointerUp,
+        end: 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 => _extends({}, prev, {
+      start: zoomFromPointerDown,
+      end: zoomFromPointerDown
+    }));
+  };
+  return /*#__PURE__*/_jsx(ZoomSliderTrack, _extends({
+    ref: ref,
+    onPointerDown: onPointerDown,
+    axisDirection: axisDirection,
+    isSelecting: isSelecting
+  }, other));
+}

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

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

@@ -1,9 +1,9 @@
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export const chartAxisZoomSliderHandleClasses = generateUtilityClasses('MuiChartAxisZoomSliderHandle', ['root', 'horizontal', 'vertical', 'start', 'end']);
-export function getAxisZoomSliderHandleUtilityClass(slot) {
-  return generateUtilityClass('MuiChartAxisZoomSliderHandle', slot);
+export const chartAxisZoomSliderThumbClasses = generateUtilityClasses('MuiChartAxisZoomSliderThumb', ['root', 'horizontal', 'vertical', 'start', 'end']);
+export function getAxisZoomSliderThumbUtilityClass(slot) {
+  return generateUtilityClass('MuiChartAxisZoomSliderThumb', slot);
 }
 export const useUtilityClasses = ownerState => {
   const {
@@ -13,5 +13,5 @@ export const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', orientation === 'horizontal' ? 'horizontal' : 'vertical', placement === 'start' ? 'start' : 'end']
   };
-  return composeClasses(slots, getAxisZoomSliderHandleUtilityClass);
+  return composeClasses(slots, getAxisZoomSliderThumbUtilityClass);
 };

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

@@ -0,0 +1,5 @@
+export const ZOOM_SLIDER_TRACK_SIZE = 8;
+export const ZOOM_SLIDER_ACTIVE_TRACK_SIZE = 10;
+export const ZOOM_SLIDER_THUMB_HEIGHT = 20;
+export const ZOOM_SLIDER_THUMB_WIDTH = 10;
+export const ZOOM_SLIDER_SIZE = Math.max(ZOOM_SLIDER_TRACK_SIZE, ZOOM_SLIDER_ACTIVE_TRACK_SIZE, ZOOM_SLIDER_THUMB_HEIGHT, ZOOM_SLIDER_THUMB_WIDTH);

package/esm/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/esm/ChartZoomSlider/internals/zoom-utils.js

@@ -0,0 +1,40 @@
+import { selectorChartDrawingArea, selectorChartRawAxis } from '@mui/x-charts/internals';
+export function calculateZoomFromPoint(state, axisId, point) {
+  const {
+    left,
+    top,
+    height,
+    width
+  } = selectorChartDrawingArea(state);
+  const axis = 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;
+}
+export function calculateZoomStart(newStart, currentZoom, options) {
+  const {
+    minStart,
+    minSpan,
+    maxSpan
+  } = options;
+  return Math.max(minStart, currentZoom.end - maxSpan, Math.min(currentZoom.end - minSpan, newStart));
+}
+export function calculateZoomEnd(newEnd, currentZoom, options) {
+  const {
+    maxEnd,
+    minSpan,
+    maxSpan
+  } = options;
+  return Math.min(maxEnd, currentZoom.start + maxSpan, Math.max(currentZoom.start + minSpan, newEnd));
+}

package/esm/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/esm/ChartsToolbarPro/ChartsToolbarPro.js

@@ -1,24 +1,57 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { Toolbar } from '@mui/x-charts/Toolbar';
+import PropTypes from 'prop-types';
 import * as React from 'react';
-import { useChartContext, useSelector } from '@mui/x-charts/internals';
+import { useChartContext, useSelector, useChartsSlots } from '@mui/x-charts/internals';
+import { useChartsLocalization } from '@mui/x-charts/hooks';
 import { selectorChartZoomIsEnabled } from "../internals/plugins/useChartProZoom/index.js";
-import { ChartsToolbarZoomInButton } from "./internal/ChartsToolbarZoomInButton.js";
-import { ChartsToolbarZoomOutButton } from "./internal/ChartsToolbarZoomOutButton.js";
+import { ChartsToolbarZoomInButton } from "./ChartsToolbarZoomInButton.js";
+import { ChartsToolbarZoomOutButton } from "./ChartsToolbarZoomOutButton.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export function ChartsToolbarPro() {
+/**
+ * The chart toolbar component for the pro package.
+ */
+export function ChartsToolbarPro(props) {
+  const {
+    slots,
+    slotProps
+  } = useChartsSlots();
   const {
     store
   } = useChartContext();
+  const {
+    localeText
+  } = useChartsLocalization();
   const isZoomEnabled = useSelector(store, selectorChartZoomIsEnabled);
   const children = [];
   if (isZoomEnabled) {
-    children.push(/*#__PURE__*/_jsx(ChartsToolbarZoomInButton, {}, "zoom-in"));
-    children.push(/*#__PURE__*/_jsx(ChartsToolbarZoomOutButton, {}, "zoom-out"));
+    const Tooltip = slots.baseTooltip;
+    const ZoomOutIcon = slots.zoomOutIcon;
+    const ZoomInIcon = slots.zoomInIcon;
+    children.push(/*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps.baseTooltip, {
+      title: localeText.zoomIn,
+      children: /*#__PURE__*/_jsx(ChartsToolbarZoomInButton, {
+        children: /*#__PURE__*/_jsx(ZoomInIcon, _extends({}, slotProps.zoomInIcon))
+      })
+    }), "zoom-in"));
+    children.push(/*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps.baseTooltip, {
+      title: localeText.zoomOut,
+      children: /*#__PURE__*/_jsx(ChartsToolbarZoomOutButton, {
+        children: /*#__PURE__*/_jsx(ZoomOutIcon, _extends({}, slotProps.zoomOutIcon))
+      })
+    }), "zoom-out"));
   }
   if (children.length === 0) {
     return null;
   }
-  return /*#__PURE__*/_jsx(Toolbar, {
+  return /*#__PURE__*/_jsx(Toolbar, _extends({}, 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.string
+} : void 0;

package/esm/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/esm/ChartsToolbarPro/ChartsToolbarZoomInButton.js

@@ -0,0 +1,50 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["render"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useChartContext, useChartsSlots, useSelector } from '@mui/x-charts/internals';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
+import { selectorChartCanZoomIn } from "../internals/plugins/useChartProZoom/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The zoom-in button for the chart toolbar.
+ */
+const ChartsToolbarZoomInButton = /*#__PURE__*/React.forwardRef(function ChartsToolbarZoomInButton(_ref, ref) {
+  let {
+      render
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    slots,
+    slotProps
+  } = useChartsSlots();
+  const {
+    instance,
+    store
+  } = useChartContext();
+  const disabled = useSelector(store, selectorChartCanZoomIn);
+  const element = useComponentRenderer(slots.baseIconButton, render, _extends({}, slotProps?.baseIconButton, {
+    onClick: () => instance.zoomIn(),
+    disabled
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/_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.oneOfType([PropTypes.element, PropTypes.func])
+} : void 0;
+export { ChartsToolbarZoomInButton };

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

package/esm/ChartsToolbarPro/ChartsToolbarZoomOutButton.js

@@ -0,0 +1,50 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["render"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useChartContext, useChartsSlots, useSelector } from '@mui/x-charts/internals';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
+import { selectorChartCanZoomOut } from "../internals/plugins/useChartProZoom/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The zoom-out button for the chart toolbar.
+ */
+const ChartsToolbarZoomOutButton = /*#__PURE__*/React.forwardRef(function ChartsToolbarZoomOutButton(_ref, ref) {
+  let {
+      render
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    slots,
+    slotProps
+  } = useChartsSlots();
+  const {
+    instance,
+    store
+  } = useChartContext();
+  const disabled = useSelector(store, selectorChartCanZoomOut);
+  const element = useComponentRenderer(slots.baseIconButton, render, _extends({}, slotProps?.baseIconButton, {
+    onClick: () => instance.zoomOut(),
+    disabled
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") ChartsToolbarZoomOutButton.displayName = "ChartsToolbarZoomOutButton";
+process.env.NODE_ENV !== "production" ? ChartsToolbarZoomOutButton.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.oneOfType([PropTypes.element, PropTypes.func])
+} : void 0;
+export { ChartsToolbarZoomOutButton };

package/esm/ChartsToolbarPro/index.d.ts

@@ -1 +1,3 @@
-export * from "./ChartsToolbarPro.js";
+export * from "./ChartsToolbarPro.js";
+export * from "./ChartsToolbarZoomInButton.js";
+export * from "./ChartsToolbarZoomOutButton.js";

package/esm/ChartsToolbarPro/index.js

@@ -1 +1,3 @@
-export * from "./ChartsToolbarPro.js";
+export * from "./ChartsToolbarPro.js";
+export * from "./ChartsToolbarZoomInButton.js";
+export * from "./ChartsToolbarZoomOutButton.js";

package/esm/FunnelChart/FunnelChart.d.ts

@@ -7,7 +7,8 @@ import { FunnelSeriesType } from "./funnel.types.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { FunnelChartSlotExtension } from "./funnelSlots.types.js";
 import { CategoryAxis } from "./categoryAxis.types.js";
-export interface FunnelChartProps extends Omit<ChartContainerProProps<'funnel'>, 'series' | 'plugins' | 'zAxis' | 'zoom' | 'onZoomChange' | 'dataset' | 'yAxis' | 'xAxis' | 'rotationAxis' | 'radiusAxis'>, Omit<FunnelPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, FunnelChartSlotExtension {
+import { FunnelChartPluginsSignatures } from "./FunnelChart.plugins.js";
+export interface FunnelChartProps extends Omit<ChartContainerProProps<'funnel', FunnelChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis' | 'zoom' | 'onZoomChange' | 'dataset' | 'yAxis' | 'xAxis' | 'rotationAxis' | 'radiusAxis' | 'slots' | 'slotProps'>, Omit<FunnelPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, FunnelChartSlotExtension {
   /**
    * The series to display in the funnel chart.
    * An array of [[FunnelSeriesType]] objects.