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

package/ChartsLabel/labelClasses.d.ts

@@ -0,0 +1,9 @@
+import type { ChartsLabelProps } from './ChartsLabel';
+export interface ChartsLabelClasses {
+    /** Styles applied to the root element. */
+    root: string;
+}
+export type ChartsLabelClassKey = keyof ChartsLabelClasses;
+export declare function getLabelUtilityClass(slot: string): string;
+export declare const labelClasses: ChartsLabelClasses;
+export declare const useUtilityClasses: (props: ChartsLabelProps) => Record<"root", string>;

package/ChartsLabel/labelClasses.js

@@ -0,0 +1,13 @@
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getLabelUtilityClass(slot) {
+  return generateUtilityClass('MuiChartsLabel', slot);
+}
+export const labelClasses = generateUtilityClasses('MuiChartsLabel', ['root']);
+export const useUtilityClasses = props => {
+  const slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getLabelUtilityClass, props.classes);
+};

package/ChartsLabel/labelGradientClasses.d.ts

@@ -0,0 +1,15 @@
+import type { ChartsLabelGradientProps } from './ChartsLabelGradient';
+export interface ChartsLabelGradientClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the "mask" that gives shape to the gradient. */
+    mask: string;
+    /** Styles applied when direction is "column". */
+    column: string;
+    /** Styles applied when direction is "row". */
+    row: string;
+}
+export type ChartsLabelGradientClassKey = keyof ChartsLabelGradientClasses;
+export declare function getLabelGradientUtilityClass(slot: string): string;
+export declare const labelGradientClasses: ChartsLabelGradientClasses;
+export declare const useUtilityClasses: (props: ChartsLabelGradientProps) => Record<"mask" | "root", string>;

package/ChartsLabel/labelGradientClasses.js

@@ -0,0 +1,17 @@
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getLabelGradientUtilityClass(slot) {
+  return generateUtilityClass('MuiChartsLabelGradient', slot);
+}
+export const labelGradientClasses = generateUtilityClasses('MuiChartsLabelGradient', ['root', 'column', 'row', 'mask']);
+export const useUtilityClasses = props => {
+  const {
+    direction
+  } = props;
+  const slots = {
+    root: ['root', direction],
+    mask: ['mask']
+  };
+  return composeClasses(slots, getLabelGradientUtilityClass, props.classes);
+};

package/ChartsLabel/labelMarkClasses.d.ts

@@ -0,0 +1,17 @@
+import type { ChartsLabelMarkProps } from './ChartsLabelMark';
+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". */
+    square: string;
+    /** Styles applied to the mark type "circle". */
+    circle: string;
+}
+export type ChartsLabelMarkClassKey = keyof ChartsLabelMarkClasses;
+export declare function getLabelMarkUtilityClass(slot: string): string;
+export declare const labelMarkClasses: ChartsLabelMarkClasses;
+export declare const useUtilityClasses: (props: ChartsLabelMarkProps) => Record<"mask" | "root", string>;

package/ChartsLabel/labelMarkClasses.js

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

package/ChartsLegend/useAxis.js

@@ -1,8 +1,8 @@
 'use client';
 
-import * as React from 'react';
-import { ZAxisContext } from "../context/ZAxisContextProvider.js";
 import { useCartesianContext } from "../context/CartesianProvider/useCartesianContext.js";
+import { useZAxis } from "../hooks/useZAxis.js";
+
 /**
  * Helper to select an axis definition according to its direction and id.
  */
@@ -19,7 +19,7 @@ export function useAxis({
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(ZAxisContext);
+  } = useZAxis();
   switch (axisDirection) {
     case 'x':
       {

package/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -14,11 +14,11 @@ function ChartsAxisTooltipContent(props) {
     classes: propClasses,
     sx
   } = props;
-  const tootlipData = useAxisTooltip();
+  const tooltipData = useAxisTooltip();
   const xAxis = useXAxis();
   const yAxis = useYAxis();
   const classes = useUtilityClasses(propClasses);
-  if (tootlipData === null) {
+  if (tooltipData === null) {
     return null;
   }
   const {
@@ -26,7 +26,7 @@ function ChartsAxisTooltipContent(props) {
     axisValue,
     axisFormattedValue,
     seriesItems
-  } = tootlipData;
+  } = tooltipData;
   const axis = axisDirection === 'x' ? xAxis : yAxis;
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
@@ -35,8 +35,10 @@ function ChartsAxisTooltipContent(props) {
       className: classes.table,
       children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {
         children: /*#__PURE__*/_jsx(ChartsTooltipRow, {
+          className: classes.row,
           children: /*#__PURE__*/_jsx(ChartsTooltipCell, {
             colSpan: 3,
+            className: clsx(classes.cell, classes.axisValueCell),
             children: /*#__PURE__*/_jsx(Typography, {
               children: axisFormattedValue
             })

package/ChartsTooltip/ChartsTooltipTable.js

@@ -12,11 +12,10 @@ export const ChartsTooltipPaper = styled('div', {
 })(({
   theme
 }) => ({
-  boxShadow: theme.shadows[1],
   backgroundColor: (theme.vars || theme).palette.background.paper,
   color: (theme.vars || theme).palette.text.primary,
-  transition: theme.transitions.create('box-shadow'),
-  borderRadius: theme.shape.borderRadius
+  borderRadius: theme.shape.borderRadius,
+  border: `solid ${(theme.vars || theme).palette.divider} 1px`
 }));
 
 /**
@@ -46,10 +45,10 @@ export const ChartsTooltipRow = styled('tr', {
   theme
 }) => ({
   'tr:first-of-type& td': {
-    paddingTop: theme.spacing(1)
+    paddingTop: theme.spacing(0.5)
   },
   'tr:last-of-type& td': {
-    paddingBottom: theme.spacing(1)
+    paddingBottom: theme.spacing(0.5)
   }
 }));
 
@@ -66,17 +65,23 @@ export const ChartsTooltipCell = styled('td', {
   verticalAlign: 'middle',
   color: (theme.vars || theme).palette.text.secondary,
   [`&.${chartsTooltipClasses.labelCell}`]: {
-    paddingLeft: theme.spacing(1)
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1.5),
+    fontWeight: theme.typography.fontWeightRegular
+  },
+  [`&.${chartsTooltipClasses.valueCell}, &.${chartsTooltipClasses.axisValueCell}`]: {
+    color: (theme.vars || theme).palette.text.primary,
+    fontWeight: theme.typography.fontWeightMedium
   },
   [`&.${chartsTooltipClasses.valueCell}`]: {
-    paddingLeft: theme.spacing(4),
-    color: (theme.vars || theme).palette.text.primary
+    paddingLeft: theme.spacing(1.5),
+    paddingRight: theme.spacing(1.5)
   },
   'td:first-of-type&': {
-    paddingLeft: theme.spacing(2)
+    paddingLeft: theme.spacing(1.5)
   },
   'td:last-of-type&': {
-    paddingRight: theme.spacing(2)
+    paddingRight: theme.spacing(1.5)
   }
 }));
 
@@ -95,9 +100,6 @@ export const ChartsTooltipMark = styled('div', {
   width: theme.spacing(1),
   height: theme.spacing(1),
   borderRadius: '50%',
-  boxShadow: theme.shadows[1],
   background: color,
-  borderColor: (theme.vars || theme).palette.background.paper,
-  border: `solid ${(theme.vars || theme).palette.background.paper} ${theme.spacing(0.25)}`,
   boxSizing: 'content-box'
 }));

package/ChartsTooltip/chartsTooltipClasses.d.ts

@@ -17,8 +17,10 @@ export interface ChartsTooltipClasses {
     labelCell: string;
     /** Styles applied to the valueCell element. */
     valueCell: string;
+    /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+    axisValueCell: string;
 }
 export type ChartsTooltipClassKey = keyof Omit<ChartsTooltipClasses, 'markCell' | 'labelCell' | 'valueCell'>;
 export declare function getChartsTooltipUtilityClass(slot: string): string;
 export declare const chartsTooltipClasses: ChartsTooltipClasses;
-export declare const useUtilityClasses: (classes?: Partial<ChartsTooltipClasses>) => Record<"cell" | "table" | "row" | "mark" | "root" | "paper" | "markCell" | "labelCell" | "valueCell", string>;
+export declare const useUtilityClasses: (classes?: Partial<ChartsTooltipClasses>) => Record<"cell" | "table" | "row" | "mark" | "root" | "paper" | "markCell" | "labelCell" | "valueCell" | "axisValueCell", string>;

package/ChartsTooltip/chartsTooltipClasses.js

@@ -4,7 +4,7 @@ import composeClasses from '@mui/utils/composeClasses';
 export function getChartsTooltipUtilityClass(slot) {
   return generateUtilityClass('MuiChartsTooltip', slot);
 }
-export const chartsTooltipClasses = generateUtilityClasses('MuiChartsTooltip', ['root', 'paper', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell']);
+export const chartsTooltipClasses = generateUtilityClasses('MuiChartsTooltip', ['root', 'paper', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell', 'axisValueCell']);
 export const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
@@ -15,7 +15,8 @@ export const useUtilityClasses = classes => {
     mark: ['mark'],
     markCell: ['markCell'],
     labelCell: ['labelCell'],
-    valueCell: ['valueCell']
+    valueCell: ['valueCell'],
+    axisValueCell: ['axisValueCell']
   };
   return composeClasses(slots, getChartsTooltipUtilityClass, classes);
 };

package/ChartsTooltip/useAxisTooltip.js

@@ -1,9 +1,7 @@
 'use client';
 
-import * as React from 'react';
 import { useSeries } from "../hooks/useSeries.js";
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { ZAxisContext } from "../context/ZAxisContextProvider.js";
 import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
 import { useStore } from "../internals/store/useStore.js";
 import { useSelector } from "../internals/store/useSelector.js";
@@ -11,6 +9,7 @@ import { getLabel } from "../internals/getLabel.js";
 import { isCartesianSeriesType } from "../internals/isCartesian.js";
 import { utcFormatter } from "./utils.js";
 import { useXAxis, useYAxis } from "../hooks/useAxis.js";
+import { useZAxis } from "../hooks/useZAxis.js";
 import { selectorChartsInteractionXAxis, selectorChartsInteractionYAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 export function useAxisTooltip() {
   const defaultXAxis = useXAxis();
@@ -26,7 +25,7 @@ export function useAxisTooltip() {
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(ZAxisContext);
+  } = useZAxis();
   const colorProcessors = useColorProcessor();
   if (axisData === null) {
     return null;

package/ChartsTooltip/useItemTooltip.js

@@ -1,15 +1,14 @@
 'use client';
 
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
 import { useSeries } from "../hooks/useSeries.js";
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { ZAxisContext } from "../context/ZAxisContextProvider.js";
 import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
 import { getLabel } from "../internals/getLabel.js";
 import { selectorChartsInteractionItem } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
+import { useZAxis } from "../hooks/useZAxis.js";
 export function useItemTooltip() {
   const store = useStore();
   const item = useSelector(store, selectorChartsInteractionItem);
@@ -23,7 +22,7 @@ export function useItemTooltip() {
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(ZAxisContext);
+  } = useZAxis();
   const colorProcessors = useColorProcessor();
   const xAxisId = series.xAxisId ?? xAxisIds[0];
   const yAxisId = series.yAxisId ?? yAxisIds[0];

package/PieChart/PiePlot.js

@@ -2,13 +2,13 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { DrawingAreaContext } from "../context/DrawingAreaProvider/index.js";
 import { PieArcPlot } from "./PieArcPlot.js";
 import { PieArcLabelPlot } from "./PieArcLabelPlot.js";
 import { getPercentageValue } from "../internals/getPercentageValue.js";
 import { getPieCoordinates } from "./getPieCoordinates.js";
 import { usePieSeries } from "../hooks/useSeries.js";
 import { useSkipAnimation } from "../context/AnimationProvider/index.js";
+import { useDrawingArea } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -33,7 +33,7 @@ function PiePlot(props) {
     top,
     width,
     height
-  } = React.useContext(DrawingAreaContext);
+  } = useDrawingArea();
   const skipAnimation = useSkipAnimation(inSkipAnimation);
   if (seriesData === undefined) {
     return null;

package/README.md

@@ -1,7 +1,7 @@
 # MUI X Charts
 
 This package is the community edition of the chart components.
-It's part of [MUI X](https://mui.com/x/), an open-core extension of MUI Core, with advanced components.
+It's part of [MUI X](https://mui.com/x/), an open-core extension of our Core libraries, with advanced components.
 
 ## Installation
 

package/ScatterChart/ScatterPlot.js

@@ -6,8 +6,8 @@ import PropTypes from 'prop-types';
 import { Scatter } from "./Scatter.js";
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import getColor from "./getColor.js";
-import { ZAxisContext } from "../context/ZAxisContextProvider.js";
 import { useScatterSeries } from "../hooks/useSeries.js";
+import { useZAxis } from "../hooks/useZAxis.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -30,7 +30,7 @@ function ScatterPlot(props) {
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(ZAxisContext);
+  } = useZAxis();
   if (seriesData === undefined) {
     return null;
   }

package/ScatterChart/extremums.js

@@ -1,6 +1,4 @@
-const mergeMinMax = (acc, val) => {
-  return [Math.min(acc[0], val[0]), Math.max(acc[1], val[1])];
-};
+const mergeMinMax = (acc, val) => [val[0] === null ? acc[0] : Math.min(acc[0], val[0]), val[1] === null ? acc[1] : Math.max(acc[1], val[1])];
 export const getExtremumX = params => {
   const {
     series,

package/ScatterChart/formatter.js

@@ -11,8 +11,8 @@ const formatter = ({
     }
     const data = !datasetKeys ? seriesData.data ?? [] : dataset?.map(d => {
       return {
-        x: d[datasetKeys.x],
-        y: d[datasetKeys.y],
+        x: d[datasetKeys.x] ?? null,
+        y: d[datasetKeys.y] ?? null,
         z: datasetKeys.z && d[datasetKeys.z],
         id: d[datasetKeys.id]
       };

package/hooks/useChartId.d.ts

@@ -1 +1 @@
-export declare function useChartId(): string;
+export declare function useChartId(): string | undefined;

package/hooks/useColorScale.js

@@ -1,8 +1,7 @@
 'use client';
 
-import * as React from 'react';
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { ZAxisContext } from "../context/ZAxisContextProvider.js";
+import { useZAxis } from "./useZAxis.js";
 export function useXColorScale(identifier) {
   const {
     xAxis,
@@ -23,7 +22,7 @@ export function useZColorScale(identifier) {
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(ZAxisContext);
+  } = useZAxis();
   const id = typeof identifier === 'string' ? identifier : zAxisIds[identifier ?? 0];
   return zAxis[id]?.colorScale;
 }

package/hooks/useZAxis.d.ts

@@ -0,0 +1,6 @@
+export declare const useZAxis: () => {
+    zAxis: {
+        [axisId: string]: import("../internals").ZAxisDefaultized;
+    };
+    zAxisIds: string[];
+};

package/hooks/useZAxis.js

@@ -0,0 +1,8 @@
+'use client';
+
+import * as React from 'react';
+import { ZAxisContext } from "../context/ZAxisContextProvider.js";
+export const useZAxis = () => {
+  const data = React.useContext(ZAxisContext);
+  return data;
+};

package/index.js

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

package/internals/consumeThemeProps.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+/**
+ * A higher order component that consumes and merges the theme `defaultProps` and handles the `classes` and renders the component.
+ *
+ * This HOC will wrap a single component.
+ * If you need to render multiple components, you can manually consume the theme and render them in your component instead of using this HOC.
+ *
+ * In the example below, `MyComponent` will render the `DefaultComponent` with the `direction` prop set to `'row'` and the className set to `'my-custom-root'`.
+ *
+ * @example
+ * ```tsx
+ * createTheme({
+ *   components: {
+ *     MuiMyComponent: {
+ *       defaultProps: {
+ *         direction: 'row',
+ *       },
+ *     },
+ *   },
+ * })
+ *
+ * type MyComponentProps = {
+ *   direction: 'row' | 'column';
+ *   classes?: Record<'root', string>;
+ * };
+ *
+ * const MyComponent = consumeThemeProps(
+ *   'MuiMyComponent',
+ *   function DefaultComponent(props: MyComponentProps) {
+ *     return (
+ *       <div className={props.classes.root}>
+ *         {props.direction}
+ *       </div>
+ *     );
+ *   }
+ * );
+ *
+ * render(<MyComponent classes={{ root: 'my-custom-root' }} />);
+ * ```
+ *
+ * @param {string} name The mui component name.
+ * @param {object} options Options for the HOC.
+ * @param {Record<string, any>} options.defaultProps A set of defaults for the component, will be deep merged with the props.
+ * @param {Function} options.classesResolver A function that returns the classes for the component. It receives the props, after theme props and defaults have been applied. And the theme object as the second argument.
+ * @param InComponent The component to render if the slot is not provided.
+ */
+export declare const consumeThemeProps: <Props extends {
+    slots?: Record<string, any>;
+    slotProps?: Record<string, any>;
+    classes?: Record<string, any>;
+}>(name: string, options: {
+    defaultProps?: Omit<Partial<Props>, "slots" | "slotProps"> | ((props: Props) => Omit<Partial<Props>, "slots" | "slotProps">);
+    classesResolver?: (props: Props, theme: any) => Record<string, string>;
+}, InComponent: React.JSXElementConstructor<Props>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<any>>;

package/internals/consumeThemeProps.js

@@ -0,0 +1,79 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useTheme, useThemeProps } from '@mui/material/styles';
+import resolveProps from '@mui/utils/resolveProps';
+import * as React from 'react';
+import * as ReactIs from 'react-is';
+
+/**
+ * A higher order component that consumes and merges the theme `defaultProps` and handles the `classes` and renders the component.
+ *
+ * This HOC will wrap a single component.
+ * If you need to render multiple components, you can manually consume the theme and render them in your component instead of using this HOC.
+ *
+ * In the example below, `MyComponent` will render the `DefaultComponent` with the `direction` prop set to `'row'` and the className set to `'my-custom-root'`.
+ *
+ * @example
+ * ```tsx
+ * createTheme({
+ *   components: {
+ *     MuiMyComponent: {
+ *       defaultProps: {
+ *         direction: 'row',
+ *       },
+ *     },
+ *   },
+ * })
+ *
+ * type MyComponentProps = {
+ *   direction: 'row' | 'column';
+ *   classes?: Record<'root', string>;
+ * };
+ *
+ * const MyComponent = consumeThemeProps(
+ *   'MuiMyComponent',
+ *   function DefaultComponent(props: MyComponentProps) {
+ *     return (
+ *       <div className={props.classes.root}>
+ *         {props.direction}
+ *       </div>
+ *     );
+ *   }
+ * );
+ *
+ * render(<MyComponent classes={{ root: 'my-custom-root' }} />);
+ * ```
+ *
+ * @param {string} name The mui component name.
+ * @param {object} options Options for the HOC.
+ * @param {Record<string, any>} options.defaultProps A set of defaults for the component, will be deep merged with the props.
+ * @param {Function} options.classesResolver A function that returns the classes for the component. It receives the props, after theme props and defaults have been applied. And the theme object as the second argument.
+ * @param InComponent The component to render if the slot is not provided.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const consumeThemeProps = (name, options, InComponent) => {
+  function InternalComponent(props, ref) {
+    const themedProps = useThemeProps({
+      props,
+      // eslint-disable-next-line material-ui/mui-name-matches-component-name
+      name
+    });
+    const defaultProps = typeof options.defaultProps === 'function' ? options.defaultProps(themedProps) : options.defaultProps ?? {};
+    const outProps = resolveProps(defaultProps, themedProps);
+    const theme = useTheme();
+    const classes = options.classesResolver?.(outProps, theme);
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line react-compiler/react-compiler
+      InComponent.displayName = name;
+    }
+    const OutComponent = ReactIs.isForwardRef(InComponent) ? InComponent :
+    /*#__PURE__*/
+    // InComponent needs to be a function that accepts `(props, ref)`
+    // @ts-expect-error
+    React.forwardRef(InComponent);
+    return /*#__PURE__*/_jsx(OutComponent, _extends({}, outProps, {
+      classes: classes,
+      ref: ref
+    }));
+  }
+  return /*#__PURE__*/React.forwardRef(InternalComponent);
+};

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

@@ -26,7 +26,7 @@ useChartId.getInitialState = ({
   id
 }) => ({
   id: {
-    chartId: createChartDefaultId(),
+    chartId: id,
     providedChartId: id
   }
 });

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

@@ -7,24 +7,24 @@ import { UseChartIdSignature } from './useChartId.types';
  */
 export declare const selectorChartId: ((state: import("./useChartId.types").UseChartIdState & Partial<{}> & {
     cacheKey: import("../../models").ChartStateCacheKey;
-}) => string) & {
+}) => string | undefined) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
 } & {
     resultFunc: (resultFuncArgs_0: {
-        chartId: string;
+        chartId: string | undefined;
         providedChartId: string | undefined;
-    }) => string;
+    }) => string | undefined;
     memoizedResultFunc: ((resultFuncArgs_0: {
-        chartId: string;
+        chartId: string | undefined;
         providedChartId: string | undefined;
-    }) => string) & {
+    }) => string | undefined) & {
         clearCache: () => void;
         resultsCount: () => number;
         resetResultsCount: () => void;
     };
-    lastResult: () => string;
+    lastResult: () => string | undefined;
     dependencies: [ChartRootSelector<UseChartIdSignature>];
     recomputations: () => number;
     resetRecomputations: () => void;

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

@@ -4,12 +4,12 @@ export interface UseChartIdParameters {
      * This prop is used to help implement the accessibility logic.
      * If you don't provide this prop. It falls back to a randomly generated id.
      */
-    id?: string;
+    id: string | undefined;
 }
-export type UseChartIdDefaultizedParameters = UseChartIdParameters;
+export type UseChartIdDefaultizedParameters = Required<UseChartIdParameters>;
 export interface UseChartIdState {
     id: {
-        chartId: string;
+        chartId: string | undefined;
         providedChartId: string | undefined;
     };
 }

package/internals/store/useCharts.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useId from '@mui/utils/useId';
 import { ChartStore } from "../plugins/utils/ChartStore.js";
 import { CHART_CORE_PLUGINS } from "../plugins/corePlugins/index.js";
 export function useChartApiInitialization(inputApiRef) {
@@ -15,7 +16,10 @@ export function useChartApiInitialization(inputApiRef) {
 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 defaultChartId = useId();
+  const pluginParams = {
+    id: defaultChartId
+  }; // To generate when plugins use params.
   const instanceRef = React.useRef({});
   const instance = instanceRef.current;
   const publicAPI = useChartApiInitialization(props.apiRef);
@@ -39,7 +43,9 @@ export function useCharts(inPlugins, props) {
     };
     plugins.forEach(plugin => {
       if (plugin.getInitialState) {
-        Object.assign(initialState, plugin.getInitialState({}));
+        Object.assign(initialState, plugin.getInitialState({
+          id: defaultChartId
+        }));
       }
     });
     storeRef.current = new ChartStore(initialState);