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

package/ChartContainer/ResizableContainer.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { useSize } from "../context/SizeProvider/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Wrapping div that take the shape of its parent.
+ *
+ * @ignore - do not document.
+ */
+export const ResizableContainerRoot = styled('div', {
+  name: 'MuiResponsiveChart',
+  slot: 'Container'
+})(({
+  ownerState
+}) => ({
+  width: ownerState.width ?? '100%',
+  height: ownerState.height ?? '100%',
+  display: 'flex',
+  position: 'relative',
+  flexGrow: 1,
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden',
+  '&>svg': {
+    width: '100%',
+    height: '100%'
+  }
+}));
+
+/**
+ * Wrapping div that take the shape of its parent.
+ *
+ * @ignore - do not document.
+ */
+function ResizableContainer(props) {
+  const {
+    inHeight,
+    inWidth,
+    containerRef
+  } = useSize();
+  return /*#__PURE__*/_jsx(ResizableContainerRoot, _extends({}, props, {
+    ownerState: {
+      width: inWidth,
+      height: inHeight
+    },
+    ref: containerRef,
+    children: props.children
+  }));
+}
+process.env.NODE_ENV !== "production" ? ResizableContainer.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node
+} : void 0;
+export { ResizableContainer };

package/ChartContainer/useChartContainerProps.d.ts

@@ -1,97 +1,13 @@
 import * as React from 'react';
-import type { DrawingProviderProps } from '../context/DrawingProvider';
-import type { CartesianProviderProps } from '../context/CartesianProvider';
-import type { SeriesProviderProps } from '../context/SeriesProvider';
-import type { ZAxisContextProviderProps } from '../context/ZAxisContextProvider';
-import type { ChartContainerProps } from './ChartContainer';
-import { HighlightedProviderProps } from '../context';
 import { ChartsSurfaceProps } from '../ChartsSurface';
-import { PluginProviderProps } from '../context/PluginProvider';
-import { AnimationProviderProps } from '../context/AnimationProvider';
-export declare const useChartContainerProps: (props: ChartContainerProps, ref: React.ForwardedRef<unknown>) => {
-    children: React.ReactNode;
-    drawingProviderProps: Omit<DrawingProviderProps, "children">;
-    seriesProviderProps: Omit<SeriesProviderProps, "children">;
-    cartesianProviderProps: Omit<CartesianProviderProps, "children">;
-    zAxisContextProps: Omit<ZAxisContextProviderProps, "children">;
-    highlightedProviderProps: Omit<HighlightedProviderProps, "children">;
+import { ChartDataProviderProps } from '../context/ChartDataProvider';
+import type { ChartContainerProps } from './ChartContainer';
+export type UseChartContainerPropsReturnValue = {
+    chartDataProviderProps: ChartDataProviderProps;
     chartsSurfaceProps: ChartsSurfaceProps & {
-        ref: any;
+        ref: React.Ref<SVGSVGElement>;
     };
-    pluginProviderProps: Omit<PluginProviderProps, "children">;
-    animationProviderProps: Omit<AnimationProviderProps, "children">;
-    xAxis: {
-        reverse?: boolean | undefined;
-        fill?: string | undefined;
-        stroke?: string | undefined;
-        data?: any[] | undefined;
-        label?: string | undefined;
-        max?: (number | Date) | undefined;
-        min?: (number | Date) | undefined;
-        valueFormatter?: ((value: any, context: import("../internals").AxisValueFormatterContext) => string) | undefined;
-        dataKey?: string | undefined;
-        sx?: import("@mui/system").SxProps | undefined;
-        classes?: Partial<import("..").ChartsAxisClasses> | undefined;
-        tickMaxStep?: number | undefined;
-        tickMinStep?: number | undefined;
-        tickNumber?: number | undefined;
-        disableLine?: boolean | undefined;
-        disableTicks?: boolean | undefined;
-        tickFontSize?: number | undefined;
-        tickLabelStyle?: import("..").ChartsTextProps["style"];
-        labelStyle?: import("..").ChartsTextProps["style"];
-        tickLabelInterval?: ("auto" | ((value: any, index: number) => boolean)) | undefined;
-        labelFontSize?: number | undefined;
-        tickSize?: number | undefined;
-        slots?: Partial<import("../internals").ChartsAxisSlots> | undefined;
-        slotProps?: Partial<import("../internals").ChartsAxisSlotProps> | undefined;
-        tickInterval?: ("auto" | ((value: any, index: number) => boolean) | any[]) | undefined;
-        tickPlacement?: ("start" | "end" | "middle" | "extremities") | undefined;
-        tickLabelPlacement?: ("middle" | "tick") | undefined;
-        scaleType?: "linear" | "time" | "log" | "band" | "point" | "pow" | "sqrt" | "utc" | undefined;
-        colorMap?: import("../models/colorMapping").ContinuousColorConfig<number | Date> | import("../models/colorMapping").PiecewiseColorConfig<number | Date> | import("../models/colorMapping").OrdinalColorConfig<string | number | Date> | undefined;
-        hideTooltip?: boolean | undefined;
-        domainLimit?: ("nice" | "strict" | ((min: number, max: number) => {
-            min: number;
-            max: number;
-        })) | undefined;
-        id: import("../internals").AxisId;
-    }[];
-    yAxis: {
-        reverse?: boolean | undefined;
-        fill?: string | undefined;
-        stroke?: string | undefined;
-        data?: any[] | undefined;
-        label?: string | undefined;
-        max?: (number | Date) | undefined;
-        min?: (number | Date) | undefined;
-        valueFormatter?: ((value: any, context: import("../internals").AxisValueFormatterContext) => string) | undefined;
-        dataKey?: string | undefined;
-        sx?: import("@mui/system").SxProps | undefined;
-        classes?: Partial<import("..").ChartsAxisClasses> | undefined;
-        tickMaxStep?: number | undefined;
-        tickMinStep?: number | undefined;
-        tickNumber?: number | undefined;
-        disableLine?: boolean | undefined;
-        disableTicks?: boolean | undefined;
-        tickFontSize?: number | undefined;
-        tickLabelStyle?: import("..").ChartsTextProps["style"];
-        labelStyle?: import("..").ChartsTextProps["style"];
-        tickLabelInterval?: ("auto" | ((value: any, index: number) => boolean)) | undefined;
-        labelFontSize?: number | undefined;
-        tickSize?: number | undefined;
-        slots?: Partial<import("../internals").ChartsAxisSlots> | undefined;
-        slotProps?: Partial<import("../internals").ChartsAxisSlotProps> | undefined;
-        tickInterval?: ("auto" | ((value: any, index: number) => boolean) | any[]) | undefined;
-        tickPlacement?: ("start" | "end" | "middle" | "extremities") | undefined;
-        tickLabelPlacement?: ("middle" | "tick") | undefined;
-        scaleType?: "linear" | "time" | "log" | "band" | "point" | "pow" | "sqrt" | "utc" | undefined;
-        colorMap?: import("../models/colorMapping").ContinuousColorConfig<number | Date> | import("../models/colorMapping").PiecewiseColorConfig<number | Date> | import("../models/colorMapping").OrdinalColorConfig<string | number | Date> | undefined;
-        hideTooltip?: boolean | undefined;
-        domainLimit?: ("nice" | "strict" | ((min: number, max: number) => {
-            min: number;
-            max: number;
-        })) | undefined;
-        id: import("../internals").AxisId;
-    }[];
+    resizableContainerProps: any;
+    children: React.ReactNode;
 };
+export declare const useChartContainerProps: (props: ChartContainerProps, ref: React.Ref<SVGSVGElement>) => UseChartContainerPropsReturnValue;

package/ChartContainer/useChartContainerProps.js

@@ -1,86 +1,56 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["width", "height", "series", "margin", "xAxis", "yAxis", "zAxis", "colors", "dataset", "sx", "title", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "children", "skipAnimation"];
-import * as React from 'react';
-import useForkRef from '@mui/utils/useForkRef';
-import { useDefaultizeAxis } from "./useDefaultizeAxis.js";
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "xAxis", "yAxis", "zAxis", "skipAnimation"];
 export const useChartContainerProps = (props, ref) => {
   const {
       width,
       height,
-      series,
       margin,
-      xAxis,
-      yAxis,
-      zAxis,
+      children,
+      series,
       colors,
       dataset,
-      sx,
-      title,
       desc,
       disableAxisListener,
       highlightedItem,
       onHighlightChange,
       plugins,
-      children,
+      sx,
+      title,
+      xAxis,
+      yAxis,
+      zAxis,
       skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const svgRef = React.useRef(null);
-  const chartSurfaceRef = useForkRef(ref, svgRef);
-  const [defaultizedXAxis, defaultizedYAxis] = useDefaultizeAxis(xAxis, yAxis, dataset);
-  const drawingProviderProps = {
-    width,
-    height,
-    margin,
-    svgRef
-  };
-  const animationProviderProps = {
-    skipAnimation
-  };
-  const pluginProviderProps = {
-    plugins
+  const resizableContainerProps = other;
+  const chartsSurfaceProps = {
+    title,
+    desc,
+    sx,
+    disableAxisListener,
+    ref
   };
-  const seriesProviderProps = {
+  const chartDataProviderProps = {
+    margin,
     series,
     colors,
-    dataset
-  };
-  const cartesianProviderProps = {
-    xAxis: defaultizedXAxis,
-    yAxis: defaultizedYAxis,
-    dataset
-  };
-  const zAxisContextProps = {
-    zAxis,
-    dataset
-  };
-  const highlightedProviderProps = {
+    dataset,
     highlightedItem,
-    onHighlightChange
-  };
-  const chartsSurfaceProps = _extends({}, other, {
+    onHighlightChange,
+    plugins,
+    xAxis,
+    yAxis,
+    zAxis,
+    skipAnimation,
     width,
-    height,
-    ref: chartSurfaceRef,
-    sx,
-    title,
-    desc,
-    disableAxisListener
-  });
+    height
+  };
   return {
-    children,
-    drawingProviderProps,
-    seriesProviderProps,
-    cartesianProviderProps,
-    zAxisContextProps,
-    highlightedProviderProps,
+    chartDataProviderProps,
+    resizableContainerProps,
     chartsSurfaceProps,
-    pluginProviderProps,
-    animationProviderProps,
-    xAxis: defaultizedXAxis,
-    yAxis: defaultizedYAxis
+    children
   };
 };

package/ChartsAxisHighlight/ChartsAxisHighlight.d.ts

@@ -1,21 +1,5 @@
 import * as React from 'react';
-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;
-export declare const ChartsAxisHighlightPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    ownerState: {
-        axisHighlight: AxisHighlight;
-    };
-}, Pick<React.SVGProps<SVGPathElement>, keyof React.SVGProps<SVGPathElement>>, {}>;
-type AxisHighlight = 'none' | 'line' | 'band';
-export type ChartsAxisHighlightProps = {
-    x?: AxisHighlight;
-    y?: AxisHighlight;
-};
+import { ChartsAxisHighlightProps } from './ChartsAxisHighlight.types';
 /**
  * Demos:
  *

package/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -1,57 +1,19 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { styled } from '@mui/material/styles';
-import { InteractionContext } from "../context/InteractionProvider.js";
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { getValueToPositionMapper } from "../hooks/useScale.js";
-import { isBandScale } from "../internals/isBandScale.js";
+import { getAxisHighlightUtilityClass } from "./chartsAxisHighlightClasses.js";
+import ChartsYHighlight from "./ChartsYAxisHighlight.js";
+import ChartsXHighlight from "./ChartsXAxisHighlight.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function getAxisHighlightUtilityClass(slot) {
-  return generateUtilityClass('MuiChartsAxisHighlight', slot);
-}
-export const chartsAxisHighlightClasses = generateUtilityClasses('MuiChartsAxisHighlight', ['root']);
 const useUtilityClasses = () => {
   const slots = {
     root: ['root']
   };
   return composeClasses(slots, getAxisHighlightUtilityClass);
 };
-export const ChartsAxisHighlightPath = styled('path', {
-  name: 'MuiChartsAxisHighlight',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
-})(({
-  theme
-}) => ({
-  pointerEvents: 'none',
-  variants: [{
-    props: {
-      axisHighlight: 'band'
-    },
-    style: _extends({
-      fill: 'white',
-      fillOpacity: 0.1
-    }, theme.applyStyles('light', {
-      fill: 'gray'
-    }))
-  }, {
-    props: {
-      axisHighlight: 'line'
-    },
-    style: _extends({
-      strokeDasharray: '5 2',
-      stroke: '#ffffff'
-    }, theme.applyStyles('light', {
-      stroke: '#000000'
-    }))
-  }]
-}));
+
 /**
  * Demos:
  *
@@ -66,62 +28,14 @@ function ChartsAxisHighlight(props) {
     x: xAxisHighlight,
     y: yAxisHighlight
   } = props;
-  const {
-    xAxisIds,
-    xAxis,
-    yAxisIds,
-    yAxis
-  } = useCartesianContext();
   const classes = useUtilityClasses();
-  const USED_X_AXIS_ID = xAxisIds[0];
-  const USED_Y_AXIS_ID = yAxisIds[0];
-  const xScale = xAxis[USED_X_AXIS_ID].scale;
-  const yScale = yAxis[USED_Y_AXIS_ID].scale;
-  const {
-    axis
-  } = React.useContext(InteractionContext);
-  const getXPosition = getValueToPositionMapper(xScale);
-  const getYPosition = getValueToPositionMapper(yScale);
-  const axisX = axis.x;
-  const axisY = axis.y;
-  const isBandScaleX = xAxisHighlight === 'band' && axisX !== null && isBandScale(xScale);
-  const isBandScaleY = yAxisHighlight === 'band' && axisY !== null && isBandScale(yScale);
-  if (process.env.NODE_ENV !== 'production') {
-    const isXError = isBandScaleX && xScale(axisX.value) === undefined;
-    const isYError = isBandScaleY && yScale(axisY.value) === undefined;
-    if (isXError || isYError) {
-      console.error([`MUI X: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
-    }
-  }
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [isBandScaleX && xScale(axisX.value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath
-    // @ts-expect-error, xScale value is checked in the statement above
-    , {
-      d: `M ${xScale(axisX.value) - (xScale.step() - xScale.bandwidth()) / 2} ${yScale.range()[0]} l ${xScale.step()} 0 l 0 ${yScale.range()[1] - yScale.range()[0]} l ${-xScale.step()} 0 Z`,
-      className: classes.root,
-      ownerState: {
-        axisHighlight: 'band'
-      }
-    }), isBandScaleY && yScale(axisY.value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
-      d: `M ${xScale.range()[0]} ${
-      // @ts-expect-error, yScale value is checked in the statement above
-      yScale(axisY.value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${xScale.range()[1] - xScale.range()[0]} 0 l 0 ${-yScale.step()} Z`,
-      className: classes.root,
-      ownerState: {
-        axisHighlight: 'band'
-      }
-    }), xAxisHighlight === 'line' && axis.x !== null && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
-      d: `M ${getXPosition(axis.x.value)} ${yScale.range()[0]} L ${getXPosition(axis.x.value)} ${yScale.range()[1]}`,
-      className: classes.root,
-      ownerState: {
-        axisHighlight: 'line'
-      }
-    }), yAxisHighlight === 'line' && axis.y !== null && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
-      d: `M ${xScale.range()[0]} ${getYPosition(axis.y.value)} L ${xScale.range()[1]} ${getYPosition(axis.y.value)}`,
-      className: classes.root,
-      ownerState: {
-        axisHighlight: 'line'
-      }
+    children: [xAxisHighlight && /*#__PURE__*/_jsx(ChartsXHighlight, {
+      type: xAxisHighlight,
+      classes: classes
+    }), yAxisHighlight && /*#__PURE__*/_jsx(ChartsYHighlight, {
+      type: yAxisHighlight,
+      classes: classes
     })]
   });
 }

package/ChartsAxisHighlight/ChartsAxisHighlight.types.d.ts

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

package/ChartsAxisHighlight/ChartsAxisHighlightPath.d.ts

@@ -0,0 +1,6 @@
+import { ChartsAxisHighlightType } from './ChartsAxisHighlight.types';
+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/ChartsAxisHighlight/ChartsAxisHighlightPath.js

@@ -0,0 +1,34 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { styled } from '@mui/material/styles';
+export const ChartsAxisHighlightPath = styled('path', {
+  name: 'MuiChartsAxisHighlight',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  theme
+}) => ({
+  pointerEvents: 'none',
+  variants: [{
+    props: {
+      axisHighlight: 'band'
+    },
+    style: _extends({
+      fill: 'white',
+      fillOpacity: 0.1
+    }, theme.applyStyles('light', {
+      fill: 'gray'
+    }))
+  }, {
+    props: {
+      axisHighlight: 'line'
+    },
+    style: _extends({
+      strokeDasharray: '5 2',
+      stroke: '#ffffff'
+    }, theme.applyStyles('light', {
+      stroke: '#000000'
+    }))
+  }]
+}));

package/ChartsAxisHighlight/ChartsXAxisHighlight.d.ts

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

package/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -0,0 +1,53 @@
+'use client';
+
+import * as React from 'react';
+import { getValueToPositionMapper, useXScale } from "../hooks/useScale.js";
+import { isBandScale } from "../internals/isBandScale.js";
+import { useSelector } from "../internals/useSelector.js";
+import { useStore } from "../internals/useStore.js";
+import { selectorChartsInteractionXAxis } from "../context/InteractionSelectors.js";
+import { useDrawingArea } from "../hooks/index.js";
+import { ChartsAxisHighlightPath } from "./ChartsAxisHighlightPath.js";
+
+/**
+ * @ignore - internal component.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function ChartsXHighlight(props) {
+  const {
+    type,
+    classes
+  } = props;
+  const {
+    top,
+    height
+  } = useDrawingArea();
+  const xScale = useXScale();
+  const store = useStore();
+  const axisX = useSelector(store, selectorChartsInteractionXAxis);
+  const getXPosition = getValueToPositionMapper(xScale);
+  const isBandScaleX = type === 'band' && axisX !== null && isBandScale(xScale);
+  if (process.env.NODE_ENV !== 'production') {
+    const isError = isBandScaleX && xScale(axisX.value) === undefined;
+    if (isError) {
+      console.error([`MUI X: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
+    }
+  }
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [isBandScaleX && xScale(axisX.value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath
+    // @ts-expect-error, xScale value is checked in the statement above
+    , {
+      d: `M ${xScale(axisX.value) - (xScale.step() - xScale.bandwidth()) / 2} ${top} l ${xScale.step()} 0 l 0 ${height} l ${-xScale.step()} 0 Z`,
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'band'
+      }
+    }), type === 'line' && axisX !== null && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
+      d: `M ${getXPosition(axisX.value)} ${top} L ${getXPosition(axisX.value)} ${top + height}`,
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'line'
+      }
+    })]
+  });
+}

package/ChartsAxisHighlight/ChartsYAxisHighlight.d.ts

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

package/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -0,0 +1,53 @@
+'use client';
+
+import * as React from 'react';
+import { getValueToPositionMapper, useYScale } from "../hooks/useScale.js";
+import { isBandScale } from "../internals/isBandScale.js";
+import { useSelector } from "../internals/useSelector.js";
+import { useStore } from "../internals/useStore.js";
+import { selectorChartsInteractionYAxis } from "../context/InteractionSelectors.js";
+import { useDrawingArea } from "../hooks/index.js";
+import { ChartsAxisHighlightPath } from "./ChartsAxisHighlightPath.js";
+
+/**
+ * @ignore - internal component.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function ChartsYHighlight(props) {
+  const {
+    type,
+    classes
+  } = props;
+  const {
+    left,
+    width
+  } = useDrawingArea();
+  const yScale = useYScale();
+  const store = useStore();
+  const axisY = useSelector(store, selectorChartsInteractionYAxis);
+  const getYPosition = getValueToPositionMapper(yScale);
+  const isBandScaleY = type === 'band' && axisY !== null && isBandScale(yScale);
+  if (process.env.NODE_ENV !== 'production') {
+    const isError = isBandScaleY && yScale(axisY.value) === undefined;
+    if (isError) {
+      console.error([`MUI X: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
+    }
+  }
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [isBandScaleY && yScale(axisY.value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
+      d: `M ${left} ${
+      // @ts-expect-error, yScale value is checked in the statement above
+      yScale(axisY.value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`,
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'band'
+      }
+    }), type === 'line' && axisY !== null && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
+      d: `M ${left} ${getYPosition(axisY.value)} L ${left + width} ${getYPosition(axisY.value)}`,
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'line'
+      }
+    })]
+  });
+}

package/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/ChartsAxisHighlight/chartsAxisHighlightClasses.js

@@ -0,0 +1,6 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getAxisHighlightUtilityClass(slot) {
+  return generateUtilityClass('MuiChartsAxisHighlight', slot);
+}
+export const chartsAxisHighlightClasses = generateUtilityClasses('MuiChartsAxisHighlight', ['root']);

package/ChartsAxisHighlight/index.d.ts

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

package/ChartsAxisHighlight/index.js

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

package/ChartsGrid/ChartsGrid.js

@@ -10,7 +10,7 @@ import { useThemeProps } from '@mui/material/styles';
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { getChartsGridUtilityClass } from "./chartsGridClasses.js";
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
-import { GridRoot } from "./styledCommonents.js";
+import { GridRoot } from "./styledComponents.js";
 import { ChartsGridVertical } from "./ChartsVerticalGrid.js";
 import { ChartsGridHorizontal } from "./ChartsHorizontalGrid.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";