@mui/x-charts 8.26.0 → 8.27.4

package/esm/ChartContainer/useChartContainerProps.d.ts

@@ -1,15 +1,14 @@
 import type * as React from 'react';
-import { type ChartsSurfaceProps } from "../ChartsSurface/index.js";
-import { type ChartDataProviderProps } from "../ChartDataProvider/index.js";
-import type { ChartContainerProps } from "./ChartContainer.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 UseChartContainerPropsReturnValue<TSeries extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = {
-  chartDataProviderProps: Omit<ChartDataProviderProps<TSeries, TSignatures>, 'children'>;
-  chartsSurfaceProps: ChartsSurfaceProps & {
-    ref: React.Ref<SVGSVGElement>;
-  };
-  children: React.ReactNode;
-};
+import { type UseChartsContainerPropsReturnValue } from "../ChartsContainer/useChartsContainerProps.js";
+import type { ChartContainerProps } from "./ChartContainer.js";
+/**
+ * @deprecated Use `UseChartsContainerPropsReturnValue` instead.
+ */
+export type UseChartContainerPropsReturnValue<TSeries extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = UseChartsContainerPropsReturnValue<TSeries, TSignatures>;
+/**
+ * @deprecated Use `useChartsContainerProps` instead.
+ */
 export declare const useChartContainerProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartContainerProps<TSeries, TSignatures>, ref: React.Ref<SVGSVGElement>) => UseChartContainerPropsReturnValue<TSeries, TSignatures>;

package/esm/ChartContainer/useChartContainerProps.js

@@ -1,97 +1,14 @@
 '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", "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";
+import { useChartsContainerProps } from "../ChartsContainer/useChartsContainerProps.js";
+
+/**
+ * @deprecated Use `UseChartsContainerPropsReturnValue` instead.
+ */
+
+/**
+ * @deprecated Use `useChartsContainerProps` instead.
+ */
 export const useChartContainerProps = (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,
-      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,
-    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
-  };
+  return useChartsContainerProps(props, ref);
 };

package/esm/ChartDataProvider/ChartDataProvider.d.ts

@@ -1,49 +1,20 @@
-import * as React from 'react';
-import { type ChartsSlotProps, type ChartsSlots } from "../internals/material/index.js";
-import { type ChartProviderProps } from "../context/ChartProvider/index.js";
 import { type ChartSeriesType } from "../models/seriesType/config.js";
 import { type ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
 import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
-import { type ChartsLocalizationProviderProps } from "../ChartsLocalizationProvider/index.js";
-export type ChartDataProviderProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = React.PropsWithChildren<ChartProviderProps<TSeries, TSignatures>['pluginParams'] & Pick<ChartProviderProps<TSeries, TSignatures>, 'seriesConfig' | 'plugins'>> & ChartsLocalizationProviderProps & {
-  /**
-   * Slots to customize charts' components.
-   */
-  slots?: Partial<ChartsSlots>;
-  /**
-   * The props for the slots.
-   */
-  slotProps?: Partial<ChartsSlotProps>;
-};
+import { ChartsDataProvider, type ChartsDataProviderProps, type ChartsDataProviderSlots, type ChartsDataProviderSlotProps } from "../ChartsDataProvider/index.js";
 /**
- * Orchestrates the data providers for the chart components and hooks.
- *
- * Use this component if you have custom HTML components that need to access the chart data.
- *
- * Demos:
- *
- * - [Composition](https://mui.com/x/react-charts/composition/)
- *
- * API:
- *
- * - [ChartDataProvider API](https://mui.com/x/api/charts/chart-data-provider/)
- *
- * @example
- * ```jsx
- * <ChartDataProvider
- *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
- *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
- * >
- *   <ChartsSurface>
- *      <BarPlot />
- *      <ChartsXAxis axisId="x-axis" />
- *   </ChartsSurface>
- *   {'Custom Legend Component'}
- * </ChartDataProvider>
- * ```
+ * @deprecated Use `ChartsDataProviderSlots` instead. We added S to the charts prefix to align with other components.
  */
-declare function ChartDataProvider<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartDataProviderProps<TSeries, TSignatures>): import("react/jsx-runtime").JSX.Element;
-declare namespace ChartDataProvider {
-  var propTypes: any;
-}
-export { ChartDataProvider };
+export type ChartDataProviderSlots = ChartsDataProviderSlots;
+/**
+ * @deprecated Use `ChartsDataProviderSlotProps` instead. We added S to the charts prefix to align with other components.
+ */
+export type ChartDataProviderSlotProps = ChartsDataProviderSlotProps;
+/**
+ * @deprecated Use `ChartsDataProviderProps` instead. We added S to the charts prefix to align with other components.
+ */
+export type ChartDataProviderProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = ChartsDataProviderProps<TSeries, TSignatures>;
+/**
+ * @deprecated Use `ChartsDataProvider` instead. We added S to the charts prefix to align with other components.
+ */
+export declare const ChartDataProvider: typeof ChartsDataProvider;

package/esm/ChartDataProvider/ChartDataProvider.js

@@ -1,132 +1,20 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { defaultSlotsMaterial } from "../internals/material/index.js";
-import { ChartsSlotsProvider } from "../context/ChartsSlotsContext.js";
-import { useChartDataProviderProps } from "./useChartDataProviderProps.js";
-import { ChartProvider } from "../context/ChartProvider/index.js";
-import { ChartsLocalizationProvider } from "../ChartsLocalizationProvider/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { ChartsDataProvider } from "../ChartsDataProvider/index.js";
+
+/**
+ * @deprecated Use `ChartsDataProviderSlots` instead. We added S to the charts prefix to align with other components.
+ */
+
+/**
+ * @deprecated Use `ChartsDataProviderSlotProps` instead. We added S to the charts prefix to align with other components.
+ */
+
+/**
+ * @deprecated Use `ChartsDataProviderProps` instead. We added S to the charts prefix to align with other components.
+ */
+
 /**
- * Orchestrates the data providers for the chart components and hooks.
- *
- * Use this component if you have custom HTML components that need to access the chart data.
- *
- * Demos:
- *
- * - [Composition](https://mui.com/x/react-charts/composition/)
- *
- * API:
- *
- * - [ChartDataProvider API](https://mui.com/x/api/charts/chart-data-provider/)
- *
- * @example
- * ```jsx
- * <ChartDataProvider
- *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
- *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
- * >
- *   <ChartsSurface>
- *      <BarPlot />
- *      <ChartsXAxis axisId="x-axis" />
- *   </ChartsSurface>
- *   {'Custom Legend Component'}
- * </ChartDataProvider>
- * ```
+ * @deprecated Use `ChartsDataProvider` instead. We added S to the charts prefix to align with other components.
  */
-function ChartDataProvider(props) {
-  const {
-    children,
-    localeText,
-    chartProviderProps,
-    slots,
-    slotProps
-  } = useChartDataProviderProps(props);
-  return /*#__PURE__*/_jsx(ChartProvider, _extends({}, chartProviderProps, {
-    children: /*#__PURE__*/_jsx(ChartsLocalizationProvider, {
-      localeText: localeText,
-      children: /*#__PURE__*/_jsx(ChartsSlotsProvider, {
-        slots: slots,
-        slotProps: slotProps,
-        defaultSlots: defaultSlotsMaterial,
-        children: children
-      })
-    })
-  }));
-}
-process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  apiRef: PropTypes.shape({
-    current: PropTypes.any
-  }),
-  /**
-   * Color palette used to colorize multiple series.
-   * @default rainbowSurgePalette
-   */
-  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
-  /**
-   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
-   */
-  dataset: PropTypes.arrayOf(PropTypes.object),
-  /**
-   * Options to enable features planned for the next major.
-   */
-  experimentalFeatures: PropTypes.shape({
-    preferStrictDomainInLineCharts: PropTypes.bool
-  }),
-  /**
-   * The height of the chart in px. If not defined, it takes the height of the parent element.
-   */
-  height: PropTypes.number,
-  /**
-   * 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: PropTypes.string,
-  /**
-   * Localized text for chart components.
-   */
-  localeText: PropTypes.object,
-  /**
-   * The margin between the SVG and the drawing area.
-   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
-   *
-   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   */
-  margin: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-    bottom: PropTypes.number,
-    left: PropTypes.number,
-    right: PropTypes.number,
-    top: PropTypes.number
-  })]),
-  /**
-   * The array of series to display.
-   * Each type of series has its own specificity.
-   * Please refer to the appropriate docs page to learn more about it.
-   */
-  series: PropTypes.arrayOf(PropTypes.object),
-  /**
-   * If `true`, animations are skipped.
-   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
-   */
-  skipAnimation: PropTypes.bool,
-  /**
-   * The props for the slots.
-   */
-  slotProps: PropTypes.object,
-  /**
-   * Slots to customize charts' components.
-   */
-  slots: PropTypes.object,
-  theme: PropTypes.oneOf(['dark', 'light']),
-  /**
-   * The width of the chart in px. If not defined, it takes the width of the parent element.
-   */
-  width: PropTypes.number
-} : void 0;
-export { ChartDataProvider };
+export const ChartDataProvider = ChartsDataProvider;

package/esm/ChartDataProvider/useChartDataProviderProps.d.ts

@@ -1,13 +1,10 @@
-import type { ChartDataProviderProps } from "./ChartDataProvider.js";
-import { type ChartProviderProps } from "../context/ChartProvider/index.js";
-import { type ChartAnyPluginSignature } from "../internals/plugins/models/index.js";
-import { type ChartSeriesType } from "../models/seriesType/config.js";
-import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
-import { type ChartsLocalizationProviderProps } from "../ChartsLocalizationProvider/index.js";
-export declare const useChartDataProviderProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(inProps: ChartDataProviderProps<TSeries, TSignatures> & ChartsLocalizationProviderProps) => {
+/**
+ * @deprecated Use `useChartsDataProviderProps` instead. We added S to the charts prefix to align with other components.
+ */
+export declare const useChartDataProviderProps: <TSeries extends import("../internals/index.js").ChartSeriesType = keyof import("../internals/index.js").ChartsSeriesConfig, TSignatures extends readonly import("../internals/index.js").ChartAnyPluginSignature[] = import("../internals/plugins/allPlugins.js").AllPluginSignatures<TSeries>>(inProps: import("../index.js").ChartsDataProviderProps<TSeries, TSignatures> & import("../index.js").ChartsLocalizationProviderProps) => {
   children: import("react").ReactNode;
   localeText: Partial<import("../locales/index.js").ChartsLocaleText> | undefined;
-  chartProviderProps: ChartProviderProps<TSeries, TSignatures>;
-  slots: Partial<import("../internals/index.js").ChartsSlots> | undefined;
-  slotProps: Partial<import("../internals/index.js").ChartsSlotProps> | undefined;
+  chartProviderProps: import("../internals/index.js").ChartsProviderProps<TSeries, TSignatures>;
+  slots: Partial<import("../index.js").ChartsDataProviderSlots> | undefined;
+  slotProps: Partial<import("../index.js").ChartsDataProviderSlotProps> | undefined;
 };

package/esm/ChartDataProvider/useChartDataProviderProps.js

@@ -1,38 +1,8 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "localeText", "plugins", "seriesConfig", "slots", "slotProps"];
-import { useTheme, useThemeProps } from '@mui/material/styles';
-import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
-export const useChartDataProviderProps = inProps => {
-  // eslint-disable-next-line material-ui/mui-name-matches-component-name
-  const props = useThemeProps({
-    props: inProps,
-    name: 'MuiChartDataProvider'
-  });
-  const {
-      children,
-      localeText,
-      plugins = DEFAULT_PLUGINS,
-      seriesConfig,
-      slots,
-      slotProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const theme = useTheme();
-  const chartProviderProps = {
-    plugins: plugins,
-    seriesConfig,
-    pluginParams: _extends({
-      theme: theme.palette.mode
-    }, other)
-  };
-  return {
-    children,
-    localeText,
-    chartProviderProps,
-    slots,
-    slotProps
-  };
-};
+import { useChartsDataProviderProps } from "../ChartsDataProvider/useChartsDataProviderProps.js";
+
+/**
+ * @deprecated Use `useChartsDataProviderProps` instead. We added S to the charts prefix to align with other components.
+ */
+export const useChartDataProviderProps = useChartsDataProviderProps;

package/esm/ChartsAxis/axisClasses.d.ts

@@ -30,6 +30,8 @@ export interface ChartsAxisClasses {
   /**
    * Styles applied to the root element for the axis with the given ID.
    * Needs to be suffixed with the axis ID: `.${axisClasses.id}-${axisId}`.
+   *
+   * @deprecated Use the data attribute `data-axis-id` instead.
    */
   id: string;
 }

package/esm/ChartsContainer/ChartsContainer.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { type ChartSeriesType } from "../models/seriesType/config.js";
+import { type ChartsDataProviderProps, type ChartsDataProviderSlotProps, type ChartsDataProviderSlots } from "../ChartsDataProvider/index.js";
+import { type ChartsSurfaceProps } from "../ChartsSurface/index.js";
+import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+import { type ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
+export interface ChartsContainerSlots extends ChartsDataProviderSlots {}
+export interface ChartsContainerSlotProps extends ChartsDataProviderSlotProps {}
+export type ChartsContainerProps<SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>> = Omit<ChartsDataProviderProps<SeriesType, TSignatures>, 'children'> & ChartsSurfaceProps;
+/**
+ * It sets up the data providers as well as the `<svg>` for the chart.
+ *
+ * This is a combination of both the `ChartsDataProvider` and `ChartsSurface` components.
+ *
+ * Demos:
+ *
+ * - [Composition](https://mui.com/x/api/charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartsContainer API](https://mui.com/x/api/charts/charts-container/)
+ *
+ * @example
+ * ```jsx
+ * <ChartsContainer
+ *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
+ *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
+ * >
+ *    <BarPlot />
+ *    <ChartsXAxis axisId="x-axis" />
+ * </ChartsContainer>
+ * ```
+ */
+declare const ChartsContainer: <TSeries extends ChartSeriesType>(props: ChartsContainerProps<TSeries> & {
+  ref?: React.ForwardedRef<SVGSVGElement>;
+}) => React.JSX.Element;
+export { ChartsContainer };