@mui/x-charts 8.0.0-alpha.1 → 8.0.0-alpha.2

package/node/PieChart/PieChart.js

@@ -228,7 +228,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -239,7 +238,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     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]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
@@ -282,7 +280,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -293,7 +290,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     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]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),

package/node/ScatterChart/Scatter.js

@@ -12,11 +12,11 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useScale = require("../hooks/useScale");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
-var _useStore = require("../internals/useStore");
-var _useSelector = require("../internals/useSelector");
+var _useStore = require("../internals/store/useStore");
+var _useSelector = require("../internals/store/useSelector");
 var _context = require("../context");
 var _useDrawingArea = require("../hooks/useDrawingArea");
-var _InteractionSelectors = require("../context/InteractionSelectors");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -40,7 +40,7 @@ function Scatter(props) {
   } = props;
   const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const store = (0, _useStore.useStore)();
-  const isVoronoiEnabled = (0, _useSelector.useSelector)(store, _InteractionSelectors.selectorChartsInteractionIsVoronoiEnabled);
+  const isVoronoiEnabled = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionIsVoronoiEnabled);
   const skipInteractionHandlers = isVoronoiEnabled || series.disableHover;
   const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(skipInteractionHandlers);
   const {

package/node/ScatterChart/ScatterChart.js

@@ -238,7 +238,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -249,7 +248,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     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]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
@@ -292,7 +290,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -303,7 +300,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     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]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),

package/node/SparkLineChart/SparkLineChart.js

@@ -267,7 +267,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -278,7 +277,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     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]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
@@ -320,7 +318,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -331,7 +328,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     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]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),

package/node/context/ChartDataProvider/ChartDataProvider.js

@@ -12,7 +12,6 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _DrawingAreaProvider = require("../DrawingAreaProvider");
 var _SeriesProvider = require("../SeriesProvider");
-var _InteractionProvider = require("../InteractionProvider");
 var _CartesianProvider = require("../CartesianProvider");
 var _PluginProvider = require("../PluginProvider");
 var _useChartDataProviderProps = require("./useChartDataProviderProps");
@@ -20,8 +19,35 @@ var _AnimationProvider = require("../AnimationProvider");
 var _ZAxisContextProvider = require("../ZAxisContextProvider");
 var _HighlightedProvider = require("../HighlightedProvider");
 var _SizeProvider = require("../SizeProvider");
-var _SvgRefProvider = require("../SvgRefProvider");
+var _ChartProvider = require("../ChartProvider");
 var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Orchestrates the data providers for the chart components and hooks.
+ *
+ * Use this component if you have custom HTML components that need to access the chart data.
+ *
+ * Demos:
+ *
+ * - [Composition](http://localhost:3001/x/react-charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartDataProvider API](https://mui.com/x/api/charts/chart-data-provider/)
+ *
+ * @example
+ * ```jsx
+ * <ChartDataProvider
+ *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
+ *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
+ * >
+ *   <ChartsSurface>
+ *      <BarPlot />
+ *      <ChartsXAxis position="bottom" axisId="x-axis" />
+ *   </ChartsSurface>
+ *   {'Custom Legend Component'}
+ * </ChartDataProvider>
+ * ```
+ */
 function ChartDataProvider(props) {
   const {
     children,
@@ -34,27 +60,25 @@ function ChartDataProvider(props) {
     animationProviderProps,
     sizeProviderProps
   } = (0, _useChartDataProviderProps.useChartDataProviderProps)(props);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SizeProvider.SizeProvider, (0, _extends2.default)({}, sizeProviderProps, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingAreaProvider.DrawingAreaProvider, (0, _extends2.default)({}, drawingAreaProviderProps, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PluginProvider.PluginProvider, (0, _extends2.default)({}, pluginProviderProps, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SeriesProvider.SeriesProvider, (0, _extends2.default)({}, seriesProviderProps, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianProvider.CartesianProvider, (0, _extends2.default)({}, cartesianProviderProps, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZAxisContextProvider.ZAxisContextProvider, (0, _extends2.default)({}, zAxisContextProps, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InteractionProvider.InteractionProvider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartProvider.ChartProvider, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SizeProvider.SizeProvider, (0, _extends2.default)({}, sizeProviderProps, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingAreaProvider.DrawingAreaProvider, (0, _extends2.default)({}, drawingAreaProviderProps, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PluginProvider.PluginProvider, (0, _extends2.default)({}, pluginProviderProps, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SeriesProvider.SeriesProvider, (0, _extends2.default)({}, seriesProviderProps, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianProvider.CartesianProvider, (0, _extends2.default)({}, cartesianProviderProps, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZAxisContextProvider.ZAxisContextProvider, (0, _extends2.default)({}, zAxisContextProps, {
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightedProvider.HighlightedProvider, (0, _extends2.default)({}, highlightedProviderProps, {
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnimationProvider.AnimationProvider, (0, _extends2.default)({}, animationProviderProps, {
-                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgRefProvider.SvgRefProvider, {
-                      children: children
-                    })
+                    children: children
                   }))
                 }))
-              })
+              }))
             }))
           }))
         }))
       }))
     }))
-  }));
+  });
 }
 process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -151,7 +175,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -162,7 +185,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     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]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
@@ -205,7 +227,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -216,7 +237,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     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]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),

package/node/context/ChartProvider/ChartContext.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+/**
+ * @ignore - internal component.
+ */
+const ChartContext = exports.ChartContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== 'production') {
+  ChartContext.displayName = 'ChartContext';
+}

package/node/context/ChartProvider/ChartProvider.js

@@ -0,0 +1,24 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartProvider = ChartProvider;
+var React = _interopRequireWildcard(require("react"));
+var _useCharts = require("../../internals/store/useCharts");
+var _ChartContext = require("./ChartContext");
+var _jsxRuntime = require("react/jsx-runtime");
+function ChartProvider(props) {
+  const {
+    children
+  } = props;
+  const {
+    contextValue
+  } = (0, _useCharts.useCharts)([], {});
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartContext.ChartContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}

package/node/context/ChartProvider/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartProvider = require("./ChartProvider");
+Object.keys(_ChartProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartProvider[key];
+    }
+  });
+});
+var _ChartProvider2 = require("./ChartProvider.types");
+Object.keys(_ChartProvider2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartProvider2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartProvider2[key];
+    }
+  });
+});
+var _useChartContext = require("./useChartContext");
+Object.keys(_useChartContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useChartContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartContext[key];
+    }
+  });
+});

package/node/context/ChartProvider/useChartContext.js

@@ -0,0 +1,18 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _ChartContext = require("./ChartContext");
+const useChartContext = () => {
+  const context = React.useContext(_ChartContext.ChartContext);
+  if (context == null) {
+    throw new Error(['MUI X: Could not find the Chart context.', 'It looks like you rendered your component outside of a ChartDataProvider.', 'This can also happen if you are bundling multiple versions of the library.'].join('\n'));
+  }
+  return context;
+};
+exports.useChartContext = useChartContext;

package/node/context/DrawingAreaProvider/DrawingAreaContext.js

@@ -14,7 +14,6 @@ const DrawingAreaContext = exports.DrawingAreaContext = /*#__PURE__*/React.creat
   right: 0,
   height: 300,
   width: 400,
-  chartId: '',
   isPointInside: () => false
 });
 if (process.env.NODE_ENV !== 'production') {

package/node/context/SizeProvider/SizeContext.js

@@ -10,7 +10,9 @@ const SizeContext = exports.SizeContext = /*#__PURE__*/React.createContext({
   isInitialized: false,
   data: {
     hasIntrinsicSize: false,
-    containerRef: null,
+    svgRef: {
+      current: null
+    },
     height: 0,
     width: 0
   }

package/node/context/SizeProvider/useChartContainerDimensions.js

@@ -27,6 +27,10 @@ const useChartContainerDimensions = (inWidth, inHeight) => {
   const computeSize = React.useCallback(() => {
     const mainEl = rootRef?.current;
     if (!mainEl) {
+      if (process.env.NODE_ENV !== 'production') {
+        // This is mostly for internal use.
+        throw new Error([`MUI X: ChartContainer does not have a valid reference to the <svg /> element.`, 'This may be caused by a ref forwarding issue.', 'Make sure that the ref from SizedProvider is forwarded correctly.'].join('\n'));
+      }
       return {};
     }
     const win = (0, _ownerWindow.default)(mainEl);
@@ -101,7 +105,7 @@ const useChartContainerDimensions = (inWidth, inHeight) => {
   const finalWidth = inWidth ?? width;
   const finalHeight = inHeight ?? height;
   return {
-    containerRef: rootRef,
+    svgRef: rootRef,
     width: finalWidth,
     height: finalHeight,
     hasIntrinsicSize: finalWidth > 0 && finalHeight > 0,

package/node/hooks/useAxisEvents.js

@@ -14,7 +14,7 @@ var _isBandScale = require("../internals/isBandScale");
 var _getSVGPoint = require("../internals/getSVGPoint");
 var _useSvgRef = require("./useSvgRef");
 var _useDrawingArea = require("./useDrawingArea");
-var _useStore = require("../internals/useStore");
+var _useStore = require("../internals/store/useStore");
 function getAsANumber(value) {
   return value instanceof Date ? value.getTime() : value;
 }

package/node/hooks/useChartId.js

@@ -1,16 +1,14 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useChartId = useChartId;
-var React = _interopRequireWildcard(require("react"));
-var _DrawingAreaProvider = require("../context/DrawingAreaProvider");
+var _useStore = require("../internals/store/useStore");
+var _useSelector = require("../internals/store/useSelector");
+var _useChartId = require("../internals/plugins/corePlugins/useChartId/useChartId.selectors");
 function useChartId() {
-  const {
-    chartId
-  } = React.useContext(_DrawingAreaProvider.DrawingAreaContext);
-  return React.useMemo(() => chartId, [chartId]);
+  const store = (0, _useStore.useStore)();
+  return (0, _useSelector.useSelector)(store, _useChartId.selectorChartId);
 }

package/node/hooks/useInteractionItemProps.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useInteractionItemProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _context = require("../context");
-var _useStore = require("../internals/useStore");
+var _useStore = require("../internals/store/useStore");
 const useInteractionItemProps = skip => {
   const store = (0, _useStore.useStore)();
   const {
@@ -36,7 +36,9 @@ const useInteractionItemProps = skip => {
       });
     };
     const onPointerLeave = event => {
-      event.currentTarget.releasePointerCapture(event.pointerId);
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
       store.update(prev => {
         const prevItem = prev.interaction.item;
         if (prevItem === null || Object.keys(data).some(key => data[key] !== prevItem[key])) {

package/node/hooks/useSvgRef.js

@@ -1,20 +1,15 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSvgRef = useSvgRef;
-var React = _interopRequireWildcard(require("react"));
-var _SvgRefProvider = require("../context/SvgRefProvider");
+var _ChartProvider = require("../context/ChartProvider");
 function useSvgRef() {
-  const {
-    isInitialized,
-    data
-  } = React.useContext(_SvgRefProvider.SvgRefContext);
-  if (!isInitialized) {
+  const context = (0, _ChartProvider.useChartContext)();
+  if (!context) {
     throw new Error(['MUI X: Could not find the svg ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
   }
-  return data.svgRef;
+  return context.svgRef;
 }

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0-alpha.1
+ * @mui/x-charts v8.0.0-alpha.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/components/ChartsAxesGradients/ChartsAxesGradients.js

@@ -9,15 +9,12 @@ exports.ChartsAxesGradients = ChartsAxesGradients;
 exports.useChartGradient = useChartGradient;
 var React = _interopRequireWildcard(require("react"));
 var _CartesianProvider = require("../../../context/CartesianProvider");
-var _DrawingAreaProvider = require("../../../context/DrawingAreaProvider");
 var _hooks = require("../../../hooks");
 var _ChartsPiecewiseGradient = _interopRequireDefault(require("./ChartsPiecewiseGradient"));
 var _ChartsContinuousGradient = _interopRequireDefault(require("./ChartsContinuousGradient"));
 var _jsxRuntime = require("react/jsx-runtime");
 function useChartGradient() {
-  const {
-    chartId
-  } = React.useContext(_DrawingAreaProvider.DrawingAreaContext);
+  const chartId = (0, _hooks.useChartId)();
   return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}`, [chartId]);
 }
 function ChartsAxesGradients() {

package/node/internals/index.js

@@ -73,18 +73,6 @@ Object.keys(_ChartsAxesGradients).forEach(function (key) {
     }
   });
 });
-var _ResizableContainer = require("../ChartContainer/ResizableContainer");
-Object.keys(_ResizableContainer).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _ResizableContainer[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ResizableContainer[key];
-    }
-  });
-});
 var _useSeries = require("../hooks/useSeries");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useDrawingArea = require("../hooks/useDrawingArea");
@@ -224,18 +212,6 @@ Object.keys(_DrawingAreaProvider).forEach(function (key) {
     }
   });
 });
-var _InteractionProvider = require("../context/InteractionProvider");
-Object.keys(_InteractionProvider).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _InteractionProvider[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _InteractionProvider[key];
-    }
-  });
-});
 var _SeriesProvider = require("../context/SeriesProvider");
 Object.keys(_SeriesProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -309,15 +285,15 @@ Object.keys(_SizeProvider).forEach(function (key) {
     }
   });
 });
-var _SvgRefProvider = require("../context/SvgRefProvider");
-Object.keys(_SvgRefProvider).forEach(function (key) {
+var _ChartProvider = require("../context/ChartProvider");
+Object.keys(_ChartProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _SvgRefProvider[key]) return;
+  if (key in exports && exports[key] === _ChartProvider[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _SvgRefProvider[key];
+      return _ChartProvider[key];
     }
   });
 });

package/node/internals/plugins/allPlugins.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ALL_PLUGINS = void 0;
+var _useChartInteraction = require("./featurePlugins/useChartInteraction");
+// This file should be removed after creating all plugins  in favor of a file per chart type.
+
+const ALL_PLUGINS = exports.ALL_PLUGINS = [_useChartInteraction.useChartInteraction];

package/node/internals/plugins/corePlugins/corePlugins.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CHART_CORE_PLUGINS = void 0;
+var _useChartId = require("./useChartId");
+/**
+ * Internal plugins that create the tools used by the other plugins.
+ * These plugins are used by the Charts components.
+ */
+const CHART_CORE_PLUGINS = exports.CHART_CORE_PLUGINS = [_useChartId.useChartId];

package/node/internals/plugins/corePlugins/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CHART_CORE_PLUGINS", {
+  enumerable: true,
+  get: function () {
+    return _corePlugins.CHART_CORE_PLUGINS;
+  }
+});
+var _corePlugins = require("./corePlugins");

package/node/internals/plugins/corePlugins/useChartId/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useChartId", {
+  enumerable: true,
+  get: function () {
+    return _useChartId.useChartId;
+  }
+});
+var _useChartId = require("./useChartId");

package/node/internals/plugins/corePlugins/useChartId/useChartId.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartId = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useChartId = require("./useChartId.utils");
+const useChartId = ({
+  params,
+  store
+}) => {
+  React.useEffect(() => {
+    store.update(prevState => {
+      if (params.id === prevState.id.providedChartId && prevState.id.chartId !== undefined) {
+        return prevState;
+      }
+      return (0, _extends2.default)({}, prevState, {
+        id: (0, _extends2.default)({}, prevState.id, {
+          chartId: params.id ?? (0, _useChartId.createChartDefaultId)()
+        })
+      });
+    });
+  }, [store, params.id]);
+  return {};
+};
+exports.useChartId = useChartId;
+useChartId.params = {
+  id: true
+};
+useChartId.getInitialState = ({
+  id
+}) => ({
+  id: {
+    chartId: (0, _useChartId.createChartDefaultId)(),
+    providedChartId: id
+  }
+});