@mui/x-charts-pro 9.0.0-alpha.0 → 9.0.0-alpha.2

package/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.mjs

@@ -0,0 +1,178 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { warnOnce } from '@mui/x-internals/warning';
+import { getChartPoint, getCartesianAxisIndex, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartsInteractionIsInitialized, defaultizeXAxis, defaultizeYAxis } from '@mui/x-charts/internals';
+import { selectorChartXAxis, selectorChartYAxis } from "./useChartFunnelAxisRendering.selectors.mjs";
+export const useChartFunnelAxis = ({
+  params,
+  store,
+  instance
+}) => {
+  const {
+    chartsLayerContainerRef
+  } = instance;
+  const {
+    xAxis,
+    yAxis,
+    dataset,
+    gap
+  } = params;
+  if (process.env.NODE_ENV !== 'production') {
+    const ids = [...(xAxis ?? []), ...(yAxis ?? [])].filter(axis => axis.id).map(axis => axis.id);
+    const duplicates = new Set(ids.filter((id, index) => ids.indexOf(id) !== index));
+    if (duplicates.size > 0) {
+      warnOnce([`MUI X Charts: The following axis ids are duplicated: ${Array.from(duplicates).join(', ')}.`, `Please make sure that each axis has a unique id.`].join('\n'), 'error');
+    }
+  }
+  const drawingArea = store.use(selectorChartDrawingArea);
+  const isInteractionEnabled = store.use(selectorChartsInteractionIsInitialized);
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    store.update({
+      funnel: {
+        gap: gap ?? 0
+      },
+      cartesianAxis: {
+        axesGap: 0,
+        x: defaultizeXAxis(xAxis, dataset, 0),
+        y: defaultizeYAxis(yAxis, dataset, 0)
+      }
+    });
+  }, [drawingArea, xAxis, yAxis, dataset, store, gap]);
+  React.useEffect(() => {
+    const element = chartsLayerContainerRef.current;
+    if (!isInteractionEnabled || !element || params.disableAxisListener) {
+      return () => {};
+    }
+
+    // Clean the interaction when the mouse leaves the chart.
+    const moveEndHandler = instance.addInteractionListener('moveEnd', event => {
+      if (!event.detail.activeGestures.pan) {
+        instance.cleanInteraction?.();
+      }
+    });
+    const panEndHandler = instance.addInteractionListener('panEnd', event => {
+      if (!event.detail.activeGestures.move) {
+        instance.cleanInteraction?.();
+      }
+    });
+    const pressEndHandler = instance.addInteractionListener('quickPressEnd', event => {
+      if (!event.detail.activeGestures.move && !event.detail.activeGestures.pan) {
+        instance.cleanInteraction?.();
+      }
+    });
+    const gestureHandler = event => {
+      const srvEvent = event.detail.srcEvent;
+      const target = event.detail.target;
+      const svgPoint = getChartPoint(element, srvEvent);
+      // Release the pointer capture if we are panning, as this would cause the tooltip to
+      // be locked to the first "section" it touches.
+      if (event.detail.srcEvent.buttons >= 1 && target?.hasPointerCapture(event.detail.srcEvent.pointerId)) {
+        target?.releasePointerCapture(event.detail.srcEvent.pointerId);
+      }
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y, target)) {
+        instance.cleanInteraction?.();
+        return;
+      }
+      instance.setPointerCoordinate?.(svgPoint);
+    };
+    const moveHandler = instance.addInteractionListener('move', gestureHandler);
+    const panHandler = instance.addInteractionListener('pan', gestureHandler);
+    const pressHandler = instance.addInteractionListener('quickPress', gestureHandler);
+    return () => {
+      moveHandler.cleanup();
+      moveEndHandler.cleanup();
+      panHandler.cleanup();
+      panEndHandler.cleanup();
+      pressHandler.cleanup();
+      pressEndHandler.cleanup();
+    };
+  }, [chartsLayerContainerRef, instance, params.disableAxisListener, isInteractionEnabled]);
+  React.useEffect(() => {
+    const element = chartsLayerContainerRef.current;
+    const onAxisClick = params.onAxisClick;
+    if (element === null || !onAxisClick) {
+      return () => {};
+    }
+    const axisClickHandler = instance.addInteractionListener('tap', event => {
+      const {
+        axis: xAxisWithScale,
+        axisIds: xAxisIds
+      } = selectorChartXAxis(store.state);
+      const {
+        axis: yAxisWithScale,
+        axisIds: yAxisIds
+      } = selectorChartYAxis(store.state);
+      const processedSeries = selectorChartSeriesProcessed(store.state);
+      const usedXAxis = xAxisIds[0];
+      const usedYAxis = yAxisIds[0];
+      let dataIndex = null;
+      let isXAxis = false;
+      const svgPoint = getChartPoint(element, event.detail.srcEvent);
+      const xIndex = getCartesianAxisIndex(xAxisWithScale[usedXAxis], svgPoint.x);
+      isXAxis = xIndex !== -1;
+      dataIndex = isXAxis ? xIndex : getCartesianAxisIndex(yAxisWithScale[usedYAxis], svgPoint.y);
+      const USED_AXIS_ID = isXAxis ? xAxisIds[0] : yAxisIds[0];
+      if (dataIndex == null || dataIndex === -1) {
+        return;
+      }
+
+      // The .data exist because otherwise the dataIndex would be null or -1.
+      const axisValue = (isXAxis ? xAxisWithScale : yAxisWithScale)[USED_AXIS_ID].data[dataIndex];
+      const seriesValues = {};
+      processedSeries.funnel?.seriesOrder.forEach(seriesId => {
+        const seriesItem = processedSeries.funnel.series[seriesId];
+        const providedXAxisId = seriesItem.xAxisId;
+        const providedYAxisId = seriesItem.yAxisId;
+        const axisKey = isXAxis ? providedXAxisId : providedYAxisId;
+        if (axisKey === undefined || axisKey === USED_AXIS_ID) {
+          seriesValues[seriesId] = seriesItem.data[dataIndex].value;
+        }
+      });
+      onAxisClick(event.detail.srcEvent, {
+        dataIndex,
+        axisValue,
+        seriesValues
+      });
+    });
+    return () => {
+      axisClickHandler.cleanup();
+    };
+  }, [params.onAxisClick, chartsLayerContainerRef, store, instance]);
+  return {};
+};
+useChartFunnelAxis.params = {
+  xAxis: true,
+  yAxis: true,
+  gap: true,
+  dataset: true,
+  onAxisClick: true,
+  disableAxisListener: true
+};
+useChartFunnelAxis.getDefaultizedParams = ({
+  params
+}) => {
+  return _extends({}, params, {
+    gap: params.gap ?? 0,
+    defaultizedXAxis: defaultizeXAxis(params.xAxis, params.dataset, 0),
+    defaultizedYAxis: defaultizeYAxis(params.yAxis, params.dataset, 0)
+  });
+};
+useChartFunnelAxis.getInitialState = params => {
+  return {
+    funnel: {
+      gap: params.gap ?? 0
+    },
+    cartesianAxis: {
+      axesGap: 0,
+      x: params.defaultizedXAxis,
+      y: params.defaultizedYAxis
+    }
+  };
+};

package/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.types.d.mts

@@ -0,0 +1,28 @@
+import { type ChartPluginSignature, type UseChartCartesianAxisDefaultizedParameters, type UseChartCartesianAxisParameters, type UseChartCartesianAxisState, type UseChartInteractionSignature, type UseChartSeriesSignature, type ChartsAxisData } from '@mui/x-charts/internals';
+export type UseChartFunnelAxisSignature = ChartPluginSignature<{
+  params: Omit<UseChartCartesianAxisParameters, 'onAxisClick' | 'onHighlightedAxisChange' | 'highlightedAxis' | 'onTooltipAxisChange' | 'tooltipAxis' | 'axesGap'> & {
+    /**
+     * The gap, in pixels, between funnel sections.
+     * @default 0
+     */
+    gap?: number;
+    /**
+     * The function called for onClick events.
+     * 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.
+     */
+    onAxisClick?: (event: MouseEvent, data: null | ChartsAxisData) => void;
+  };
+  defaultizedParams: Omit<UseChartCartesianAxisDefaultizedParameters, 'onAxisClick' | 'onHighlightedAxisChange' | 'highlightedAxis' | 'axesGap'> & {
+    gap: number;
+    onAxisClick?: (event: MouseEvent, data: null | ChartsAxisData) => void;
+  };
+  state: Pick<UseChartCartesianAxisState, 'cartesianAxis'> & {
+    funnel: {
+      gap: number;
+    };
+  };
+  dependencies: [UseChartSeriesSignature<'funnel'>];
+  optionalDependencies: [UseChartInteractionSignature];
+}>;

package/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.types.d.ts

@@ -1,6 +1,6 @@
 import { type ChartPluginSignature, type UseChartCartesianAxisDefaultizedParameters, type UseChartCartesianAxisParameters, type UseChartCartesianAxisState, type UseChartInteractionSignature, type UseChartSeriesSignature, type ChartsAxisData } from '@mui/x-charts/internals';
 export type UseChartFunnelAxisSignature = ChartPluginSignature<{
-  params: Omit<UseChartCartesianAxisParameters, 'onAxisClick' | 'onHighlightedAxisChange' | 'highlightedAxis' | 'axesGap'> & {
+  params: Omit<UseChartCartesianAxisParameters, 'onAxisClick' | 'onHighlightedAxisChange' | 'highlightedAxis' | 'onTooltipAxisChange' | 'tooltipAxis' | 'axesGap'> & {
     /**
      * The gap, in pixels, between funnel sections.
      * @default 0

package/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.d.mts

@@ -0,0 +1,18 @@
+import { type ChartState } from '@mui/x-charts/internals';
+import { type UseChartFunnelAxisSignature } from "./useChartFunnelAxis.types.mjs";
+export declare const selectorFunnel: (state: ChartState<[], [UseChartFunnelAxisSignature]>) => {
+  gap: number;
+} | undefined;
+export declare const selectorFunnelGap: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<Pick<import("@mui/x-charts/internals").UseChartCartesianAxisState, "cartesianAxis"> & {
+  funnel: {
+    gap: number;
+  };
+}> & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+}) => number;
+export declare const selectorChartXAxis: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+}) => import("./computeAxisValue.mjs").ComputeResult<import("@mui/x-charts").ChartsXAxisProps>;
+export declare const selectorChartYAxis: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+}) => import("./computeAxisValue.mjs").ComputeResult<import("@mui/x-charts").ChartsYAxisProps>;

package/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.mjs

@@ -0,0 +1,21 @@
+import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
+import { selectorChartSeriesConfig, selectorChartSeriesProcessed, selectorChartDrawingArea, selectorChartRawXAxis, selectorChartRawYAxis } from '@mui/x-charts/internals';
+import { computeAxisValue } from "./computeAxisValue.mjs";
+export const selectorFunnel = state => state.funnel;
+export const selectorFunnelGap = createSelector(selectorFunnel, funnel => funnel?.gap ?? 0);
+export const selectorChartXAxis = createSelectorMemoized(selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorFunnelGap, (axis, drawingArea, formattedSeries, seriesConfig, gap) => computeAxisValue({
+  drawingArea,
+  formattedSeries,
+  axis,
+  seriesConfig,
+  axisDirection: 'x',
+  gap
+}));
+export const selectorChartYAxis = createSelectorMemoized(selectorChartRawYAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorFunnelGap, (axis, drawingArea, formattedSeries, seriesConfig, gap) => computeAxisValue({
+  drawingArea,
+  formattedSeries,
+  axis,
+  seriesConfig,
+  axisDirection: 'y',
+  gap
+}));

package/FunnelChart/funnelPlotSlots.types.d.mts

@@ -0,0 +1,31 @@
+import type * as React from 'react';
+import type { FunnelSectionProps } from "./FunnelSection.mjs";
+import { type FunnelSectionLabelProps } from "./FunnelSectionLabel.mjs";
+export interface FunnelPlotSlots {
+  /**
+   * Custom component for funnel section.
+   * @default FunnelSection
+   */
+  funnelSection?: React.ElementType<FunnelSectionProps>;
+  /**
+   * Custom component for funnel section label.
+   * @default FunnelSectionLabel
+   */
+  funnelSectionLabel?: React.ElementType<FunnelSectionLabelProps>;
+}
+export interface FunnelPlotSlotProps {
+  funnelSection?: FunnelSectionProps;
+  funnelSectionLabel?: FunnelSectionLabelProps;
+}
+export interface FunnelPlotSlotExtension {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: FunnelPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: FunnelPlotSlotProps;
+}

package/FunnelChart/funnelSectionClasses.d.mts

@@ -0,0 +1,30 @@
+import type { FunnelSectionProps } from "./FunnelSection.mjs";
+import type { FunnelSectionLabelProps } from "./FunnelSectionLabel.mjs";
+export interface FunnelSectionClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /**
+   * Styles applied to the root element if `highlighted={true}`.
+   * @deprecated Use `[data-highlighted]` selector instead.
+   */
+  highlighted: string;
+  /**
+   * Styles applied to the root element if `faded={true}`.
+   * @deprecated Use `[data-faded]` selector instead.
+   */
+  faded: string;
+  /** Styles applied to the root element if `variant="filled"`. */
+  filled: string;
+  /** Styles applied to the root element if `variant="outlined"`. */
+  outlined: string;
+  /** Styles applied to the label element. */
+  label: string;
+  /**
+   * Styles applied to the root element for a specified series.
+   * Needs to be suffixed with the series ID: `.${funnelSectionClasses.series}-${seriesId}`.
+   */
+  series: string;
+}
+export declare const useUtilityClasses: (props: FunnelSectionProps) => Record<"label" | "filled" | "outlined" | "highlighted" | "faded" | "root", string>;
+export declare const useLabelUtilityClasses: (props: FunnelSectionLabelProps) => Record<"label", string>;
+export declare const funnelSectionClasses: FunnelSectionClasses;

package/FunnelChart/funnelSectionClasses.d.ts

@@ -3,9 +3,15 @@ import type { FunnelSectionLabelProps } from "./FunnelSectionLabel.js";
 export interface FunnelSectionClasses {
   /** Styles applied to the root element. */
   root: string;
-  /** Styles applied to the root element if `highlighted={true}`. */
+  /**
+   * Styles applied to the root element if `highlighted={true}`.
+   * @deprecated Use `[data-highlighted]` selector instead.
+   */
   highlighted: string;
-  /** Styles applied to the root element if `faded={true}`. */
+  /**
+   * Styles applied to the root element if `faded={true}`.
+   * @deprecated Use `[data-faded]` selector instead.
+   */
   faded: string;
   /** Styles applied to the root element if `variant="filled"`. */
   filled: string;

package/FunnelChart/funnelSlots.types.d.mts

@@ -0,0 +1,20 @@
+import { type ChartsOverlaySlotProps, type ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
+import { type ChartsTooltipSlotProps, type ChartsTooltipSlots } from '@mui/x-charts/ChartsTooltip';
+import { type ChartsAxisSlotProps, type ChartsAxisSlots, type ChartsSlotProps, type ChartsSlots } from '@mui/x-charts/internals';
+import { type ChartsLegendSlotProps, type ChartsLegendSlots } from '@mui/x-charts/ChartsLegend';
+import { type ChartsToolbarSlotProps, type ChartsToolbarSlots } from '@mui/x-charts/Toolbar';
+import { type FunnelPlotSlotProps, type FunnelPlotSlots } from "./funnelPlotSlots.types.mjs";
+export interface FunnelChartSlots extends ChartsAxisSlots, FunnelPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsAxisSlots, ChartsToolbarSlots, ChartsTooltipSlots<'item' | 'none'>, Partial<ChartsSlots> {}
+export interface FunnelChartSlotProps extends ChartsAxisSlotProps, FunnelPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsAxisSlotProps, ChartsToolbarSlotProps, ChartsTooltipSlotProps<'item' | 'none'>, Partial<ChartsSlotProps> {}
+export interface FunnelChartSlotExtension {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: FunnelChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: FunnelChartSlotProps;
+}

package/FunnelChart/funnelSlots.types.d.ts

@@ -1,17 +1,11 @@
 import { type ChartsOverlaySlotProps, type ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
-import { type ChartsTooltipProps, type ChartsTooltipSlotProps, type ChartsTooltipSlots } from '@mui/x-charts/ChartsTooltip';
+import { type ChartsTooltipSlotProps, type ChartsTooltipSlots } from '@mui/x-charts/ChartsTooltip';
 import { type ChartsAxisSlotProps, type ChartsAxisSlots, type ChartsSlotProps, type ChartsSlots } from '@mui/x-charts/internals';
 import { type ChartsLegendSlotProps, type ChartsLegendSlots } from '@mui/x-charts/ChartsLegend';
 import { type ChartsToolbarSlotProps, type ChartsToolbarSlots } from '@mui/x-charts/Toolbar';
 import { type FunnelPlotSlotProps, type FunnelPlotSlots } from "./funnelPlotSlots.types.js";
-export interface FunnelChartSlots extends ChartsAxisSlots, FunnelPlotSlots, ChartsLegendSlots, ChartsTooltipSlots, ChartsOverlaySlots, ChartsAxisSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
-export interface FunnelChartSlotProps extends ChartsAxisSlotProps, FunnelPlotSlotProps, ChartsLegendSlotProps, Omit<ChartsTooltipSlotProps, 'tooltip'>, ChartsOverlaySlotProps, ChartsAxisSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {
-  /**
-   * Slot props for the tooltip component.
-   * @default {}
-   */
-  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
-}
+export interface FunnelChartSlots extends ChartsAxisSlots, FunnelPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsAxisSlots, ChartsToolbarSlots, ChartsTooltipSlots<'item' | 'none'>, Partial<ChartsSlots> {}
+export interface FunnelChartSlotProps extends ChartsAxisSlotProps, FunnelPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsAxisSlotProps, ChartsToolbarSlotProps, ChartsTooltipSlotProps<'item' | 'none'>, Partial<ChartsSlotProps> {}
 export interface FunnelChartSlotExtension {
   /**
    * Overridable component slots.

package/FunnelChart/get2DExtrema.d.mts

@@ -0,0 +1,3 @@
+import type { Point, PositionGetter } from "./curves/index.mjs";
+import type { FunnelDataPoints } from "./funnel.types.mjs";
+export declare const get2DExtrema: (dataPoints: FunnelDataPoints[][], xPositionGetter: PositionGetter, yPositionGetter: PositionGetter) => [Point, Point];

package/FunnelChart/index.d.mts

@@ -0,0 +1,18 @@
+export { FunnelChart } from "./FunnelChart.mjs";
+/**
+ * @deprecated funnel chart is now stable, import `FunnelChart` instead
+ */
+export declare const Unstable_FunnelChart: import("react").ForwardRefExoticComponent<import("./FunnelChart.mjs").FunnelChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { FunnelChartProps, FunnelSeries } from "./FunnelChart.mjs";
+export * from "./FunnelPlot.mjs";
+export * from "./funnelPlotSlots.types.mjs";
+export * from "./FocusedFunnelSection.mjs";
+export * from "./funnel.types.mjs";
+export * from "./categoryAxis.types.mjs";
+export * from "./funnelSlots.types.mjs";
+export * from "./FunnelChart.plugins.mjs";
+export type { FunnelCurveType } from "./curves/index.mjs";
+export { funnelSectionClasses } from "./funnelSectionClasses.mjs";
+export type { FunnelSectionClasses } from "./funnelSectionClasses.mjs";
+export { FunnelSection } from "./FunnelSection.mjs";
+export { FunnelSectionLabel } from "./FunnelSectionLabel.mjs";

package/FunnelChart/index.d.ts

@@ -2,7 +2,7 @@ export { FunnelChart } from "./FunnelChart.js";
 /**
  * @deprecated funnel chart is now stable, import `FunnelChart` instead
  */
-export declare const Unstable_FunnelChart: import("react").ForwardRefExoticComponent<import("./FunnelChart.js").FunnelChartProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const Unstable_FunnelChart: import("react").ForwardRefExoticComponent<import("./FunnelChart.js").FunnelChartProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { FunnelChartProps, FunnelSeries } from "./FunnelChart.js";
 export * from "./FunnelPlot.js";
 export * from "./funnelPlotSlots.types.js";

package/FunnelChart/index.mjs

@@ -0,0 +1,17 @@
+import { FunnelChart } from "./FunnelChart.mjs";
+export { FunnelChart } from "./FunnelChart.mjs";
+/**
+ * @deprecated funnel chart is now stable, import `FunnelChart` instead
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const Unstable_FunnelChart = FunnelChart;
+export * from "./FunnelPlot.mjs";
+export * from "./funnelPlotSlots.types.mjs";
+export * from "./FocusedFunnelSection.mjs";
+export * from "./funnel.types.mjs";
+export * from "./categoryAxis.types.mjs";
+export * from "./funnelSlots.types.mjs";
+export * from "./FunnelChart.plugins.mjs";
+export { funnelSectionClasses } from "./funnelSectionClasses.mjs";
+export { FunnelSection } from "./FunnelSection.mjs";
+export { FunnelSectionLabel } from "./FunnelSectionLabel.mjs";

package/FunnelChart/labelUtils.d.mts

@@ -0,0 +1,37 @@
+import { type FunnelLabelOptions } from "./funnel.types.mjs";
+import { type Point } from "./curves/index.mjs";
+type AlignReturnType = {
+  textAnchor: FunnelLabelOptions['textAnchor'];
+  dominantBaseline: Exclude<FunnelLabelOptions['dominantBaseline'], 'baseline'>;
+};
+/**
+ * It tries to keep the label inside the bounds of the section based on the position.
+ *
+ * @returns The text anchor and dominant baseline of the label.
+ */
+export declare const alignLabel: ({
+  position,
+  textAnchor,
+  dominantBaseline
+}: Omit<FunnelLabelOptions, "margin">) => AlignReturnType;
+/**
+ * This function calculates the position of the label based on the position and margin.
+ *
+ * It is quite complex, because it needs to calculate the position based on the position of the points of a rectangle.
+ * And we are manually calculating each possible position of the label.
+ *
+ * @returns The x and y position of the label.
+ */
+export declare const positionLabel: ({
+  position,
+  offset,
+  isHorizontal,
+  values
+}: Omit<FunnelLabelOptions, "textAnchor" | "dominantBaseline"> & {
+  isHorizontal: boolean;
+  values: readonly Point[];
+}) => {
+  x: number;
+  y: number;
+};
+export {};

package/FunnelChart/seriesConfig/index.js

@@ -25,5 +25,7 @@ const funnelSeriesConfig = exports.funnelSeriesConfig = {
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
   keyboardFocusHandler: _keyboardFocusHandler.default,
   identifierSerializer: _internals.identifierSerializerSeriesIdDataIndex,
-  identifierCleaner: _internals.identifierCleanerSeriesIdDataIndex
+  identifierCleaner: _internals.identifierCleanerSeriesIdDataIndex,
+  isHighlightedCreator: _internals.createIsHighlighted,
+  isFadedCreator: _internals.createIsFaded
 };

package/FunnelChart/seriesConfig/index.mjs

@@ -0,0 +1,24 @@
+import { identifierSerializerSeriesIdDataIndex, identifierCleanerSeriesIdDataIndex, createIsHighlighted, createIsFaded } from '@mui/x-charts/internals';
+import { getExtremumX, getExtremumY } from "./extremums.mjs";
+import seriesProcessor from "./seriesProcessor.mjs";
+import getColor from "./getColor.mjs";
+import legendGetter from "./legend.mjs";
+import tooltipGetter from "./tooltip.mjs";
+import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.mjs";
+import tooltipItemPositionGetter from "./tooltipPosition.mjs";
+import keyboardFocusHandler from "./keyboardFocusHandler.mjs";
+export const funnelSeriesConfig = {
+  seriesProcessor,
+  colorProcessor: getColor,
+  legendGetter,
+  tooltipGetter,
+  tooltipItemPositionGetter,
+  xExtremumGetter: getExtremumX,
+  yExtremumGetter: getExtremumY,
+  getSeriesWithDefaultValues,
+  keyboardFocusHandler,
+  identifierSerializer: identifierSerializerSeriesIdDataIndex,
+  identifierCleaner: identifierCleanerSeriesIdDataIndex,
+  isHighlightedCreator: createIsHighlighted,
+  isFadedCreator: createIsFaded
+};

package/FunnelChart/seriesConfig/keyboardFocusHandler.js

@@ -6,18 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _internals = require("@mui/x-charts/internals");
 const outSeriesTypes = new Set(['funnel']);
-const keyboardFocusHandler = event => {
-  switch (event.key) {
-    case 'ArrowRight':
-      return (0, _internals.createGetNextIndexFocusedItem)(outSeriesTypes);
-    case 'ArrowLeft':
-      return (0, _internals.createGetPreviousIndexFocusedItem)(outSeriesTypes);
-    case 'ArrowDown':
-      return (0, _internals.createGetPreviousSeriesFocusedItem)(outSeriesTypes);
-    case 'ArrowUp':
-      return (0, _internals.createGetNextSeriesFocusedItem)(outSeriesTypes);
-    default:
-      return null;
-  }
-};
+const keyboardFocusHandler = (0, _internals.createCommonKeyboardFocusHandler)(outSeriesTypes);
 var _default = exports.default = keyboardFocusHandler;

package/FunnelChart/seriesConfig/keyboardFocusHandler.mjs

@@ -0,0 +1,4 @@
+import { createCommonKeyboardFocusHandler } from '@mui/x-charts/internals';
+const outSeriesTypes = new Set(['funnel']);
+const keyboardFocusHandler = createCommonKeyboardFocusHandler(outSeriesTypes);
+export default keyboardFocusHandler;

package/FunnelChart/seriesConfig/tooltipPosition.mjs

@@ -0,0 +1,56 @@
+import { findMinMax } from '@mui/x-charts/internals';
+import { createPositionGetter } from "../coordinateMapper.mjs";
+const tooltipItemPositionGetter = params => {
+  const {
+    series,
+    identifier,
+    axesConfig,
+    placement
+  } = params;
+  if (!identifier || identifier.dataIndex === undefined) {
+    return null;
+  }
+  const itemSeries = series.funnel?.series[identifier.seriesId];
+  if (itemSeries == null) {
+    return null;
+  }
+  if (axesConfig.x === undefined || axesConfig.y === undefined) {
+    return null;
+  }
+  const isHorizontal = itemSeries.layout === 'horizontal';
+  const baseScaleConfig = isHorizontal ? axesConfig.x : axesConfig.y;
+
+  // FIXME gap should be obtained from the store.
+  // Maybe moving it to the series would be a good idea similar to what we do with bar charts and their stackingGroups
+  const gap = 0;
+  const xPosition = createPositionGetter(axesConfig.x.scale, isHorizontal, gap, baseScaleConfig.data);
+  const yPosition = createPositionGetter(axesConfig.y.scale, !isHorizontal, gap, baseScaleConfig.data);
+  const allY = itemSeries.dataPoints[identifier.dataIndex].map(v => yPosition(v.y, identifier.dataIndex, v.stackOffset, v.useBandWidth));
+  const allX = itemSeries.dataPoints[identifier.dataIndex].map(v => xPosition(v.x, identifier.dataIndex, v.stackOffset, v.useBandWidth));
+  const [x0, x1] = findMinMax(allX);
+  const [y0, y1] = findMinMax(allY);
+  switch (placement) {
+    case 'bottom':
+      return {
+        x: (x1 + x0) / 2,
+        y: y1
+      };
+    case 'left':
+      return {
+        x: x0,
+        y: (y1 + y0) / 2
+      };
+    case 'right':
+      return {
+        x: x1,
+        y: (y1 + y0) / 2
+      };
+    case 'top':
+    default:
+      return {
+        x: (x1 + x0) / 2,
+        y: y0
+      };
+  }
+};
+export default tooltipItemPositionGetter;

package/FunnelChart/useFunnelChartProps.d.mts

@@ -0,0 +1,26 @@
+import { type ChartsOverlayProps } from '@mui/x-charts/ChartsOverlay';
+import { type ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
+import { type ChartsLegendSlotExtension } from '@mui/x-charts/ChartsLegend';
+import { type ChartsAxisHighlightProps } from '@mui/x-charts/ChartsAxisHighlight';
+import type { ChartsWrapperProps } from '@mui/x-charts/ChartsWrapper';
+import { type FunnelChartPluginSignatures } from "./FunnelChart.plugins.mjs";
+import { type FunnelPlotProps } from "./FunnelPlot.mjs";
+import type { FunnelChartProps } from "./FunnelChart.mjs";
+import { type ChartContainerProProps } from "../ChartContainerPro/index.mjs";
+/**
+ * A helper function that extracts FunnelChartProps from the input props
+ * and returns an object with props for the children components of FunnelChart.
+ *
+ * @param props The input props for FunnelChart
+ * @returns An object with props for the children components of FunnelChart
+ */
+export declare const useFunnelChartProps: (props: FunnelChartProps) => {
+  chartContainerProps: ChartContainerProProps<"funnel", FunnelChartPluginSignatures>;
+  funnelPlotProps: FunnelPlotProps;
+  overlayProps: ChartsOverlayProps;
+  chartsAxisProps: ChartsAxisProps;
+  legendProps: ChartsLegendSlotExtension;
+  chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
+  axisHighlightProps: ChartsAxisHighlightProps;
+  children: import("react").ReactNode;
+};

package/FunnelChart/useFunnelChartProps.js

@@ -118,7 +118,6 @@ const useFunnelChartProps = props => {
     sx,
     highlightedItem,
     onHighlightChange,
-    className,
     apiRef,
     plugins: _FunnelChart.FUNNEL_CHART_PLUGINS
   });
@@ -142,6 +141,7 @@ const useFunnelChartProps = props => {
   };
   const chartsWrapperProps = {
     sx,
+    className,
     legendPosition: props.slotProps?.legend?.position,
     legendDirection: props.slotProps?.legend?.direction,
     hideLegend: props.hideLegend ?? false