@mui/x-charts-pro 8.4.0 → 8.5.0

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

package/ChartsToolbarPro/ChartsToolbarZoomOutButton.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.ChartsToolbarZoomOutButton = 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-out button for the chart toolbar.
+ */
+const ChartsToolbarZoomOutButton = exports.ChartsToolbarZoomOutButton = /*#__PURE__*/React.forwardRef(function ChartsToolbarZoomOutButton(_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.selectorChartCanZoomOut);
+  const element = (0, _useComponentRenderer.useComponentRenderer)(slots.baseIconButton, render, (0, _extends2.default)({}, slotProps?.baseIconButton, {
+    onClick: () => instance.zoomOut(),
+    disabled
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.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.default.oneOfType([_propTypes.default.element, _propTypes.default.func])
+} : void 0;

package/ChartsToolbarPro/index.d.ts

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

package/ChartsToolbarPro/index.js

@@ -13,4 +13,26 @@ Object.keys(_ChartsToolbarPro).forEach(function (key) {
       return _ChartsToolbarPro[key];
     }
   });
+});
+var _ChartsToolbarZoomInButton = require("./ChartsToolbarZoomInButton");
+Object.keys(_ChartsToolbarZoomInButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsToolbarZoomInButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsToolbarZoomInButton[key];
+    }
+  });
+});
+var _ChartsToolbarZoomOutButton = require("./ChartsToolbarZoomOutButton");
+Object.keys(_ChartsToolbarZoomOutButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsToolbarZoomOutButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsToolbarZoomOutButton[key];
+    }
+  });
 });

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

package/FunnelChart/FunnelChart.js

@@ -67,8 +67,7 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.shape({
       exportAsImage: _propTypes.default.func.isRequired,
-      exportAsPrint: _propTypes.default.func.isRequired,
-      setZoomData: _propTypes.default.func.isRequired
+      exportAsPrint: _propTypes.default.func.isRequired
     })
   }),
   /**
@@ -207,15 +206,6 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    * If you don't provide this prop. It falls back to a randomly generated id.
    */
   id: _propTypes.default.string,
-  /**
-   * The list of zoom data related to each axis.
-   * Used to initialize the zoom in a specific configuration without controlling it.
-   */
-  initialZoom: _propTypes.default.arrayOf(_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    end: _propTypes.default.number.isRequired,
-    start: _propTypes.default.number.isRequired
-  })),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -282,13 +272,5 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
-  width: _propTypes.default.number,
-  /**
-   * The list of zoom data related to each axis.
-   */
-  zoomData: _propTypes.default.arrayOf(_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    end: _propTypes.default.number.isRequired,
-    start: _propTypes.default.number.isRequired
-  }))
+  width: _propTypes.default.number
 } : void 0;

package/FunnelChart/FunnelChart.plugins.d.ts

@@ -0,0 +1,4 @@
+import { ConvertSignaturesIntoPlugins, UseChartCartesianAxisSignature, UseChartHighlightSignature, UseChartInteractionSignature } from '@mui/x-charts/internals';
+import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
+export type FunnelChartPluginsSignatures = [UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProExportSignature];
+export declare const FUNNEL_CHART_PLUGINS: ConvertSignaturesIntoPlugins<FunnelChartPluginsSignatures>;

package/FunnelChart/FunnelChart.plugins.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FUNNEL_CHART_PLUGINS = void 0;
+var _internals = require("@mui/x-charts/internals");
+var _useChartProExport = require("../internals/plugins/useChartProExport");
+const FUNNEL_CHART_PLUGINS = exports.FUNNEL_CHART_PLUGINS = [_internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _useChartProExport.useChartProExport];

package/FunnelChart/funnelSlots.types.d.ts

@@ -1,10 +1,11 @@
 import { ChartsOverlaySlotProps, ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
 import { ChartsTooltipSlotProps, ChartsTooltipSlots } from '@mui/x-charts/ChartsTooltip';
-import { ChartsAxisSlotProps, ChartsAxisSlots } from '@mui/x-charts/internals';
+import { ChartsAxisSlotProps, ChartsAxisSlots, ChartsSlotProps, ChartsSlots } from '@mui/x-charts/internals';
 import { ChartsLegendSlotProps, ChartsLegendSlots } from '@mui/x-charts/ChartsLegend';
+import { ChartsToolbarSlotProps, ChartsToolbarSlots } from '@mui/x-charts/Toolbar';
 import { FunnelPlotSlotProps, FunnelPlotSlots } from "./funnelPlotSlots.types.js";
-export interface FunnelChartSlots extends ChartsAxisSlots, FunnelPlotSlots, ChartsLegendSlots, ChartsTooltipSlots, ChartsOverlaySlots, ChartsAxisSlots {}
-export interface FunnelChartSlotProps extends ChartsAxisSlotProps, FunnelPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps, ChartsOverlaySlotProps, ChartsAxisSlotProps {}
+export interface FunnelChartSlots extends ChartsAxisSlots, FunnelPlotSlots, ChartsLegendSlots, ChartsTooltipSlots, ChartsOverlaySlots, ChartsAxisSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
+export interface FunnelChartSlotProps extends ChartsAxisSlotProps, FunnelPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps, ChartsOverlaySlotProps, ChartsAxisSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export interface FunnelChartSlotExtension {
   /**
    * Overridable component slots.

package/FunnelChart/useFunnelChartProps.d.ts

@@ -3,6 +3,7 @@ import { ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
 import { ChartsLegendSlotExtension } from '@mui/x-charts/ChartsLegend';
 import { ChartsWrapperProps } from '@mui/x-charts/internals';
 import { ChartsAxisHighlightProps } from '@mui/x-charts/ChartsAxisHighlight';
+import { FunnelChartPluginsSignatures } from "./FunnelChart.plugins.js";
 import { FunnelPlotProps } from "./FunnelPlot.js";
 import type { FunnelChartProps } from "./FunnelChart.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
@@ -14,7 +15,7 @@ import { ChartContainerProProps } from "../ChartContainerPro/index.js";
  * @returns An object with props for the children components of FunnelChart
  */
 export declare const useFunnelChartProps: (props: FunnelChartProps) => {
-  chartContainerProps: ChartContainerProProps<"funnel">;
+  chartContainerProps: ChartContainerProProps<"funnel", FunnelChartPluginsSignatures>;
   funnelPlotProps: FunnelPlotProps;
   overlayProps: ChartsOverlayProps;
   chartsAxisProps: ChartsAxisProps;

package/FunnelChart/useFunnelChartProps.js

@@ -12,6 +12,7 @@ var _constants = require("@mui/x-charts/constants");
 var _internals = require("@mui/x-charts/internals");
 var _warning = require("@mui/x-internals/warning");
 var _colorPalettes = require("@mui/x-charts/colorPalettes");
+var _FunnelChart = require("./FunnelChart.plugins");
 const _excluded = ["categoryAxis", "series", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "onItemClick", "highlightedItem", "onHighlightChange", "className", "hideLegend", "axisHighlight", "apiRef", "gap"];
 function getCategoryAxisConfig(categoryAxis, series, isHorizontal, direction) {
   const maxSeriesLength = Math.max(...series.map(s => (s.data ?? []).length), 0);
@@ -119,7 +120,8 @@ const useFunnelChartProps = props => {
     highlightedItem,
     onHighlightChange,
     className,
-    apiRef
+    apiRef,
+    plugins: _FunnelChart.FUNNEL_CHART_PLUGINS
   });
   const funnelPlotProps = {
     gap,