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

package/context/InteractionSelectors.d.ts

@@ -1,22 +1,25 @@
+import { UseChartInteractionSignature } from '../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types';
 import { ChartState } from '../internals/plugins/models';
-declare function selectInteraction(state: ChartState): {
-    item: null | import("../internals/plugins/models").ItemInteractionData<import("../internals").ChartSeriesType>;
-    axis: import("../internals/plugins/models").AxisInteractionData;
+declare function selectInteraction(state: ChartState<[UseChartInteractionSignature]>): {
+    item: null | import("../internals").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+    axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
     isVoronoiEnabled?: boolean;
 };
-export declare const selectorChartsInteractionItem: ((state: ChartState) => import("..").BarItemIdentifier | import("..").ScatterItemIdentifier | import("..").LineItemIdentifier | import("..").PieItemIdentifier | null) & {
+export declare const selectorChartsInteractionItem: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+    cacheKey: import("../internals/plugins/models").ChartStateCacheKey;
+}) => import("..").BarItemIdentifier | import("..").ScatterItemIdentifier | import("..").LineItemIdentifier | import("..").PieItemIdentifier | null) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
 } & {
     resultFunc: (resultFuncArgs_0: {
-        item: null | import("../internals/plugins/models").ItemInteractionData<import("../internals").ChartSeriesType>;
-        axis: import("../internals/plugins/models").AxisInteractionData;
+        item: null | import("../internals").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+        axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
         isVoronoiEnabled?: boolean;
     }) => import("..").BarItemIdentifier | import("..").ScatterItemIdentifier | import("..").LineItemIdentifier | import("..").PieItemIdentifier | null;
     memoizedResultFunc: ((resultFuncArgs_0: {
-        item: null | import("../internals/plugins/models").ItemInteractionData<import("../internals").ChartSeriesType>;
-        axis: import("../internals/plugins/models").AxisInteractionData;
+        item: null | import("../internals").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+        axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
         isVoronoiEnabled?: boolean;
     }) => import("..").BarItemIdentifier | import("..").ScatterItemIdentifier | import("..").LineItemIdentifier | import("..").PieItemIdentifier | null) & {
         clearCache: () => void;
@@ -33,26 +36,28 @@ export declare const selectorChartsInteractionItem: ((state: ChartState) => impo
     argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartsInteractionAxis: ((state: ChartState) => import("../internals/plugins/models").AxisInteractionData) & {
+export declare const selectorChartsInteractionAxis: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+    cacheKey: import("../internals/plugins/models").ChartStateCacheKey;
+}) => import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
 } & {
     resultFunc: (resultFuncArgs_0: {
-        item: null | import("../internals/plugins/models").ItemInteractionData<import("../internals").ChartSeriesType>;
-        axis: import("../internals/plugins/models").AxisInteractionData;
+        item: null | import("../internals").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+        axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
         isVoronoiEnabled?: boolean;
-    }) => import("../internals/plugins/models").AxisInteractionData;
+    }) => import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
     memoizedResultFunc: ((resultFuncArgs_0: {
-        item: null | import("../internals/plugins/models").ItemInteractionData<import("../internals").ChartSeriesType>;
-        axis: import("../internals/plugins/models").AxisInteractionData;
+        item: null | import("../internals").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+        axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
         isVoronoiEnabled?: boolean;
-    }) => import("../internals/plugins/models").AxisInteractionData) & {
+    }) => import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData) & {
         clearCache: () => void;
         resultsCount: () => number;
         resetResultsCount: () => void;
     };
-    lastResult: () => import("../internals/plugins/models").AxisInteractionData;
+    lastResult: () => import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
     dependencies: [typeof selectInteraction];
     recomputations: () => number;
     resetRecomputations: () => void;
@@ -62,7 +67,9 @@ export declare const selectorChartsInteractionAxis: ((state: ChartState) => impo
     argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartsInteractionXAxis: ((state: ChartState) => {
+export declare const selectorChartsInteractionXAxis: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+    cacheKey: import("../internals/plugins/models").ChartStateCacheKey;
+}) => {
     value: number | Date | string;
     index: number;
 } | null) & {
@@ -71,16 +78,16 @@ export declare const selectorChartsInteractionXAxis: ((state: ChartState) => {
     resetResultsCount: () => void;
 } & {
     resultFunc: (resultFuncArgs_0: {
-        item: null | import("../internals/plugins/models").ItemInteractionData<import("../internals").ChartSeriesType>;
-        axis: import("../internals/plugins/models").AxisInteractionData;
+        item: null | import("../internals").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+        axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
         isVoronoiEnabled?: boolean;
     }) => {
         value: number | Date | string;
         index: number;
     } | null;
     memoizedResultFunc: ((resultFuncArgs_0: {
-        item: null | import("../internals/plugins/models").ItemInteractionData<import("../internals").ChartSeriesType>;
-        axis: import("../internals/plugins/models").AxisInteractionData;
+        item: null | import("../internals").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+        axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
         isVoronoiEnabled?: boolean;
     }) => {
         value: number | Date | string;
@@ -103,7 +110,9 @@ export declare const selectorChartsInteractionXAxis: ((state: ChartState) => {
     argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartsInteractionYAxis: ((state: ChartState) => {
+export declare const selectorChartsInteractionYAxis: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+    cacheKey: import("../internals/plugins/models").ChartStateCacheKey;
+}) => {
     value: number | Date | string;
     index: number;
 } | null) & {
@@ -112,16 +121,16 @@ export declare const selectorChartsInteractionYAxis: ((state: ChartState) => {
     resetResultsCount: () => void;
 } & {
     resultFunc: (resultFuncArgs_0: {
-        item: null | import("../internals/plugins/models").ItemInteractionData<import("../internals").ChartSeriesType>;
-        axis: import("../internals/plugins/models").AxisInteractionData;
+        item: null | import("../internals").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+        axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
         isVoronoiEnabled?: boolean;
     }) => {
         value: number | Date | string;
         index: number;
     } | null;
     memoizedResultFunc: ((resultFuncArgs_0: {
-        item: null | import("../internals/plugins/models").ItemInteractionData<import("../internals").ChartSeriesType>;
-        axis: import("../internals/plugins/models").AxisInteractionData;
+        item: null | import("../internals").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+        axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
         isVoronoiEnabled?: boolean;
     }) => {
         value: number | Date | string;
@@ -144,7 +153,9 @@ export declare const selectorChartsInteractionYAxis: ((state: ChartState) => {
     argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartsInteractionItemIsDefined: ((state: ChartState) => boolean) & {
+export declare const selectorChartsInteractionItemIsDefined: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+    cacheKey: import("../internals/plugins/models").ChartStateCacheKey;
+}) => boolean) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
@@ -156,19 +167,21 @@ export declare const selectorChartsInteractionItemIsDefined: ((state: ChartState
         resetResultsCount: () => void;
     };
     lastResult: () => boolean;
-    dependencies: [((state: ChartState) => import("..").BarItemIdentifier | import("..").ScatterItemIdentifier | import("..").LineItemIdentifier | import("..").PieItemIdentifier | null) & {
+    dependencies: [((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+        cacheKey: import("../internals/plugins/models").ChartStateCacheKey;
+    }) => import("..").BarItemIdentifier | import("..").ScatterItemIdentifier | import("..").LineItemIdentifier | import("..").PieItemIdentifier | null) & {
         clearCache: () => void;
         resultsCount: () => number;
         resetResultsCount: () => void;
     } & {
         resultFunc: (resultFuncArgs_0: {
-            item: null | import("../internals/plugins/models").ItemInteractionData<import("../internals").ChartSeriesType>;
-            axis: import("../internals/plugins/models").AxisInteractionData;
+            item: null | import("../internals").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+            axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
             isVoronoiEnabled?: boolean;
         }) => import("..").BarItemIdentifier | import("..").ScatterItemIdentifier | import("..").LineItemIdentifier | import("..").PieItemIdentifier | null;
         memoizedResultFunc: ((resultFuncArgs_0: {
-            item: null | import("../internals/plugins/models").ItemInteractionData<import("../internals").ChartSeriesType>;
-            axis: import("../internals/plugins/models").AxisInteractionData;
+            item: null | import("../internals").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+            axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
             isVoronoiEnabled?: boolean;
         }) => import("..").BarItemIdentifier | import("..").ScatterItemIdentifier | import("..").LineItemIdentifier | import("..").PieItemIdentifier | null) & {
             clearCache: () => void;
@@ -193,7 +206,9 @@ export declare const selectorChartsInteractionItemIsDefined: ((state: ChartState
     argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartsInteractionXAxisIsDefined: ((state: ChartState) => boolean) & {
+export declare const selectorChartsInteractionXAxisIsDefined: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+    cacheKey: import("../internals/plugins/models").ChartStateCacheKey;
+}) => boolean) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
@@ -211,7 +226,9 @@ export declare const selectorChartsInteractionXAxisIsDefined: ((state: ChartStat
         resetResultsCount: () => void;
     };
     lastResult: () => boolean;
-    dependencies: [((state: ChartState) => {
+    dependencies: [((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+        cacheKey: import("../internals/plugins/models").ChartStateCacheKey;
+    }) => {
         value: number | Date | string;
         index: number;
     } | null) & {
@@ -220,16 +237,16 @@ export declare const selectorChartsInteractionXAxisIsDefined: ((state: ChartStat
         resetResultsCount: () => void;
     } & {
         resultFunc: (resultFuncArgs_0: {
-            item: null | import("../internals/plugins/models").ItemInteractionData<import("../internals").ChartSeriesType>;
-            axis: import("../internals/plugins/models").AxisInteractionData;
+            item: null | import("../internals").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+            axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
             isVoronoiEnabled?: boolean;
         }) => {
             value: number | Date | string;
             index: number;
         } | null;
         memoizedResultFunc: ((resultFuncArgs_0: {
-            item: null | import("../internals/plugins/models").ItemInteractionData<import("../internals").ChartSeriesType>;
-            axis: import("../internals/plugins/models").AxisInteractionData;
+            item: null | import("../internals").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+            axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
             isVoronoiEnabled?: boolean;
         }) => {
             value: number | Date | string;
@@ -260,7 +277,9 @@ export declare const selectorChartsInteractionXAxisIsDefined: ((state: ChartStat
     argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartsInteractionYAxisIsDefined: ((state: ChartState) => boolean) & {
+export declare const selectorChartsInteractionYAxisIsDefined: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+    cacheKey: import("../internals/plugins/models").ChartStateCacheKey;
+}) => boolean) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
@@ -278,7 +297,9 @@ export declare const selectorChartsInteractionYAxisIsDefined: ((state: ChartStat
         resetResultsCount: () => void;
     };
     lastResult: () => boolean;
-    dependencies: [((state: ChartState) => {
+    dependencies: [((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+        cacheKey: import("../internals/plugins/models").ChartStateCacheKey;
+    }) => {
         value: number | Date | string;
         index: number;
     } | null) & {
@@ -287,16 +308,16 @@ export declare const selectorChartsInteractionYAxisIsDefined: ((state: ChartStat
         resetResultsCount: () => void;
     } & {
         resultFunc: (resultFuncArgs_0: {
-            item: null | import("../internals/plugins/models").ItemInteractionData<import("../internals").ChartSeriesType>;
-            axis: import("../internals/plugins/models").AxisInteractionData;
+            item: null | import("../internals").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+            axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
             isVoronoiEnabled?: boolean;
         }) => {
             value: number | Date | string;
             index: number;
         } | null;
         memoizedResultFunc: ((resultFuncArgs_0: {
-            item: null | import("../internals/plugins/models").ItemInteractionData<import("../internals").ChartSeriesType>;
-            axis: import("../internals/plugins/models").AxisInteractionData;
+            item: null | import("../internals").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+            axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
             isVoronoiEnabled?: boolean;
         }) => {
             value: number | Date | string;
@@ -327,19 +348,21 @@ export declare const selectorChartsInteractionYAxisIsDefined: ((state: ChartStat
     argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartsInteractionIsVoronoiEnabled: ((state: ChartState) => boolean | undefined) & {
+export declare const selectorChartsInteractionIsVoronoiEnabled: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+    cacheKey: import("../internals/plugins/models").ChartStateCacheKey;
+}) => boolean | undefined) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
 } & {
     resultFunc: (resultFuncArgs_0: {
-        item: null | import("../internals/plugins/models").ItemInteractionData<import("../internals").ChartSeriesType>;
-        axis: import("../internals/plugins/models").AxisInteractionData;
+        item: null | import("../internals").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+        axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
         isVoronoiEnabled?: boolean;
     }) => boolean | undefined;
     memoizedResultFunc: ((resultFuncArgs_0: {
-        item: null | import("../internals/plugins/models").ItemInteractionData<import("../internals").ChartSeriesType>;
-        axis: import("../internals/plugins/models").AxisInteractionData;
+        item: null | import("../internals").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+        axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
         isVoronoiEnabled?: boolean;
     }) => boolean | undefined) & {
         clearCache: () => void;

package/context/SizeProvider/Size.types.d.ts

@@ -12,9 +12,9 @@ export interface SizeProviderProps {
 }
 export interface SizeContextState extends Required<Pick<SizeProviderProps, 'height' | 'width'>> {
     /**
-     * The ref of the container element that the chart is rendered in.
+     * The ref of the svg element that the chart is rendered in.
      */
-    containerRef: React.RefObject<HTMLDivElement>;
+    svgRef: React.RefObject<SVGSVGElement>;
     /**
      * If the chart has a defined size.
      */

package/context/SizeProvider/SizeContext.js

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

package/context/SizeProvider/useChartContainerDimensions.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export declare const useChartContainerDimensions: (inWidth?: number, inHeight?: number) => {
-    containerRef: React.RefObject<HTMLDivElement>;
+    svgRef: React.RefObject<SVGSVGElement>;
     width: number;
     height: number;
     hasIntrinsicSize: boolean;

package/context/SizeProvider/useChartContainerDimensions.js

@@ -20,6 +20,10 @@ export 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 = ownerWindow(mainEl);
@@ -94,7 +98,7 @@ export 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/hooks/useAxisEvents.js

@@ -7,7 +7,7 @@ import { isBandScale } from "../internals/isBandScale.js";
 import { getSVGPoint } from "../internals/getSVGPoint.js";
 import { useSvgRef } from "./useSvgRef.js";
 import { useDrawingArea } from "./useDrawingArea.js";
-import { useStore } from "../internals/useStore.js";
+import { useStore } from "../internals/store/useStore.js";
 function getAsANumber(value) {
   return value instanceof Date ? value.getTime() : value;
 }

package/hooks/useChartId.js

@@ -1,10 +1,9 @@
 'use client';
 
-import * as React from 'react';
-import { DrawingAreaContext } from "../context/DrawingAreaProvider/index.js";
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { selectorChartId } from "../internals/plugins/corePlugins/useChartId/useChartId.selectors.js";
 export function useChartId() {
-  const {
-    chartId
-  } = React.useContext(DrawingAreaContext);
-  return React.useMemo(() => chartId, [chartId]);
+  const store = useStore();
+  return useSelector(store, selectorChartId);
 }

package/hooks/useInteractionItemProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { useHighlighted } from "../context/index.js";
-import { useStore } from "../internals/useStore.js";
+import { useStore } from "../internals/store/useStore.js";
 export const useInteractionItemProps = skip => {
   const store = useStore();
   const {
@@ -30,7 +30,9 @@ export 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/hooks/useSvgRef.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare function useSvgRef(): React.MutableRefObject<SVGSVGElement>;
+export declare function useSvgRef(): React.RefObject<SVGSVGElement>;

package/hooks/useSvgRef.js

@@ -1,14 +1,10 @@
 'use client';
 
-import * as React from 'react';
-import { SvgRefContext } from "../context/SvgRefProvider/index.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
 export function useSvgRef() {
-  const {
-    isInitialized,
-    data
-  } = React.useContext(SvgRefContext);
-  if (!isInitialized) {
+  const context = 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/index.js

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

package/internals/components/ChartsAxesGradients/ChartsAxesGradients.js

@@ -1,14 +1,11 @@
 import * as React from 'react';
 import { useCartesianContext } from "../../../context/CartesianProvider/index.js";
-import { DrawingAreaContext } from "../../../context/DrawingAreaProvider/index.js";
-import { useDrawingArea } from "../../../hooks/index.js";
+import { useChartId, useDrawingArea } from "../../../hooks/index.js";
 import ChartsPiecewiseGradient from "./ChartsPiecewiseGradient.js";
 import ChartsContinuousGradient from "./ChartsContinuousGradient.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function useChartGradient() {
-  const {
-    chartId
-  } = React.useContext(DrawingAreaContext);
+  const chartId = useChartId();
   return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}`, [chartId]);
 }
 export function ChartsAxesGradients() {

package/internals/defaultizeColor.d.ts

@@ -2,7 +2,7 @@ import { AllSeriesType } from '../models/seriesType';
 export declare function defaultizeColor(series: AllSeriesType, seriesIndex: number, colors?: string[]): {
     data: {
         color: string;
-        label?: (string | ((location: "tooltip" | "legend" | "arc") => string)) | undefined;
+        label?: string | ((location: "tooltip" | "legend" | "arc") => string) | undefined;
         value: number;
         id?: import("..").PieItemId | undefined;
     }[];

package/internals/index.d.ts

@@ -1,5 +1,4 @@
 export * from './components/ChartsAxesGradients';
-export * from '../ChartContainer/ResizableContainer';
 export { useSeries } from '../hooks/useSeries';
 export { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 export { useDrawingArea } from '../hooks/useDrawingArea';
@@ -18,7 +17,6 @@ export * from './getScale';
 export * from './computeAxisValue';
 export * from '../context/CartesianProvider';
 export * from '../context/DrawingAreaProvider';
-export * from '../context/InteractionProvider';
 export * from '../context/SeriesProvider';
 export * from '../context/ZAxisContextProvider';
 export * from '../context/PluginProvider';
@@ -27,7 +25,7 @@ export type * from '../context/context.types';
 export { getAxisExtremum } from '../context/CartesianProvider/getAxisExtremum';
 export * from '../context/ChartDataProvider';
 export * from '../context/SizeProvider';
-export * from '../context/SvgRefProvider';
+export * from '../context/ChartProvider';
 export * from '../models/seriesType/config';
 export * from '../models/seriesType/common';
 export * from '../models/z-axis';

package/internals/index.js

@@ -1,6 +1,5 @@
 // Components
 export * from "./components/ChartsAxesGradients/index.js";
-export * from "../ChartContainer/ResizableContainer.js";
 
 // hooks
 export { useSeries } from "../hooks/useSeries.js";
@@ -26,7 +25,6 @@ export * from "./computeAxisValue.js";
 
 export * from "../context/CartesianProvider/index.js";
 export * from "../context/DrawingAreaProvider/index.js";
-export * from "../context/InteractionProvider.js";
 export * from "../context/SeriesProvider/index.js";
 export * from "../context/ZAxisContextProvider.js";
 export * from "../context/PluginProvider/index.js";
@@ -34,7 +32,7 @@ export * from "../context/AnimationProvider/index.js";
 export { getAxisExtremum } from "../context/CartesianProvider/getAxisExtremum.js";
 export * from "../context/ChartDataProvider/index.js";
 export * from "../context/SizeProvider/index.js";
-export * from "../context/SvgRefProvider/index.js";
+export * from "../context/ChartProvider/index.js";
 
 // series configuration
 export * from "../models/seriesType/config.js";

package/internals/plugins/allPlugins.d.ts

@@ -0,0 +1 @@
+export declare const ALL_PLUGINS: readonly [import("./models").ChartPlugin<import("./featurePlugins/useChartInteraction").UseChartInteractionSignature>];

package/internals/plugins/allPlugins.js

@@ -0,0 +1,3 @@
+// This file should be removed after creating all plugins  in favor of a file per chart type.
+import { useChartInteraction } from "./featurePlugins/useChartInteraction/index.js";
+export const ALL_PLUGINS = [useChartInteraction];

package/internals/plugins/corePlugins/corePlugins.d.ts

@@ -0,0 +1,10 @@
+import { ConvertPluginsIntoSignatures } from '../models/helpers';
+import { UseChartIdParameters } from './useChartId';
+/**
+ * Internal plugins that create the tools used by the other plugins.
+ * These plugins are used by the Charts components.
+ */
+export declare const CHART_CORE_PLUGINS: readonly [import("../models").ChartPlugin<import("./useChartId").UseChartIdSignature>];
+export type ChartCorePluginSignatures = ConvertPluginsIntoSignatures<typeof CHART_CORE_PLUGINS>;
+export interface ChartCorePluginParameters extends UseChartIdParameters {
+}

package/internals/plugins/corePlugins/corePlugins.js

@@ -0,0 +1,7 @@
+import { useChartId } from "./useChartId/index.js";
+
+/**
+ * Internal plugins that create the tools used by the other plugins.
+ * These plugins are used by the Charts components.
+ */
+export const CHART_CORE_PLUGINS = [useChartId];

package/internals/plugins/corePlugins/index.d.ts

@@ -0,0 +1,2 @@
+export { CHART_CORE_PLUGINS } from './corePlugins';
+export type { ChartCorePluginSignatures, ChartCorePluginParameters } from './corePlugins';

package/internals/plugins/corePlugins/index.js

@@ -0,0 +1 @@
+export { CHART_CORE_PLUGINS } from "./corePlugins.js";

package/internals/plugins/corePlugins/useChartId/index.d.ts

@@ -0,0 +1,2 @@
+export { useChartId } from './useChartId';
+export type { UseChartIdSignature, UseChartIdParameters, UseChartIdDefaultizedParameters, } from './useChartId.types';

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

@@ -0,0 +1 @@
+export { useChartId } from "./useChartId.js";

package/internals/plugins/corePlugins/useChartId/useChartId.d.ts

@@ -0,0 +1,3 @@
+import { ChartPlugin } from '../../models';
+import { UseChartIdSignature } from './useChartId.types';
+export declare const useChartId: ChartPlugin<UseChartIdSignature>;

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

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { createChartDefaultId } from "./useChartId.utils.js";
+export const useChartId = ({
+  params,
+  store
+}) => {
+  React.useEffect(() => {
+    store.update(prevState => {
+      if (params.id === prevState.id.providedChartId && prevState.id.chartId !== undefined) {
+        return prevState;
+      }
+      return _extends({}, prevState, {
+        id: _extends({}, prevState.id, {
+          chartId: params.id ?? createChartDefaultId()
+        })
+      });
+    });
+  }, [store, params.id]);
+  return {};
+};
+useChartId.params = {
+  id: true
+};
+useChartId.getInitialState = ({
+  id
+}) => ({
+  id: {
+    chartId: createChartDefaultId(),
+    providedChartId: id
+  }
+});

package/internals/plugins/corePlugins/useChartId/useChartId.selectors.d.ts

@@ -0,0 +1,36 @@
+import { ChartRootSelector } from '../../utils/selectors';
+import { UseChartIdSignature } from './useChartId.types';
+/**
+ * Get the id attribute of the chart.
+ * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
+ * @returns {string} The id attribute of the chart.
+ */
+export declare const selectorChartId: ((state: import("./useChartId.types").UseChartIdState & Partial<{}> & {
+    cacheKey: import("../../models").ChartStateCacheKey;
+}) => string) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        chartId: string;
+        providedChartId: string | undefined;
+    }) => string;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        chartId: string;
+        providedChartId: string | undefined;
+    }) => string) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => string;
+    dependencies: [ChartRootSelector<UseChartIdSignature>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};