@mui/x-charts-pro 8.4.0 → 8.5.0

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

package/esm/FunnelChart/FunnelChart.js

@@ -60,8 +60,7 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
       exportAsImage: PropTypes.func.isRequired,
-      exportAsPrint: PropTypes.func.isRequired,
-      setZoomData: PropTypes.func.isRequired
+      exportAsPrint: PropTypes.func.isRequired
     })
   }),
   /**
@@ -200,15 +199,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.string,
-  /**
-   * The list of zoom data related to each axis.
-   * Used to initialize the zoom in a specific configuration without controlling it.
-   */
-  initialZoom: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    end: PropTypes.number.isRequired,
-    start: PropTypes.number.isRequired
-  })),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -275,14 +265,6 @@ 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.number,
-  /**
-   * The list of zoom data related to each axis.
-   */
-  zoomData: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    end: PropTypes.number.isRequired,
-    start: PropTypes.number.isRequired
-  }))
+  width: PropTypes.number
 } : void 0;
 export { FunnelChart };

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

@@ -0,0 +1,3 @@
+import { useChartCartesianAxis, useChartHighlight, useChartInteraction } from '@mui/x-charts/internals';
+import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
+export const FUNNEL_CHART_PLUGINS = [useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartProExport];

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

@@ -7,6 +7,7 @@ import { DEFAULT_MARGINS, DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-
 import { defaultizeMargin } from '@mui/x-charts/internals';
 import { warnOnce } from '@mui/x-internals/warning';
 import { strawberrySkyPalette } from '@mui/x-charts/colorPalettes';
+import { FUNNEL_CHART_PLUGINS } from "./FunnelChart.plugins.js";
 function getCategoryAxisConfig(categoryAxis, series, isHorizontal, direction) {
   const maxSeriesLength = Math.max(...series.map(s => (s.data ?? []).length), 0);
   const maxSeriesValue = Array.from({
@@ -113,7 +114,8 @@ export const useFunnelChartProps = props => {
     highlightedItem,
     onHighlightChange,
     className,
-    apiRef
+    apiRef,
+    plugins: FUNNEL_CHART_PLUGINS
   });
   const funnelPlotProps = {
     gap,

package/esm/Heatmap/Heatmap.d.ts

@@ -4,22 +4,30 @@ import { ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
 import { ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
 import { ChartsAxisSlots, ChartsAxisSlotProps, XAxis, YAxis } from '@mui/x-charts/internals';
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
+import { ChartsLegendSlotProps, ChartsLegendSlots } from '@mui/x-charts/ChartsLegend';
+import { ChartsToolbarSlotProps, ChartsToolbarSlots } from '@mui/x-charts/Toolbar';
+import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { HeatmapSeriesType } from "../models/seriesType/heatmap.js";
 import { HeatmapTooltipProps } from "./HeatmapTooltip/index.js";
 import { HeatmapItemSlotProps, HeatmapItemSlots } from "./HeatmapItem.js";
 import { HeatmapPluginsSignatures } from "./Heatmap.plugins.js";
-export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, HeatmapItemSlots {
+export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, HeatmapItemSlots, ChartsToolbarSlots, Partial<ChartsSlotsPro> {
   /**
-   * Custom component for the tooltip popper.
+   * Custom component for the tooltip.
    * @default ChartsTooltipRoot
    */
   tooltip?: React.ElementType<HeatmapTooltipProps>;
+  /**
+   * Custom component for the legend.
+   * @default ContinuousColorLegendProps
+   */
+  legend?: ChartsLegendSlots['legend'];
 }
-export interface HeatmapSlotProps extends ChartsAxisSlotProps, ChartsOverlaySlotProps, HeatmapItemSlotProps {
+export interface HeatmapSlotProps extends ChartsAxisSlotProps, ChartsOverlaySlotProps, HeatmapItemSlotProps, ChartsLegendSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotPropsPro> {
   tooltip?: Partial<HeatmapTooltipProps>;
 }
-export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', HeatmapPluginsSignatures>, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'skipAnimation'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', HeatmapPluginsSignatures>, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'skipAnimation' | 'slots' | 'slotProps'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The configuration of the x-axes.
    * If not provided, a default axis config is used.
@@ -42,6 +50,11 @@ export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', Hea
    * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
    */
   tooltip?: ChartsTooltipProps;
+  /**
+   * If `true`, the legend is not rendered.
+   * @default true
+   */
+  hideLegend?: boolean;
   /**
    * Overridable component slots.
    * @default {}