@mui/x-charts-pro 8.5.0 → 8.5.2

package/RadarChartPro/RadarChartPro.d.ts

@@ -1,7 +1,22 @@
 import * as React from 'react';
-import { RadarChartProps, RadarDataProviderProps } from '@mui/x-charts/RadarChart';
+import { RadarChartProps, RadarDataProviderProps, RadarChartSlotProps, RadarChartSlots } from '@mui/x-charts/RadarChart';
 import { RadarChartProPluginsSignatures } from "./RadarChartPro.plugins.js";
-export interface RadarChartProProps extends Omit<RadarChartProps, 'apiRef'>, Omit<RadarDataProviderProps<RadarChartProPluginsSignatures>, 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {}
+import { ChartsToolbarProSlotProps, ChartsToolbarProSlots } from "../ChartsToolbarPro/Toolbar.types.js";
+import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
+export interface RadarChartProSlots extends Omit<RadarChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
+export interface RadarChartProSlotProps extends Omit<RadarChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
+export interface RadarChartProProps extends Omit<RadarChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<RadarDataProviderProps<RadarChartProPluginsSignatures>, 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: RadarChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: RadarChartProSlotProps;
+}
 /**
  * Demos:
  *

package/RadarChartPro/RadarChartPro.js

@@ -51,7 +51,7 @@ const RadarChartPro = exports.RadarChartPro = /*#__PURE__*/React.forwardRef(func
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarChart.RadarDataProvider, (0, _extends2.default)({}, radarDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
-      children: [props.showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, {}) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+      children: [props.showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         ref: ref,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarChart.RadarGrid, (0, _extends2.default)({}, radarGrid)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarChart.RadarMetricLabels, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarChart.RadarSeriesArea, {}), highlight === 'axis' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarChart.RadarAxisHighlight, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarChart.RadarSeriesMarks, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), children]
       })), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip))]

package/ScatterChartPro/ScatterChartPro.d.ts

@@ -3,8 +3,9 @@ import { ScatterChartProps, ScatterChartSlotProps, ScatterChartSlots } from '@mu
 import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/ChartContainerPro.js";
 import { ScatterChartProPluginsSignatures } from "./ScatterChartPro.plugins.js";
-export interface ScatterChartProSlots extends ScatterChartSlots, Partial<ChartsSlotsPro> {}
-export interface ScatterChartProSlotProps extends ScatterChartSlotProps, Partial<ChartsSlotPropsPro> {}
+import { ChartsToolbarProSlots, ChartsToolbarProSlotProps } from "../ChartsToolbarPro/Toolbar.types.js";
+export interface ScatterChartProSlots extends Omit<ScatterChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
+export interface ScatterChartProSlotProps extends Omit<ScatterChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
 export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'scatter', ScatterChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'onItemClick' | 'slots' | 'slotProps'> {
   /**
    * Overridable component slots.

package/ScatterChartPro/ScatterChartPro.js

@@ -76,7 +76,7 @@ const ScatterChartPro = exports.ScatterChartPro = /*#__PURE__*/React.forwardRef(
   const Toolbar = props.slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
-      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, {}) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartZoomSlider.ChartZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterChart.ScatterPlot, (0, _extends2.default)({}, scatterPlotProps))

package/esm/BarChartPro/BarChartPro.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { BarChartProps, BarChartSlotProps, BarChartSlots } from '@mui/x-charts/BarChart';
+import { ChartsToolbarProSlotProps, ChartsToolbarProSlots } from "../ChartsToolbarPro/Toolbar.types.js";
 import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { BarChartProPluginsSignatures } from "./BarChartPro.plugins.js";
-export interface BarChartProSlots extends BarChartSlots, Partial<ChartsSlotsPro> {}
-export interface BarChartProSlotProps extends BarChartSlotProps, Partial<ChartsSlotPropsPro> {}
+export interface BarChartProSlots extends Omit<BarChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
+export interface BarChartProSlotProps extends Omit<BarChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
 export interface BarChartProProps extends Omit<BarChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'bar', BarChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
   /**
    * Overridable component slots.

package/esm/BarChartPro/BarChartPro.js

@@ -73,7 +73,7 @@ const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(inProps,
   const Toolbar = props.slots?.toolbar ?? ChartsToolbarPro;
   return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
-      children: [showToolbar ? /*#__PURE__*/_jsx(Toolbar, {}) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+      children: [showToolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
         })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartZoomSlider, {}), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]

package/esm/ChartContainerPro/ChartProApi.d.ts

@@ -6,6 +6,7 @@ import { BarChartProPluginsSignatures } from "../BarChartPro/BarChartPro.plugins
 import { AllPluginSignatures, DefaultPluginSignatures } from "../internals/plugins/allPlugins.js";
 import { FunnelChartPluginsSignatures } from "../FunnelChart/FunnelChart.plugins.js";
 import { RadarChartProPluginsSignatures } from "../RadarChartPro/RadarChartPro.plugins.js";
+import { PieChartProPluginSignatures } from "../PieChartPro/PieChartPro.plugins.js";
 type PluginsPerSeriesType = {
   heatmap: HeatmapPluginsSignatures;
   line: LineChartProPluginsSignatures;
@@ -13,6 +14,7 @@ type PluginsPerSeriesType = {
   bar: BarChartProPluginsSignatures;
   funnel: FunnelChartPluginsSignatures;
   radar: RadarChartProPluginsSignatures;
+  pie: PieChartProPluginSignatures;
   composition: DefaultPluginSignatures;
 };
 /**

package/esm/ChartDataProviderPro/ChartDataProviderPro.js

@@ -11,7 +11,7 @@ import { defaultSlotsMaterial } from "../internals/material/index.js";
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 import { useChartDataProviderProProps } from "./useChartDataProviderProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = "MTc0ODQ2OTYwMDAwMA==";
+const releaseInfo = "MTc0OTY3OTIwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.d.ts

@@ -6,7 +6,6 @@ export interface ChartAxisZoomSliderActiveTrackProps {
   axisPosition: 'top' | 'bottom' | 'left' | 'right';
   zoomData: ZoomData;
   reverse?: boolean;
-  valueFormatter?: (value: number) => string;
   showTooltip: boolean;
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
@@ -17,7 +16,6 @@ export declare function ChartAxisZoomSliderActiveTrack({
   axisPosition,
   zoomData,
   reverse,
-  valueFormatter,
   showTooltip,
   onPointerEnter,
   onPointerLeave

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { styled } from '@mui/material/styles';
-import { getSVGPoint, selectorChartAxisZoomOptionsLookup, selectorChartDrawingArea, useChartContext, useDrawingArea, useStore } from '@mui/x-charts/internals';
+import { getSVGPoint, invertScale, selectorChartAxis, selectorChartAxisZoomOptionsLookup, selectorChartDrawingArea, useChartContext, useDrawingArea, useSelector, useStore } from '@mui/x-charts/internals';
 import * as React from 'react';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { selectorChartAxisZoomData } from "../../internals/plugins/useChartProZoom/index.js";
@@ -17,17 +17,12 @@ const ZoomSliderActiveTrackRect = styled('rect')(({
     cursor: 'grab'
   }
 }));
-const formatter = Intl.NumberFormat(undefined, {
-  maximumFractionDigits: 0
-});
-const zoomValueFormatter = value => formatter.format(value);
 export function ChartAxisZoomSliderActiveTrack({
   axisId,
   axisDirection,
   axisPosition,
   zoomData,
   reverse,
-  valueFormatter = zoomValueFormatter,
   showTooltip,
   onPointerEnter,
   onPointerLeave
@@ -37,10 +32,15 @@ export function ChartAxisZoomSliderActiveTrack({
     svgRef
   } = useChartContext();
   const store = useStore();
+  const axis = useSelector(store, selectorChartAxis, axisId);
   const drawingArea = useDrawingArea();
   const activePreviewRectRef = React.useRef(null);
   const [startThumbEl, setStartThumbEl] = React.useState(null);
   const [endThumbEl, setEndThumbEl] = React.useState(null);
+  const {
+    tooltipStart,
+    tooltipEnd
+  } = getZoomSliderTooltipsText(axis, drawingArea);
   const previewThumbWidth = axisDirection === 'x' ? ZOOM_SLIDER_THUMB_WIDTH : ZOOM_SLIDER_THUMB_HEIGHT;
   const previewThumbHeight = axisDirection === 'x' ? ZOOM_SLIDER_THUMB_HEIGHT : ZOOM_SLIDER_THUMB_WIDTH;
   React.useEffect(() => {
@@ -230,14 +230,47 @@ export function ChartAxisZoomSliderActiveTrack({
       placement: "end"
     }), /*#__PURE__*/_jsx(ChartsTooltipZoomSliderValue, {
       anchorEl: startThumbEl,
-      open: showTooltip,
+      open: showTooltip && tooltipStart !== '',
       placement: axisPosition,
-      children: valueFormatter(zoomData.start)
+      children: tooltipStart
     }), /*#__PURE__*/_jsx(ChartsTooltipZoomSliderValue, {
       anchorEl: endThumbEl,
-      open: showTooltip,
+      open: showTooltip && tooltipEnd !== '',
       placement: axisPosition,
-      children: valueFormatter(zoomData.end)
+      children: tooltipEnd
     })]
   });
+}
+
+/**
+ * Returns the text for the tooltips on the thumbs of the zoom slider.
+ */
+function getZoomSliderTooltipsText(axis, drawingArea) {
+  const formatValue = value => {
+    if (axis.valueFormatter) {
+      return axis.valueFormatter(value, {
+        location: 'zoom-slider-tooltip',
+        scale: axis.scale
+      });
+    }
+    return `${value}`;
+  };
+  const axisDirection = axis.position === 'top' || axis.position === 'bottom' ? 'x' : 'y';
+  let start = axisDirection === 'x' ? drawingArea.left : drawingArea.top;
+  const size = axisDirection === 'x' ? drawingArea.width : drawingArea.height;
+  let end = start + size;
+  if (axisDirection === 'y') {
+    [start, end] = [end, start]; // Invert for y-axis
+  }
+  if (axis.reverse) {
+    [start, end] = [end, start]; // Reverse the start and end if the axis is reversed
+  }
+  const startValue = invertScale(axis.scale, axis.data ?? [], start) ?? axis.data?.at(0);
+  const endValue = invertScale(axis.scale, axis.data ?? [], end) ?? axis.data?.at(-1);
+  const tooltipStart = formatValue(startValue);
+  const tooltipEnd = formatValue(endValue);
+  return {
+    tooltipStart,
+    tooltipEnd
+  };
 }

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderTrack.js

@@ -66,14 +66,12 @@ export function ChartAxisZoomSliderTrack(_ref) {
 
     // 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) {
@@ -114,22 +112,6 @@ export function ChartAxisZoomSliderTrack(_ref) {
       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();
@@ -138,10 +120,6 @@ export function ChartAxisZoomSliderTrack(_ref) {
     rect.addEventListener('pointermove', onPointerMove);
     onSelectStart?.();
     setIsSelecting(true);
-    instance.setAxisZoomData(axisId, prev => _extends({}, prev, {
-      start: zoomFromPointerDown,
-      end: zoomFromPointerDown
-    }));
   };
   return /*#__PURE__*/_jsx(ZoomSliderTrack, _extends({
     ref: ref,

package/esm/ChartsToolbarPro/ChartsToolbarPro.d.ts

@@ -1,9 +1,7 @@
 import { ChartsToolbarProps } from '@mui/x-charts/Toolbar';
 import * as React from 'react';
+export interface ChartsToolbarProProps extends ChartsToolbarProps {}
 /**
  * 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;
-}
+export declare function ChartsToolbarPro(props: ChartsToolbarProProps): React.JSX.Element | null;

package/esm/ChartsToolbarPro/ChartsToolbarPro.js

@@ -1,12 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { Toolbar } from '@mui/x-charts/Toolbar';
-import PropTypes from 'prop-types';
+import { Toolbar, ToolbarButton } from '@mui/x-charts/Toolbar';
 import * as React from 'react';
 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 "./ChartsToolbarZoomInButton.js";
-import { ChartsToolbarZoomOutButton } from "./ChartsToolbarZoomOutButton.js";
+import { ChartsToolbarZoomInTrigger } from "./ChartsToolbarZoomInTrigger.js";
+import { ChartsToolbarZoomOutTrigger } from "./ChartsToolbarZoomOutTrigger.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * The chart toolbar component for the pro package.
@@ -30,13 +29,15 @@ export function ChartsToolbarPro(props) {
     const ZoomInIcon = slots.zoomInIcon;
     children.push(/*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps.baseTooltip, {
       title: localeText.zoomIn,
-      children: /*#__PURE__*/_jsx(ChartsToolbarZoomInButton, {
+      children: /*#__PURE__*/_jsx(ChartsToolbarZoomInTrigger, {
+        render: /*#__PURE__*/_jsx(ToolbarButton, {}),
         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(ChartsToolbarZoomOutTrigger, {
+        render: /*#__PURE__*/_jsx(ToolbarButton, {}),
         children: /*#__PURE__*/_jsx(ZoomOutIcon, _extends({}, slotProps.zoomOutIcon))
       })
     }), "zoom-out"));
@@ -47,11 +48,4 @@ export function ChartsToolbarPro(props) {
   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 → ChartsToolbarZoomInTrigger.d.ts}

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

package/esm/ChartsToolbarPro/{ChartsToolbarZoomInButton.js → ChartsToolbarZoomInTrigger.js}

@@ -5,14 +5,15 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["render"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useChartContext, useChartsSlots, useSelector } from '@mui/x-charts/internals';
+import { useChartContext, useSelector, useChartsSlots } 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.
+ * A button that zooms the chart in.
+ * It renders the `baseButton` slot.
  */
-const ChartsToolbarZoomInButton = /*#__PURE__*/React.forwardRef(function ChartsToolbarZoomInButton(_ref, ref) {
+const ChartsToolbarZoomInTrigger = /*#__PURE__*/React.forwardRef(function ChartsToolbarZoomInTrigger(_ref, ref) {
   let {
       render
     } = _ref,
@@ -26,7 +27,7 @@ const ChartsToolbarZoomInButton = /*#__PURE__*/React.forwardRef(function ChartsT
     store
   } = useChartContext();
   const disabled = useSelector(store, selectorChartCanZoomIn);
-  const element = useComponentRenderer(slots.baseIconButton, render, _extends({}, slotProps?.baseIconButton, {
+  const element = useComponentRenderer(slots.baseButton, render, _extends({}, slotProps.baseButton, {
     onClick: () => instance.zoomIn(),
     disabled
   }, other, {
@@ -36,8 +37,8 @@ const ChartsToolbarZoomInButton = /*#__PURE__*/React.forwardRef(function ChartsT
     children: element
   });
 });
-if (process.env.NODE_ENV !== "production") ChartsToolbarZoomInButton.displayName = "ChartsToolbarZoomInButton";
-process.env.NODE_ENV !== "production" ? ChartsToolbarZoomInButton.propTypes = {
+if (process.env.NODE_ENV !== "production") ChartsToolbarZoomInTrigger.displayName = "ChartsToolbarZoomInTrigger";
+process.env.NODE_ENV !== "production" ? ChartsToolbarZoomInTrigger.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -47,4 +48,4 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarZoomInButton.propTypes = {
    */
   render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
 } : void 0;
-export { ChartsToolbarZoomInButton };
+export { ChartsToolbarZoomInTrigger };

package/esm/ChartsToolbarPro/{ChartsToolbarZoomOutButton.d.ts → ChartsToolbarZoomOutTrigger.d.ts}

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

package/esm/ChartsToolbarPro/{ChartsToolbarZoomOutButton.js → ChartsToolbarZoomOutTrigger.js}

@@ -5,14 +5,15 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["render"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useChartContext, useChartsSlots, useSelector } from '@mui/x-charts/internals';
+import { useChartContext, useSelector, useChartsSlots } 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.
+ * A button that zooms the chart out.
+ * It renders the `baseButton` slot.
  */
-const ChartsToolbarZoomOutButton = /*#__PURE__*/React.forwardRef(function ChartsToolbarZoomOutButton(_ref, ref) {
+const ChartsToolbarZoomOutTrigger = /*#__PURE__*/React.forwardRef(function ChartsToolbarZoomOutTrigger(_ref, ref) {
   let {
       render
     } = _ref,
@@ -26,7 +27,7 @@ const ChartsToolbarZoomOutButton = /*#__PURE__*/React.forwardRef(function Charts
     store
   } = useChartContext();
   const disabled = useSelector(store, selectorChartCanZoomOut);
-  const element = useComponentRenderer(slots.baseIconButton, render, _extends({}, slotProps?.baseIconButton, {
+  const element = useComponentRenderer(slots.baseButton, render, _extends({}, slotProps.baseButton, {
     onClick: () => instance.zoomOut(),
     disabled
   }, other, {
@@ -36,8 +37,8 @@ const ChartsToolbarZoomOutButton = /*#__PURE__*/React.forwardRef(function Charts
     children: element
   });
 });
-if (process.env.NODE_ENV !== "production") ChartsToolbarZoomOutButton.displayName = "ChartsToolbarZoomOutButton";
-process.env.NODE_ENV !== "production" ? ChartsToolbarZoomOutButton.propTypes = {
+if (process.env.NODE_ENV !== "production") ChartsToolbarZoomOutTrigger.displayName = "ChartsToolbarZoomOutTrigger";
+process.env.NODE_ENV !== "production" ? ChartsToolbarZoomOutTrigger.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -47,4 +48,4 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarZoomOutButton.propTypes = {
    */
   render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
 } : void 0;
-export { ChartsToolbarZoomOutButton };
+export { ChartsToolbarZoomOutTrigger };

package/esm/ChartsToolbarPro/Toolbar.types.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ChartsToolbarProProps } from "./ChartsToolbarPro.js";
+export interface ChartsToolbarProSlots {
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<ChartsToolbarProProps>;
+}
+export interface ChartsToolbarProSlotProps {
+  /**
+   * Props for the toolbar component.
+   */
+  toolbar?: Partial<ChartsToolbarProProps>;
+}

package/esm/ChartsToolbarPro/Toolbar.types.js

@@ -0,0 +1 @@
+export {};

package/esm/ChartsToolbarPro/index.d.ts

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

package/esm/ChartsToolbarPro/index.js

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

package/esm/FunnelChart/FunnelChart.js

@@ -16,6 +16,7 @@ import { useFunnelChartProps } from "./useFunnelChartProps.js";
 import { seriesConfig as funnelSeriesConfig } from "./seriesConfig/index.js";
 import { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
 import { ChartDataProviderPro } from "../ChartDataProviderPro/index.js";
+import { FUNNEL_CHART_PLUGINS } from "./FunnelChart.plugins.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const seriesConfig = {
   funnel: funnelSeriesConfig
@@ -41,7 +42,9 @@ const FunnelChart = /*#__PURE__*/React.forwardRef(function FunnelChart(props, re
   } = useChartContainerProProps(chartContainerProps, ref);
   const Tooltip = themedProps.slots?.tooltip ?? ChartsTooltip;
   return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
+    gap: themedProps.gap,
     seriesConfig: seriesConfig,
+    plugins: FUNNEL_CHART_PLUGINS,
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       children: [!themedProps.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(FunnelPlot, _extends({}, funnelPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), children]
@@ -88,16 +91,6 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
     size: PropTypes.number,
     tickLabelStyle: PropTypes.object,
     tickSize: PropTypes.number
-  }), PropTypes.shape({
-    categories: PropTypes.arrayOf(PropTypes.string),
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    position: PropTypes.oneOf(['bottom', 'left', 'none', 'right', 'top']),
-    scaleType: PropTypes.oneOf(['point']),
-    size: PropTypes.number,
-    tickLabelStyle: PropTypes.object,
-    tickSize: PropTypes.number
   }), PropTypes.shape({
     categories: PropTypes.arrayOf(PropTypes.string),
     disableLine: PropTypes.bool,
@@ -222,7 +215,7 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
   })]),
   /**
    * The function called for onClick events.
-   * The second argument contains information about all line/bar elements at the current mouse position.
+   * The second argument contains information about all funnel elements at the current position.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */

package/esm/FunnelChart/FunnelChart.plugins.d.ts

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

package/esm/FunnelChart/FunnelChart.plugins.js

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

package/esm/FunnelChart/FunnelPlot.d.ts

@@ -2,11 +2,6 @@ import * as React from 'react';
 import { FunnelItemIdentifier } from "./funnel.types.js";
 import { FunnelPlotSlotExtension } from "./funnelPlotSlots.types.js";
 export interface FunnelPlotProps extends FunnelPlotSlotExtension {
-  /**
-   * The gap, in pixels, between funnel sections.
-   * @default 0
-   */
-  gap?: number;
   /**
    * Callback fired when a funnel item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.