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

package/{ChartContainer → context/ChartDataProvider}/useDefaultizeAxis.d.ts

@@ -1,7 +1,7 @@
-import { MakeOptional } from '../models/helpers';
-import { AxisConfig, ScaleName } from '../models';
-import { ChartsAxisProps } from '../models/axis';
-import { DatasetType } from '../models/seriesType/config';
+import { MakeOptional } from '@mui/x-internals/types';
+import { AxisConfig, ScaleName } from '../../models';
+import { ChartsAxisProps } from '../../models/axis';
+import { DatasetType } from '../../models/seriesType/config';
 export declare const useDefaultizeAxis: (inXAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsAxisProps>, "id">[] | undefined, inYAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsAxisProps>, "id">[] | undefined, dataset: DatasetType | undefined) => {
     reverse?: boolean | undefined;
     fill?: string | undefined;
@@ -10,32 +10,32 @@ export declare const useDefaultizeAxis: (inXAxis: MakeOptional<AxisConfig<ScaleN
     label?: string | undefined;
     max?: (number | Date) | undefined;
     min?: (number | Date) | undefined;
-    valueFormatter?: ((value: any, context: import("../internals").AxisValueFormatterContext) => string) | undefined;
+    valueFormatter?: ((value: any, context: import("../../internals").AxisValueFormatterContext) => string) | undefined;
     dataKey?: string | undefined;
     sx?: import("@mui/system").SxProps | undefined;
-    classes?: Partial<import("..").ChartsAxisClasses> | undefined;
+    classes?: Partial<import("../..").ChartsAxisClasses> | undefined;
     tickMaxStep?: number | undefined;
     tickMinStep?: number | undefined;
     tickNumber?: number | undefined;
     disableLine?: boolean | undefined;
     disableTicks?: boolean | undefined;
     tickFontSize?: number | undefined;
-    tickLabelStyle?: import("..").ChartsTextProps["style"];
-    labelStyle?: import("..").ChartsTextProps["style"];
+    tickLabelStyle?: import("../..").ChartsTextProps["style"];
+    labelStyle?: import("../..").ChartsTextProps["style"];
     tickLabelInterval?: ("auto" | ((value: any, index: number) => boolean)) | undefined;
     labelFontSize?: number | undefined;
     tickSize?: number | undefined;
-    slots?: Partial<import("../internals").ChartsAxisSlots> | undefined;
-    slotProps?: Partial<import("../internals").ChartsAxisSlotProps> | undefined;
+    slots?: Partial<import("../../internals").ChartsAxisSlots> | undefined;
+    slotProps?: Partial<import("../../internals").ChartsAxisSlotProps> | undefined;
     tickInterval?: ("auto" | ((value: any, index: number) => boolean) | any[]) | undefined;
     tickPlacement?: ("start" | "end" | "middle" | "extremities") | undefined;
     tickLabelPlacement?: ("middle" | "tick") | undefined;
     scaleType?: "linear" | "time" | "log" | "band" | "point" | "pow" | "sqrt" | "utc" | undefined;
-    colorMap?: import("../models/colorMapping").ContinuousColorConfig<number | Date> | import("../models/colorMapping").PiecewiseColorConfig<number | Date> | import("../models/colorMapping").OrdinalColorConfig<string | number | Date> | undefined;
+    colorMap?: import("../../models/colorMapping").ContinuousColorConfig<number | Date> | import("../../models/colorMapping").PiecewiseColorConfig<number | Date> | import("../../models/colorMapping").OrdinalColorConfig<string | number | Date> | undefined;
     hideTooltip?: boolean | undefined;
     domainLimit?: ("nice" | "strict" | ((min: number, max: number) => {
         min: number;
         max: number;
     })) | undefined;
-    id: import("../internals").AxisId;
+    id: import("../../internals").AxisId;
 }[][];

package/{modern/ChartContainer → context/ChartDataProvider}/useDefaultizeAxis.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../../constants/index.js";
 const defaultizeAxis = (inAxis, dataset, axisName) => {
   const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
   return [...(inAxis?.map((axis, index) => _extends({

package/context/{DrawingProvider.d.ts → DrawingAreaProvider/DrawingArea.types.d.ts}

@@ -1,14 +1,12 @@
 import * as React from 'react';
-import { LayoutConfig } from '../models/layout';
-import { Initializable } from './context.types';
-export interface DrawingProviderProps extends LayoutConfig {
+import { LayoutConfig } from '../../models';
+export interface DrawingAreaProviderProps extends Pick<LayoutConfig, 'margin'> {
     children: React.ReactNode;
-    svgRef: React.RefObject<SVGSVGElement>;
 }
 /**
  * Defines the area in which it is possible to draw the charts.
  */
-export type DrawingArea = {
+export type DrawingAreaState = {
     /**
      * The gap between the left border of the SVG and the drawing area.
      */
@@ -51,12 +49,3 @@ export type DrawingArea = {
         direction?: 'x' | 'y';
     }) => boolean;
 };
-export declare const DrawingContext: React.Context<DrawingArea & {
-    /**
-     * A random id used to distinguish each chart on the same page.
-     */
-    chartId: string;
-}>;
-export type SvgContextState = React.RefObject<SVGSVGElement>;
-export declare const SvgContext: React.Context<Initializable<SvgContextState>>;
-export declare function DrawingProvider(props: DrawingProviderProps): React.JSX.Element;

package/context/DrawingAreaProvider/DrawingAreaContext.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { DrawingAreaState } from './DrawingArea.types';
+export declare const DrawingAreaContext: React.Context<DrawingAreaState & {
+    /**
+     * A random id used to distinguish each chart on the same page.
+     */
+    chartId: string;
+}>;

package/context/DrawingAreaProvider/DrawingAreaContext.js

@@ -0,0 +1,16 @@
+'use client';
+
+import * as React from 'react';
+export const DrawingAreaContext = /*#__PURE__*/React.createContext({
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  height: 300,
+  width: 400,
+  chartId: '',
+  isPointInside: () => false
+});
+if (process.env.NODE_ENV !== 'production') {
+  DrawingAreaContext.displayName = 'DrawingContext';
+}

package/context/DrawingAreaProvider/DrawingAreaProvider.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { DrawingAreaProviderProps } from './DrawingArea.types';
+export declare function DrawingAreaProvider(props: DrawingAreaProviderProps): React.JSX.Element;

package/{modern/context/DrawingProvider.js → context/DrawingAreaProvider/DrawingAreaProvider.js}

@@ -3,42 +3,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useId from '@mui/utils/useId';
-import useChartDimensions from "../hooks/useChartDimensions.js";
-
-/**
- * Defines the area in which it is possible to draw the charts.
- */
+import useChartDimensions from "../../hooks/useChartDimensions.js";
+import { DrawingAreaContext } from "./DrawingAreaContext.js";
+import { useSize } from "../SizeProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const DrawingContext = /*#__PURE__*/React.createContext({
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
-  height: 300,
-  width: 400,
-  chartId: '',
-  isPointInside: () => false
-});
-if (process.env.NODE_ENV !== 'production') {
-  DrawingContext.displayName = 'DrawingContext';
-}
-export const SvgContext = /*#__PURE__*/React.createContext({
-  isInitialized: false,
-  data: {
-    current: null
-  }
-});
-if (process.env.NODE_ENV !== 'production') {
-  SvgContext.displayName = 'SvgContext';
-}
-export function DrawingProvider(props) {
+export function DrawingAreaProvider(props) {
   const {
-    width,
-    height,
     margin,
-    svgRef,
     children
   } = props;
+  const {
+    width,
+    height
+  } = useSize();
   const drawingArea = useChartDimensions(width, height, margin);
   const chartId = useId();
   const isPointInside = React.useCallback(({
@@ -64,15 +41,8 @@ export function DrawingProvider(props) {
   }, drawingArea, {
     isPointInside
   }), [chartId, drawingArea, isPointInside]);
-  const refValue = React.useMemo(() => ({
-    isInitialized: true,
-    data: svgRef
-  }), [svgRef]);
-  return /*#__PURE__*/_jsx(SvgContext.Provider, {
-    value: refValue,
-    children: /*#__PURE__*/_jsx(DrawingContext.Provider, {
-      value: value,
-      children: children
-    })
+  return /*#__PURE__*/_jsx(DrawingAreaContext.Provider, {
+    value: value,
+    children: children
   });
 }

package/context/DrawingAreaProvider/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DrawingArea.types';
+export * from './DrawingAreaProvider';
+export * from './DrawingAreaContext';

package/context/DrawingAreaProvider/index.js

@@ -0,0 +1,3 @@
+export * from "./DrawingArea.types.js";
+export * from "./DrawingAreaProvider.js";
+export * from "./DrawingAreaContext.js";

package/context/HighlightedProvider/HighlightedContext.d.ts

@@ -30,10 +30,6 @@ export type HighlightItemData = {
 export type HighlightOptions = 'none' | 'item' | 'series';
 export type FadeOptions = 'none' | 'series' | 'global';
 export type HighlightScope = {
-    /**
-     * @deprecated Use `highlight` instead.
-     */
-    highlighted?: HighlightOptions;
     /**
      * The scope of highlighted elements.
      * - 'none': no highlight.
@@ -42,10 +38,6 @@ export type HighlightScope = {
      * @default 'none'
      */
     highlight?: HighlightOptions;
-    /**
-     * @deprecated Use `fade` instead.
-     */
-    faded?: FadeOptions;
     /**
      * The scope of faded elements.
      * - 'none': no fading.

package/context/HighlightedProvider/HighlightedProvider.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["highlighted", "faded"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useControlled from '@mui/utils/useControlled';
@@ -11,18 +8,6 @@ import { createIsFaded } from "./createIsFaded.js";
 import { createIsHighlighted } from "./createIsHighlighted.js";
 import { useSeries } from "../../hooks/useSeries.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const mergeDeprecatedOptions = options => {
-  const _ref = options ?? {},
-    {
-      highlighted,
-      faded
-    } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return _extends({
-    highlight: highlighted,
-    fade: faded
-  }, other);
-};
 function HighlightedProvider({
   children,
   highlightedItem: highlightedItemProps,
@@ -41,7 +26,7 @@ function HighlightedProvider({
       const seriesData = series[seriesType];
       Object.keys(seriesData?.series ?? {}).forEach(seriesId => {
         const seriesItem = seriesData?.series[seriesId];
-        map.set(seriesId, mergeDeprecatedOptions(seriesItem?.highlightScope));
+        map.set(seriesId, seriesItem?.highlightScope);
       });
     });
     return map;

package/context/InteractionProvider.d.ts

@@ -1,50 +1,7 @@
 import * as React from 'react';
-import { ChartItemIdentifier, ChartSeriesType } from '../models/seriesType/config';
-export interface InteractionProviderProps {
-    children: React.ReactNode;
-}
-export type ItemInteractionData<T extends ChartSeriesType> = ChartItemIdentifier<T>;
-export type AxisInteractionData = {
-    x: null | {
-        value: number | Date | string;
-        index: number;
-    };
-    y: null | {
-        value: number | Date | string;
-        index: number;
-    };
-};
-type InteractionActions<T extends ChartSeriesType = ChartSeriesType> = {
-    type: 'enterItem';
-    data: ItemInteractionData<T>;
-} | {
-    type: 'leaveItem';
-    data: Partial<ItemInteractionData<T>>;
-} | {
-    type: 'exitChart';
-} | {
-    type: 'updateVoronoiUsage';
-    useVoronoiInteraction: boolean;
-} | {
-    type: 'updateAxis';
-    data: AxisInteractionData;
-};
-type InteractionState = {
-    /**
-     * The item currently interacting.
-     */
-    item: null | ItemInteractionData<ChartSeriesType>;
-    /**
-     * The x- and y-axes currently interacting.
-     */
-    axis: AxisInteractionData;
-    /**
-     * Set to `true` when `VoronoiHandler` is active.
-     * Used to prevent collision with mouseEnter events.
-     */
-    useVoronoiInteraction: boolean;
-    dispatch: React.Dispatch<InteractionActions>;
-};
-export declare const InteractionContext: React.Context<InteractionState>;
-declare function InteractionProvider(props: InteractionProviderProps): React.JSX.Element;
+import { ChartStore } from '../internals/plugins/utils/ChartStore';
+export declare const ChartsContext: React.Context<{
+    store: ChartStore;
+} | null>;
+declare function InteractionProvider(props: React.PropsWithChildren): React.JSX.Element;
 export { InteractionProvider };

package/context/InteractionProvider.js

@@ -1,77 +1,21 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { useCharts } from "../internals/useCharts.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const InteractionContext = /*#__PURE__*/React.createContext({
-  item: null,
-  axis: {
-    x: null,
-    y: null
-  },
-  useVoronoiInteraction: false,
-  dispatch: () => null
-});
+export const ChartsContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== 'production') {
-  InteractionContext.displayName = 'InteractionContext';
+  ChartsContext.displayName = 'ChartsContext';
 }
-const dataReducer = (prevState, action) => {
-  switch (action.type) {
-    case 'enterItem':
-      return _extends({}, prevState, {
-        item: action.data
-      });
-    case 'exitChart':
-      if (prevState.item === null && prevState.axis.x === null && prevState.axis.y === null) {
-        return prevState;
-      }
-      return _extends({}, prevState, {
-        axis: {
-          x: null,
-          y: null
-        },
-        item: null
-      });
-    case 'updateVoronoiUsage':
-      return _extends({}, prevState, {
-        useVoronoiInteraction: action.useVoronoiInteraction
-      });
-    case 'leaveItem':
-      if (prevState.item === null || Object.keys(action.data).some(key => action.data[key] !== prevState.item[key])) {
-        // The item is already something else
-        return prevState;
-      }
-      return _extends({}, prevState, {
-        item: null
-      });
-    case 'updateAxis':
-      if (action.data.x === prevState.axis.x && action.data.y === prevState.axis.y) {
-        return prevState;
-      }
-      return _extends({}, prevState, {
-        axis: action.data
-      });
-    default:
-      return prevState;
-  }
-};
 function InteractionProvider(props) {
   const {
     children
   } = props;
-  const [data, dispatch] = React.useReducer(dataReducer, {
-    item: null,
-    axis: {
-      x: null,
-      y: null
-    },
-    useVoronoiInteraction: false
-  });
-  const value = React.useMemo(() => _extends({}, data, {
-    dispatch
-  }), [data]);
-  return /*#__PURE__*/_jsx(InteractionContext.Provider, {
-    value: value,
+  const {
+    contextValue
+  } = useCharts();
+  return /*#__PURE__*/_jsx(ChartsContext.Provider, {
+    value: contextValue,
     children: children
   });
 }