@mui/x-charts 7.7.0 → 7.7.1

package/ChartContainer/useChartContainerHooks.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartContainerHooks = void 0;
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var React = _interopRequireWildcard(require("react"));
+var _usePluginsMerge = require("./usePluginsMerge");
+var _useReducedMotion = require("../hooks/useReducedMotion");
+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; }
+const useChartContainerHooks = (ref, plugins) => {
+  const svgRef = React.useRef(null);
+  const handleRef = (0, _useForkRef.default)(ref, svgRef);
+  const {
+    xExtremumGetters,
+    yExtremumGetters,
+    seriesFormatters,
+    colorProcessors
+  } = (0, _usePluginsMerge.usePluginsMerge)(plugins);
+  (0, _useReducedMotion.useReducedMotion)(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
+
+  return {
+    svgRef,
+    handleRef,
+    xExtremumGetters,
+    yExtremumGetters,
+    seriesFormatters,
+    colorProcessors
+  };
+};
+exports.useChartContainerHooks = useChartContainerHooks;

package/ChartContainer/usePluginsMerge.d.ts

@@ -1,6 +1,5 @@
-import { ChartsPluginType, ColorProcessorsConfig } from '../models';
+import { ChartsPluginType, ColorProcessorsConfig, ExtremumGettersConfig } from '../models';
 import { ChartSeriesType } from '../models/seriesType/config';
-import { ExtremumGettersConfig } from '../context/CartesianContextProvider';
 import { SeriesFormatterConfig } from '../context/SeriesContextProvider';
 export declare function usePluginsMerge<T extends ChartSeriesType>(plugins?: ChartsPluginType<T>[]): {
     seriesFormatters: SeriesFormatterConfig<keyof import("../models/seriesType/config").ChartsSeriesConfig>;

package/ChartsAxis/ChartsAxis.js

@@ -8,7 +8,7 @@ exports.ChartsAxis = ChartsAxis;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
 var _ChartsXAxis = require("../ChartsXAxis");
 var _ChartsYAxis = require("../ChartsYAxis");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -56,7 +56,7 @@ function ChartsAxis(props) {
     xAxisIds,
     yAxis,
     yAxisIds
-  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  } = (0, _CartesianProvider.useCartesianContext)();
 
   // TODO: use for plotting line without ticks or any thing
   // const drawingArea = React.useContext(DrawingContext);

package/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -15,7 +15,7 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _styles = require("@mui/material/styles");
 var _InteractionProvider = require("../context/InteractionProvider");
-var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
 var _useScale = require("../hooks/useScale");
 var _isBandScale = require("../internals/isBandScale");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -66,7 +66,7 @@ function ChartsAxisHighlight(props) {
     xAxis,
     yAxisIds,
     yAxis
-  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  } = (0, _CartesianProvider.useCartesianContext)();
   const classes = useUtilityClasses();
   const USED_X_AXIS_ID = xAxisIds[0];
   const USED_Y_AXIS_ID = yAxisIds[0];

package/ChartsGrid/ChartsGrid.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");
-var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
 var _useTicks = require("../hooks/useTicks");
 var _chartsGridClasses = require("./chartsGridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -72,7 +72,7 @@ function ChartsGrid(props) {
     xAxisIds,
     yAxis,
     yAxisIds
-  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  } = (0, _CartesianProvider.useCartesianContext)();
   const classes = useUtilityClasses(themeProps);
   const horizontalAxisId = yAxisIds[0];
   const verticalAxisId = xAxisIds[0];

package/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -8,9 +8,9 @@ exports.ChartsOnAxisClickHandler = ChartsOnAxisClickHandler;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _InteractionProvider = require("../context/InteractionProvider");
-var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _useSeries = require("../hooks/useSeries");
 var _hooks = require("../hooks");
+var _CartesianProvider = require("../context/CartesianProvider");
 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; }
@@ -28,7 +28,7 @@ function ChartsOnAxisClickHandler(props) {
     xAxis,
     yAxisIds,
     yAxis
-  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  } = (0, _CartesianProvider.useCartesianContext)();
   React.useEffect(() => {
     const element = svgRef.current;
     if (element === null || !onAxisClick) {

package/ChartsTooltip/ChartsAxisTooltipContent.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 _utils = require("@mui/base/utils");
-var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
 var _DefaultChartsAxisTooltipContent = require("./DefaultChartsAxisTooltipContent");
 var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
 var _useColor = require("../hooks/useColor");
@@ -34,7 +34,7 @@ function ChartsAxisTooltipContent(props) {
     xAxis,
     yAxisIds,
     yAxis
-  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  } = (0, _CartesianProvider.useCartesianContext)();
   const {
     zAxisIds,
     zAxis

package/ChartsTooltip/ChartsItemTooltipContent.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/base/utils");
 var _DefaultChartsItemTooltipContent = require("./DefaultChartsItemTooltipContent");
-var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
 var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
 var _useColor = require("../hooks/useColor");
 var _useSeries = require("../hooks/useSeries");
@@ -31,7 +31,7 @@ function ChartsItemTooltipContent(props) {
     yAxis,
     xAxisIds,
     yAxisIds
-  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  } = (0, _CartesianProvider.useCartesianContext)();
   const {
     zAxis,
     zAxisIds

package/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -10,7 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _d3Delaunay = require("d3-delaunay");
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _InteractionProvider = require("../context/InteractionProvider");
-var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
 var _useScale = require("../hooks/useScale");
 var _utils = require("../internals/utils");
 var _hooks = require("../hooks");
@@ -36,7 +36,7 @@ function ChartsVoronoiHandler(props) {
     yAxis,
     xAxisIds,
     yAxisIds
-  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  } = (0, _CartesianProvider.useCartesianContext)();
   const {
     dispatch
   } = React.useContext(_InteractionProvider.InteractionContext);

package/ChartsXAxis/ChartsXAxis.js

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/base/utils");
 var _utils2 = require("@mui/utils");
 var _styles = require("@mui/material/styles");
-var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
 var _useTicks = require("../hooks/useTicks");
 var _axisClasses = require("../ChartsAxis/axisClasses");
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
@@ -116,7 +116,7 @@ function ChartsXAxis(inProps) {
   const {
     xAxisIds,
     xAxis
-  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  } = (0, _CartesianProvider.useCartesianContext)();
   const _xAxis = xAxis[inProps.axisId ?? xAxisIds[0]],
     {
       scale: xScale,

package/ChartsYAxis/ChartsYAxis.js

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/base/utils");
 var _utils2 = require("@mui/utils");
 var _styles = require("@mui/material/styles");
-var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
 var _useTicks = require("../hooks/useTicks");
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
@@ -59,7 +59,7 @@ function ChartsYAxis(inProps) {
   const {
     yAxisIds,
     yAxis
-  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  } = (0, _CartesianProvider.useCartesianContext)();
   const _yAxis = yAxis[inProps.axisId ?? yAxisIds[0]],
     {
       scale: yScale,

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,117 @@
+/// <reference types="react" />
+import type { LineChartProps } from './LineChart';
+/**
+ * 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: {
+        series: {
+            color?: string | undefined;
+            area?: boolean | undefined;
+            data?: (number | null)[] | undefined;
+            label?: string | ((location: "tooltip" | "legend") => string) | undefined;
+            id?: import("../internals").SeriesId | undefined;
+            dataKey?: string | undefined;
+            stackOffset?: import("..").StackOffsetType | undefined;
+            valueFormatter?: import("../internals").SeriesValueFormatter<number | null> | undefined;
+            highlightScope?: Partial<import("..").HighlightScope> | undefined;
+            xAxisKey?: string | undefined;
+            yAxisKey?: string | undefined;
+            stack?: string | undefined;
+            stackOrder?: import("..").StackOrderType | undefined;
+            curve?: import("..").CurveType | undefined;
+            showMark?: boolean | ((params: import("..").ShowMarkParams<number | Date>) => boolean) | undefined;
+            disableHighlight: boolean;
+            connectNulls?: boolean | undefined;
+            type: "line";
+        }[];
+        width: number | undefined;
+        height: number | undefined;
+        margin: Partial<import("..").CardinalDirections<number>> | undefined;
+        colors: import("..").ChartsColorPalette | undefined;
+        dataset: import("../internals").DatasetType | undefined;
+        xAxis: import("../internals").MakeOptional<import("..").AxisConfig<import("..").ScaleName, any, import("..").ChartsXAxisProps>, "id">[];
+        yAxis: import("../internals").MakeOptional<import("..").AxisConfig<import("..").ScaleName, any, import("..").ChartsYAxisProps>, "id">[] | undefined;
+        sx: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+        highlightedItem: import("..").HighlightItemData | null | undefined;
+        onHighlightChange: ((highlightedItem: import("..").HighlightItemData | null) => void) | undefined;
+        disableAxisListener: boolean;
+    };
+    axisClickHandlerProps: {
+        onAxisClick: ((event: MouseEvent, data: {
+            dataIndex: number;
+            axisValue?: string | number | Date | undefined;
+            seriesValues: Record<string, number | null | undefined>;
+        } | null) => void) | undefined;
+    };
+    gridProps: {
+        vertical: boolean | undefined;
+        horizontal: boolean | undefined;
+    };
+    clipPathProps: {
+        id: string;
+    };
+    clipPathGroupProps: {
+        clipPath: string;
+    };
+    areaPlotProps: {
+        slots: import("./LineChart").LineChartSlots | undefined;
+        slotProps: import("./LineChart").LineChartSlotProps | undefined;
+        onAreaClick: ((event: import("react").MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: import("..").LineItemIdentifier) => void) | undefined;
+        skipAnimation: boolean | undefined;
+    };
+    linePlotProps: {
+        slots: import("./LineChart").LineChartSlots | undefined;
+        slotProps: import("./LineChart").LineChartSlotProps | undefined;
+        onLineClick: ((event: import("react").MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: import("..").LineItemIdentifier) => void) | undefined;
+        skipAnimation: boolean | undefined;
+    };
+    markPlotProps: {
+        slots: import("./LineChart").LineChartSlots | undefined;
+        slotProps: import("./LineChart").LineChartSlotProps | undefined;
+        onMarkClick: ((event: import("react").MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: import("..").LineItemIdentifier) => void) | undefined;
+        skipAnimation: boolean | undefined;
+    };
+    overlayProps: {
+        slots: import("./LineChart").LineChartSlots | undefined;
+        slotProps: import("./LineChart").LineChartSlotProps | undefined;
+        loading: boolean | undefined;
+    };
+    chartsAxisProps: {
+        topAxis: string | import("..").ChartsXAxisProps | null | undefined;
+        leftAxis: string | import("..").ChartsYAxisProps | null | undefined;
+        rightAxis: string | import("..").ChartsYAxisProps | null | undefined;
+        bottomAxis: string | import("..").ChartsXAxisProps | null | undefined;
+        slots: import("./LineChart").LineChartSlots | undefined;
+        slotProps: import("./LineChart").LineChartSlotProps | undefined;
+    };
+    axisHighlightProps: {
+        x: "none" | "line" | "band";
+        y?: ("none" | "line" | "band") | undefined;
+    };
+    lineHighlightPlotProps: {
+        slots: import("./LineChart").LineChartSlots | undefined;
+        slotProps: import("./LineChart").LineChartSlotProps | undefined;
+    };
+    legendProps: {
+        slots: import("./LineChart").LineChartSlots | undefined;
+        slotProps: import("./LineChart").LineChartSlotProps | undefined;
+        position?: import("..").AnchorPosition | undefined;
+        classes?: Partial<import("..").ChartsLegendClasses> | undefined;
+        hidden?: boolean | undefined;
+        direction?: import("..").Direction | undefined;
+    };
+    tooltipProps: {
+        slots: import("./LineChart").LineChartSlots | undefined;
+        slotProps: import("./LineChart").LineChartSlotProps | undefined;
+        trigger?: import("../ChartsTooltip/utils").TriggerOptions | undefined;
+        itemContent?: import("react").ElementType<import("..").ChartsItemContentProps<any>, keyof import("react").JSX.IntrinsicElements> | undefined;
+        axisContent?: import("react").ElementType<import("..").ChartsAxisContentProps, keyof import("react").JSX.IntrinsicElements> | undefined;
+        classes?: Partial<import("..").ChartsTooltipClasses> | undefined;
+    };
+    children: import("react").ReactNode;
+};