@mui/x-charts-pro 8.27.2 → 9.0.0-alpha.1

package/ChartsContainer/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartsContainer = require("@mui/x-charts/ChartsContainer");
+Object.keys(_ChartsContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsContainer[key];
+    }
+  });
+});

package/ChartsContainerPro/ChartsContainerPro.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { type ChartsSurfaceProps } from '@mui/x-charts/ChartsSurface';
+import { type ChartAnyPluginSignature, type ChartSeriesType } from '@mui/x-charts/internals';
+import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+import { type ChartDataProviderProProps } from "../ChartDataProviderPro/index.js";
+export interface ChartsContainerProSlots {}
+export interface ChartsContainerProSlotProps {}
+export type ChartsContainerProProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = ChartDataProviderProProps<TSeries, TSignatures> & ChartsSurfaceProps;
+type ChartsContainerProComponent = <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartsContainerProProps<TSeries, TSignatures> & {
+  ref?: React.ForwardedRef<SVGSVGElement>;
+}) => React.JSX.Element;
+/**
+ * It sets up the data providers as well as the `<svg>` for the chart.
+ *
+ * This is a combination of both the `ChartDataProviderPro` and `ChartsSurface` components.
+ *
+ * Demos:
+ *
+ * - [Composition](https://mui.com/x/api/charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartsContainerPro API](https://mui.com/x/api/charts/charts-container-pro/)
+ *
+ * @example
+ * ```jsx
+ * <ChartsContainerPro
+ *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
+ *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
+ * >
+ *    <BarPlot />
+ *    <ChartsXAxis axisId="x-axis" />
+ * </ChartsContainerPro>
+ * ```
+ */
+declare const ChartsContainerPro: ChartsContainerProComponent;
+export { ChartsContainerPro };

package/ChartsContainerPro/ChartsContainerPro.js

@@ -0,0 +1,188 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsContainerPro = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ChartsSurface = require("@mui/x-charts/ChartsSurface");
+var _useChartsContainerProProps = require("./useChartsContainerProProps");
+var _ChartDataProviderPro = require("../ChartDataProviderPro");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * It sets up the data providers as well as the `<svg>` for the chart.
+ *
+ * This is a combination of both the `ChartDataProviderPro` and `ChartsSurface` components.
+ *
+ * Demos:
+ *
+ * - [Composition](https://mui.com/x/api/charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartsContainerPro API](https://mui.com/x/api/charts/charts-container-pro/)
+ *
+ * @example
+ * ```jsx
+ * <ChartsContainerPro
+ *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
+ *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
+ * >
+ *    <BarPlot />
+ *    <ChartsXAxis axisId="x-axis" />
+ * </ChartsContainerPro>
+ * ```
+ */
+const ChartsContainerPro = exports.ChartsContainerPro = /*#__PURE__*/React.forwardRef(function ChartsContainerProInner(props, ref) {
+  const {
+    chartDataProviderProProps,
+    children,
+    chartsSurfaceProps
+  } = (0, _useChartsContainerProProps.useChartsContainerProProps)(props);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+      ref: ref,
+      children: children
+    }))
+  }));
+});
+
+// @ts-expect-error the type coercion breaks the prop types
+if (process.env.NODE_ENV !== "production") ChartsContainerPro.displayName = "ChartsContainerPro";
+process.env.NODE_ENV !== "production" ? ChartsContainerPro.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      setZoomData: _propTypes.default.func.isRequired
+    })
+  }),
+  children: _propTypes.default.node,
+  className: _propTypes.default.string,
+  /**
+   * Color palette used to colorize multiple series.
+   * @default blueberryTwilightPalette
+   */
+  colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
+  dataset: _propTypes.default.arrayOf(_propTypes.default.object),
+  desc: _propTypes.default.string,
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener: _propTypes.default.bool,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   */
+  height: _propTypes.default.number,
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem: _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
+  }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: _propTypes.default.string,
+  /**
+   * The list of zoom data related to each axis.
+   */
+  initialZoom: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    end: _propTypes.default.number.isRequired,
+    start: _propTypes.default.number.isRequired
+  })),
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin: _propTypes.default.shape({
+    bottom: _propTypes.default.number,
+    left: _propTypes.default.number,
+    right: _propTypes.default.number,
+    top: _propTypes.default.number
+  }),
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: _propTypes.default.func,
+  /**
+   * Callback fired when the zoom has changed.
+   *
+   * @param {ZoomData[]} zoomData Updated zoom data.
+   */
+  onZoomChange: _propTypes.default.func,
+  /**
+   * The array of series to display.
+   * Each type of series has its own specificity.
+   * Please refer to the appropriate docs page to learn more about it.
+   */
+  series: _propTypes.default.arrayOf(_propTypes.default.object),
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: _propTypes.default.bool,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  theme: _propTypes.default.oneOf(['dark', 'light']),
+  title: _propTypes.default.string,
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   */
+  width: _propTypes.default.number,
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis: _propTypes.default.arrayOf(_propTypes.default.object),
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis: _propTypes.default.arrayOf(_propTypes.default.object),
+  /**
+   * The configuration of the z-axes.
+   */
+  zAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    }), _propTypes.default.shape({
+      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    })]),
+    data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
+    id: _propTypes.default.string,
+    max: _propTypes.default.number,
+    min: _propTypes.default.number
+  }))
+} : void 0;

package/ChartsContainerPro/index.d.ts

@@ -0,0 +1,9 @@
+import "../typeOverloads/index.js";
+import type { ChartAnyPluginSignature } from '@mui/x-charts/internals';
+import type { ChartProApi as ChartProApiOriginal, ProPluginsPerSeriesType } from "../context/ChartProApi.js";
+import type { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+export * from "./ChartsContainerPro.js";
+/**
+ * @deprecated Use `ChartProApi` from `@mui/x-charts/context` instead.
+ */
+export type ChartProApi<ChartType extends keyof ProPluginsPerSeriesType | undefined = undefined, Signatures extends readonly ChartAnyPluginSignature[] = (ChartType extends keyof ProPluginsPerSeriesType ? ProPluginsPerSeriesType[ChartType] : AllPluginSignatures)> = ChartProApiOriginal<ChartType, Signatures>;

package/ChartsContainerPro/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+require("../typeOverloads");
+var _ChartsContainerPro = require("./ChartsContainerPro");
+Object.keys(_ChartsContainerPro).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsContainerPro[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsContainerPro[key];
+    }
+  });
+});

package/ChartsContainerPro/useChartsContainerProProps.d.ts

@@ -0,0 +1,8 @@
+import { type ChartAnyPluginSignature, type ChartSeriesType, type UseChartsContainerPropsReturnValue } from '@mui/x-charts/internals';
+import type { ChartDataProviderProProps } from "../ChartDataProviderPro/index.js";
+import type { ChartsContainerProProps } from "./ChartsContainerPro.js";
+import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+export type UseChartsContainerProPropsReturnValue<TSeries extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = Pick<UseChartsContainerPropsReturnValue<TSeries, TSignatures>, 'chartsSurfaceProps' | 'children'> & {
+  chartDataProviderProProps: ChartDataProviderProProps<TSeries, TSignatures>;
+};
+export declare const useChartsContainerProProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartsContainerProProps<TSeries, TSignatures>) => UseChartsContainerProPropsReturnValue<TSeries, TSignatures>;

package/ChartsContainerPro/useChartsContainerProProps.js

@@ -0,0 +1,44 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartsContainerProProps = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _internals = require("@mui/x-charts/internals");
+var _allPlugins = require("../internals/plugins/allPlugins");
+const _excluded = ["initialZoom", "zoomData", "onZoomChange", "zoomInteractionConfig", "plugins", "apiRef"];
+const useChartsContainerProProps = props => {
+  const _ref = props,
+    {
+      initialZoom,
+      zoomData,
+      onZoomChange,
+      zoomInteractionConfig,
+      plugins,
+      apiRef
+    } = _ref,
+    baseProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const {
+    chartDataProviderProps,
+    chartsSurfaceProps,
+    children
+  } = (0, _internals.useChartsContainerProps)(baseProps);
+  const chartDataProviderProProps = (0, _extends2.default)({}, chartDataProviderProps, {
+    initialZoom,
+    zoomData,
+    onZoomChange,
+    zoomInteractionConfig,
+    apiRef,
+    plugins: plugins ?? _allPlugins.DEFAULT_PLUGINS
+  });
+  return {
+    chartDataProviderProProps,
+    chartsSurfaceProps,
+    children
+  };
+};
+exports.useChartsContainerProProps = useChartsContainerProProps;

package/FunnelChart/FunnelChart.d.ts

@@ -35,5 +35,5 @@ export interface FunnelChartProps extends Omit<ChartContainerProProps<'funnel',
    */
   axisHighlight?: ChartsAxisHighlightProps;
 }
-declare const FunnelChart: React.ForwardRefExoticComponent<FunnelChartProps & React.RefAttributes<SVGSVGElement>>;
+declare const FunnelChart: React.ForwardRefExoticComponent<FunnelChartProps & React.RefAttributes<HTMLDivElement>>;
 export { FunnelChart };

package/FunnelChart/FunnelChart.js

@@ -47,13 +47,14 @@ const FunnelChart = exports.FunnelChart = /*#__PURE__*/React.forwardRef(function
   const {
     chartDataProviderProProps,
     chartsSurfaceProps
-  } = (0, _useChartContainerProProps.useChartContainerProProps)(chartContainerProps, ref);
+  } = (0, _useChartContainerProProps.useChartContainerProProps)(chartContainerProps);
   const Tooltip = themedProps.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
     gap: themedProps.gap,
     seriesConfig: seriesConfig,
     plugins: _FunnelChart2.FUNNEL_CHART_PLUGINS,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
+      ref: ref,
       children: [!themedProps.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)(_FunnelPlot.FunnelPlot, (0, _extends2.default)({}, funnelPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedFunnelSection.FocusedFunnelSection, {}), children]
       })), !themedProps.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({
@@ -215,8 +216,8 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    */
   hiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['funnel']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['funnel'])
   })),
   /**
    * If `true`, the legend is not rendered.
@@ -229,7 +230,7 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    */
   highlightedItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -259,8 +260,8 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    */
   initialHiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['funnel']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['funnel'])
   })),
   /**
    * If `true`, a loading overlay is displayed.
@@ -342,8 +343,8 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    */
   tooltipItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    type: _propTypes.default.oneOf(['funnel']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['funnel'])
   }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/FunnelChart/FunnelSection.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type SeriesId } from '@mui/x-charts/internals';
 import { type FunnelSectionClasses } from "./funnelSectionClasses.js";
-export interface FunnelSectionProps extends Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> {
+export interface FunnelSectionProps extends Omit<React.SVGProps<SVGPathElement>, 'ref'> {
   seriesId: SeriesId;
   dataIndex: number;
   color: string;

package/FunnelChart/funnel.types.d.ts

@@ -27,7 +27,7 @@ export type FunnelValueType = {
    */
   labelMarkType?: ChartsLabelMarkProps['type'];
 };
-export interface FunnelSeriesType extends Omit<CommonSeriesType<FunnelValueType>, 'color' | 'colorGetter'>, CartesianSeriesType {
+export interface FunnelSeriesType extends Omit<CommonSeriesType<FunnelValueType, 'funnel'>, 'color' | 'colorGetter'>, CartesianSeriesType {
   type: 'funnel';
   /**
    * Data associated to the funnel section.

package/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.js

@@ -15,10 +15,11 @@ var _useChartFunnelAxisRendering = require("./useChartFunnelAxisRendering.select
 const useChartFunnelAxis = ({
   params,
   store,
-  seriesConfig,
-  svgRef,
   instance
 }) => {
+  const {
+    svgRef
+  } = instance;
   const {
     xAxis,
     yAxis,
@@ -45,11 +46,12 @@ const useChartFunnelAxis = ({
         gap: gap ?? 0
       },
       cartesianAxis: {
-        x: (0, _internals.defaultizeXAxis)(xAxis, dataset),
-        y: (0, _internals.defaultizeYAxis)(yAxis, dataset)
+        axesGap: 0,
+        x: (0, _internals.defaultizeXAxis)(xAxis, dataset, 0),
+        y: (0, _internals.defaultizeYAxis)(yAxis, dataset, 0)
       }
     });
-  }, [seriesConfig, drawingArea, xAxis, yAxis, dataset, store, gap]);
+  }, [drawingArea, xAxis, yAxis, dataset, store, gap]);
   React.useEffect(() => {
     const element = svgRef.current;
     if (!isInteractionEnabled || !element || params.disableAxisListener) {
@@ -75,7 +77,7 @@ const useChartFunnelAxis = ({
     const gestureHandler = event => {
       const srvEvent = event.detail.srcEvent;
       const target = event.detail.target;
-      const svgPoint = (0, _internals.getSVGPoint)(element, srvEvent);
+      const svgPoint = (0, _internals.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)) {
@@ -119,7 +121,7 @@ const useChartFunnelAxis = ({
       const usedYAxis = yAxisIds[0];
       let dataIndex = null;
       let isXAxis = false;
-      const svgPoint = (0, _internals.getSVGPoint)(element, event.detail.srcEvent);
+      const svgPoint = (0, _internals.getChartPoint)(element, event.detail.srcEvent);
       const xIndex = (0, _internals.getCartesianAxisIndex)(xAxisWithScale[usedXAxis], svgPoint.x);
       isXAxis = xIndex !== -1;
       dataIndex = isXAxis ? xIndex : (0, _internals.getCartesianAxisIndex)(yAxisWithScale[usedYAxis], svgPoint.y);
@@ -166,8 +168,8 @@ useChartFunnelAxis.getDefaultizedParams = ({
 }) => {
   return (0, _extends2.default)({}, params, {
     gap: params.gap ?? 0,
-    defaultizedXAxis: (0, _internals.defaultizeXAxis)(params.xAxis, params.dataset),
-    defaultizedYAxis: (0, _internals.defaultizeYAxis)(params.yAxis, params.dataset)
+    defaultizedXAxis: (0, _internals.defaultizeXAxis)(params.xAxis, params.dataset, 0),
+    defaultizedYAxis: (0, _internals.defaultizeYAxis)(params.yAxis, params.dataset, 0)
   });
 };
 useChartFunnelAxis.getInitialState = params => {
@@ -176,6 +178,7 @@ useChartFunnelAxis.getInitialState = params => {
       gap: params.gap ?? 0
     },
     cartesianAxis: {
+      axesGap: 0,
       x: params.defaultizedXAxis,
       y: params.defaultizedYAxis
     }

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'> & {
+  params: Omit<UseChartCartesianAxisParameters, 'onAxisClick' | 'onHighlightedAxisChange' | 'highlightedAxis' | 'onTooltipAxisChange' | 'tooltipAxis' | 'axesGap'> & {
     /**
      * The gap, in pixels, between funnel sections.
      * @default 0
@@ -14,8 +14,9 @@ export type UseChartFunnelAxisSignature = ChartPluginSignature<{
      */
     onAxisClick?: (event: MouseEvent, data: null | ChartsAxisData) => void;
   };
-  defaultizedParams: UseChartCartesianAxisDefaultizedParameters & {
+  defaultizedParams: Omit<UseChartCartesianAxisDefaultizedParameters, 'onAxisClick' | 'onHighlightedAxisChange' | 'highlightedAxis' | 'axesGap'> & {
     gap: number;
+    onAxisClick?: (event: MouseEvent, data: null | ChartsAxisData) => void;
   };
   state: Pick<UseChartCartesianAxisState, 'cartesianAxis'> & {
     funnel: {

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

@@ -3,16 +3,16 @@ import { type UseChartFunnelAxisSignature } from "./useChartFunnelAxis.types.js"
 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/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"> & {
+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/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> & {
+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.js").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/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> & {
+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.js").ComputeResult<import("@mui/x-charts").ChartsYAxisProps>;

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/index.d.ts

@@ -2,9 +2,10 @@ 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";
 export * from "./FocusedFunnelSection.js";
 export * from "./funnel.types.js";
 export * from "./categoryAxis.types.js";

package/FunnelChart/index.js

@@ -48,6 +48,18 @@ Object.keys(_FunnelPlot).forEach(function (key) {
     }
   });
 });
+var _funnelPlotSlots = require("./funnelPlotSlots.types");
+Object.keys(_funnelPlotSlots).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _funnelPlotSlots[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _funnelPlotSlots[key];
+    }
+  });
+});
 var _FocusedFunnelSection = require("./FocusedFunnelSection");
 Object.keys(_FocusedFunnelSection).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/FunnelChart/seriesConfig/index.js

@@ -24,5 +24,6 @@ const funnelSeriesConfig = exports.funnelSeriesConfig = {
   yExtremumGetter: _extremums.getExtremumY,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
   keyboardFocusHandler: _keyboardFocusHandler.default,
-  identifierSerializer: _internals.identifierSerializerSeriesIdDataIndex
+  identifierSerializer: _internals.identifierSerializerSeriesIdDataIndex,
+  identifierCleaner: _internals.identifierCleanerSeriesIdDataIndex
 };

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

@@ -21,7 +21,6 @@ const legendGetter = params => {
         type: 'funnel',
         markType: item.labelMarkType ?? series[seriesId].labelMarkType,
         seriesId,
-        id,
         itemId: id,
         dataIndex,
         color: item.color,