@mui/x-charts 7.7.0 → 7.8.0

package/LineChart/AreaPlot.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _d3Shape = require("d3-shape");
-var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
 var _AreaElement = require("./AreaElement");
 var _useScale = require("../hooks/useScale");
 var _getCurve = _interopRequireDefault(require("../internals/getCurve"));
@@ -23,7 +23,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useAggregatedData = () => {
   const seriesData = (0, _useSeries.useLineSeries)();
-  const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
+  const axisData = (0, _CartesianProvider.useCartesianContext)();
   if (seriesData === undefined) {
     return [];
   }

package/LineChart/LineChart.js

@@ -7,14 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.LineChart = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _AreaPlot = require("./AreaPlot");
 var _LinePlot = require("./LinePlot");
 var _ResponsiveChartContainer = require("../ResponsiveChartContainer");
 var _MarkPlot = require("./MarkPlot");
 var _ChartsAxis = require("../ChartsAxis/ChartsAxis");
-var _constants = require("../constants");
 var _ChartsTooltip = require("../ChartsTooltip");
 var _ChartsLegend = require("../ChartsLegend");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
@@ -23,6 +21,7 @@ var _LineHighlightPlot = require("./LineHighlightPlot");
 var _ChartsGrid = require("../ChartsGrid");
 var _ChartsOnAxisClickHandler = require("../ChartsOnAxisClickHandler");
 var _ChartsOverlay = require("../ChartsOverlay");
+var _useLineChartProps = require("./useLineChartProps");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -38,110 +37,29 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
   const {
-    xAxis,
-    yAxis,
-    series,
-    width,
-    height,
-    margin,
-    colors,
-    dataset,
-    sx,
-    tooltip,
-    onAxisClick,
-    onAreaClick,
-    onLineClick,
-    onMarkClick,
-    axisHighlight = {
-      x: 'line'
-    },
-    disableLineItemHighlight,
-    legend,
-    grid,
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
-    children,
-    slots,
-    slotProps,
-    skipAnimation,
-    loading,
-    highlightedItem,
-    onHighlightChange
-  } = props;
-  const id = (0, _useId.default)();
-  const clipPathId = `${id}-clip-path`;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
-    ref: ref,
-    series: series.map(s => (0, _extends2.default)({
-      disableHighlight: !!disableLineItemHighlight,
-      type: 'line'
-    }, s)),
-    width: width,
-    height: height,
-    margin: margin,
-    xAxis: xAxis ?? [{
-      id: _constants.DEFAULT_X_AXIS_KEY,
-      scaleType: 'point',
-      data: Array.from({
-        length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
-      }, (_, index) => index)
-    }],
-    yAxis: yAxis,
-    colors: colors,
-    dataset: dataset,
-    sx: sx,
-    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
-    highlightedItem: highlightedItem,
-    onHighlightChange: onHighlightChange,
-    children: [onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, {
-      onAxisClick: onAxisClick
-    }), grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, {
-      vertical: grid.vertical,
-      horizontal: grid.horizontal
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-      clipPath: `url(#${clipPathId})`,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, {
-        slots: slots,
-        slotProps: slotProps,
-        onItemClick: onAreaClick,
-        skipAnimation: skipAnimation
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.LinePlot, {
-        slots: slots,
-        slotProps: slotProps,
-        onItemClick: onLineClick,
-        skipAnimation: skipAnimation
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
-        loading: loading,
-        slots: slots,
-        slotProps: slotProps
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
-      topAxis: topAxis,
-      leftAxis: leftAxis,
-      rightAxis: rightAxis,
-      bottomAxis: bottomAxis,
-      slots: slots,
-      slotProps: slotProps
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlight)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, {
-      slots: slots,
-      slotProps: slotProps,
-      onItemClick: onMarkClick,
-      skipAnimation: skipAnimation
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineHighlightPlot.LineHighlightPlot, {
-      slots: slots,
-      slotProps: slotProps
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend, {
-      slots: slots,
-      slotProps: slotProps
-    })), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip, {
-      slots: slots,
-      slotProps: slotProps
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
-      id: clipPathId
-    }), children]
-  });
+    chartContainerProps,
+    axisClickHandlerProps,
+    gridProps,
+    clipPathProps,
+    clipPathGroupProps,
+    areaPlotProps,
+    linePlotProps,
+    markPlotProps,
+    overlayProps,
+    chartsAxisProps,
+    axisHighlightProps,
+    lineHighlightPlotProps,
+    legendProps,
+    tooltipProps,
+    children
+  } = (0, _useLineChartProps.useLineChartProps)(props);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, (0, _extends2.default)({
+    ref: ref
+  }, chartContainerProps, {
+    children: [props.onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, (0, _extends2.default)({}, axisClickHandlerProps)), props.grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps))]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, (0, _extends2.default)({}, markPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineHighlightPlot.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltipProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
+  }));
 });
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // ----------------------------- Warning --------------------------------

package/LineChart/LineHighlightPlot.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
 var _LineHighlightElement = require("./LineHighlightElement");
 var _useScale = require("../hooks/useScale");
 var _InteractionProvider = require("../context/InteractionProvider");
@@ -37,7 +37,7 @@ function LineHighlightPlot(props) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesData = (0, _useSeries.useLineSeries)();
-  const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
+  const axisData = (0, _CartesianProvider.useCartesianContext)();
   const {
     axis
   } = React.useContext(_InteractionProvider.InteractionContext);

package/LineChart/LinePlot.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _d3Shape = require("d3-shape");
-var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
 var _LineElement = require("./LineElement");
 var _useScale = require("../hooks/useScale");
 var _getCurve = _interopRequireDefault(require("../internals/getCurve"));
@@ -23,7 +23,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useAggregatedData = () => {
   const seriesData = (0, _useSeries.useLineSeries)();
-  const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
+  const axisData = (0, _CartesianProvider.useCartesianContext)();
   if (seriesData === undefined) {
     return [];
   }

package/LineChart/MarkPlot.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
 var _MarkElement = require("./MarkElement");
 var _useScale = require("../hooks/useScale");
 var _useChartId = require("../hooks/useChartId");
@@ -40,7 +40,7 @@ function MarkPlot(props) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesData = (0, _useSeries.useLineSeries)();
-  const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
+  const axisData = (0, _CartesianProvider.useCartesianContext)();
   const chartId = (0, _useChartId.useChartId)();
   const Mark = slots?.mark ?? _MarkElement.MarkElement;
   if (seriesData === undefined) {

package/LineChart/useLineChartProps.d.ts

@@ -0,0 +1,40 @@
+import type { LineChartProps } from './LineChart';
+import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
+import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler';
+import { ChartsGridProps } from '../ChartsGrid';
+import { ChartsClipPathProps } from '../ChartsClipPath';
+import { AreaPlotProps } from './AreaPlot';
+import { LinePlotProps } from './LinePlot';
+import { MarkPlotProps } from './MarkPlot';
+import { ChartsOverlayProps } from '../ChartsOverlay';
+import { ChartsAxisProps } from '../ChartsAxis';
+import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
+import { LineHighlightPlotProps } from './LineHighlightPlot';
+import { ChartsLegendProps } from '../ChartsLegend';
+import { ChartsTooltipProps } from '../ChartsTooltip';
+/**
+ * A helper function that extracts LineChartProps from the input props
+ * and returns an object with props for the children components of LineChart.
+ *
+ * @param props The input props for LineChart
+ * @returns An object with props for the children components of LineChart
+ */
+export declare const useLineChartProps: (props: LineChartProps) => {
+    chartContainerProps: ResponsiveChartContainerProps;
+    axisClickHandlerProps: ChartsOnAxisClickHandlerProps;
+    gridProps: ChartsGridProps;
+    clipPathProps: ChartsClipPathProps;
+    clipPathGroupProps: {
+        clipPath: string;
+    };
+    areaPlotProps: AreaPlotProps;
+    linePlotProps: LinePlotProps;
+    markPlotProps: MarkPlotProps;
+    overlayProps: ChartsOverlayProps;
+    chartsAxisProps: ChartsAxisProps;
+    axisHighlightProps: ChartsAxisHighlightProps;
+    lineHighlightPlotProps: LineHighlightPlotProps;
+    legendProps: ChartsLegendProps;
+    tooltipProps: ChartsTooltipProps;
+    children: import("react").ReactNode;
+};

package/LineChart/useLineChartProps.js

@@ -0,0 +1,152 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLineChartProps = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _constants = require("../constants");
+/**
+ * A helper function that extracts LineChartProps from the input props
+ * and returns an object with props for the children components of LineChart.
+ *
+ * @param props The input props for LineChart
+ * @returns An object with props for the children components of LineChart
+ */
+const useLineChartProps = props => {
+  const {
+    xAxis,
+    yAxis,
+    series,
+    width,
+    height,
+    margin,
+    colors,
+    dataset,
+    sx,
+    tooltip,
+    onAxisClick,
+    onAreaClick,
+    onLineClick,
+    onMarkClick,
+    axisHighlight,
+    disableLineItemHighlight,
+    legend,
+    grid,
+    topAxis,
+    leftAxis,
+    rightAxis,
+    bottomAxis,
+    children,
+    slots,
+    slotProps,
+    skipAnimation,
+    loading,
+    highlightedItem,
+    onHighlightChange
+  } = props;
+  const id = (0, _useId.default)();
+  const clipPathId = `${id}-clip-path`;
+  const chartContainerProps = {
+    series: series.map(s => (0, _extends2.default)({
+      disableHighlight: !!disableLineItemHighlight,
+      type: 'line'
+    }, s)),
+    width,
+    height,
+    margin,
+    colors,
+    dataset,
+    xAxis: xAxis ?? [{
+      id: _constants.DEFAULT_X_AXIS_KEY,
+      scaleType: 'point',
+      data: Array.from({
+        length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
+      }, (_, index) => index)
+    }],
+    yAxis,
+    sx,
+    highlightedItem,
+    onHighlightChange,
+    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick
+  };
+  const axisClickHandlerProps = {
+    onAxisClick
+  };
+  const gridProps = {
+    vertical: grid?.vertical,
+    horizontal: grid?.horizontal
+  };
+  const clipPathGroupProps = {
+    clipPath: `url(#${clipPathId})`
+  };
+  const clipPathProps = {
+    id: clipPathId
+  };
+  const areaPlotProps = {
+    slots,
+    slotProps,
+    onItemClick: onAreaClick,
+    skipAnimation
+  };
+  const linePlotProps = {
+    slots,
+    slotProps,
+    onItemClick: onLineClick,
+    skipAnimation
+  };
+  const markPlotProps = {
+    slots,
+    slotProps,
+    onItemClick: onMarkClick,
+    skipAnimation
+  };
+  const overlayProps = {
+    slots,
+    slotProps,
+    loading
+  };
+  const chartsAxisProps = {
+    topAxis,
+    leftAxis,
+    rightAxis,
+    bottomAxis,
+    slots,
+    slotProps
+  };
+  const axisHighlightProps = (0, _extends2.default)({
+    x: 'line'
+  }, axisHighlight);
+  const lineHighlightPlotProps = {
+    slots,
+    slotProps
+  };
+  const legendProps = (0, _extends2.default)({}, legend, {
+    slots,
+    slotProps
+  });
+  const tooltipProps = (0, _extends2.default)({}, tooltip, {
+    slots,
+    slotProps
+  });
+  return {
+    chartContainerProps,
+    axisClickHandlerProps,
+    gridProps,
+    clipPathProps,
+    clipPathGroupProps,
+    areaPlotProps,
+    linePlotProps,
+    markPlotProps,
+    overlayProps,
+    chartsAxisProps,
+    axisHighlightProps,
+    lineHighlightPlotProps,
+    legendProps,
+    tooltipProps,
+    children
+  };
+};
+exports.useLineChartProps = useLineChartProps;

package/PieChart/PieArc.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@react-spring/core" />
 import * as React from 'react';
 import { SpringValue } from '@react-spring/web';
 import { PieItemId } from '../models';

package/PieChart/PieArcLabel.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@react-spring/core" />
 import * as React from 'react';
 import { SpringValue } from '@react-spring/web';
 import { PieItemId } from '../models/seriesType/pie';

package/PieChart/dataTransform/transition.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@react-spring/core" />
 import { UseTransitionProps } from '@react-spring/web';
 import { ValueWithHighlight } from './useTransformData';
 export declare const defaultTransitionConfig: UseTransitionProps<ValueWithHighlight>;

package/ResponsiveChartContainer/ResizableContainer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ResponsiveChartContainerProps } from './ResponsiveChartContainer';
 /**
  * Wrapping div that take the shape of its parent.
@@ -6,5 +5,5 @@ import type { ResponsiveChartContainerProps } from './ResponsiveChartContainer';
  * @ignore - do not document.
  */
 export declare const ResizableContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    ownerState: Pick<ResponsiveChartContainerProps, 'width' | 'height'>;
+    ownerState: Pick<ResponsiveChartContainerProps, "width" | "height">;
 }, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;

package/ScatterChart/ScatterChart.js

@@ -18,6 +18,7 @@ var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _ChartsVoronoiHandler = require("../ChartsVoronoiHandler/ChartsVoronoiHandler");
 var _ChartsGrid = require("../ChartsGrid");
 var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
+var _useScatterChartProps = require("./useScatterChartProps");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -33,81 +34,25 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props, ref) {
   const {
-    xAxis,
-    yAxis,
-    zAxis,
-    series,
-    tooltip,
-    axisHighlight,
-    voronoiMaxRadius,
-    disableVoronoi,
-    legend,
-    width,
-    height,
-    margin,
-    colors,
-    sx,
-    grid,
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
-    onItemClick,
-    children,
-    slots,
-    slotProps,
-    loading,
-    highlightedItem,
-    onHighlightChange
-  } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveChartContainer.ResponsiveChartContainer, {
-    ref: ref,
-    series: series.map(s => (0, _extends2.default)({
-      type: 'scatter'
-    }, s)),
-    width: width,
-    height: height,
-    margin: margin,
-    colors: colors,
-    xAxis: xAxis,
-    yAxis: yAxis,
-    sx: sx,
-    highlightedItem: highlightedItem,
-    onHighlightChange: onHighlightChange,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ZAxisContextProvider.ZAxisContextProvider, {
-      zAxis: zAxis,
-      children: [!disableVoronoi && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVoronoiHandler.ChartsVoronoiHandler, {
-        voronoiMaxRadius: voronoiMaxRadius,
-        onItemClick: onItemClick
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
-        topAxis: topAxis,
-        leftAxis: leftAxis,
-        rightAxis: rightAxis,
-        bottomAxis: bottomAxis,
-        slots: slots,
-        slotProps: slotProps
-      }), grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, {
-        vertical: grid.vertical,
-        horizontal: grid.horizontal
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterPlot.ScatterPlot, {
-        slots: slots,
-        slotProps: slotProps,
-        onItemClick: disableVoronoi ? onItemClick : undefined
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
-        loading: loading,
-        slots: slots,
-        slotProps: slotProps
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend, {
-        slots: slots,
-        slotProps: slotProps
-      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({
-        x: "none",
-        y: "none"
-      }, axisHighlight)), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({
-        trigger: "item"
-      }, tooltip)), children]
-    })
-  });
+    chartContainerProps,
+    zAxisProps,
+    voronoiHandlerProps,
+    chartsAxisProps,
+    gridProps,
+    scatterPlotProps,
+    overlayProps,
+    legendProps,
+    axisHighlightProps,
+    tooltipProps,
+    children
+  } = (0, _useScatterChartProps.useScatterChartProps)(props);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveChartContainer.ResponsiveChartContainer, (0, _extends2.default)({
+    ref: ref
+  }, chartContainerProps, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ZAxisContextProvider.ZAxisContextProvider, (0, _extends2.default)({}, zAxisProps, {
+      children: [!props.disableVoronoi && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVoronoiHandler.ChartsVoronoiHandler, (0, _extends2.default)({}, voronoiHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), props.grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterPlot.ScatterPlot, (0, _extends2.default)({}, scatterPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltipProps)), children]
+    }))
+  }));
 });
 process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   // ----------------------------- Warning --------------------------------

package/ScatterChart/ScatterPlot.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Scatter = require("./Scatter");
-var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
 var _useSeries = require("../hooks/useSeries");
@@ -33,7 +33,7 @@ function ScatterPlot(props) {
     onItemClick
   } = props;
   const seriesData = (0, _useSeries.useScatterSeries)();
-  const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
+  const axisData = (0, _CartesianProvider.useCartesianContext)();
   const {
     zAxis,
     zAxisIds

package/ScatterChart/useScatterChartProps.d.ts

@@ -0,0 +1,31 @@
+import { ChartsAxisProps } from '../ChartsAxis';
+import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
+import { ChartsGridProps } from '../ChartsGrid';
+import { ChartsLegendProps } from '../ChartsLegend';
+import { ChartsOverlayProps } from '../ChartsOverlay';
+import { ChartsTooltipProps } from '../ChartsTooltip';
+import type { ChartsVoronoiHandlerProps } from '../ChartsVoronoiHandler';
+import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
+import { ZAxisContextProviderProps } from '../context';
+import type { ScatterChartProps } from './ScatterChart';
+import type { ScatterPlotProps } from './ScatterPlot';
+/**
+ * A helper function that extracts ScatterChartProps from the input props
+ * and returns an object with props for the children components of ScatterChart.
+ *
+ * @param props The input props for ScatterChart
+ * @returns An object with props for the children components of ScatterChart
+ */
+export declare const useScatterChartProps: (props: ScatterChartProps) => {
+    chartContainerProps: ResponsiveChartContainerProps;
+    zAxisProps: Omit<ZAxisContextProviderProps, "children">;
+    voronoiHandlerProps: ChartsVoronoiHandlerProps;
+    chartsAxisProps: ChartsAxisProps;
+    gridProps: ChartsGridProps;
+    scatterPlotProps: ScatterPlotProps;
+    overlayProps: ChartsOverlayProps;
+    legendProps: ChartsLegendProps;
+    axisHighlightProps: ChartsAxisHighlightProps;
+    tooltipProps: ChartsTooltipProps;
+    children: import("react").ReactNode;
+};