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

package/internals/plugins/models/plugin.d.ts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import type { MergeSignaturesProperty, OptionalIfEmpty } from './helpers';
+import type { ChartCorePluginSignatures } from '../corePlugins';
+import { ChartStore } from '../utils/ChartStore';
+export interface ChartPluginOptions<TSignature extends ChartAnyPluginSignature> {
+    instance: ChartUsedInstance<TSignature>;
+    params: ChartUsedDefaultizedParams<TSignature>;
+    store: ChartUsedStore<TSignature>;
+    svgRef: React.RefObject<SVGSVGElement>;
+    plugins: ChartPlugin<ChartAnyPluginSignature>[];
+}
+type ChartResponse<TSignature extends ChartAnyPluginSignature> = OptionalIfEmpty<'publicAPI', TSignature['publicAPI']> & OptionalIfEmpty<'instance', TSignature['instance']>;
+export type ChartPluginSignature<T extends {
+    params?: {};
+    defaultizedParams?: {};
+    instance?: {};
+    publicAPI?: {};
+    state?: {};
+    dependencies?: readonly ChartAnyPluginSignature[];
+    optionalDependencies?: readonly ChartAnyPluginSignature[];
+}> = {
+    params: T extends {
+        params: {};
+    } ? T['params'] : {};
+    defaultizedParams: T extends {
+        defaultizedParams: {};
+    } ? T['defaultizedParams'] : {};
+    instance: T extends {
+        instance: {};
+    } ? T['instance'] : {};
+    state: T extends {
+        state: {};
+    } ? T['state'] : {};
+    publicAPI: T extends {
+        publicAPI: {};
+    } ? T['publicAPI'] : {};
+    dependencies: T extends {
+        dependencies: Array<any>;
+    } ? T['dependencies'] : [];
+    optionalDependencies: T extends {
+        optionalDependencies: Array<any>;
+    } ? T['optionalDependencies'] : [];
+};
+export type ChartAnyPluginSignature = {
+    state: any;
+    instance: any;
+    params: any;
+    defaultizedParams: any;
+    dependencies: any;
+    optionalDependencies: any;
+    publicAPI: any;
+};
+type ChartRequiredPlugins<TSignature extends ChartAnyPluginSignature> = [
+    ...ChartCorePluginSignatures,
+    ...TSignature['dependencies']
+];
+type PluginPropertyWithDependencies<TSignature extends ChartAnyPluginSignature, TProperty extends keyof ChartAnyPluginSignature> = TSignature[TProperty] & MergeSignaturesProperty<ChartRequiredPlugins<TSignature>, TProperty> & Partial<MergeSignaturesProperty<TSignature['optionalDependencies'], TProperty>>;
+export type ChartUsedParams<TSignature extends ChartAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'params'>;
+type ChartUsedDefaultizedParams<TSignature extends ChartAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'defaultizedParams'>;
+export type ChartUsedInstance<TSignature extends ChartAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'instance'> & {
+    /**
+     * Private property only defined in TypeScript to be able to access the plugin signature from the instance object.
+     */
+    $$signature: TSignature;
+};
+export type ChartUsedStore<TSignature extends ChartAnyPluginSignature> = ChartStore<[
+    TSignature,
+    ...TSignature['dependencies']
+]>;
+export type ChartPlugin<TSignature extends ChartAnyPluginSignature> = {
+    (options: ChartPluginOptions<TSignature>): ChartResponse<TSignature>;
+    getInitialState?: (params: ChartUsedDefaultizedParams<TSignature>) => TSignature['state'];
+    params: Record<keyof TSignature['params'], true>;
+};
+export {};

package/internals/plugins/models/plugin.js

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

package/internals/plugins/utils/ChartStore.d.ts

@@ -1,12 +1,13 @@
-import type { ChartState } from '../models';
+import type { ChartState } from '../models/chart';
+import type { ChartAnyPluginSignature } from '../models/plugin';
 type Listener<T> = (value: T) => void;
-export type StoreUpdater = (prevState: ChartState) => ChartState;
-export declare class ChartStore {
-    value: ChartState;
+export type StoreUpdater<TSignatures extends readonly ChartAnyPluginSignature[]> = (prevState: ChartState<TSignatures>) => ChartState<TSignatures>;
+export declare class ChartStore<TSignatures extends readonly ChartAnyPluginSignature[]> {
+    value: ChartState<TSignatures>;
     private listeners;
-    constructor(value: ChartState);
-    subscribe: (fn: Listener<ChartState>) => () => void;
-    getSnapshot: () => ChartState;
-    update: (updater: StoreUpdater) => void;
+    constructor(value: ChartState<TSignatures>);
+    subscribe: (fn: Listener<ChartState<TSignatures>>) => () => void;
+    getSnapshot: () => ChartState<TSignatures>;
+    update: (updater: StoreUpdater<TSignatures>) => void;
 }
 export {};

package/internals/plugins/utils/ChartStore.js

@@ -1,5 +1,3 @@
-// For now this is fixed. Will need to support generic if we add plugins
-
 export class ChartStore {
   constructor(value) {
     this.value = void 0;

package/internals/plugins/utils/selectors.d.ts

@@ -1,6 +1,6 @@
 import { CreateSelectorFunction } from 'reselect';
-import { ChartState } from '../models';
-export type ChartsRootSelector = (state: ChartState) => ChartState[keyof ChartState];
+import { ChartAnyPluginSignature, ChartState } from '../models';
+export type ChartRootSelector<TSignature extends ChartAnyPluginSignature> = <TSignatures extends [TSignature]>(state: ChartState<TSignatures>) => TSignature['state'][keyof TSignature['state']];
 export type ChartsSelector<TState, TArgs, TResult> = (state: TState, args: TArgs) => TResult;
 /**
  * Method wrapping reselect's createSelector to provide caching for chart instances.

package/internals/store/useCharts.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ChartStore } from '../plugins/utils/ChartStore';
+import { ChartAnyPluginSignature, ChartInstance, ChartPublicAPI, ConvertSignaturesIntoPlugins } from '../plugins/models';
+import { UseChartBaseProps } from './useCharts.types';
+import { UseChartInteractionState } from '../plugins/featurePlugins/useChartInteraction/useChartInteraction.types';
+export declare function useChartApiInitialization<T>(inputApiRef: React.MutableRefObject<T | undefined> | undefined): T;
+export declare function useCharts<TSignatures extends readonly ChartAnyPluginSignature[], TProps extends Partial<UseChartBaseProps<TSignatures>>>(inPlugins: ConvertSignaturesIntoPlugins<TSignatures>, props: TProps): {
+    contextValue: {
+        store: ChartStore<readonly [import("../plugins/corePlugins/useChartId").UseChartIdSignature, ...TSignatures]> & UseChartInteractionState;
+        publicAPI: ChartPublicAPI<TSignatures>;
+        instance: ChartInstance<TSignatures>;
+        svgRef: React.RefObject<SVGSVGElement>;
+    };
+};

package/internals/store/useCharts.js

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { ChartStore } from "../plugins/utils/ChartStore.js";
+import { CHART_CORE_PLUGINS } from "../plugins/corePlugins/index.js";
+export function useChartApiInitialization(inputApiRef) {
+  const fallbackPublicApiRef = React.useRef({});
+  if (inputApiRef) {
+    if (inputApiRef.current == null) {
+      // eslint-disable-next-line react-compiler/react-compiler
+      inputApiRef.current = {};
+    }
+    return inputApiRef.current;
+  }
+  return fallbackPublicApiRef.current;
+}
+let globalId = 0;
+export function useCharts(inPlugins, props) {
+  const plugins = React.useMemo(() => [...CHART_CORE_PLUGINS, ...inPlugins], [inPlugins]);
+  const pluginParams = {}; // To generate when plugins use params.
+  const instanceRef = React.useRef({});
+  const instance = instanceRef.current;
+  const publicAPI = useChartApiInitialization(props.apiRef);
+  const innerSvgRef = React.useRef(null);
+  const storeRef = React.useRef(null);
+  if (storeRef.current == null) {
+    // eslint-disable-next-line react-compiler/react-compiler
+    globalId += 1;
+    const initialState = {
+      // TODO remove when the interaction moves to plugin
+      interaction: {
+        item: null,
+        axis: {
+          x: null,
+          y: null
+        }
+      },
+      cacheKey: {
+        id: globalId
+      }
+    };
+    plugins.forEach(plugin => {
+      if (plugin.getInitialState) {
+        Object.assign(initialState, plugin.getInitialState({}));
+      }
+    });
+    storeRef.current = new ChartStore(initialState);
+  }
+  const runPlugin = plugin => {
+    const pluginResponse = plugin({
+      instance,
+      params: pluginParams,
+      plugins: plugins,
+      store: storeRef.current,
+      svgRef: innerSvgRef
+    });
+    if (pluginResponse.publicAPI) {
+      Object.assign(publicAPI, pluginResponse.publicAPI);
+    }
+    if (pluginResponse.instance) {
+      Object.assign(instance, pluginResponse.instance);
+    }
+  };
+  plugins.forEach(runPlugin);
+  const contextValue = React.useMemo(() => ({
+    store: storeRef.current,
+    publicAPI,
+    instance,
+    svgRef: innerSvgRef
+  }), [instance, publicAPI]);
+  return {
+    contextValue
+  };
+}

package/internals/store/useCharts.types.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { ChartAnyPluginSignature, ChartPublicAPI } from '../plugins/models';
+export interface UseChartBaseProps<TSignatures extends readonly ChartAnyPluginSignature[]> {
+    apiRef: React.MutableRefObject<ChartPublicAPI<TSignatures> | undefined> | undefined;
+}

package/internals/store/useCharts.types.js

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

package/internals/store/useSelector.d.ts

@@ -0,0 +1,4 @@
+import { ChartAnyPluginSignature, ChartState } from '../plugins/models';
+import { ChartsSelector } from '../plugins/utils/selectors';
+import { ChartStore } from '../plugins/utils/ChartStore';
+export declare const useSelector: <TSignatures extends readonly ChartAnyPluginSignature[], TArgs, TValue>(store: ChartStore<TSignatures>, selector: ChartsSelector<ChartState<TSignatures>, TArgs, TValue>, args?: TArgs, equals?: (a: TValue, b: TValue) => boolean) => TValue;

package/internals/store/useStore.d.ts

@@ -0,0 +1,3 @@
+import { ChartStore } from '../plugins/utils/ChartStore';
+import { UseChartInteractionSignature } from '../plugins/featurePlugins/useChartInteraction/useChartInteraction.types';
+export declare function useStore(skipError?: boolean): ChartStore<[UseChartInteractionSignature]>;

package/{modern/internals → internals/store}/useStore.js

@@ -1,17 +1,17 @@
-import * as React from 'react';
-import { ChartsContext } from "../context/InteractionProvider.js";
+import { useChartContext } from "../../context/ChartProvider/index.js";
+// This hook should be removed because user and us should not interact with the store directly, but with public/private APIs
 export function useStore(skipError) {
-  const charts = React.useContext(ChartsContext);
+  const context = useChartContext();
   if (skipError) {
     // TODO: Remove once store is used by all charts.
     // This line is only for `useAxisEvents` which is in the surface of the Gauge.
     // But the Gauge don't have store yet because it does not need the interaction provider.
     // Will be fixed when every thing move to the store since every component will have access to it.
     // @ts-ignore
-    return charts?.store;
+    return context?.store;
   }
-  if (!charts) {
+  if (!context) {
     throw new Error(['MUI X: Could not find the charts context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
   }
-  return charts.store;
+  return context.store;
 }

package/models/axis.d.ts

@@ -1,5 +1,5 @@
 import type { ScaleBand, ScaleLogarithmic, ScalePower, ScaleTime, ScaleLinear, ScalePoint, ScaleOrdinal, ScaleSequential, ScaleThreshold } from '@mui/x-charts-vendor/d3-scale';
-import { SxProps } from '@mui/system';
+import { SxProps } from '@mui/system/styleFunctionSx';
 import { ChartsAxisClasses } from '../ChartsAxis/axisClasses';
 import type { TickParams } from '../hooks/useTicks';
 import { ChartsTextProps } from '../ChartsText';
@@ -58,12 +58,6 @@ export interface ChartsAxisProps extends TickParams {
      * @default 'currentColor'
      */
     fill?: string;
-    /**
-     * The font size of the axis ticks text.
-     * @default 12
-     * @deprecated Consider using `tickLabelStyle.fontSize` instead.
-     */
-    tickFontSize?: number;
     /**
      * The style applied to ticks text.
      */
@@ -83,12 +77,6 @@ export interface ChartsAxisProps extends TickParams {
      * The label of the axis.
      */
     label?: string;
-    /**
-     * The font size of the axis label.
-     * @default 14
-     * @deprecated Consider using `labelStyle.fontSize` instead.
-     */
-    labelFontSize?: number;
     /**
      * The stroke color of the axis line.
      * @default 'currentColor'

package/modern/BarChart/BarChart.js

@@ -243,7 +243,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
-    labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -254,7 +253,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
@@ -297,7 +295,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
-    labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -308,7 +305,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),

package/modern/ChartContainer/ChartContainer.js

@@ -4,22 +4,42 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ChartDataProvider } from "../context/ChartDataProvider/index.js";
-import { ResizableContainer } from "./ResizableContainer.js";
 import { useChartContainerProps } from "./useChartContainerProps.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * It sets up the data providers as well as the `<svg>` for the chart.
+ *
+ * This is a combination of both the `ChartDataProvider` and `ChartsSurface` components.
+ *
+ * Demos:
+ *
+ * - [Composition](http://localhost:3001/x/react-charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartContainer API](https://mui.com/x/api/charts/chart-container/)
+ *
+ * @example
+ * ```jsx
+ * <ChartContainer
+ *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
+ *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
+ * >
+ *    <BarPlot />
+ *    <ChartsXAxis position="bottom" axisId="x-axis" />
+ * </ChartContainer>
+ * ```
+ */
 const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
     chartDataProviderProps,
     children,
-    resizableContainerProps,
     chartsSurfaceProps
   } = useChartContainerProps(props, ref);
   return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
-    children: /*#__PURE__*/_jsx(ResizableContainer, _extends({}, resizableContainerProps, {
-      children: /*#__PURE__*/_jsx(ChartsSurface, _extends({}, chartsSurfaceProps, {
-        children: children
-      }))
+    children: /*#__PURE__*/_jsx(ChartsSurface, _extends({}, chartsSurfaceProps, {
+      children: children
     }))
   }));
 });
@@ -128,7 +148,6 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
-    labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -139,7 +158,6 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
@@ -182,7 +200,6 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
-    labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -193,7 +210,6 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),

package/modern/ChartContainer/useChartContainerProps.js

@@ -1,5 +1,6 @@
 'use client';
 
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "xAxis", "yAxis", "zAxis", "skipAnimation"];
 export const useChartContainerProps = (props, ref) => {
@@ -24,14 +25,13 @@ export const useChartContainerProps = (props, ref) => {
       skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const resizableContainerProps = other;
-  const chartsSurfaceProps = {
+  const chartsSurfaceProps = _extends({
     title,
     desc,
     sx,
     disableAxisListener,
     ref
-  };
+  }, other);
   const chartDataProviderProps = {
     margin,
     series,
@@ -49,7 +49,6 @@ export const useChartContainerProps = (props, ref) => {
   };
   return {
     chartDataProviderProps,
-    resizableContainerProps,
     chartsSurfaceProps,
     children
   };

package/modern/ChartsAxis/axisClasses.js

@@ -1,4 +1,5 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getAxisUtilityClass(slot) {
   return generateUtilityClass('MuiChartsAxis', slot);
 }

package/modern/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -3,9 +3,9 @@
 import * as React from 'react';
 import { getValueToPositionMapper, useXScale } from "../hooks/useScale.js";
 import { isBandScale } from "../internals/isBandScale.js";
-import { useSelector } from "../internals/useSelector.js";
-import { useStore } from "../internals/useStore.js";
-import { selectorChartsInteractionXAxis } from "../context/InteractionSelectors.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+import { selectorChartsInteractionXAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { useDrawingArea } from "../hooks/index.js";
 import { ChartsAxisHighlightPath } from "./ChartsAxisHighlightPath.js";
 

package/modern/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -3,9 +3,9 @@
 import * as React from 'react';
 import { getValueToPositionMapper, useYScale } from "../hooks/useScale.js";
 import { isBandScale } from "../internals/isBandScale.js";
-import { useSelector } from "../internals/useSelector.js";
-import { useStore } from "../internals/useStore.js";
-import { selectorChartsInteractionYAxis } from "../context/InteractionSelectors.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+import { selectorChartsInteractionYAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { useDrawingArea } from "../hooks/index.js";
 import { ChartsAxisHighlightPath } from "./ChartsAxisHighlightPath.js";
 

package/modern/ChartsLegend/chartsLegendClasses.js

@@ -1,4 +1,5 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getLegendUtilityClass(slot) {
   return generateUtilityClass('MuiChartsLegend', slot);
 }

package/modern/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { useSeries } from "../hooks/useSeries.js";
 import { useSvgRef } from "../hooks/index.js";
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { useStore } from "../internals/useStore.js";
+import { useStore } from "../internals/store/useStore.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsOnAxisClickHandler(props) {
   const {

package/modern/ChartsSurface/ChartsSurface.js

@@ -9,18 +9,43 @@ import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import { useAxisEvents } from "../hooks/useAxisEvents.js";
 import { ChartsAxesGradients } from "../internals/components/ChartsAxesGradients/index.js";
-import { useDrawingArea } from "../hooks/index.js";
-import { useSurfaceRef } from "../context/SvgRefProvider/index.js";
+import { useDrawingArea, useSvgRef } from "../hooks/index.js";
 import { useSize } from "../context/SizeProvider/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartsSurfaceStyles = styled('svg', {
   name: 'MuiChartsSurface',
   slot: 'Root'
-})(() => ({
+})(({
+  ownerState
+}) => ({
+  width: ownerState.width ?? '100%',
+  height: ownerState.height ?? '100%',
+  display: 'flex',
+  position: 'relative',
+  flexGrow: 1,
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden',
   // This prevents default touch actions when using the svg on mobile devices.
   // For example, prevent page scroll & zoom.
   touchAction: 'none'
 }));
+
+/**
+ * It provides the drawing area for the chart elements.
+ * It is the root `<svg>` of all the chart elements.
+ *
+ * It also provides the `title` and `desc` elements for the chart.
+ *
+ * Demos:
+ *
+ * - [Composition](http://localhost:3001/x/react-charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartsSurface API](https://mui.com/x/api/charts/charts-surface/)
+ */
 const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inProps, ref) {
   const {
     width,
@@ -31,10 +56,13 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
     bottom
   } = useDrawingArea();
   const {
-    hasIntrinsicSize
+    hasIntrinsicSize,
+    svgRef: containerRef,
+    inHeight,
+    inWidth
   } = useSize();
-  const surfaceRef = useSurfaceRef();
-  const handleRef = useForkRef(surfaceRef, ref);
+  const svgRef = useSvgRef();
+  const handleRef = useForkRef(containerRef, svgRef, ref);
   const themeProps = useThemeProps({
     props: inProps,
     name: 'MuiChartsSurface'
@@ -57,6 +85,10 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
   };
   useAxisEvents(disableAxisListener);
   return /*#__PURE__*/_jsxs(ChartsSurfaceStyles, _extends({
+    ownerState: {
+      width: inWidth,
+      height: inHeight
+    },
     viewBox: `${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`,
     className: className
   }, other, {

package/modern/ChartsTooltip/ChartsTooltip.js

@@ -3,6 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import HTMLElementType from '@mui/utils/HTMLElementType';
 import { ChartsItemTooltipContent } from "./ChartsItemTooltipContent.js";
 import { ChartsAxisTooltipContent } from "./ChartsAxisTooltipContent.js";
 import { ChartsTooltipContainer } from "./ChartsTooltipContainer.js";
@@ -43,26 +44,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
    * It's used to set the position of the popper.
    * The return value will passed as the reference object of the Popper instance.
    */
-  anchorEl: PropTypes.oneOfType([(props, propName) => {
-    if (props[propName] == null) {
-      return new Error(`Prop '${propName}' is required but wasn't specified`);
-    }
-    if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-      return new Error(`Expected prop '${propName}' to be of type Element`);
-    }
-    return null;
-  }, PropTypes.func, PropTypes.shape({
-    contextElement: (props, propName) => {
-      if (props[propName] == null) {
-        return null;
-      }
-      if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-        return new Error(`Expected prop '${propName}' to be of type Element`);
-      }
-      return null;
-    },
-    getBoundingClientRect: PropTypes.func.isRequired
-  })]),
+  anchorEl: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.object, PropTypes.func]),
   /**
    * Override or extend the styles applied to the component.
    */

package/modern/ChartsTooltip/ChartsTooltipContainer.js

@@ -5,16 +5,17 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["trigger", "classes", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import HTMLElementType from '@mui/utils/HTMLElementType';
 import useLazyRef from '@mui/utils/useLazyRef';
 import { styled, useThemeProps } from '@mui/material/styles';
 import Popper from '@mui/material/Popper';
 import NoSsr from '@mui/material/NoSsr';
 import { useSvgRef } from "../hooks/useSvgRef.js";
 import { usePointerType } from "./utils.js";
-import { useSelector } from "../internals/useSelector.js";
-import { useStore } from "../internals/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
 import { useXAxis } from "../hooks/index.js";
-import { selectorChartsInteractionItemIsDefined, selectorChartsInteractionXAxisIsDefined, selectorChartsInteractionYAxisIsDefined } from "../context/InteractionSelectors.js";
+import { selectorChartsInteractionItemIsDefined, selectorChartsInteractionXAxisIsDefined, selectorChartsInteractionYAxisIsDefined } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ChartsTooltipRoot = styled(Popper, {
   name: 'MuiChartsTooltip',
@@ -124,26 +125,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltipContainer.propTypes = {
    * It's used to set the position of the popper.
    * The return value will passed as the reference object of the Popper instance.
    */
-  anchorEl: PropTypes.oneOfType([(props, propName) => {
-    if (props[propName] == null) {
-      return new Error(`Prop '${propName}' is required but wasn't specified`);
-    }
-    if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-      return new Error(`Expected prop '${propName}' to be of type Element`);
-    }
-    return null;
-  }, PropTypes.func, PropTypes.shape({
-    contextElement: (props, propName) => {
-      if (props[propName] == null) {
-        return null;
-      }
-      if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-        return new Error(`Expected prop '${propName}' to be of type Element`);
-      }
-      return null;
-    },
-    getBoundingClientRect: PropTypes.func.isRequired
-  })]),
+  anchorEl: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.object, PropTypes.func]),
   /**
    * Popper render function or node.
    */