@mui/x-charts 8.6.0 → 8.8.0

package/esm/ChartsReferenceLine/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./ChartsReferenceLine.js";
-export * from "./chartsReferenceLineClasses.js";
+export * from "./chartsReferenceLineClasses.js";
+export type { ChartsXReferenceLineProps } from "./ChartsXReferenceLine.js";
+export type { ChartsYReferenceLineProps } from "./ChartsYReferenceLine.js";

package/esm/ChartsReferenceLine/index.js

@@ -1,2 +1,3 @@
 export * from "./ChartsReferenceLine.js";
-export * from "./chartsReferenceLineClasses.js";
+export * from "./chartsReferenceLineClasses.js";
+export {};

package/esm/ChartsSurface/ChartsSurface.js

@@ -29,7 +29,8 @@ const ChartsSurfaceStyles = styled('svg', {
   overflow: 'hidden',
   // This prevents default touch actions when using the svg on mobile devices.
   // For example, prevent page scroll & zoom.
-  touchAction: 'none'
+  touchAction: 'pan-y',
+  userSelect: 'none'
 }));
 
 /**

package/esm/ChartsTooltip/ChartsTooltipContainer.js

@@ -10,7 +10,7 @@ import useLazyRef from '@mui/utils/useLazyRef';
 import { styled, useThemeProps } from '@mui/material/styles';
 import Popper from '@mui/material/Popper';
 import NoSsr from '@mui/material/NoSsr';
-import { useSvgRef } from "../hooks/useSvgRef.js";
+import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { useIsFineMainPointer, usePointerType } from "./utils.js";
 import { useUtilityClasses } from "./chartsTooltipClasses.js";
 import { useSelector } from "../internals/store/useSelector.js";
@@ -19,6 +19,7 @@ import { selectorChartsInteractionItemIsDefined } from "../internals/plugins/fea
 import { selectorChartsInteractionAxisTooltip } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { selectorChartsInteractionPolarAxisTooltip } from "../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.js";
 import { useAxisSystem } from "../hooks/useAxisSystem.js";
+import { useSvgRef } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const noAxis = () => false;
 const ChartsTooltipRoot = styled(Popper, {
@@ -51,8 +52,8 @@ function ChartsTooltipContainer(inProps) {
       children
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const classes = useUtilityClasses(propClasses);
   const svgRef = useSvgRef();
+  const classes = useUtilityClasses(propClasses);
   const pointerType = usePointerType();
   const isFineMainPointer = useIsFineMainPointer();
   const popperRef = React.useRef(null);
@@ -68,19 +69,21 @@ function ChartsTooltipContainer(inProps) {
     if (element === null) {
       return () => {};
     }
+    const update = rafThrottle(() => popperRef.current?.update());
     const handlePointerEvent = event => {
       // eslint-disable-next-line react-compiler/react-compiler
       positionRef.current = {
         x: event.clientX,
         y: event.clientY
       };
-      popperRef.current?.update();
+      update();
     };
     element.addEventListener('pointerdown', handlePointerEvent);
     element.addEventListener('pointermove', handlePointerEvent);
     return () => {
       element.removeEventListener('pointerdown', handlePointerEvent);
       element.removeEventListener('pointermove', handlePointerEvent);
+      update.clear();
     };
   }, [svgRef, positionRef]);
   const anchorEl = React.useMemo(() => ({

package/esm/ChartsTooltip/ChartsTooltipTable.d.ts

@@ -13,6 +13,6 @@ export declare const ChartsTooltipRow: import("@emotion/styled").StyledComponent
 /**
  * @ignore - internal component.
  */
-export declare const ChartsTooltipCell: import("@emotion/styled").StyledComponent<Pick<import("@mui/material/Typography").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "p" | "style" | "typography" | "zIndex" | "classes" | "border" | "boxShadow" | "fontWeight" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "className" | "children" | "sx" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping">, "p" | "slot" | "style" | "title" | "ref" | "typography" | "zIndex" | "classes" | "border" | "boxShadow" | "fontWeight" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "content" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "sx" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+export declare const ChartsTooltipCell: import("@emotion/styled").StyledComponent<Pick<import("@mui/material/Typography").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "p" | "style" | "typography" | "zIndex" | "classes" | "border" | "boxShadow" | "fontWeight" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "className" | "children" | "sx" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping">, "p" | "slot" | "style" | "title" | "ref" | "typography" | "zIndex" | "classes" | "border" | "boxShadow" | "fontWeight" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "content" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "sx" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
   component?: React.ElementType;
 }, {}, {}>;

package/esm/ChartsTooltip/utils.js

@@ -2,55 +2,44 @@
 
 import * as React from 'react';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import { useChartContext } from "../context/ChartProvider/index.js";
 import { useSvgRef } from "../hooks/index.js";
 /**
  * @deprecated We recommend using vanilla JS to let popper track mouse position.
  */
 export function useMouseTracker() {
-  const svgRef = useSvgRef();
+  const {
+    instance
+  } = useChartContext();
 
   // Use a ref to avoid rerendering on every mousemove event.
   const [mousePosition, setMousePosition] = React.useState(null);
   React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null) {
-      return () => {};
-    }
-    const controller = new AbortController();
-    const handleOut = event => {
-      if (event.pointerType !== 'mouse') {
+    const moveEndHandler = instance.addInteractionListener('moveEnd', event => {
+      if (!event.detail.activeGestures.pan) {
         setMousePosition(null);
       }
-    };
-    const handleMove = event => {
+    });
+    const gestureHandler = event => {
       setMousePosition({
-        x: event.clientX,
-        y: event.clientY,
-        height: event.height,
-        pointerType: event.pointerType
+        x: event.detail.centroid.x,
+        y: event.detail.centroid.y,
+        height: event.detail.srcEvent.height,
+        pointerType: event.detail.srcEvent.pointerType
       });
     };
-    element.addEventListener('pointerdown', handleMove, {
-      signal: controller.signal
-    });
-    element.addEventListener('pointermove', handleMove, {
-      signal: controller.signal
-    });
-    element.addEventListener('pointerup', handleOut, {
-      signal: controller.signal
-    });
+    const moveHandler = instance.addInteractionListener('move', gestureHandler);
+    const panHandler = instance.addInteractionListener('pan', gestureHandler);
     return () => {
-      // Calling `.abort()` removes ALL event listeners
-      // For more info, see https://kettanaito.com/blog/dont-sleep-on-abort-controller
-      controller.abort();
+      moveHandler.cleanup();
+      panHandler.cleanup();
+      moveEndHandler.cleanup();
     };
-  }, [svgRef]);
+  }, [instance]);
   return mousePosition;
 }
 export function usePointerType() {
   const svgRef = useSvgRef();
-
-  // Use a ref to avoid rerendering on every mousemove event.
   const [pointerType, setPointerType] = React.useState(null);
   React.useEffect(() => {
     const element = svgRef.current;

package/esm/Gauge/GaugeContainer.d.ts

@@ -3,7 +3,7 @@ import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
 import { GaugeProviderProps } from "./GaugeProvider.js";
 import { MergeSignaturesProperty } from "../internals/plugins/models/index.js";
 import { ChartCorePluginSignatures } from "../internals/plugins/corePlugins/index.js";
-export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'children'>, Omit<MergeSignaturesProperty<ChartCorePluginSignatures, 'params'>, 'series' | 'dataset' | 'colors' | 'theme'>, Omit<GaugeProviderProps, 'children'>, Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
+export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'children'>, Omit<MergeSignaturesProperty<ChartCorePluginSignatures, 'params'>, 'series' | 'dataset' | 'colors' | 'theme' | 'experimentalFeatures'>, Omit<GaugeProviderProps, 'children'>, Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
   children?: React.ReactNode;
 }
 declare const GaugeContainer: React.ForwardRefExoticComponent<Omit<GaugeContainerProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/esm/LineChart/AreaPlot.js

@@ -1,22 +1,16 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import { area as d3Area } from '@mui/x-charts-vendor/d3-shape';
 import { AreaElement, areaElementClasses } from "./AreaElement.js";
-import { getValueToPositionMapper } from "../hooks/useScale.js";
-import { getCurveFactory } from "../internals/getCurve.js";
-import { isBandScale } from "../internals/isBandScale.js";
-import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
-import { useLineSeriesContext } from "../hooks/useLineSeries.js";
 import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
-import { useChartGradientIdBuilder } from "../hooks/useChartGradientId.js";
 import { useXAxes, useYAxes } from "../hooks/useAxis.js";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
+import { useAreaPlotData } from "./useAreaPlotData.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const AreaPlotRoot = styled('g', {
   name: 'MuiAreaPlot',
@@ -27,117 +21,13 @@ const AreaPlotRoot = styled('g', {
   }
 });
 const useAggregatedData = () => {
-  const seriesData = useLineSeriesContext();
   const {
-    xAxis,
-    xAxisIds
+    xAxis: xAxes
   } = useXAxes();
   const {
-    yAxis,
-    yAxisIds
+    yAxis: yAxes
   } = useYAxes();
-  const getGradientId = useChartGradientIdBuilder();
-
-  // This memo prevents odd line chart behavior when hydrating.
-  const allData = React.useMemo(() => {
-    if (seriesData === undefined) {
-      return [];
-    }
-    const {
-      series,
-      stackingGroups
-    } = seriesData;
-    const defaultXAxisId = xAxisIds[0];
-    const defaultYAxisId = yAxisIds[0];
-    return stackingGroups.flatMap(({
-      ids: groupIds
-    }) => {
-      return [...groupIds].reverse() // Revert stacked area for a more pleasant animation
-      .map(seriesId => {
-        const {
-          xAxisId = defaultXAxisId,
-          yAxisId = defaultYAxisId,
-          stackedData,
-          data,
-          connectNulls,
-          baseline,
-          curve,
-          strictStepCurve
-        } = series[seriesId];
-        const xScale = xAxis[xAxisId].scale;
-        const xPosition = getValueToPositionMapper(xScale);
-        const yScale = yAxis[yAxisId].scale;
-        const xData = xAxis[xAxisId].data;
-        const gradientId = yAxis[yAxisId].colorScale && getGradientId(yAxisId) || xAxis[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
-        if (process.env.NODE_ENV !== 'production') {
-          if (xData === undefined) {
-            throw new Error(`MUI X Charts: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
-          }
-          if (xData.length < stackedData.length) {
-            throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
-          }
-        }
-        const shouldExpand = curve?.includes('step') && !strictStepCurve && isBandScale(xScale);
-        const formattedData = xData?.flatMap((x, index) => {
-          const nullData = data[index] == null;
-          if (shouldExpand) {
-            const rep = [{
-              x,
-              y: stackedData[index],
-              nullData,
-              isExtension: false
-            }];
-            if (!nullData && (index === 0 || data[index - 1] == null)) {
-              rep.unshift({
-                x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
-                y: stackedData[index],
-                nullData,
-                isExtension: true
-              });
-            }
-            if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
-              rep.push({
-                x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
-                y: stackedData[index],
-                nullData,
-                isExtension: true
-              });
-            }
-            return rep;
-          }
-          return {
-            x,
-            y: stackedData[index],
-            nullData
-          };
-        }) ?? [];
-        const d3Data = connectNulls ? formattedData.filter(d => !d.nullData) : formattedData;
-        const areaPath = d3Area().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y0(d => {
-          if (typeof baseline === 'number') {
-            return yScale(baseline);
-          }
-          if (baseline === 'max') {
-            return yScale.range()[1];
-          }
-          if (baseline === 'min') {
-            return yScale.range()[0];
-          }
-          const value = d.y && yScale(d.y[0]);
-          if (Number.isNaN(value)) {
-            return yScale.range()[0];
-          }
-          return value;
-        }).y1(d => d.y && yScale(d.y[1]));
-        const d = areaPath.curve(getCurveFactory(curve))(d3Data) || '';
-        return _extends({}, series[seriesId], {
-          gradientId,
-          d,
-          seriesId
-        });
-      });
-    });
-  }, [seriesData, xAxisIds, yAxisIds, xAxis, yAxis, getGradientId]);
-  return allData;
+  return useAreaPlotData(xAxes, yAxes);
 };
 
 /**

package/esm/LineChart/LineChart.js

@@ -111,6 +111,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: PropTypes.bool,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: PropTypes.shape({
+    preferStrictDomainInLineCharts: PropTypes.bool
+  }),
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -126,6 +132,14 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, the legend is not rendered.
    */
   hideLegend: PropTypes.bool,
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    dataIndex: PropTypes.number.isRequired
+  })),
   /**
    * The highlighted item.
    * Used when the highlight is controlled.
@@ -177,6 +191,14 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: PropTypes.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onHighlightedAxisChange: PropTypes.func,
   /**
    * Callback fired when a line element is clicked.
    */

package/esm/LineChart/LineHighlightPlot.js

@@ -13,7 +13,7 @@ import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { useLineSeriesContext } from "../hooks/useLineSeries.js";
 import getColor from "./seriesConfig/getColor.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
-import { selectorChartsInteractionXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { selectorChartsHighlightXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useXAxes, useYAxes } from "../hooks/useAxis.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -45,8 +45,8 @@ function LineHighlightPlot(props) {
     instance
   } = useChartContext();
   const store = useStore();
-  const highlightedIndex = useSelector(store, selectorChartsInteractionXAxisIndex);
-  if (highlightedIndex === null) {
+  const highlightedIndexes = useSelector(store, selectorChartsHighlightXAxisIndex);
+  if (highlightedIndexes.length === 0) {
     return null;
   }
   if (seriesData === undefined) {
@@ -60,7 +60,10 @@ function LineHighlightPlot(props) {
   const defaultYAxisId = yAxisIds[0];
   const Element = slots?.lineHighlight ?? LineHighlightElement;
   return /*#__PURE__*/_jsx("g", _extends({}, other, {
-    children: stackingGroups.flatMap(({
+    children: highlightedIndexes.flatMap(({
+      dataIndex: highlightedIndex,
+      axisId: highlightedAxisId
+    }) => stackingGroups.flatMap(({
       ids: groupIds
     }) => {
       return groupIds.flatMap(seriesId => {
@@ -75,6 +78,9 @@ function LineHighlightPlot(props) {
         if (disableHighlight || data[highlightedIndex] == null) {
           return null;
         }
+        if (highlightedAxisId !== xAxisId) {
+          return null;
+        }
         const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
         const yScale = yAxis[yAxisId].scale;
         const xData = xAxis[xAxisId].data;
@@ -96,7 +102,7 @@ function LineHighlightPlot(props) {
           shape: shape
         }, slotProps?.lineHighlight), `${seriesId}`);
       });
-    })
+    }))
   }));
 }
 process.env.NODE_ENV !== "production" ? LineHighlightPlot.propTypes = {

package/esm/LineChart/LinePlot.js

@@ -1,23 +1,16 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import { warnOnce } from '@mui/x-internals/warning';
-import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
 import { LineElement, lineElementClasses } from "./LineElement.js";
-import { getValueToPositionMapper } from "../hooks/useScale.js";
-import { getCurveFactory } from "../internals/getCurve.js";
-import { isBandScale } from "../internals/isBandScale.js";
-import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
-import { useLineSeriesContext } from "../hooks/useLineSeries.js";
 import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
-import { useChartGradientIdBuilder } from "../hooks/useChartGradientId.js";
 import { useXAxes, useYAxes } from "../hooks/index.js";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
+import { useLinePlotData } from "./useLinePlotData.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const LinePlotRoot = styled('g', {
   name: 'MuiAreaPlot',
@@ -28,100 +21,13 @@ const LinePlotRoot = styled('g', {
   }
 });
 const useAggregatedData = () => {
-  const seriesData = useLineSeriesContext();
   const {
-    xAxis,
-    xAxisIds
+    xAxis: xAxes
   } = useXAxes();
   const {
-    yAxis,
-    yAxisIds
+    yAxis: yAxes
   } = useYAxes();
-  const getGradientId = useChartGradientIdBuilder();
-
-  // This memo prevents odd line chart behavior when hydrating.
-  const allData = React.useMemo(() => {
-    if (seriesData === undefined) {
-      return [];
-    }
-    const {
-      series,
-      stackingGroups
-    } = seriesData;
-    const defaultXAxisId = xAxisIds[0];
-    const defaultYAxisId = yAxisIds[0];
-    return stackingGroups.flatMap(({
-      ids: groupIds
-    }) => {
-      return groupIds.flatMap(seriesId => {
-        const {
-          xAxisId = defaultXAxisId,
-          yAxisId = defaultYAxisId,
-          stackedData,
-          data,
-          connectNulls,
-          curve,
-          strictStepCurve
-        } = series[seriesId];
-        const xScale = xAxis[xAxisId].scale;
-        const xPosition = getValueToPositionMapper(xScale);
-        const yScale = yAxis[yAxisId].scale;
-        const xData = xAxis[xAxisId].data;
-        const gradientId = yAxis[yAxisId].colorScale && getGradientId(yAxisId) || xAxis[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
-        if (process.env.NODE_ENV !== 'production') {
-          if (xData === undefined) {
-            throw new Error(`MUI X Charts: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
-          }
-          if (xData.length < stackedData.length) {
-            warnOnce(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`, 'error');
-          }
-        }
-        const shouldExpand = curve?.includes('step') && !strictStepCurve && isBandScale(xScale);
-        const formattedData = xData?.flatMap((x, index) => {
-          const nullData = data[index] == null;
-          if (shouldExpand) {
-            const rep = [{
-              x,
-              y: stackedData[index],
-              nullData,
-              isExtension: false
-            }];
-            if (!nullData && (index === 0 || data[index - 1] == null)) {
-              rep.unshift({
-                x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
-                y: stackedData[index],
-                nullData,
-                isExtension: true
-              });
-            }
-            if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
-              rep.push({
-                x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
-                y: stackedData[index],
-                nullData,
-                isExtension: true
-              });
-            }
-            return rep;
-          }
-          return {
-            x,
-            y: stackedData[index],
-            nullData
-          };
-        }) ?? [];
-        const d3Data = connectNulls ? formattedData.filter(d => !d.nullData) : formattedData;
-        const linePath = d3Line().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y(d => yScale(d.y[1]));
-        const d = linePath.curve(getCurveFactory(curve))(d3Data) || '';
-        return _extends({}, series[seriesId], {
-          gradientId,
-          d,
-          seriesId
-        });
-      });
-    });
-  }, [seriesData, xAxisIds, yAxisIds, xAxis, yAxis, getGradientId]);
-  return allData;
+  return useLinePlotData(xAxes, yAxes);
 };
 
 /**

package/esm/LineChart/MarkPlot.js

@@ -5,7 +5,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { selectorChartsInteractionXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.js";
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 import { useChartId } from "../hooks/useChartId.js";
@@ -18,6 +17,7 @@ import { MarkElement } from "./MarkElement.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
 import { useItemHighlightedGetter, useXAxes, useYAxes } from "../hooks/index.js";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
+import { selectorChartsHighlightXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -58,7 +58,21 @@ function MarkPlot(props) {
     isFaded,
     isHighlighted
   } = useItemHighlightedGetter();
-  const xAxisInteractionIndex = useSelector(store, selectorChartsInteractionXAxisIndex);
+  const xAxisHighlightIndexes = useSelector(store, selectorChartsHighlightXAxisIndex);
+  const highlightedItems = React.useMemo(() => {
+    const rep = {};
+    for (const {
+      dataIndex,
+      axisId
+    } of xAxisHighlightIndexes) {
+      if (rep[axisId] === undefined) {
+        rep[axisId] = new Set([dataIndex]);
+      } else {
+        rep[axisId].add(dataIndex);
+      }
+    }
+    return rep;
+  }, [xAxisHighlightIndexes]);
   if (seriesData === undefined) {
     return null;
   }
@@ -156,7 +170,7 @@ function MarkPlot(props) {
                 seriesId,
                 dataIndex: index
               })),
-              isHighlighted: xAxisInteractionIndex === index || isSeriesHighlighted,
+              isHighlighted: highlightedItems[xAxisId]?.has(index) || isSeriesHighlighted,
               isFaded: isSeriesFaded
             }, slotProps?.mark), `${seriesId}-${index}`);
           })

package/esm/LineChart/useAreaPlotData.d.ts

@@ -0,0 +1,12 @@
+import { ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { ChartsXAxisProps, ChartsYAxisProps } from "../models/index.js";
+import { SeriesId } from "../models/seriesType/common.js";
+interface AreaPlotDataPoint {
+  d: string;
+  seriesId: SeriesId;
+  color: string;
+  area?: boolean;
+  gradientId?: string;
+}
+export declare function useAreaPlotData(xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): AreaPlotDataPoint[];
+export {};