@mui/x-charts 8.26.0 → 9.0.0-alpha.0

package/esm/ChartsContainer/index.d.ts

@@ -0,0 +1 @@
+export * from "./ChartsContainer.js";

package/esm/ChartsContainer/index.js

@@ -0,0 +1 @@
+export * from "./ChartsContainer.js";

package/esm/ChartsContainer/useChartsContainerProps.d.ts

@@ -0,0 +1,15 @@
+import type * as React from 'react';
+import { type ChartsSurfaceProps } from "../ChartsSurface/index.js";
+import { type ChartDataProviderProps } from "../ChartDataProvider/index.js";
+import type { ChartsContainerProps } from "./ChartsContainer.js";
+import { type ChartSeriesType } from "../models/seriesType/config.js";
+import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+import { type ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
+export type UseChartsContainerPropsReturnValue<TSeries extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = {
+  chartDataProviderProps: ChartDataProviderProps<TSeries, TSignatures>;
+  chartsSurfaceProps: ChartsSurfaceProps & {
+    ref: React.Ref<SVGSVGElement>;
+  };
+  children: React.ReactNode;
+};
+export declare const useChartsContainerProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartsContainerProps<TSeries, TSignatures>, ref: React.Ref<SVGSVGElement>) => UseChartsContainerPropsReturnValue<TSeries, TSignatures>;

package/esm/ChartsContainer/useChartsContainerProps.js

@@ -0,0 +1,99 @@
+'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", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "tooltipItem", "onTooltipItemChange", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "axesGap", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText", "slots", "slotProps", "experimentalFeatures", "enableKeyboardNavigation", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
+import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
+export const useChartsContainerProps = (props, ref) => {
+  const _ref = props,
+    {
+      width,
+      height,
+      margin,
+      children,
+      series,
+      colors,
+      dataset,
+      desc,
+      onAxisClick,
+      highlightedAxis,
+      onHighlightedAxisChange,
+      tooltipItem,
+      onTooltipItemChange,
+      disableVoronoi,
+      voronoiMaxRadius,
+      onItemClick,
+      disableAxisListener,
+      highlightedItem,
+      onHighlightChange,
+      sx,
+      title,
+      axesGap,
+      xAxis,
+      yAxis,
+      zAxis,
+      rotationAxis,
+      radiusAxis,
+      skipAnimation,
+      seriesConfig,
+      plugins,
+      localeText,
+      slots,
+      slotProps,
+      experimentalFeatures,
+      enableKeyboardNavigation,
+      brushConfig,
+      onHiddenItemsChange,
+      hiddenItems,
+      initialHiddenItems
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const chartsSurfaceProps = _extends({
+    title,
+    desc,
+    sx,
+    ref
+  }, other);
+  const chartDataProviderProps = {
+    margin,
+    series,
+    colors,
+    dataset,
+    disableAxisListener,
+    highlightedItem,
+    onHighlightChange,
+    onAxisClick,
+    highlightedAxis,
+    onHighlightedAxisChange,
+    tooltipItem,
+    onTooltipItemChange,
+    disableVoronoi,
+    voronoiMaxRadius,
+    onItemClick,
+    axesGap,
+    xAxis,
+    yAxis,
+    zAxis,
+    rotationAxis,
+    radiusAxis,
+    skipAnimation,
+    width,
+    height,
+    localeText,
+    seriesConfig,
+    experimentalFeatures,
+    enableKeyboardNavigation,
+    brushConfig,
+    onHiddenItemsChange,
+    hiddenItems,
+    initialHiddenItems,
+    plugins: plugins ?? DEFAULT_PLUGINS,
+    slots,
+    slotProps
+  };
+  return {
+    chartDataProviderProps,
+    chartsSurfaceProps,
+    children
+  };
+};

package/esm/ChartsLabel/ChartsLabelMark.js

@@ -9,7 +9,7 @@ import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
 import { labelMarkClasses, useUtilityClasses } from "./labelMarkClasses.js";
 import { consumeThemeProps } from "../internals/consumeThemeProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Root = styled('div', {
   name: 'MuiChartsLabelMark',
   slot: 'Root'
@@ -18,16 +18,14 @@ const Root = styled('div', {
     display: 'flex',
     width: 14,
     height: 14,
+    ['& > *']: {
+      width: '100%',
+      height: '100%'
+    },
     [`&.${labelMarkClasses.line}`]: {
       width: 16,
-      height: 'unset',
-      alignItems: 'center',
-      [`.${labelMarkClasses.mask}`]: {
-        height: 4,
-        width: '100%',
-        borderRadius: 1,
-        overflow: 'hidden'
-      }
+      height: 8,
+      alignItems: 'center'
     },
     [`&.${labelMarkClasses.square}`]: {
       height: 13,
@@ -41,14 +39,6 @@ const Root = styled('div', {
     },
     svg: {
       display: 'block'
-    },
-    [`& .${labelMarkClasses.mask} > *`]: {
-      height: '100%',
-      width: '100%'
-    },
-    [`& .${labelMarkClasses.mask}`]: {
-      height: '100%',
-      width: '100%'
     }
   };
 });
@@ -77,27 +67,39 @@ const ChartsLabelMark = consumeThemeProps('MuiChartsLabelMark', {
     "aria-hidden": "true",
     ref: ref
   }, other, {
-    children: /*#__PURE__*/_jsx("div", {
-      className: classes?.mask,
-      children: typeof Component === 'function' ? /*#__PURE__*/_jsx(Component, {
-        className: classes?.fill,
-        color: color
-      }) : /*#__PURE__*/_jsx("svg", {
-        viewBox: "0 0 24 24",
-        preserveAspectRatio: type === 'line' ? 'none' : undefined,
-        children: type === 'circle' ? /*#__PURE__*/_jsx("circle", {
+    children: typeof Component === 'function' ? /*#__PURE__*/_jsx(Component, {
+      className: classes?.fill,
+      color: color
+    }) : /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [type === 'circle' && /*#__PURE__*/_jsx("svg", {
+        viewBox: "0 0 15 15",
+        children: /*#__PURE__*/_jsx("circle", {
           className: classes?.fill,
-          r: "12",
-          cx: "12",
-          cy: "12",
+          r: "7.5",
+          cx: "7.5",
+          cy: "7.5",
           fill: color
-        }) : /*#__PURE__*/_jsx("rect", {
+        })
+      }), type === 'line' && /*#__PURE__*/_jsx("svg", {
+        viewBox: "0 0 16 8",
+        preserveAspectRatio: "none",
+        children: /*#__PURE__*/_jsx("path", {
+          className: classes?.fill,
+          d: "M 2 4 L 14 4",
+          stroke: color,
+          strokeWidth: "4",
+          strokeLinecap: "round",
+          vectorEffect: "non-scaling-stroke"
+        })
+      }), type !== 'line' && type !== 'circle' && /*#__PURE__*/_jsx("svg", {
+        viewBox: "0 0 13 13",
+        children: /*#__PURE__*/_jsx("rect", {
           className: classes?.fill,
-          width: "24",
-          height: "24",
+          width: "13",
+          height: "13",
           fill: color
         })
-      })
+      })]
     })
   }));
 });

package/esm/ChartsLabel/labelGradientClasses.d.ts

@@ -13,4 +13,4 @@ export interface ChartsLabelGradientClasses {
 }
 export declare function getLabelGradientUtilityClass(slot: string): string;
 export declare const labelGradientClasses: ChartsLabelGradientClasses;
-export declare const useUtilityClasses: (props: ChartsLabelGradientProps) => Record<"root" | "mask" | "fill", string>;
+export declare const useUtilityClasses: (props: ChartsLabelGradientProps) => Record<"root" | "fill" | "mask", string>;

package/esm/ChartsLabel/labelMarkClasses.d.ts

@@ -2,8 +2,6 @@ import type { ChartsLabelMarkProps } from "./ChartsLabelMark.js";
 export interface ChartsLabelMarkClasses {
   /** Styles applied to the root element. */
   root: string;
-  /** Styles applied to the "mask" that gives shape to the marks. */
-  mask: string;
   /** Styles applied to the mark type "line". */
   line: string;
   /** Styles applied to the mark type "square". */
@@ -15,4 +13,4 @@ export interface ChartsLabelMarkClasses {
 }
 export declare function getLabelMarkUtilityClass(slot: string): string;
 export declare const labelMarkClasses: ChartsLabelMarkClasses;
-export declare const useUtilityClasses: (props: ChartsLabelMarkProps) => Record<"root" | "mask" | "fill", string>;
+export declare const useUtilityClasses: (props: ChartsLabelMarkProps) => Record<"root" | "fill", string>;

package/esm/ChartsLabel/labelMarkClasses.js

@@ -4,14 +4,13 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getLabelMarkUtilityClass(slot) {
   return generateUtilityClass('MuiChartsLabelMark', slot);
 }
-export const labelMarkClasses = generateUtilityClasses('MuiChartsLabelMark', ['root', 'line', 'square', 'circle', 'mask', 'fill']);
+export const labelMarkClasses = generateUtilityClasses('MuiChartsLabelMark', ['root', 'line', 'square', 'circle', 'fill']);
 export const useUtilityClasses = props => {
   const {
     type
   } = props;
   const slots = {
     root: typeof type === 'function' ? ['root'] : ['root', type],
-    mask: ['mask'],
     fill: ['fill']
   };
   return composeClasses(slots, getLabelMarkUtilityClass, props.classes);

package/esm/ChartsLegend/ChartsLegend.js

@@ -17,7 +17,6 @@ import { ChartsLabel } from "../ChartsLabel/ChartsLabel.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
 import { selectorIsItemVisibleGetter } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.js";
 import { useStore } from "../internals/store/useStore.js";
-import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useChartSeries/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const RootElement = styled('ul', {
   name: 'MuiChartsLegend',
@@ -77,7 +76,6 @@ const ChartsLegend = consumeSlots('MuiChartsLegend', 'legend', {
     instance
   } = useChartContext();
   const store = useStore();
-  const seriesConfig = store.use(selectorChartSeriesConfig);
   const isItemVisible = store.use(selectorIsItemVisibleGetter);
   const {
       onItemClick,
@@ -94,8 +92,6 @@ const ChartsLegend = consumeSlots('MuiChartsLegend', 'legend', {
     }
     if (toggleVisibilityOnClick) {
       instance.toggleItemVisibility({
-        // TODO: Remove in v9
-        // @ts-expect-error item always has type defined.
         type: item.type,
         seriesId: item.seriesId,
         dataIndex: item.dataIndex
@@ -111,9 +107,7 @@ const ChartsLegend = consumeSlots('MuiChartsLegend', 'legend', {
   }, other, {
     ownerState: props,
     children: data.items.map((item, i) => {
-      const isVisible = isItemVisible(seriesConfig, {
-        // TODO: Remove in v9
-        // @ts-expect-error item always has type defined.
+      const isVisible = isItemVisible({
         type: item.type,
         seriesId: item.seriesId,
         dataIndex: item.dataIndex

package/esm/ChartsLegend/chartsLegendClasses.d.ts

@@ -18,5 +18,5 @@ export interface ChartsLegendClasses {
   /** Styles applied to the legend in row layout. */
   horizontal: string;
 }
-export declare const useUtilityClasses: (props: ChartsLegendProps & ChartsLegendSlotExtension) => Record<"item" | "series" | "root" | "label" | "mark" | "hidden", string>;
+export declare const useUtilityClasses: (props: ChartsLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "hidden" | "series" | "item", string>;
 export declare const legendClasses: ChartsLegendClasses;

package/esm/ChartsLegend/continuousColorLegendClasses.d.ts

@@ -22,5 +22,5 @@ export interface ContinuousColorLegendClasses {
   /** Styles applied to the series label. */
   label: string;
 }
-export declare const useUtilityClasses: (props: ContinuousColorLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "gradient" | "minLabel" | "maxLabel", string>;
+export declare const useUtilityClasses: (props: ContinuousColorLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "minLabel" | "maxLabel" | "gradient", string>;
 export declare const continuousColorLegendClasses: ContinuousColorLegendClasses;

package/esm/ChartsLegend/legendContext.types.d.ts

@@ -13,17 +13,10 @@ interface LegendItemContextBase {
   label: string;
 }
 export interface LegendItemParams extends Partial<Omit<SeriesLegendItemContext, 'type' | keyof LegendItemContextBase>>, Partial<Omit<PiecewiseColorLegendItemContext, 'type' | keyof LegendItemContextBase>>, LegendItemContextBase {
-  /**
-   * The identifier of the legend element.
-   * Used for internal purpose such as `key` props
-   * @deprecated use `seriesId` and `dataIndex` instead
-   */
-  id: number | string;
   /**
    * The type of the series
-   * This property is always defined, but marked as optional to avoid breaking changes. It will become required in a future major version.
    */
-  type?: ChartSeriesType;
+  type: ChartSeriesType;
   markType: ChartsLabelMarkProps['type'];
 }
 export interface SeriesLegendItemContext extends LegendItemContextBase {

package/esm/ChartsLegend/piecewiseColorLegendClasses.d.ts

@@ -28,5 +28,5 @@ export interface PiecewiseColorLegendClasses {
   /** Styles applied to the series label. */
   label: string;
 }
-export declare const useUtilityClasses: (props: PiecewiseColorLegendProps & ChartsLegendSlotExtension) => Record<"item" | "root" | "label" | "mark" | "minLabel" | "maxLabel", string>;
+export declare const useUtilityClasses: (props: PiecewiseColorLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "item" | "minLabel" | "maxLabel", string>;
 export declare const piecewiseColorLegendClasses: PiecewiseColorLegendClasses;

package/esm/ChartsSurface/ChartsSurface.js

@@ -12,7 +12,7 @@ import { ChartsAxesGradients } from "../internals/components/ChartsAxesGradients
 import { useSvgRef } from "../hooks/useSvgRef.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
 import { selectorChartPropsHeight, selectorChartPropsWidth, selectorChartSvgWidth, selectorChartSvgHeight } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js";
-import { selectorChartsHasFocusedItem, selectorChartsIsKeyboardNavigationEnabled } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+import { selectorChartsIsKeyboardNavigationEnabled } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { useUtilityClasses } from "./chartsSurfaceClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartsSurfaceStyles = styled('svg', {
@@ -61,7 +61,6 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
   const propsWidth = store.use(selectorChartPropsWidth);
   const propsHeight = store.use(selectorChartPropsHeight);
   const isKeyboardNavigationEnabled = store.use(selectorChartsIsKeyboardNavigationEnabled);
-  const hasFocusedItem = store.use(selectorChartsHasFocusedItem);
   const svgRef = useSvgRef();
   const handleRef = useForkRef(svgRef, ref);
   const themeProps = useThemeProps({
@@ -84,8 +83,7 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
     },
     viewBox: `${0} ${0} ${svgWidth} ${svgHeight}`,
     className: clsx(classes.root, className),
-    tabIndex: isKeyboardNavigationEnabled ? 0 : undefined,
-    "data-has-focused-item": hasFocusedItem || undefined
+    tabIndex: isKeyboardNavigationEnabled ? 0 : undefined
   }, other, {
     onPointerEnter: event => {
       other.onPointerEnter?.(event);
@@ -95,6 +93,10 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
       other.onPointerLeave?.(event);
       instance.handlePointerLeave?.(event);
     },
+    onClick: event => {
+      other.onClick?.(event);
+      instance.handleClick?.(event);
+    },
     ref: handleRef,
     children: [title && /*#__PURE__*/_jsx("title", {
       children: title

package/esm/ChartsTooltip/ChartsAxisTooltipContent.d.ts

@@ -1,5 +1,6 @@
 import { type SxProps, type Theme } from '@mui/material/styles';
 import { type ChartsTooltipClasses } from "./chartsTooltipClasses.js";
+export interface ChartsAxisTooltipContentClasses extends ChartsTooltipClasses {}
 export interface ChartsAxisTooltipContentProps {
   /**
    * Override or extend the styles applied to the component.

package/esm/ChartsTooltip/ChartsItemTooltipContent.d.ts

@@ -1,5 +1,6 @@
 import { type SxProps, type Theme } from '@mui/material/styles';
 import { type ChartsTooltipClasses } from "./chartsTooltipClasses.js";
+export interface ChartsItemTooltipContentClasses extends ChartsTooltipClasses {}
 export interface ChartsItemTooltipContentProps {
   /**
    * Override or extend the styles applied to the component.

package/esm/ChartsTooltip/ChartsTooltipContainer.d.ts

@@ -2,6 +2,11 @@ import * as React from 'react';
 import { type PopperProps } from '@mui/material/Popper';
 import { type TriggerOptions } from "./utils.js";
 import { type ChartsTooltipClasses } from "./chartsTooltipClasses.js";
+type PopperSlots = NonNullable<PopperProps['slots']>;
+type PopperSlotProps = NonNullable<PopperProps['slotProps']>;
+export interface ChartsTooltipContainerSlots extends PopperSlots {}
+export interface ChartsTooltipContainerSlotProps extends PopperSlotProps {}
+export interface ChartsTooltipContainerClasses extends ChartsTooltipClasses {}
 export interface ChartsTooltipContainerProps<T extends TriggerOptions = TriggerOptions> extends Partial<PopperProps> {
   /**
    * Select the kind of tooltip to display
@@ -14,7 +19,17 @@ export interface ChartsTooltipContainerProps<T extends TriggerOptions = TriggerO
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<ChartsTooltipClasses>;
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
   /**
    * Determine if the tooltip should be placed on the pointer location or on the node.
    * @default 'pointer'

package/esm/ChartsTooltip/index.d.ts

@@ -5,10 +5,9 @@ export { getChartsTooltipUtilityClass, chartsTooltipClasses } from "./chartsTool
 export * from "./ChartsAxisTooltipContent.js";
 export * from "./ChartsItemTooltipContent.js";
 export * from "./ChartsTooltipTable.js";
-export type { ItemTooltip } from "../internals/plugins/models/seriesConfig/tooltipGetter.types.js";
+export type { ItemTooltip } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export type { UseItemTooltipReturnValue, UseRadarItemTooltipReturnValue } from "./useItemTooltip.js";
 export { useItemTooltip, useRadarItemTooltip } from "./useItemTooltip.js";
-export * from "./useAxisTooltip.js";
 export * from "./useAxesTooltip.js";
 export { useMouseTracker } from "./utils.js";
 export * from "./ChartTooltip.types.js";

package/esm/ChartsTooltip/index.js

@@ -5,7 +5,6 @@ export * from "./ChartsAxisTooltipContent.js";
 export * from "./ChartsItemTooltipContent.js";
 export * from "./ChartsTooltipTable.js";
 export { useItemTooltip, useRadarItemTooltip } from "./useItemTooltip.js";
-export * from "./useAxisTooltip.js";
 export * from "./useAxesTooltip.js";
 export { useMouseTracker } from "./utils.js";
 export * from "./ChartTooltip.types.js";

package/esm/ChartsTooltip/useAxesTooltip.d.ts

@@ -1,7 +1,33 @@
-import { type UseAxisTooltipParams, type UseAxisTooltipReturnValue } from "./useAxisTooltip.js";
-type UseAxesTooltipParams = Omit<UseAxisTooltipParams, 'multipleAxes'>;
+import { type SeriesId } from "../models/seriesType/common.js";
+import { type CartesianChartSeriesType, type ChartsSeriesConfig, type PolarChartSeriesType } from "../models/seriesType/config.js";
+import { type ComputedAxis, type PolarAxisDefaultized, type AxisId } from "../models/axis.js";
+import { type ChartsLabelMarkProps } from "../ChartsLabel/index.js";
+export interface UseAxesTooltipReturnValue<SeriesT extends CartesianChartSeriesType | PolarChartSeriesType = CartesianChartSeriesType | PolarChartSeriesType, AxisValueT extends string | number | Date = string | number | Date> {
+  axisDirection: SeriesT extends CartesianChartSeriesType ? 'x' | 'y' : 'rotation' | 'radius';
+  mainAxis: SeriesT extends CartesianChartSeriesType ? ComputedAxis : PolarAxisDefaultized;
+  axisId: AxisId;
+  axisValue: AxisValueT;
+  axisFormattedValue: string;
+  dataIndex: number;
+  seriesItems: SeriesItem<SeriesT>[];
+}
+export interface UseAxesTooltipParams {
+  /**
+   * The axis directions to consider.
+   * If not defined, all directions are considered
+   */
+  directions?: ('x' | 'y' | 'rotation')[];
+}
+interface SeriesItem<T extends CartesianChartSeriesType | PolarChartSeriesType> {
+  seriesId: SeriesId;
+  color: string;
+  value: ChartsSeriesConfig[T]['valueType'];
+  formattedValue: string;
+  formattedLabel: string | null;
+  markType: ChartsLabelMarkProps['type'];
+}
 /**
  * Returns the axes to display in the tooltip and the series item related to them.
  */
-export declare function useAxesTooltip(params?: UseAxesTooltipParams): UseAxisTooltipReturnValue[] | null;
+export declare function useAxesTooltip(params?: UseAxesTooltipParams): UseAxesTooltipReturnValue[] | null;
 export {};