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

package/context/InteractionSelectors.d.ts

@@ -0,0 +1,382 @@
+import { UseChartInteractionSignature } from '../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types';
+import { ChartState } from '../internals/plugins/models';
+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: 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").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").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;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => import("..").BarItemIdentifier | import("..").ScatterItemIdentifier | import("..").LineItemIdentifier | import("..").PieItemIdentifier | null;
+    dependencies: [typeof selectInteraction];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+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").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+        axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
+        isVoronoiEnabled?: boolean;
+    }) => import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        item: null | import("../internals").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+        axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
+        isVoronoiEnabled?: boolean;
+    }) => import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
+    dependencies: [typeof selectInteraction];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+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) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        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").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+        axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
+        isVoronoiEnabled?: boolean;
+    }) => {
+        value: number | Date | string;
+        index: number;
+    } | null) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => {
+        value: number | Date | string;
+        index: number;
+    } | null;
+    dependencies: [typeof selectInteraction];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+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) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        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").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+        axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
+        isVoronoiEnabled?: boolean;
+    }) => {
+        value: number | Date | string;
+        index: number;
+    } | null) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => {
+        value: number | Date | string;
+        index: number;
+    } | null;
+    dependencies: [typeof selectInteraction];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+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;
+} & {
+    resultFunc: (resultFuncArgs_0: import("..").BarItemIdentifier | import("..").ScatterItemIdentifier | import("..").LineItemIdentifier | import("..").PieItemIdentifier | null) => boolean;
+    memoizedResultFunc: ((resultFuncArgs_0: import("..").BarItemIdentifier | import("..").ScatterItemIdentifier | import("..").LineItemIdentifier | import("..").PieItemIdentifier | null) => boolean) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => boolean;
+    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").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").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;
+            resultsCount: () => number;
+            resetResultsCount: () => void;
+        };
+        lastResult: () => import("..").BarItemIdentifier | import("..").ScatterItemIdentifier | import("..").LineItemIdentifier | import("..").PieItemIdentifier | null;
+        dependencies: [typeof selectInteraction];
+        recomputations: () => number;
+        resetRecomputations: () => void;
+        dependencyRecomputations: () => number;
+        resetDependencyRecomputations: () => void;
+    } & {
+        argsMemoize: typeof import("reselect").weakMapMemoize;
+        memoize: typeof import("reselect").weakMapMemoize;
+    }];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+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;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        value: number | Date | string;
+        index: number;
+    } | null) => boolean;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        value: number | Date | string;
+        index: number;
+    } | null) => boolean) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => boolean;
+    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) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    } & {
+        resultFunc: (resultFuncArgs_0: {
+            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").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+            axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
+            isVoronoiEnabled?: boolean;
+        }) => {
+            value: number | Date | string;
+            index: number;
+        } | null) & {
+            clearCache: () => void;
+            resultsCount: () => number;
+            resetResultsCount: () => void;
+        };
+        lastResult: () => {
+            value: number | Date | string;
+            index: number;
+        } | null;
+        dependencies: [typeof selectInteraction];
+        recomputations: () => number;
+        resetRecomputations: () => void;
+        dependencyRecomputations: () => number;
+        resetDependencyRecomputations: () => void;
+    } & {
+        argsMemoize: typeof import("reselect").weakMapMemoize;
+        memoize: typeof import("reselect").weakMapMemoize;
+    }];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+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;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        value: number | Date | string;
+        index: number;
+    } | null) => boolean;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        value: number | Date | string;
+        index: number;
+    } | null) => boolean) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => boolean;
+    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) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    } & {
+        resultFunc: (resultFuncArgs_0: {
+            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").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+            axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
+            isVoronoiEnabled?: boolean;
+        }) => {
+            value: number | Date | string;
+            index: number;
+        } | null) & {
+            clearCache: () => void;
+            resultsCount: () => number;
+            resetResultsCount: () => void;
+        };
+        lastResult: () => {
+            value: number | Date | string;
+            index: number;
+        } | null;
+        dependencies: [typeof selectInteraction];
+        recomputations: () => number;
+        resetRecomputations: () => void;
+        dependencyRecomputations: () => number;
+        resetDependencyRecomputations: () => void;
+    } & {
+        argsMemoize: typeof import("reselect").weakMapMemoize;
+        memoize: typeof import("reselect").weakMapMemoize;
+    }];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+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").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+        axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
+        isVoronoiEnabled?: boolean;
+    }) => boolean | undefined;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        item: null | import("../internals").ChartItemIdentifier<import("../internals").ChartSeriesType>;
+        axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
+        isVoronoiEnabled?: boolean;
+    }) => boolean | undefined) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => boolean | undefined;
+    dependencies: [typeof selectInteraction];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+export {};

package/context/InteractionSelectors.js

@@ -0,0 +1,12 @@
+import { createSelector } from "../internals/plugins/utils/selectors.js";
+function selectInteraction(state) {
+  return state.interaction;
+}
+export const selectorChartsInteractionItem = createSelector(selectInteraction, interaction => interaction.item);
+export const selectorChartsInteractionAxis = createSelector(selectInteraction, interaction => interaction.axis);
+export const selectorChartsInteractionXAxis = createSelector(selectInteraction, interaction => interaction.axis.x);
+export const selectorChartsInteractionYAxis = createSelector(selectInteraction, interaction => interaction.axis.y);
+export const selectorChartsInteractionItemIsDefined = createSelector(selectorChartsInteractionItem, item => item !== null);
+export const selectorChartsInteractionXAxisIsDefined = createSelector(selectorChartsInteractionXAxis, x => x !== null);
+export const selectorChartsInteractionYAxisIsDefined = createSelector(selectorChartsInteractionYAxis, y => y !== null);
+export const selectorChartsInteractionIsVoronoiEnabled = createSelector(selectInteraction, interaction => interaction.isVoronoiEnabled);

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+export interface SizeProviderProps {
+    /**
+     * The width of the chart in px. If not defined, it takes the width of the parent element.
+     */
+    width?: number;
+    /**
+     * The height of the chart in px. If not defined, it takes the height of the parent element.
+     */
+    height?: number;
+    children: React.ReactNode;
+}
+export interface SizeContextState extends Required<Pick<SizeProviderProps, 'height' | 'width'>> {
+    /**
+     * The ref of the svg element that the chart is rendered in.
+     */
+    svgRef: React.RefObject<SVGSVGElement>;
+    /**
+     * If the chart has a defined size.
+     */
+    hasIntrinsicSize: boolean;
+    /**
+     * The input height of the chart in px.
+     */
+    inHeight?: number;
+    /**
+     * The input width of the chart in px.
+     */
+    inWidth?: number;
+}

package/context/SizeProvider/Size.types.js

@@ -0,0 +1 @@
+export {};

package/context/SizeProvider/SizeContext.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { Initializable } from '../context.types';
+import { SizeContextState } from './Size.types';
+export declare const SizeContext: React.Context<Initializable<SizeContextState>>;

package/context/SizeProvider/SizeContext.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export const SizeContext = /*#__PURE__*/React.createContext({
+  isInitialized: false,
+  data: {
+    hasIntrinsicSize: false,
+    svgRef: {
+      current: null
+    },
+    height: 0,
+    width: 0
+  }
+});
+if (process.env.NODE_ENV !== 'production') {
+  SizeContext.displayName = 'SizeContext';
+}

package/context/SizeProvider/SizeProvider.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { SizeProviderProps } from './Size.types';
+/**
+ * The size provider.
+ *
+ * This differs from the DrawingProvider in that it provides the full size of the container.
+ *
+ * This provider is also responsible for resolving the size of the container before rendering and if the parent size changes.
+ */
+declare function SizeProvider(props: SizeProviderProps): React.JSX.Element;
+export { SizeProvider };

package/context/SizeProvider/SizeProvider.js

@@ -0,0 +1,26 @@
+'use client';
+
+import * as React from 'react';
+import { SizeContext } from "./SizeContext.js";
+import { useChartContainerDimensions } from "./useChartContainerDimensions.js";
+
+/**
+ * The size provider.
+ *
+ * This differs from the DrawingProvider in that it provides the full size of the container.
+ *
+ * This provider is also responsible for resolving the size of the container before rendering and if the parent size changes.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+function SizeProvider(props) {
+  const dimensions = useChartContainerDimensions(props.width, props.height);
+  const value = React.useMemo(() => ({
+    isInitialized: true,
+    data: dimensions
+  }), [dimensions]);
+  return /*#__PURE__*/_jsx(SizeContext.Provider, {
+    value: value,
+    children: props.children
+  });
+}
+export { SizeProvider };

package/context/SizeProvider/index.d.ts

@@ -0,0 +1,4 @@
+export * from './SizeProvider';
+export * from './SizeContext';
+export * from './useSize';
+export * from './Size.types';

package/context/SizeProvider/index.js

@@ -0,0 +1,4 @@
+export * from "./SizeProvider.js";
+export * from "./SizeContext.js";
+export * from "./useSize.js";
+export * from "./Size.types.js";

package/context/SizeProvider/useChartContainerDimensions.d.ts

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

package/{modern/ChartContainer → context/SizeProvider}/useChartContainerDimensions.js

@@ -4,7 +4,8 @@
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ownerWindow from '@mui/utils/ownerWindow';
-export const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBeforeRender) => {
+const MAX_COMPUTE_RUN = 10;
+export const useChartContainerDimensions = (inWidth, inHeight) => {
   const hasInSize = inWidth !== undefined && inHeight !== undefined;
   const stateRef = React.useRef({
     displayError: false,
@@ -19,6 +20,10 @@ export const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBefore
   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);
@@ -42,7 +47,7 @@ export const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBefore
   // https://github.com/mui/mui-x/issues/13477#issuecomment-2336634785
   useEnhancedEffect(() => {
     // computeRun is used to avoid infinite loops.
-    if (hasInSize || !resolveSizeBeforeRender || !stateRef.current.initialCompute || stateRef.current.computeRun > 20) {
+    if (hasInSize || !stateRef.current.initialCompute || stateRef.current.computeRun > MAX_COMPUTE_RUN) {
       return;
     }
     const computedSize = computeSize();
@@ -51,7 +56,7 @@ export const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBefore
     } else if (stateRef.current.initialCompute) {
       stateRef.current.initialCompute = false;
     }
-  }, [width, height, computeSize, resolveSizeBeforeRender, hasInSize]);
+  }, [width, height, computeSize, hasInSize]);
   useEnhancedEffect(() => {
     if (hasInSize) {
       return () => {};
@@ -90,9 +95,14 @@ export const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBefore
       stateRef.current.displayError = false;
     }
   }
+  const finalWidth = inWidth ?? width;
+  const finalHeight = inHeight ?? height;
   return {
-    containerRef: rootRef,
-    width: inWidth ?? width,
-    height: inHeight ?? height
+    svgRef: rootRef,
+    width: finalWidth,
+    height: finalHeight,
+    hasIntrinsicSize: finalWidth > 0 && finalHeight > 0,
+    inWidth,
+    inHeight
   };
 };

package/context/SizeProvider/useSize.d.ts

@@ -0,0 +1,5 @@
+import { SizeContextState } from './Size.types';
+/**
+ * Returns the size of the chart. And the ref of the container element that the chart is rendered in.
+ */
+export declare const useSize: () => SizeContextState;

package/context/SizeProvider/useSize.js

@@ -0,0 +1,13 @@
+'use client';
+
+import * as React from 'react';
+import { SizeContext } from "./SizeContext.js";
+/**
+ * Returns the size of the chart. And the ref of the container element that the chart is rendered in.
+ */
+export const useSize = () => {
+  const {
+    data
+  } = React.useContext(SizeContext);
+  return data;
+};

package/context/index.d.ts

@@ -1,3 +1,5 @@
 export * from './HighlightedProvider';
 export { ZAxisContextProvider } from './ZAxisContextProvider';
 export type { ZAxisContextProviderProps } from './ZAxisContextProvider';
+export { ChartDataProvider } from './ChartDataProvider';
+export type { ChartDataProviderProps } from './ChartDataProvider';

package/context/index.js

@@ -1,2 +1,3 @@
 export * from "./HighlightedProvider/index.js";
-export { ZAxisContextProvider } from "./ZAxisContextProvider.js";
+export { ZAxisContextProvider } from "./ZAxisContextProvider.js";
+export { ChartDataProvider } from "./ChartDataProvider/index.js";