@mui/x-charts-pro 8.1.0 → 8.3.0

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderHandle.js

@@ -0,0 +1,85 @@
+'use client';
+
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import useForkRef from '@mui/utils/useForkRef';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { chartAxisZoomSliderHandleClasses, useUtilityClasses } from "./chartAxisZoomSliderHandleClasses.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Rect = styled('rect')(({
+  theme
+}) => ({
+  [`&.${chartAxisZoomSliderHandleClasses.root}`]: {
+    fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[300] : (theme.vars || theme).palette.common.white,
+    stroke: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[600] : (theme.vars || theme).palette.grey[500]
+  },
+  [`&.${chartAxisZoomSliderHandleClasses.horizontal}`]: {
+    cursor: 'ew-resize'
+  },
+  [`&.${chartAxisZoomSliderHandleClasses.vertical}`]: {
+    cursor: 'ns-resize'
+  }
+}));
+/**
+ * Renders the zoom slider handle, which is responsible for resizing the zoom range.
+ * @internal
+ */
+export const ChartAxisZoomSliderHandle = /*#__PURE__*/React.forwardRef(function ChartPreviewHandle({
+  x,
+  y,
+  width,
+  height,
+  onResize,
+  orientation,
+  placement,
+  rx = 4,
+  ry = 4
+}, forwardedRef) {
+  const classes = useUtilityClasses({
+    onResize,
+    orientation,
+    placement
+  });
+  const handleRef = React.useRef(null);
+  const ref = useForkRef(handleRef, forwardedRef);
+  const onResizeEvent = useEventCallback(onResize);
+  React.useEffect(() => {
+    const handle = handleRef.current;
+    if (!handle) {
+      return;
+    }
+    const onPointerMove = rafThrottle(event => {
+      onResizeEvent(event);
+    });
+    const onPointerUp = () => {
+      handle.removeEventListener('pointermove', onPointerMove);
+      handle.removeEventListener('pointerup', onPointerUp);
+    };
+    const onPointerDown = event => {
+      // Prevent text selection when dragging the handle
+      event.preventDefault();
+      event.stopPropagation();
+      handle.setPointerCapture(event.pointerId);
+      handle.addEventListener('pointerup', onPointerUp);
+      handle.addEventListener('pointermove', onPointerMove);
+    };
+    handle.addEventListener('pointerdown', onPointerDown);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      handle.removeEventListener('pointerdown', onPointerDown);
+      onPointerMove.clear();
+    };
+  }, [onResizeEvent, orientation]);
+  return /*#__PURE__*/_jsx(Rect, {
+    className: classes.root,
+    ref: ref,
+    x: x,
+    y: y,
+    width: width,
+    height: height,
+    rx: rx,
+    ry: ry
+  });
+});

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

@@ -0,0 +1,17 @@
+import type { ChartZoomSliderHandleOwnerState } from "./ChartAxisZoomSliderHandle.js";
+export interface ChartAxisZoomSliderHandleClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element when it is a start handle. */
+  start: string;
+  /** Styles applied to the root element when it is an end handle. */
+  end: string;
+}
+export type ChartAxisZoomSliderHandleClassKey = keyof ChartAxisZoomSliderHandleClasses;
+export declare const chartAxisZoomSliderHandleClasses: ChartAxisZoomSliderHandleClasses;
+export declare function getAxisZoomSliderHandleUtilityClass(slot: string): string;
+export declare const useUtilityClasses: (ownerState: ChartZoomSliderHandleOwnerState) => Record<"root", string>;

package/esm/ChartZoomSlider/internals/chartAxisZoomSliderHandleClasses.js

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

package/esm/ChartsToolbarPro/ChartsToolbarPro.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function ChartsToolbarPro(): React.JSX.Element | null;

package/esm/ChartsToolbarPro/ChartsToolbarPro.js

@@ -0,0 +1,24 @@
+import { Toolbar } from '@mui/x-charts/Toolbar';
+import * as React from 'react';
+import { useChartContext, useSelector } from '@mui/x-charts/internals';
+import { selectorChartZoomIsEnabled } from "../internals/plugins/useChartProZoom/index.js";
+import { ChartsToolbarZoomInButton } from "./internal/ChartsToolbarZoomInButton.js";
+import { ChartsToolbarZoomOutButton } from "./internal/ChartsToolbarZoomOutButton.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ChartsToolbarPro() {
+  const {
+    store
+  } = useChartContext();
+  const isZoomEnabled = useSelector(store, selectorChartZoomIsEnabled);
+  const children = [];
+  if (isZoomEnabled) {
+    children.push(/*#__PURE__*/_jsx(ChartsToolbarZoomInButton, {}, "zoom-in"));
+    children.push(/*#__PURE__*/_jsx(ChartsToolbarZoomOutButton, {}, "zoom-out"));
+  }
+  if (children.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Toolbar, {
+    children: children
+  });
+}

package/esm/ChartsToolbarPro/index.d.ts

@@ -0,0 +1 @@
+export * from "./ChartsToolbarPro.js";

package/esm/ChartsToolbarPro/index.js

@@ -0,0 +1 @@
+export * from "./ChartsToolbarPro.js";

package/esm/ChartsToolbarPro/internal/ChartsToolbarZoomInButton.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ChartsSlotsPro } from "../../internals/material/index.js";
+type ChartsToolbarZoomInButtonSlots = Partial<Pick<ChartsSlotsPro, 'baseTooltip' | 'zoomInIcon'>>;
+type ChartsToolbarZoomInButtonSlotProps = { [K in keyof Required<ChartsToolbarZoomInButtonSlots>]: React.ComponentProps<Required<ChartsToolbarZoomInButtonSlots>[K]> };
+interface ChartsToolbarZoomInButtonProps {
+  slots?: ChartsToolbarZoomInButtonSlots;
+  slotProps?: ChartsToolbarZoomInButtonSlotProps;
+}
+export declare function ChartsToolbarZoomInButton({
+  slots,
+  slotProps
+}: ChartsToolbarZoomInButtonProps): React.JSX.Element;
+export {};

package/esm/ChartsToolbarPro/internal/ChartsToolbarZoomInButton.js

@@ -0,0 +1,29 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { ToolbarButton } from '@mui/x-charts/Toolbar';
+import { useChartContext } from '@mui/x-charts/internals';
+import { useChartsLocalization } from '@mui/x-charts/hooks';
+import { defaultSlotsMaterial } from "../../internals/material/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ChartsToolbarZoomInButton({
+  slots,
+  slotProps
+}) {
+  const {
+    instance
+  } = useChartContext();
+  const ZoomInIcon = slots?.zoomInIcon ?? defaultSlotsMaterial.zoomInIcon;
+  const Tooltip = slots?.baseTooltip ?? defaultSlotsMaterial.baseTooltip;
+  const {
+    localeText
+  } = useChartsLocalization();
+  return /*#__PURE__*/_jsx(Tooltip, {
+    title: localeText.zoomIn,
+    children: /*#__PURE__*/_jsx(ToolbarButton, {
+      onClick: () => instance.zoomIn(),
+      children: /*#__PURE__*/_jsx(ZoomInIcon, _extends({}, slotProps?.zoomInIcon))
+    })
+  });
+}

package/esm/ChartsToolbarPro/internal/ChartsToolbarZoomOutButton.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ChartsSlotsPro } from "../../internals/material/index.js";
+type ChartsToolbarZoomOutButtonSlots = Partial<Pick<ChartsSlotsPro, 'baseTooltip' | 'zoomOutIcon'>>;
+type ChartsToolbarZoomOutButtonSlotProps = { [K in keyof Required<ChartsToolbarZoomOutButtonSlots>]: React.ComponentProps<Required<ChartsToolbarZoomOutButtonSlots>[K]> };
+interface ChartsToolbarZoomOutButtonProps {
+  slots?: ChartsToolbarZoomOutButtonSlots;
+  slotProps?: ChartsToolbarZoomOutButtonSlotProps;
+}
+export declare function ChartsToolbarZoomOutButton({
+  slots,
+  slotProps
+}: ChartsToolbarZoomOutButtonProps): React.JSX.Element;
+export {};

package/esm/ChartsToolbarPro/internal/ChartsToolbarZoomOutButton.js

@@ -0,0 +1,29 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { ToolbarButton } from '@mui/x-charts/Toolbar';
+import { useChartContext } from '@mui/x-charts/internals';
+import { useChartsLocalization } from '@mui/x-charts/hooks';
+import { defaultSlotsMaterial } from "../../internals/material/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ChartsToolbarZoomOutButton({
+  slots,
+  slotProps
+}) {
+  const {
+    instance
+  } = useChartContext();
+  const ZoomOutIcon = slots?.zoomOutIcon ?? defaultSlotsMaterial.zoomOutIcon;
+  const Tooltip = slots?.baseTooltip ?? defaultSlotsMaterial.baseTooltip;
+  const {
+    localeText
+  } = useChartsLocalization();
+  return /*#__PURE__*/_jsx(Tooltip, {
+    title: localeText.zoomOut,
+    children: /*#__PURE__*/_jsx(ToolbarButton, {
+      onClick: () => instance.zoomOut(),
+      children: /*#__PURE__*/_jsx(ZoomOutIcon, _extends({}, slotProps?.zoomOutIcon))
+    })
+  });
+}

package/esm/FunnelChart/FunnelChart.js

@@ -8,7 +8,6 @@ import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
 import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { ChartsWrapper } from '@mui/x-charts/internals';
 import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
-import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
 import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
@@ -31,9 +30,7 @@ const FunnelChart = /*#__PURE__*/React.forwardRef(function FunnelChart(props, re
     funnelPlotProps,
     overlayProps,
     legendProps,
-    clipPathGroupProps,
     chartsAxisProps,
-    clipPathProps,
     chartsWrapperProps,
     axisHighlightProps,
     children
@@ -47,11 +44,9 @@ const FunnelChart = /*#__PURE__*/React.forwardRef(function FunnelChart(props, re
     seriesConfig: seriesConfig,
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       children: [!themedProps.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
-        children: [/*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
-          children: [/*#__PURE__*/_jsx(FunnelPlot, _extends({}, funnelPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-        })), !themedProps.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, themedProps.slotProps?.tooltip, {
+        children: [/*#__PURE__*/_jsx(FunnelPlot, _extends({}, funnelPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !themedProps.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, themedProps.slotProps?.tooltip, {
           trigger: "item"
-        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), children]
       }))]
     }))
   }));
@@ -63,6 +58,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
     })
@@ -176,6 +172,11 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    * @default false
    */
   disableAxisListener: PropTypes.bool,
+  /**
+   * The gap, in pixels, between funnel sections.
+   * @default 0
+   */
+  gap: PropTypes.number,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -232,7 +233,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.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
-   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
   /**

package/esm/FunnelChart/FunnelPlot.d.ts

@@ -2,6 +2,11 @@ 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.

package/esm/FunnelChart/FunnelPlot.js

@@ -1,29 +1,20 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["onItemClick"];
+const _excluded = ["onItemClick", "gap"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
-import { getCurveFactory, cartesianSeriesTypes } from '@mui/x-charts/internals';
+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 { funnelHorizontalStepCurve, funnelVerticalStepCurve } from "./funnelStepCurve.js";
 import { useFunnelSeriesContext } from "../hooks/useFunnelSeries.js";
+import { getFunnelCurve } from "./curves/index.js";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 cartesianSeriesTypes.addType('funnel');
-const getFunnelCurve = (curve, isHorizontal) => {
-  if (curve === 'step') {
-    return isHorizontal ? funnelHorizontalStepCurve : funnelVerticalStepCurve;
-  }
-  if (curve === 'bump') {
-    return isHorizontal ? getCurveFactory('bumpX') : getCurveFactory('bumpY');
-  }
-  return getCurveFactory(curve ?? 'linear');
-};
-const useAggregatedData = () => {
+const useAggregatedData = gap => {
   const seriesData = useFunnelSeriesContext();
   const {
     xAxis,
@@ -55,7 +46,6 @@ const useAggregatedData = () => {
       const bandWidth = (isXAxisBand || isYAxisBand) && baseScaleConfig.scale?.bandwidth() || 0;
       const xScale = xAxis[xAxisId].scale;
       const yScale = yAxis[yAxisId].scale;
-      const curve = getFunnelCurve(currentSeries.curve, isHorizontal);
       const xPosition = (value, bandIndex, stackOffset, useBand) => {
         if (isXAxisBand) {
           const position = xScale(bandIndex);
@@ -70,7 +60,17 @@ const useAggregatedData = () => {
         }
         return yScale(isHorizontal ? value : value + (stackOffset || 0));
       };
-      return currentSeries.dataPoints.map((values, dataIndex) => {
+      const allY = currentSeries.dataPoints.flatMap((d, dataIndex) => d.flatMap(v => yPosition(v.y, baseScaleConfig.data?.[dataIndex], v.stackOffset, v.useBandWidth)));
+      const allX = currentSeries.dataPoints.flatMap((d, dataIndex) => d.flatMap(v => xPosition(v.x, baseScaleConfig.data?.[dataIndex], v.stackOffset, v.useBandWidth)));
+      const minPoint = {
+        x: Math.min(...allX),
+        y: Math.min(...allY)
+      };
+      const maxPoint = {
+        x: Math.max(...allX),
+        y: Math.max(...allY)
+      };
+      return currentSeries.dataPoints.flatMap((values, dataIndex) => {
         const color = currentSeries.data[dataIndex].color;
         const id = `${seriesId}-${dataIndex}`;
         const sectionLabel = typeof currentSeries.sectionLabel === 'function' ? currentSeries.sectionLabel({
@@ -78,6 +78,15 @@ const useAggregatedData = () => {
           seriesId,
           value: currentSeries.data[dataIndex].value
         }) : currentSeries.sectionLabel;
+        const curve = getFunnelCurve(currentSeries.curve, {
+          isHorizontal,
+          gap,
+          position: dataIndex,
+          sections: currentSeries.dataPoints.length,
+          borderRadius: currentSeries.borderRadius,
+          min: minPoint,
+          max: maxPoint
+        });
         const line = d3Line().x(d => xPosition(d.x, baseScaleConfig.data?.[dataIndex], d.stackOffset, d.useBandWidth)).y(d => yPosition(d.y, baseScaleConfig.data?.[dataIndex], d.stackOffset, d.useBandWidth)).curve(curve);
         return {
           d: line(values),
@@ -85,6 +94,7 @@ const useAggregatedData = () => {
           id,
           seriesId,
           dataIndex,
+          variant: currentSeries.variant,
           label: sectionLabel !== false && _extends({}, positionLabel(_extends({}, sectionLabel, {
             xPosition,
             yPosition,
@@ -101,29 +111,32 @@ const useAggregatedData = () => {
       });
     });
     return result.flat();
-  }, [seriesData, xAxis, xAxisIds, yAxis, yAxisIds]);
+  }, [seriesData, xAxis, xAxisIds, yAxis, yAxisIds, gap]);
   return allData;
 };
 function FunnelPlot(props) {
   const {
-      onItemClick
+      onItemClick,
+      gap
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const theme = useTheme();
-  const data = useAggregatedData();
+  const data = useAggregatedData(gap);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [data.map(({
       d,
       color,
       id,
       seriesId,
-      dataIndex
+      dataIndex,
+      variant
     }) => /*#__PURE__*/_createElement(FunnelSection, _extends({}, other, {
       d: d,
       color: color,
       key: id,
       dataIndex: dataIndex,
       seriesId: seriesId,
+      variant: variant,
       onClick: onItemClick && (event => {
         onItemClick(event, {
           type: 'funnel',
@@ -164,6 +177,11 @@ process.env.NODE_ENV !== "production" ? FunnelPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * The gap, in pixels, between funnel sections.
+   * @default 0
+   */
+  gap: PropTypes.number,
   /**
    * Callback fired when a funnel item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/esm/FunnelChart/FunnelSection.d.ts

@@ -6,6 +6,7 @@ export interface FunnelSectionProps extends Omit<React.SVGProps<SVGPathElement>,
   dataIndex: number;
   color: string;
   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>, {}>;
 /**

package/esm/FunnelChart/FunnelSection.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["seriesId", "dataIndex", "classes", "color", "onClick", "className"];
+const _excluded = ["seriesId", "dataIndex", "classes", "color", "onClick", "className", "variant"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { useInteractionItemProps, consumeSlots } from '@mui/x-charts/internals';
@@ -11,7 +11,7 @@ import clsx from 'clsx';
 import { useUtilityClasses } from "./funnelSectionClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const FunnelSectionPath = styled('path')(() => ({
-  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'
+  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in, fill-opacity 0.2s ease-in, filter 0.2s ease-in'
 }));
 
 /**
@@ -26,7 +26,8 @@ const FunnelSection = consumeSlots('MuiFunnelSection', 'funnelSection', {
       classes,
       color,
       onClick,
-      className
+      className,
+      variant = 'filled'
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const interactionProps = useInteractionItemProps({
@@ -41,14 +42,18 @@ const FunnelSection = consumeSlots('MuiFunnelSection', 'funnelSection', {
     seriesId,
     dataIndex
   });
+  const isOutlined = variant === 'outlined';
   return /*#__PURE__*/_jsx(FunnelSectionPath, _extends({}, interactionProps, {
-    filter: isHighlighted ? 'brightness(120%)' : undefined,
-    opacity: isFaded ? 0.3 : 1,
+    filter: isHighlighted && !isOutlined ? 'brightness(120%)' : undefined,
+    opacity: isFaded && !isOutlined ? 0.3 : 1,
     fill: color,
-    stroke: "none",
+    stroke: isOutlined ? color : 'none',
+    fillOpacity: isOutlined && !isHighlighted ? 0.4 : 1,
+    strokeOpacity: 1,
+    strokeWidth: isOutlined ? 1.5 : 0,
     cursor: onClick ? 'pointer' : 'unset',
     onClick: onClick,
-    className: clsx(classes?.root, className, isHighlighted && classes?.highlighted, isFaded && classes?.faded)
+    className: clsx(classes?.root, className, isOutlined ? classes?.outlined : classes?.filled, isHighlighted && classes?.highlighted, isFaded && classes?.faded)
   }, other, {
     ref: ref
   }));

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

@@ -0,0 +1,8 @@
+import { Point } from "./curve.types.js";
+/**
+ * Draws a polygon with rounded corners
+ * @param {CanvasRenderingContext2D} ctx The canvas context
+ * @param {Array} points A list of `{x, y}` points
+ * @param {number} radius how much to round the corners
+ */
+export declare function borderRadiusPolygon(ctx: CanvasRenderingContext2D, points: Point[], radius: number | number[]): void;

package/esm/FunnelChart/curves/borderRadiusPolygon.js

@@ -0,0 +1,36 @@
+const distance = (p1, p2) => Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2);
+const lerp = (a, b, x) => a + (b - a) * x;
+const lerp2D = (p1, p2, t) => ({
+  x: lerp(p1.x, p2.x, t),
+  y: lerp(p1.y, p2.y, t)
+});
+
+/**
+ * Draws a polygon with rounded corners
+ * @param {CanvasRenderingContext2D} ctx The canvas context
+ * @param {Array} points A list of `{x, y}` points
+ * @param {number} radius how much to round the corners
+ */
+export function borderRadiusPolygon(ctx, points, radius) {
+  const numPoints = points.length;
+  radius = Array.isArray(radius) ? radius : Array(numPoints).fill(radius);
+  const corners = [];
+  for (let i = 0; i < numPoints; i += 1) {
+    const lastPoint = points[i];
+    const thisPoint = points[(i + 1) % numPoints];
+    const nextPoint = points[(i + 2) % numPoints];
+    const lastEdgeLength = distance(lastPoint, thisPoint);
+    const lastOffsetDistance = Math.min(lastEdgeLength / 2, radius[i] ?? 0);
+    const start = lerp2D(thisPoint, lastPoint, lastOffsetDistance / lastEdgeLength);
+    const nextEdgeLength = distance(nextPoint, thisPoint);
+    const nextOffsetDistance = Math.min(nextEdgeLength / 2, radius[i] ?? 0);
+    const end = lerp2D(thisPoint, nextPoint, nextOffsetDistance / nextEdgeLength);
+    corners.push([start, thisPoint, end]);
+  }
+  ctx.moveTo(corners[0][0].x, corners[0][0].y);
+  for (const [start, ctrl, end] of corners) {
+    ctx.lineTo(start.x, start.y);
+    ctx.quadraticCurveTo(ctrl.x, ctrl.y, end.x, end.y);
+  }
+  ctx.closePath();
+}

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

@@ -0,0 +1,27 @@
+import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
+import { CurveOptions } from "./curve.types.js";
+/**
+ * This is a custom "bump" curve generator.
+ * It draws smooth curves for the 4 provided points,
+ * with the option to add a gap between sections while also properly handling the border radius.
+ *
+ * The implementation is based on the d3-shape bump curve generator.
+ * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/bump.js
+ */
+export declare class Bump implements CurveGenerator {
+  private context;
+  private x;
+  private y;
+  private currentPoint;
+  private isHorizontal;
+  private gap;
+  constructor(context: CanvasRenderingContext2D, {
+    isHorizontal,
+    gap
+  }: CurveOptions);
+  areaStart(): void;
+  areaEnd(): void;
+  lineStart(): void;
+  lineEnd(): void;
+  point(x: number, y: number): void;
+}

package/esm/FunnelChart/curves/bump.js

@@ -0,0 +1,74 @@
+/* eslint-disable class-methods-use-this */
+
+/**
+ * This is a custom "bump" curve generator.
+ * It draws smooth curves for the 4 provided points,
+ * with the option to add a gap between sections while also properly handling the border radius.
+ *
+ * The implementation is based on the d3-shape bump curve generator.
+ * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/bump.js
+ */
+export class Bump {
+  constructor(context, {
+    isHorizontal,
+    gap
+  }) {
+    this.context = void 0;
+    this.x = NaN;
+    this.y = NaN;
+    this.currentPoint = 0;
+    this.isHorizontal = false;
+    this.gap = 0;
+    this.context = context;
+    this.isHorizontal = isHorizontal ?? false;
+    this.gap = (gap ?? 0) / 2;
+  }
+  areaStart() {}
+  areaEnd() {}
+  lineStart() {}
+  lineEnd() {}
+  point(x, y) {
+    x = +x;
+    y = +y;
+
+    // 0 is the top-left corner.
+    if (this.isHorizontal) {
+      if (this.currentPoint === 0) {
+        this.context.moveTo(x + this.gap, y);
+        this.context.lineTo(x + this.gap, y);
+      } else if (this.currentPoint === 1) {
+        this.context.bezierCurveTo((this.x + x) / 2, this.y, (this.x + x) / 2, y, x - this.gap, y);
+      } else if (this.currentPoint === 2) {
+        this.context.lineTo(x - this.gap, y);
+      } else {
+        this.context.bezierCurveTo((this.x + x) / 2, this.y, (this.x + x) / 2, y, x + this.gap, y);
+      }
+      if (this.currentPoint === 3) {
+        this.context.closePath();
+      }
+      this.currentPoint += 1;
+      this.x = x;
+      this.y = y;
+      return;
+    }
+
+    // 0 is the top-right corner.
+    if (this.currentPoint === 0) {
+      // X from Y
+      this.context.moveTo(x, y + this.gap);
+      this.context.lineTo(x, y + this.gap);
+    } else if (this.currentPoint === 1) {
+      this.context.bezierCurveTo(this.x, (this.y + y) / 2, x, (this.y + y) / 2, x, y - this.gap);
+    } else if (this.currentPoint === 2) {
+      this.context.lineTo(x, y - this.gap);
+    } else {
+      this.context.bezierCurveTo(this.x, (this.y + y) / 2, x, (this.y + y) / 2, x, y + this.gap);
+    }
+    if (this.currentPoint === 3) {
+      this.context.closePath();
+    }
+    this.currentPoint += 1;
+    this.x = x;
+    this.y = y;
+  }
+}