@mui/x-charts-pro 8.4.0 → 8.5.1

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderTrack.js

@@ -0,0 +1,130 @@
+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);
+    const onPointerMove = rafThrottle(function onPointerMove(pointerMoveEvent) {
+      const pointerMovePoint = getSVGPoint(element, pointerMoveEvent);
+      const zoomFromPointerMove = calculateZoomFromPoint(store.getSnapshot(), axisId, pointerMovePoint);
+      if (zoomFromPointerMove === null) {
+        return;
+      }
+      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?.();
+    };
+    event.preventDefault();
+    event.stopPropagation();
+    rect.setPointerCapture(event.pointerId);
+    document.addEventListener('pointerup', onPointerUp);
+    rect.addEventListener('pointermove', onPointerMove);
+    onSelectStart?.();
+    setIsSelecting(true);
+  };
+  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,6 @@
+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: ChartsToolbarProps): React.JSX.Element | null;

package/esm/ChartsToolbarPro/ChartsToolbarPro.js

@@ -1,24 +1,51 @@
-import { Toolbar } from '@mui/x-charts/Toolbar';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { Toolbar, ToolbarButton } from '@mui/x-charts/Toolbar';
 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 { ChartsToolbarZoomInTrigger } from "./ChartsToolbarZoomInTrigger.js";
+import { ChartsToolbarZoomOutTrigger } from "./ChartsToolbarZoomOutTrigger.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(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(ChartsToolbarZoomOutTrigger, {
+        render: /*#__PURE__*/_jsx(ToolbarButton, {}),
+        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
-  });
+  }));
 }

package/esm/ChartsToolbarPro/ChartsToolbarZoomInTrigger.d.ts

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

package/esm/ChartsToolbarPro/ChartsToolbarZoomInTrigger.js

@@ -0,0 +1,51 @@
+'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, 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";
+/**
+ * A button that zooms the chart in.
+ * It renders the `baseButton` slot.
+ */
+const ChartsToolbarZoomInTrigger = /*#__PURE__*/React.forwardRef(function ChartsToolbarZoomInTrigger(_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.baseButton, render, _extends({}, slotProps.baseButton, {
+    onClick: () => instance.zoomIn(),
+    disabled
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: element
+  });
+});
+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"  |
+  // ----------------------------------------------------------------------
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
+} : void 0;
+export { ChartsToolbarZoomInTrigger };

package/esm/ChartsToolbarPro/ChartsToolbarZoomOutTrigger.d.ts

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

package/esm/ChartsToolbarPro/ChartsToolbarZoomOutTrigger.js

@@ -0,0 +1,51 @@
+'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, 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";
+/**
+ * A button that zooms the chart out.
+ * It renders the `baseButton` slot.
+ */
+const ChartsToolbarZoomOutTrigger = /*#__PURE__*/React.forwardRef(function ChartsToolbarZoomOutTrigger(_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.baseButton, render, _extends({}, slotProps.baseButton, {
+    onClick: () => instance.zoomOut(),
+    disabled
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: element
+  });
+});
+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"  |
+  // ----------------------------------------------------------------------
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
+} : void 0;
+export { ChartsToolbarZoomOutTrigger };

package/esm/ChartsToolbarPro/index.d.ts

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

package/esm/ChartsToolbarPro/index.js

@@ -1 +1,3 @@
-export * from "./ChartsToolbarPro.js";
+export * from "./ChartsToolbarPro.js";
+export * from "./ChartsToolbarZoomInTrigger.js";
+export * from "./ChartsToolbarZoomOutTrigger.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/FunnelPlot.js

@@ -6,11 +6,11 @@ import PropTypes from 'prop-types';
 import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
 import { cartesianSeriesTypes } from '@mui/x-charts/internals';
 import { useXAxes, useYAxes } from '@mui/x-charts/hooks';
-import { useTheme } from '@mui/material/styles';
 import { FunnelSection } from "./FunnelSection.js";
 import { alignLabel, positionLabel } from "./labelUtils.js";
 import { useFunnelSeriesContext } from "../hooks/useFunnelSeries.js";
 import { getFunnelCurve } from "./curves/index.js";
+import { FunnelSectionLabel } from "./FunnelSectionLabel.js";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 cartesianSeriesTypes.addType('funnel');
@@ -122,7 +122,6 @@ function FunnelPlot(props) {
       gap
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const theme = useTheme();
   const data = useAggregatedData(gap);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [data.map(({
@@ -148,29 +147,18 @@ function FunnelPlot(props) {
       })
     }))), data.map(({
       id,
-      label
+      label,
+      seriesId,
+      dataIndex
     }) => {
-      if (!label) {
+      if (!label || !label.value) {
         return null;
       }
-      return /*#__PURE__*/_jsx("text", {
-        x: label.x,
-        y: label.y,
-        textAnchor: label.textAnchor,
-        dominantBaseline: label.dominantBaseline,
-        stroke: "none",
-        pointerEvents: "none",
-        fontFamily: theme.typography.body2.fontFamily,
-        fontSize: theme.typography.body2.fontSize,
-        fontSizeAdjust: theme.typography.body2.fontSizeAdjust,
-        fontWeight: theme.typography.body2.fontWeight,
-        letterSpacing: theme.typography.body2.letterSpacing,
-        fontStretch: theme.typography.body2.fontStretch,
-        fontStyle: theme.typography.body2.fontStyle,
-        fontVariant: theme.typography.body2.fontVariant,
-        fill: (theme.vars || theme)?.palette?.text?.primary,
-        children: label.value
-      }, id);
+      return /*#__PURE__*/_jsx(FunnelSectionLabel, _extends({
+        label: label,
+        dataIndex: dataIndex,
+        seriesId: seriesId
+      }, other), id);
     })]
   });
 }

package/esm/FunnelChart/FunnelSection.d.ts

@@ -8,7 +8,7 @@ export interface FunnelSectionProps extends Omit<React.SVGProps<SVGPathElement>,
   classes?: Partial<FunnelSectionClasses>;
   variant?: 'filled' | 'outlined';
 }
-export declare const FunnelSectionPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, React.SVGProps<SVGPathElement>, {}>;
+export declare const FunnelSectionPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, React.SVGProps<SVGPathElement>, {}>;
 /**
  * @ignore - internal component.
  */

package/esm/FunnelChart/FunnelSectionLabel.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { SeriesId } from '@mui/x-charts/internals';
+import { FunnelSectionClasses } from "./funnelSectionClasses.js";
+export interface FunnelSectionLabelConfig {
+  x: number;
+  y: number;
+  value: string | null;
+  textAnchor?: React.SVGProps<SVGTextElement>['textAnchor'];
+  dominantBaseline?: React.SVGProps<SVGTextElement>['dominantBaseline'];
+}
+export interface FunnelSectionLabelProps extends Omit<React.SVGProps<SVGTextElement>, 'ref' | 'id'> {
+  classes?: Partial<FunnelSectionClasses>;
+  label: FunnelSectionLabelConfig;
+  seriesId: SeriesId;
+  dataIndex: number;
+}
+/**
+ * @ignore - internal component.
+ */
+declare const FunnelSectionLabel: React.ForwardRefExoticComponent<FunnelSectionLabelProps & React.RefAttributes<{}>>;
+export { FunnelSectionLabel };

package/esm/FunnelChart/FunnelSectionLabel.js

@@ -0,0 +1,46 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["classes", "color", "onClick", "className", "label", "seriesId", "dataIndex"];
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import { consumeSlots } from '@mui/x-charts/internals';
+import { useLabelUtilityClasses } from "./funnelSectionClasses.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @ignore - internal component.
+ */
+const FunnelSectionLabel = consumeSlots('MuiFunnelSectionLabel', 'funnelSectionLabel', {
+  classesResolver: useLabelUtilityClasses
+}, /*#__PURE__*/React.forwardRef(function FunnelSectionLabel(props, ref) {
+  const {
+      classes,
+      label
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx("text", _extends({
+    stroke: "none",
+    pointerEvents: "none",
+    fontFamily: theme.typography.body2.fontFamily,
+    fontSize: theme.typography.body2.fontSize,
+    fontSizeAdjust: theme.typography.body2.fontSizeAdjust,
+    fontWeight: theme.typography.body2.fontWeight,
+    letterSpacing: theme.typography.body2.letterSpacing,
+    fontStretch: theme.typography.body2.fontStretch,
+    fontStyle: theme.typography.body2.fontStyle,
+    fontVariant: theme.typography.body2.fontVariant,
+    fill: (theme.vars || theme)?.palette?.text?.primary,
+    className: classes?.label,
+    x: label.x,
+    y: label.y,
+    textAnchor: label.textAnchor ?? 'middle',
+    dominantBaseline: label.dominantBaseline ?? 'central'
+  }, other, {
+    ref: ref,
+    children: label.value
+  }));
+}));
+if (process.env.NODE_ENV !== "production") FunnelSectionLabel.displayName = "FunnelSectionLabel";
+export { FunnelSectionLabel };

package/esm/FunnelChart/curves/bump.d.ts

@@ -10,18 +10,24 @@ import { CurveOptions } from "./curve.types.js";
  */
 export declare class Bump implements CurveGenerator {
   private context;
-  private x;
-  private y;
-  private currentPoint;
   private isHorizontal;
   private gap;
+  private min;
+  private max;
+  private points;
   constructor(context: CanvasRenderingContext2D, {
     isHorizontal,
-    gap
+    gap,
+    min,
+    max,
+    isIncreasing
   }: CurveOptions);
   areaStart(): void;
   areaEnd(): void;
   lineStart(): void;
   lineEnd(): void;
   point(x: number, y: number): void;
+  private drawPath;
+  private drawHorizontalPath;
+  private drawVerticalPath;
 }