@mui/x-charts 8.0.0-alpha.11 → 8.0.0-alpha.13

package/modern/ChartContainer/ChartContainer.js

@@ -27,7 +27,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
  * >
  *    <BarPlot />
- *    <ChartsXAxis position="bottom" axisId="x-axis" />
+ *    <ChartsXAxis axisId="x-axis" />
  * </ChartContainer>
  * ```
  */
@@ -72,6 +72,10 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * @default false
    */
   disableAxisListener: PropTypes.bool,
+  /**
+   * If true, the voronoi interaction are ignored.
+   */
+  disableVoronoi: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -92,14 +96,15 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
   /**
    * 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 an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
    */
-  margin: PropTypes.shape({
+  margin: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
     bottom: PropTypes.number,
     left: PropTypes.number,
     right: PropTypes.number,
     top: PropTypes.number
-  }),
+  })]),
   /**
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
@@ -113,6 +118,13 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: PropTypes.func,
+  /**
+   * Callback fired when clicking close to an item.
+   * This is only available for scatter plot for now.
+   * @param {MouseEvent} event Mouse event caught at the svg level
+   * @param {ScatterItemIdentifier} scatterItemIdentifier Identify which item got clicked
+   */
+  onItemClick: PropTypes.func,
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
@@ -127,6 +139,11 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
+  /**
+   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * If `undefined`, the radius is assumed to be infinite.
+   */
+  voronoiMaxRadius: PropTypes.number,
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
@@ -137,6 +154,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
+    axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -159,13 +177,15 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
+    height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'top']),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'none', 'top']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
@@ -174,6 +194,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelMinGap: PropTypes.number,
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
@@ -189,6 +210,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
+    axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -217,7 +239,8 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['left', 'right']),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['left', 'none', 'right']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
@@ -233,7 +256,8 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
-    valueFormatter: PropTypes.func
+    valueFormatter: PropTypes.func,
+    width: PropTypes.number
   })),
   /**
    * The configuration of the z-axes.

package/modern/ChartContainer/index.d.ts

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

package/modern/ChartContainer/useChartContainerProps.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
+import { ChartDataProviderProps } from "../ChartDataProvider/index.js";
+import type { ChartContainerProps } from './ChartContainer';
+import { ChartSeriesType } from "../models/seriesType/config.js";
+import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+import { 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;
+};
+export declare const useChartContainerProps: <TSeries extends ChartSeriesType = keyof import("../internals").ChartsSeriesConfig, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartContainerProps<TSeries, TSignatures>, ref: React.Ref<SVGSVGElement>) => UseChartContainerPropsReturnValue<TSeries, TSignatures>;

package/modern/ChartContainer/useChartContainerProps.js

@@ -2,7 +2,7 @@
 
 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", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "skipAnimation", "seriesConfig", "plugins"];
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "skipAnimation", "seriesConfig", "plugins"];
 import { ALL_PLUGINS } from "../internals/plugins/allPlugins.js";
 export const useChartContainerProps = (props, ref) => {
   const _ref = props,
@@ -16,6 +16,9 @@ export const useChartContainerProps = (props, ref) => {
       dataset,
       desc,
       onAxisClick,
+      disableVoronoi,
+      voronoiMaxRadius,
+      onItemClick,
       disableAxisListener,
       highlightedItem,
       onHighlightChange,
@@ -43,6 +46,9 @@ export const useChartContainerProps = (props, ref) => {
     highlightedItem,
     onHighlightChange,
     onAxisClick,
+    disableVoronoi,
+    voronoiMaxRadius,
+    onItemClick,
     xAxis,
     yAxis,
     zAxis,

package/modern/ChartDataProvider/ChartDataProvider.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { AnimationProviderProps } from "../context/AnimationProvider/index.js";
+import { ChartProviderProps } from "../context/ChartProvider/index.js";
+import { ChartSeriesType } from "../models/seriesType/config.js";
+import { ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
+import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+export type ChartDataProviderProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = Omit<AnimationProviderProps & ChartProviderProps<TSeries, TSignatures>['pluginParams'], 'children'> & Pick<ChartProviderProps<TSeries, TSignatures>, 'seriesConfig' | 'plugins'> & {
+  children?: React.ReactNode;
+};
+/**
+ * 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>
+ * ```
+ */
+declare function ChartDataProvider<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartDataProviderProps<TSeries, TSignatures>): React.JSX.Element;
+declare namespace ChartDataProvider {
+  var propTypes: any;
+}
+export { ChartDataProvider };

package/modern/ChartDataProvider/ChartDataProvider.js

@@ -14,7 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * Demos:
  *
- * - [Composition](https://mui.com/x/api/charts/composition/)
+ * - [Composition](https://mui.com/x/react-charts/composition/)
  *
  * API:
  *
@@ -28,7 +28,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * >
  *   <ChartsSurface>
  *      <BarPlot />
- *      <ChartsXAxis position="bottom" axisId="x-axis" />
+ *      <ChartsXAxis axisId="x-axis" />
  *   </ChartsSurface>
  *   {'Custom Legend Component'}
  * </ChartDataProvider>
@@ -74,7 +74,8 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
   /**
    * 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 an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
    */
   margin: PropTypes.any,
   /**

package/modern/ChartDataProvider/index.d.ts

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

package/modern/ChartDataProvider/useChartDataProviderProps.d.ts

@@ -0,0 +1,11 @@
+import type { ChartDataProviderProps } from './ChartDataProvider';
+import { AnimationProviderProps } from "../context/AnimationProvider/index.js";
+import { ChartProviderProps } from "../context/ChartProvider/index.js";
+import { ChartAnyPluginSignature } from "../internals/plugins/models/index.js";
+import { ChartSeriesType } from "../models/seriesType/config.js";
+import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+export declare const useChartDataProviderProps: <TSeries extends ChartSeriesType = keyof import("../internals").ChartsSeriesConfig, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartDataProviderProps<TSeries, TSignatures>) => {
+  children: import("react").ReactNode;
+  animationProviderProps: Omit<AnimationProviderProps, "children">;
+  chartProviderProps: Omit<ChartProviderProps<TSeries, TSignatures>, "children">;
+};

package/modern/ChartDataProvider/useChartDataProviderProps.js

@@ -2,17 +2,10 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["apiRef", "width", "height", "series", "margin", "colors", "dataset", "children", "skipAnimation", "plugins", "seriesConfig"];
+const _excluded = ["children", "skipAnimation", "plugins", "seriesConfig"];
 import { useTheme } from '@mui/material/styles';
 export const useChartDataProviderProps = props => {
   const {
-      apiRef,
-      width,
-      height,
-      series,
-      margin,
-      colors,
-      dataset,
       children,
       skipAnimation,
       plugins,
@@ -24,13 +17,6 @@ export const useChartDataProviderProps = props => {
     plugins,
     seriesConfig,
     pluginParams: _extends({
-      apiRef,
-      width,
-      height,
-      margin,
-      dataset,
-      series,
-      colors,
       theme: theme.palette.mode
     }, other)
   };

package/modern/ChartsAxis/ChartsAxis.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { ChartsAxisSlotProps, ChartsAxisSlots } from "../models/axis.js";
+export interface ChartsAxisProps {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsAxisSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsAxisSlotProps;
+}
+/**
+ * Demos:
+ *
+ * - [Axis](https://mui.com/x/react-charts/axis/)
+ *
+ * API:
+ *
+ * - [ChartsAxis API](https://mui.com/x/api/charts/charts-axis/)
+ */
+declare function ChartsAxis(props: ChartsAxisProps): React.JSX.Element;
+declare namespace ChartsAxis {
+  var propTypes: any;
+}
+export { ChartsAxis };

package/modern/ChartsAxis/ChartsAxis.js

@@ -1,31 +1,11 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ChartsXAxis } from "../ChartsXAxis/index.js";
 import { ChartsYAxis } from "../ChartsYAxis/index.js";
 import { useXAxes, useYAxes } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const getAxisId = (propsValue, defaultAxisId) => {
-  if (propsValue == null) {
-    return null;
-  }
-  if (typeof propsValue === 'object') {
-    return propsValue.axisId ?? defaultAxisId ?? null;
-  }
-  return propsValue;
-};
-const mergeProps = (axisConfig, slots, slotProps) => {
-  return typeof axisConfig === 'object' ? _extends({}, axisConfig, {
-    slots: _extends({}, slots, axisConfig?.slots),
-    slotProps: _extends({}, slotProps, axisConfig?.slotProps)
-  }) : {
-    slots,
-    slotProps
-  };
-};
-
 /**
  * Demos:
  *
@@ -37,55 +17,37 @@ const mergeProps = (axisConfig, slots, slotProps) => {
  */
 function ChartsAxis(props) {
   const {
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
     slots,
     slotProps
   } = props;
   const {
-    xAxis,
-    xAxisIds
+    xAxisIds,
+    xAxis
   } = useXAxes();
   const {
-    yAxis,
-    yAxisIds
+    yAxisIds,
+    yAxis
   } = useYAxes();
-  const leftId = getAxisId(leftAxis === undefined ? yAxisIds[0] : leftAxis, yAxisIds[0]);
-  const bottomId = getAxisId(bottomAxis === undefined ? xAxisIds[0] : bottomAxis, xAxisIds[0]);
-  const topId = getAxisId(topAxis, xAxisIds[0]);
-  const rightId = getAxisId(rightAxis, yAxisIds[0]);
-  if (topId !== null && !xAxis[topId]) {
-    throw new Error([`MUI X: id used for top axis "${topId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
-  }
-  if (leftId !== null && !yAxis[leftId]) {
-    throw new Error([`MUI X: id used for left axis "${leftId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
-  }
-  if (rightId !== null && !yAxis[rightId]) {
-    throw new Error([`MUI X: id used for right axis "${rightId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
-  }
-  if (bottomId !== null && !xAxis[bottomId]) {
-    throw new Error([`MUI X: id used for bottom axis "${bottomId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
-  }
-  const topAxisProps = mergeProps(topAxis, slots, slotProps);
-  const bottomAxisProps = mergeProps(bottomAxis, slots, slotProps);
-  const leftAxisProps = mergeProps(leftAxis, slots, slotProps);
-  const rightAxisProps = mergeProps(rightAxis, slots, slotProps);
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [topId && /*#__PURE__*/_jsx(ChartsXAxis, _extends({}, topAxisProps, {
-      position: "top",
-      axisId: topId
-    })), bottomId && /*#__PURE__*/_jsx(ChartsXAxis, _extends({}, bottomAxisProps, {
-      position: "bottom",
-      axisId: bottomId
-    })), leftId && /*#__PURE__*/_jsx(ChartsYAxis, _extends({}, leftAxisProps, {
-      position: "left",
-      axisId: leftId
-    })), rightId && /*#__PURE__*/_jsx(ChartsYAxis, _extends({}, rightAxisProps, {
-      position: "right",
-      axisId: rightId
-    }))]
+    children: [xAxisIds.map(axisId => {
+      if (!xAxis[axisId].position || xAxis[axisId].position === 'none') {
+        return null;
+      }
+      return /*#__PURE__*/_jsx(ChartsXAxis, {
+        slots: slots,
+        slotProps: slotProps,
+        axisId: axisId
+      }, axisId);
+    }), yAxisIds.map(axisId => {
+      if (!yAxis[axisId].position || yAxis[axisId].position === 'none') {
+        return null;
+      }
+      return /*#__PURE__*/_jsx(ChartsYAxis, {
+        slots: slots,
+        slotProps: slotProps,
+        axisId: axisId
+      }, axisId);
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
@@ -93,24 +55,6 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  /**
-   * Indicate which axis to display the bottom of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
-   * @default xAxisIds[0] The id of the first provided axis
-   */
-  bottomAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  /**
-   * Indicate which axis to display the left of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
-   * @default yAxisIds[0] The id of the first provided axis
-   */
-  leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  /**
-   * Indicate which axis to display the right of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
-   * @default null
-   */
-  rightAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   /**
    * The props used for each component slot.
    * @default {}
@@ -120,12 +64,6 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
    * Overridable component slots.
    * @default {}
    */
-  slots: PropTypes.object,
-  /**
-   * Indicate which axis to display the top of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
-   * @default null
-   */
-  topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
+  slots: PropTypes.object
 } : void 0;
 export { ChartsAxis };

package/modern/ChartsAxis/axisClasses.d.ts

@@ -0,0 +1,33 @@
+export interface ChartsAxisClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the main line element. */
+  line: string;
+  /** Styles applied to group including the tick and its label. */
+  tickContainer: string;
+  /** Styles applied to ticks. */
+  tick: string;
+  /** Styles applied to ticks label.
+   *
+   * ⚠️ For performance reasons, only the inline styles get considered for bounding box computation.
+   * Modifying text size by adding properties like `font-size` or `letter-spacing` to this class might cause labels to overlap.
+   */
+  tickLabel: string;
+  /** Styles applied to the group containing the axis label. */
+  label: string;
+  /** Styles applied to x-axes. */
+  directionX: string;
+  /** Styles applied to y-axes. */
+  directionY: string;
+  /** Styles applied to the top axis. */
+  top: string;
+  /** Styles applied to the bottom axis. */
+  bottom: string;
+  /** Styles applied to the left axis. */
+  left: string;
+  /** Styles applied to the right axis. */
+  right: string;
+}
+export type ChartsAxisClassKey = keyof ChartsAxisClasses;
+export declare function getAxisUtilityClass(slot: string): string;
+export declare const axisClasses: ChartsAxisClasses;

package/modern/ChartsAxis/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ChartsAxis.js";
+export * from "./axisClasses.js";

package/modern/ChartsAxisHighlight/ChartsAxisHighlight.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ChartsAxisHighlightProps } from "./ChartsAxisHighlight.types.js";
+/**
+ * Demos:
+ *
+ * - [Custom components](https://mui.com/x/react-charts/components/)
+ *
+ * API:
+ *
+ * - [ChartsAxisHighlight API](https://mui.com/x/api/charts/charts-axis-highlight/)
+ */
+declare function ChartsAxisHighlight(props: ChartsAxisHighlightProps): React.JSX.Element;
+declare namespace ChartsAxisHighlight {
+  var propTypes: any;
+}
+export { ChartsAxisHighlight };

package/modern/ChartsAxisHighlight/ChartsAxisHighlight.types.d.ts

@@ -0,0 +1,5 @@
+export type ChartsAxisHighlightType = 'none' | 'line' | 'band';
+export type ChartsAxisHighlightProps = {
+  x?: ChartsAxisHighlightType;
+  y?: ChartsAxisHighlightType;
+};

package/modern/ChartsAxisHighlight/ChartsAxisHighlightPath.d.ts

@@ -0,0 +1,6 @@
+import { ChartsAxisHighlightType } from "./ChartsAxisHighlight.types.js";
+export declare const ChartsAxisHighlightPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+  ownerState: {
+    axisHighlight: ChartsAxisHighlightType;
+  };
+}, Pick<import("react").SVGProps<SVGPathElement>, keyof import("react").SVGProps<SVGPathElement>>, {}>;

package/modern/ChartsAxisHighlight/ChartsXAxisHighlight.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { ChartsAxisHighlightType } from "./ChartsAxisHighlight.types.js";
+import { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.js";
+/**
+ * @ignore - internal component.
+ */
+export default function ChartsXHighlight(props: {
+  type: ChartsAxisHighlightType;
+  classes: ChartsAxisHighlightClasses;
+}): React.JSX.Element;

package/modern/ChartsAxisHighlight/ChartsYAxisHighlight.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { ChartsAxisHighlightType } from "./ChartsAxisHighlight.types.js";
+import { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.js";
+/**
+ * @ignore - internal component.
+ */
+export default function ChartsYHighlight(props: {
+  type: ChartsAxisHighlightType;
+  classes: ChartsAxisHighlightClasses;
+}): React.JSX.Element;

package/modern/ChartsAxisHighlight/chartsAxisHighlightClasses.d.ts

@@ -0,0 +1,7 @@
+export interface ChartsAxisHighlightClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+export type ChartsAxisHighlightClassKey = keyof ChartsAxisHighlightClasses;
+export declare function getAxisHighlightUtilityClass(slot: string): string;
+export declare const chartsAxisHighlightClasses: ChartsAxisHighlightClasses;

package/modern/ChartsAxisHighlight/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./ChartsAxisHighlight.js";
+export * from "./chartsAxisHighlightClasses.js";
+export * from "./ChartsAxisHighlight.types.js";
+export * from "./ChartsAxisHighlightPath.js";

package/modern/ChartsClipPath/ChartsClipPath.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export type ChartsClipPathProps = {
+  id: string;
+  offset?: {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+  };
+};
+/**
+ * API:
+ *
+ * - [ChartsClipPath API](https://mui.com/x/api/charts/charts-clip-path/)
+ */
+declare function ChartsClipPath(props: ChartsClipPathProps): React.JSX.Element;
+declare namespace ChartsClipPath {
+  var propTypes: any;
+}
+export { ChartsClipPath };

package/modern/ChartsClipPath/index.d.ts

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

package/modern/ChartsGrid/ChartsGrid.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { ChartsGridClasses } from "./chartsGridClasses.js";
+export interface ChartsGridProps {
+  /**
+   * Displays vertical grid.
+   */
+  vertical?: boolean;
+  /**
+   * Displays horizontal grid.
+   */
+  horizontal?: boolean;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ChartsGridClasses>;
+}
+/**
+ * Demos:
+ *
+ * - [Axis](https://mui.com/x/react-charts/axis/)
+ *
+ * API:
+ *
+ * - [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/)
+ */
+declare function ChartsGrid(inProps: ChartsGridProps): React.JSX.Element;
+declare namespace ChartsGrid {
+  var propTypes: any;
+}
+export { ChartsGrid };

package/modern/ChartsGrid/ChartsHorizontalGrid.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { AxisDefaultized, ChartsYAxisProps, ScaleName } from "../models/axis.js";
+import { ChartsGridClasses } from "./chartsGridClasses.js";
+interface ChartsGridHorizontalProps {
+  axis: AxisDefaultized<ScaleName, any, ChartsYAxisProps>;
+  start: number;
+  end: number;
+  classes: Partial<ChartsGridClasses>;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare function ChartsGridHorizontal(props: ChartsGridHorizontalProps): React.JSX.Element;
+export {};