@mui/x-charts 8.3.1 → 8.4.0

package/esm/ChartsAxis/axisClasses.js

@@ -3,4 +3,4 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getAxisUtilityClass(slot) {
   return generateUtilityClass('MuiChartsAxis', slot);
 }
-export const axisClasses = generateUtilityClasses('MuiChartsAxis', ['root', 'line', 'tickContainer', 'tick', 'tickLabel', 'label', 'directionX', 'directionY', 'top', 'bottom', 'left', 'right']);
+export const axisClasses = generateUtilityClasses('MuiChartsAxis', ['root', 'line', 'tickContainer', 'tick', 'tickLabel', 'label', 'directionX', 'directionY', 'top', 'bottom', 'left', 'right', 'id']);

package/esm/ChartsLegend/ChartsLegend.js

@@ -100,6 +100,7 @@ const ChartsLegend = consumeSlots('MuiChartsLegend', 'legend', {
     })
   }));
 }));
+if (process.env.NODE_ENV !== "production") ChartsLegend.displayName = "ChartsLegend";
 process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/ChartsLocalizationProvider/ChartsLocalizationProvider.js

@@ -9,9 +9,7 @@ import { useThemeProps } from '@mui/material/styles';
 import { DEFAULT_LOCALE } from "../locales/enUS.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ChartsLocalizationContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== 'production') {
-  ChartsLocalizationContext.displayName = 'ChartsLocalizationContext';
-}
+if (process.env.NODE_ENV !== "production") ChartsLocalizationContext.displayName = "ChartsLocalizationContext";
 /**
  * Demos:
  *

package/esm/ChartsSurface/ChartsSurface.js

@@ -86,6 +86,7 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
     }), /*#__PURE__*/_jsx(ChartsAxesGradients, {}), hasIntrinsicSize && children]
   }));
 });
+if (process.env.NODE_ENV !== "production") ChartsSurface.displayName = "ChartsSurface";
 process.env.NODE_ENV !== "production" ? ChartsSurface.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/ChartsXAxis/ChartsXAxis.js

@@ -31,10 +31,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    position
+    position,
+    id
   } = ownerState;
   const slots = {
-    root: ['root', 'directionX', position],
+    root: ['root', 'directionX', position, `id-${id}`],
     line: ['line'],
     tickContainer: ['tickContainer'],
     tick: ['tick'],
@@ -56,7 +57,7 @@ function getVisibleLabels(xTicks, {
   tickLabelMinGap,
   reverse,
   isMounted,
-  isPointInside
+  isXInside
 }) {
   const getTickLabelSize = tick => {
     if (!isMounted || tick.formattedValue === undefined) {
@@ -91,7 +92,7 @@ function getVisibleLabels(xTicks, {
     if (labelIndex > 0 && direction * textPosition < direction * (previousTextLimit + tickLabelMinGap)) {
       return false;
     }
-    if (!isPointInside(textPosition)) {
+    if (!isXInside(textPosition)) {
       return false;
     }
 
@@ -259,12 +260,7 @@ function ChartsXAxis(inProps) {
     tickLabelMinGap,
     reverse,
     isMounted,
-    isPointInside: x => instance.isPointInside({
-      x,
-      y: -1
-    }, {
-      direction: 'x'
-    })
+    isXInside: instance.isXInside
   });
   const axisLabelProps = useSlotProps({
     elementType: Label,
@@ -312,12 +308,7 @@ function ChartsXAxis(inProps) {
       } = item;
       const xTickLabel = labelOffset ?? 0;
       const yTickLabel = positionSign * (tickSize + TICK_LABEL_GAP);
-      const showTick = instance.isPointInside({
-        x: tickOffset,
-        y: -1
-      }, {
-        direction: 'x'
-      });
+      const showTick = instance.isXInside(tickOffset);
       const tickLabel = tickLabels.get(item);
       const showTickLabel = visibleLabels.has(item);
       return /*#__PURE__*/_jsxs("g", {

package/esm/ChartsYAxis/ChartsYAxis.js

@@ -28,10 +28,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    position
+    position,
+    id
   } = ownerState;
   const slots = {
-    root: ['root', 'directionY', position],
+    root: ['root', 'directionY', position, `id-${id}`],
     line: ['line'],
     tickContainer: ['tickContainer'],
     tick: ['tick'],
@@ -236,12 +237,7 @@ function ChartsYAxis(inProps) {
       const xTickLabel = positionSign * (tickSize + TICK_LABEL_GAP);
       const yTickLabel = labelOffset;
       const skipLabel = typeof tickLabelInterval === 'function' && !tickLabelInterval?.(value, index);
-      const showLabel = instance.isPointInside({
-        x: -1,
-        y: tickOffset
-      }, {
-        direction: 'y'
-      });
+      const showLabel = instance.isYInside(tickOffset);
       const tickLabel = tickLabels.get(item);
       if (!showLabel) {
         return null;

package/esm/Gauge/Gauge.js

@@ -48,6 +48,7 @@ const Gauge = /*#__PURE__*/React.forwardRef(function Gauge(props, ref) {
     }), children]
   }));
 });
+if (process.env.NODE_ENV !== "production") Gauge.displayName = "Gauge";
 process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/Gauge/GaugeContainer.js

@@ -78,6 +78,7 @@ const GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(pro
     })
   });
 });
+if (process.env.NODE_ENV !== "production") GaugeContainer.displayName = "GaugeContainer";
 process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/Gauge/GaugeProvider.js

@@ -21,9 +21,7 @@ export const GaugeContext = /*#__PURE__*/React.createContext({
   maxRadius: 0,
   valueAngle: null
 });
-if (process.env.NODE_ENV !== 'production') {
-  GaugeContext.displayName = 'GaugeContext';
-}
+if (process.env.NODE_ENV !== "production") GaugeContext.displayName = "GaugeContext";
 export function GaugeProvider(props) {
   const {
     value = null,

package/esm/LineChart/AnimatedLine.js

@@ -40,6 +40,7 @@ const AnimatedLine = /*#__PURE__*/React.forwardRef(function AnimatedLine(props,
     }, other, animateProps))
   });
 });
+if (process.env.NODE_ENV !== "production") AnimatedLine.displayName = "AnimatedLine";
 process.env.NODE_ENV !== "production" ? AnimatedLine.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/LineChart/LineChart.js

@@ -65,11 +65,12 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(inProps, ref)
         })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/_jsx(MarkPlot, _extends({}, markPlotProps))
-        }), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
-      }))]
+        }), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+      })), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") LineChart.displayName = "LineChart";
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/LineChart/LineHighlightPlot.js

@@ -84,10 +84,7 @@ function LineHighlightPlot(props) {
         const x = xScale(xData[highlightedIndex]);
         const y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
 
-        if (!instance.isPointInside({
-          x,
-          y
-        })) {
+        if (!instance.isPointInside(x, y)) {
           return null;
         }
         const colorGetter = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);

package/esm/LineChart/MarkPlot.js

@@ -122,10 +122,7 @@ function MarkPlot(props) {
               // Remove missing data point
               return false;
             }
-            if (!instance.isPointInside({
-              x,
-              y
-            })) {
+            if (!instance.isPointInside(x, y)) {
               // Remove out of range
               return false;
             }

package/esm/PieChart/PieArc.js

@@ -97,6 +97,7 @@ const PieArc = /*#__PURE__*/React.forwardRef(function PieArc(props, ref) {
     strokeLinejoin: "round"
   }, other, interactionProps, animatedProps));
 });
+if (process.env.NODE_ENV !== "production") PieArc.displayName = "PieArc";
 process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/PieChart/PieArcLabel.js

@@ -92,6 +92,7 @@ const PieArcLabel = /*#__PURE__*/React.forwardRef(function PieArcLabel(props, re
     children: formattedArcLabel
   }));
 });
+if (process.env.NODE_ENV !== "production") PieArcLabel.displayName = "PieArcLabel";
 process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/PieChart/PieChart.js

@@ -95,13 +95,14 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
           loading: loading,
           slots: slots,
           slotProps: slotProps
-        }), !loading && /*#__PURE__*/_jsx(Tooltip, _extends({
-          trigger: "item"
-        }, slotProps?.tooltip)), children]
-      }))]
+        }), children]
+      })), !loading && /*#__PURE__*/_jsx(Tooltip, _extends({
+        trigger: "item"
+      }, slotProps?.tooltip))]
     })
   }));
 });
+if (process.env.NODE_ENV !== "production") PieChart.displayName = "PieChart";
 process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/RadarChart/RadarChart.js

@@ -36,11 +36,12 @@ const RadarChart = /*#__PURE__*/React.forwardRef(function RadarChart(inProps, re
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         ref: ref,
-        children: [/*#__PURE__*/_jsx(RadarGrid, _extends({}, radarGrid)), /*#__PURE__*/_jsx(RadarMetricLabels, {}), /*#__PURE__*/_jsx(RadarSeriesArea, {}), highlight === 'axis' && /*#__PURE__*/_jsx(RadarAxisHighlight, {}), /*#__PURE__*/_jsx(RadarSeriesMarks, {}), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), children]
-      }))]
+        children: [/*#__PURE__*/_jsx(RadarGrid, _extends({}, radarGrid)), /*#__PURE__*/_jsx(RadarMetricLabels, {}), /*#__PURE__*/_jsx(RadarSeriesArea, {}), highlight === 'axis' && /*#__PURE__*/_jsx(RadarAxisHighlight, {}), /*#__PURE__*/_jsx(RadarSeriesMarks, {}), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), children]
+      })), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") RadarChart.displayName = "RadarChart";
 process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/ScatterChart/Scatter.js

@@ -54,19 +54,11 @@ function Scatter(props) {
       const scatterPoint = series.data[i];
       const x = getXPosition(scatterPoint.x);
       const y = getYPosition(scatterPoint.y);
-      const isInRange = instance.isPointInside({
-        x,
-        y
-      });
-      const pointCtx = {
-        type: 'scatter',
-        seriesId: series.id,
-        dataIndex: i
-      };
+      const isInRange = instance.isPointInside(x, y);
       if (isInRange) {
         const currentItem = {
-          seriesId: pointCtx.seriesId,
-          dataIndex: pointCtx.dataIndex
+          seriesId: series.id,
+          dataIndex: i
         };
         const isItemHighlighted = isHighlighted(currentItem);
         temp.push({

package/esm/ScatterChart/ScatterChart.js

@@ -54,13 +54,14 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(inProps
         children: [/*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps))
-        }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({
-          trigger: "item"
-        }, props.slotProps?.tooltip)), children]
-      }))]
+        }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), children]
+      })), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({
+        trigger: "item"
+      }, props.slotProps?.tooltip))]
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") ScatterChart.displayName = "ScatterChart";
 process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/SparkLineChart/SparkLineChart.js

@@ -9,7 +9,8 @@ import useId from '@mui/utils/useId';
 import { ChartsClipPath } from "../ChartsClipPath/index.js";
 import { BarPlot } from "../BarChart/index.js";
 import { LinePlot, AreaPlot, LineHighlightPlot } from "../LineChart/index.js";
-import { ChartContainer } from "../ChartContainer/index.js";
+import { ChartDataProvider } from "../ChartDataProvider/index.js";
+import { ChartsSurface } from "../ChartsSurface/index.js";
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
 import { ChartsTooltip } from "../ChartsTooltip/index.js";
 import { ChartsAxisHighlight } from "../ChartsAxisHighlight/index.js";
@@ -71,8 +72,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     }
     return typeof color === 'function' ? mode => [color(mode)] : [color];
   }, [color]);
-  return /*#__PURE__*/_jsxs(ChartContainer, _extends({}, other, {
-    ref: ref,
+  return /*#__PURE__*/_jsxs(ChartDataProvider, {
     series: [_extends({
       type: plotType,
       data,
@@ -85,7 +85,6 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     width: width,
     height: height,
     margin: margin,
-    className: className,
     xAxis: [_extends({
       id: DEFAULT_X_AXIS_KEY,
       scaleType: plotType === 'bar' ? 'band' : 'point',
@@ -102,34 +101,40 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       position: 'none'
     })],
     colors: colors,
-    sx: sx,
     disableAxisListener: (!showTooltip || slotProps?.tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
-    children: [/*#__PURE__*/_jsxs("g", {
-      clipPath: `url(#${clipPathId})`,
-      children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
-        skipAnimation: true,
-        slots: slots,
-        slotProps: slotProps
-      }), plotType === 'line' && /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [/*#__PURE__*/_jsx(AreaPlot, {
-          skipAnimation: true,
-          slots: slots,
-          slotProps: slotProps
-        }), /*#__PURE__*/_jsx(LinePlot, {
+    children: [/*#__PURE__*/_jsxs(ChartsSurface, _extends({
+      className: className,
+      ref: ref,
+      sx: sx
+    }, other, {
+      children: [/*#__PURE__*/_jsxs("g", {
+        clipPath: `url(#${clipPathId})`,
+        children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
           skipAnimation: true,
           slots: slots,
           slotProps: slotProps
+        }), plotType === 'line' && /*#__PURE__*/_jsxs(React.Fragment, {
+          children: [/*#__PURE__*/_jsx(AreaPlot, {
+            skipAnimation: true,
+            slots: slots,
+            slotProps: slotProps
+          }), /*#__PURE__*/_jsx(LinePlot, {
+            skipAnimation: true,
+            slots: slots,
+            slotProps: slotProps
+          })]
         })]
-      })]
-    }), plotType === 'line' && /*#__PURE__*/_jsx(LineHighlightPlot, {
-      slots: slots,
-      slotProps: slotProps
-    }), disableClipping ? null : /*#__PURE__*/_jsx(ChartsClipPath, {
-      id: clipPathId,
-      offset: clipPathOffset
-    }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), showTooltip && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), children]
-  }));
+      }), plotType === 'line' && /*#__PURE__*/_jsx(LineHighlightPlot, {
+        slots: slots,
+        slotProps: slotProps
+      }), disableClipping ? null : /*#__PURE__*/_jsx(ChartsClipPath, {
+        id: clipPathId,
+        offset: clipPathOffset
+      }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), children]
+    })), showTooltip && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]
+  });
 });
+if (process.env.NODE_ENV !== "production") SparkLineChart.displayName = "SparkLineChart";
 process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/Toolbar/ToolbarButton.js

@@ -9,6 +9,7 @@ const ToolbarButton = /*#__PURE__*/React.forwardRef(function ToolbarButton(props
     ref: ref
   }, props));
 });
+if (process.env.NODE_ENV !== "production") ToolbarButton.displayName = "ToolbarButton";
 process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/context/ChartProvider/ChartContext.js

@@ -3,6 +3,4 @@ import * as React from 'react';
  * @ignore - internal component.
  */
 export const ChartContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== 'production') {
-  ChartContext.displayName = 'ChartContext';
-}
+if (process.env.NODE_ENV !== "production") ChartContext.displayName = "ChartContext";

package/esm/hooks/useTicks.js

@@ -72,12 +72,8 @@ export function useTicks(options) {
     for (let i = 0; i < ticks.length; i += 1) {
       const value = ticks[i];
       const offset = scale(value);
-      if (instance.isPointInside({
-        x: offset,
-        y: offset
-      }, {
-        direction
-      })) {
+      const isInside = direction === 'x' ? instance.isXInside(offset) : instance.isYInside(offset);
+      if (isInside) {
         visibleTicks.push({
           value,
           formattedValue: valueFormatter?.(value, {

package/esm/index.js

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

package/esm/internals/constants.d.ts

@@ -1,4 +1,4 @@
 /** Margin in the opposite direction of the axis, i.e., horizontal if the axis is vertical and vice versa. */
 export declare const ZOOM_SLIDER_MARGIN = 4;
 /** Size reserved for the zoom slider. The actual size of the slider might be smaller. */
-export declare const ZOOM_SLIDER_SIZE: number;
+export declare const DEFAULT_ZOOM_SLIDER_SIZE: number;

package/esm/internals/constants.js

@@ -2,4 +2,4 @@
 export const ZOOM_SLIDER_MARGIN = 4;
 
 /** Size reserved for the zoom slider. The actual size of the slider might be smaller. */
-export const ZOOM_SLIDER_SIZE = 20 + 2 * ZOOM_SLIDER_MARGIN;
+export const DEFAULT_ZOOM_SLIDER_SIZE = 20 + 2 * ZOOM_SLIDER_MARGIN;

package/esm/internals/consumeSlots.js

@@ -94,4 +94,5 @@ export const consumeSlots = (name, slotPropName, options, InComponent) => {
     }));
   }
   return /*#__PURE__*/React.forwardRef(ConsumeSlotsInternal);
-};
+};
+if (process.env.NODE_ENV !== "production") consumeSlots.displayName = "consumeSlots";

package/esm/internals/consumeThemeProps.js

@@ -60,6 +60,7 @@ export const consumeThemeProps = (name, options, InComponent) => /*#__PURE__*/Re
   const theme = useTheme();
   const classes = options.classesResolver?.(outProps, theme);
   const OutComponent = /*#__PURE__*/React.forwardRef(InComponent);
+  if (process.env.NODE_ENV !== "production") OutComponent.displayName = "OutComponent";
   if (process.env.NODE_ENV !== 'production') {
     OutComponent.displayName = `consumeThemeProps(${name})`;
   }
@@ -67,4 +68,5 @@ export const consumeThemeProps = (name, options, InComponent) => /*#__PURE__*/Re
     classes: classes,
     ref: ref
   }));
-});
+});
+if (process.env.NODE_ENV !== "production") consumeThemeProps.displayName = "consumeThemeProps";

package/esm/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.js

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ownerWindow from '@mui/utils/ownerWindow';
+import { useSelector } from "../../../store/useSelector.js";
 import { DEFAULT_MARGINS } from "../../../../constants/index.js";
 import { selectorChartDrawingArea } from "./useChartDimensions.selectors.js";
 import { defaultizeMargin } from "../../../defaultizeMargin.js";
@@ -143,28 +144,21 @@ export const useChartDimensions = ({
       stateRef.current.displayError = false;
     }
   }
-  const isPointInside = React.useCallback(({
-    x,
-    y
-  }, options) => {
+  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const isXInside = React.useCallback(x => x >= drawingArea.left - 1 && x <= drawingArea.left + drawingArea.width, [drawingArea.left, drawingArea.width]);
+  const isYInside = React.useCallback(y => y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height, [drawingArea.height, drawingArea.top]);
+  const isPointInside = React.useCallback((x, y, targetElement) => {
     // For element allowed to overflow, wrapping them in <g data-drawing-container /> make them fully part of the drawing area.
-    if (options?.targetElement && options?.targetElement.closest('[data-drawing-container]')) {
+    if (targetElement && targetElement.closest('[data-drawing-container]')) {
       return true;
     }
-    const drawingArea = selectorChartDrawingArea(store.value);
-    const isInsideX = x >= drawingArea.left - 1 && x <= drawingArea.left + drawingArea.width;
-    const isInsideY = y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height;
-    if (options?.direction === 'x') {
-      return isInsideX;
-    }
-    if (options?.direction === 'y') {
-      return isInsideY;
-    }
-    return isInsideX && isInsideY;
-  }, [store.value]);
+    return isXInside(x) && isYInside(y);
+  }, [isXInside, isYInside]);
   return {
     instance: {
-      isPointInside
+      isPointInside,
+      isXInside,
+      isYInside
     }
   };
 };

package/esm/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.d.ts

@@ -65,21 +65,24 @@ export interface UseChartDimensionsState {
 export interface UseChartDimensionsInstance {
   /**
    * Checks if a point is inside the drawing area.
-   * @param {Object} point The point to check.
-   * @param {number} point.x The x coordinate of the point.
-   * @param {number} point.y The y coordinate of the point.
-   * @param {Object} options The options of the check.
-   * @param {Element} [options.targetElement] The element to check if it is allowed to overflow the drawing area.
-   * @param {'x' | 'y'} [options.direction] The direction to check.
+   * @param {number} x The x coordinate of the point.
+   * @param {number} y The y coordinate of the point.
+   * @param {Element} targetElement The element to check if it is allowed to overflow the drawing area.
    * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
    */
-  isPointInside: (point: {
-    x: number;
-    y: number;
-  }, options?: {
-    targetElement?: Element;
-    direction?: 'x' | 'y';
-  }) => boolean;
+  isPointInside: (x: number, y: number, targetElement?: Element) => boolean;
+  /**
+   * Checks if the x coordinate is inside the drawing area.
+   * @param {number} x The x coordinate of the point.
+   * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
+   */
+  isXInside: (x: number) => boolean;
+  /**
+   * Checks if the y coordinate is inside the drawing area.
+   * @param {number} y The y coordinate of the point.
+   * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
+   */
+  isYInside: (y: number) => boolean;
 }
 export type UseChartDimensionsSignature = ChartPluginSignature<{
   params: UseChartDimensionsParameters;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { ZOOM_SLIDER_SIZE } from "../../../constants.js";
 import { defaultizeZoom } from "./defaultizeZoom.js";
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY, DEFAULT_AXIS_SIZE_HEIGHT, DEFAULT_AXIS_SIZE_WIDTH, AXIS_LABEL_DEFAULT_HEIGHT } from "../../../../constants/index.js";
 export function defaultizeXAxis(inAxes, dataset) {
@@ -33,7 +32,7 @@ export function defaultizeXAxis(inAxes, dataset) {
     if (position !== 'none') {
       offsets[position] += sharedConfig.height;
       if (sharedConfig.zoom?.slider.enabled) {
-        offsets[position] += ZOOM_SLIDER_SIZE;
+        offsets[position] += sharedConfig.zoom.slider.size;
       }
     }
 
@@ -83,7 +82,7 @@ export function defaultizeYAxis(inAxes, dataset) {
     if (position !== 'none') {
       offsets[position] += sharedConfig.width;
       if (sharedConfig.zoom?.slider.enabled) {
-        offsets[position] += ZOOM_SLIDER_SIZE;
+        offsets[position] += sharedConfig.zoom.slider.size;
       }
     }
 

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import { DEFAULT_ZOOM_SLIDER_SIZE } from "../../../constants.js";
 const defaultZoomOptions = {
   minStart: 0,
   maxEnd: 100,
@@ -8,7 +9,8 @@ const defaultZoomOptions = {
   panning: true,
   filterMode: 'keep',
   slider: {
-    enabled: false
+    enabled: false,
+    size: DEFAULT_ZOOM_SLIDER_SIZE
   }
 };
 export const defaultizeZoom = (zoom, axisId, axisDirection) => {

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisSize.selectors.js

@@ -1,7 +1,6 @@
-import { ZOOM_SLIDER_SIZE } from "../../../constants.js";
 import { selectorChartRawXAxis, selectorChartRawYAxis } from "./useChartCartesianAxisLayout.selectors.js";
 import { createSelector } from "../../utils/selectors.js";
-export const selectorChartLeftAxisSize = createSelector([selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'left' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? ZOOM_SLIDER_SIZE : 0) : acc, 0));
-export const selectorChartRightAxisSize = createSelector([selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'right' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? ZOOM_SLIDER_SIZE : 0) : acc, 0));
-export const selectorChartTopAxisSize = createSelector([selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'top' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? ZOOM_SLIDER_SIZE : 0) : acc, 0));
-export const selectorChartBottomAxisSize = createSelector([selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'bottom' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? ZOOM_SLIDER_SIZE : 0) : acc, 0));
+export const selectorChartLeftAxisSize = createSelector([selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'left' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0));
+export const selectorChartRightAxisSize = createSelector([selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'right' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0));
+export const selectorChartTopAxisSize = createSelector([selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'top' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0));
+export const selectorChartBottomAxisSize = createSelector([selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'bottom' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0));