@mui/x-charts 7.5.0 → 7.6.0

package/modern/BarChart/BarLabel/BarLabelPlot.js

@@ -0,0 +1,98 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["bars", "skipAnimation"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useTransition } from '@react-spring/web';
+import { BarLabelItem } from './BarLabelItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+const leaveStyle = ({
+  layout,
+  yOrigin,
+  x,
+  width,
+  y,
+  xOrigin,
+  height
+}) => _extends({}, layout === 'vertical' ? {
+  y: yOrigin,
+  x: x + width / 2,
+  height: 0,
+  width
+} : {
+  y: y + height / 2,
+  x: xOrigin,
+  height,
+  width: 0
+});
+const enterStyle = ({
+  x,
+  width,
+  y,
+  height
+}) => ({
+  x: x + width / 2,
+  y: y + height / 2,
+  height,
+  width
+});
+/**
+ * @ignore - internal component.
+ */
+function BarLabelPlot(props) {
+  const {
+      bars,
+      skipAnimation
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const barLabelTransition = useTransition(bars, {
+    keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
+    from: leaveStyle,
+    leave: null,
+    enter: enterStyle,
+    update: enterStyle,
+    immediate: skipAnimation
+  });
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: barLabelTransition((style, {
+      seriesId,
+      dataIndex,
+      color,
+      value,
+      width,
+      height
+    }) => /*#__PURE__*/_jsx(BarLabelItem, _extends({
+      seriesId: seriesId,
+      dataIndex: dataIndex,
+      value: value,
+      color: color,
+      width: width,
+      height: height
+    }, other, {
+      style: style
+    })))
+  });
+}
+process.env.NODE_ENV !== "production" ? BarLabelPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]),
+  bars: PropTypes.arrayOf(PropTypes.shape({
+    color: PropTypes.string.isRequired,
+    dataIndex: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    layout: PropTypes.oneOf(['horizontal', 'vertical']),
+    maskId: PropTypes.string.isRequired,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    value: PropTypes.number,
+    width: PropTypes.number.isRequired,
+    x: PropTypes.number.isRequired,
+    xOrigin: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
+    yOrigin: PropTypes.number.isRequired
+  })).isRequired,
+  skipAnimation: PropTypes.bool
+} : void 0;
+export { BarLabelPlot };

package/modern/BarChart/BarLabel/barLabelClasses.js

@@ -0,0 +1,19 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import composeClasses from '@mui/utils/composeClasses';
+export function getBarLabelUtilityClass(slot) {
+  return generateUtilityClass('MuiBarLabel', slot);
+}
+export const barLabelClasses = generateUtilityClasses('MuiBarLabel', ['root', 'highlighted', 'faded']);
+export const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    seriesId,
+    isFaded,
+    isHighlighted
+  } = ownerState;
+  const slots = {
+    root: ['root', `series-${seriesId}`, isHighlighted && 'highlighted', isFaded && 'faded']
+  };
+  return composeClasses(slots, getBarLabelUtilityClass, classes);
+};

package/modern/BarChart/BarLabel/getBarLabel.js

@@ -0,0 +1,24 @@
+export const getBarLabel = options => {
+  const {
+    barLabel,
+    value,
+    dataIndex,
+    seriesId,
+    height,
+    width
+  } = options;
+  if (barLabel === 'value') {
+    // We don't want to show the label if the value is 0
+    return value ? value?.toString() : null;
+  }
+  return barLabel({
+    seriesId,
+    dataIndex,
+    value
+  }, {
+    bar: {
+      height,
+      width
+    }
+  });
+};

package/modern/BarChart/BarLabel/index.js

@@ -0,0 +1,2 @@
+export { BarLabel } from './BarLabel';
+export { barLabelClasses, getBarLabelUtilityClass } from './barLabelClasses';

package/modern/BarChart/BarPlot.js

@@ -1,17 +1,17 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["skipAnimation", "onItemClick", "borderRadius"];
+const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { BarElement } from './BarElement';
-import { isBandScaleConfig, isPointScaleConfig } from '../models/axis';
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import getColor from './getColor';
 import { useChartId } from '../hooks';
 import { BarClipPath } from './BarClipPath';
+import { BarLabelPlot } from './BarLabel/BarLabelPlot';
+import { checkScaleErrors } from './checkScaleErrors';
 
 /**
  * Solution of the equations
@@ -71,30 +71,8 @@ const useAggregatedData = () => {
       const xAxisConfig = xAxis[xAxisKey];
       const yAxisConfig = yAxis[yAxisKey];
       const verticalLayout = series[seriesId].layout === 'vertical';
-      let baseScaleConfig;
-      if (verticalLayout) {
-        if (!isBandScaleConfig(xAxisConfig)) {
-          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should be of type "band" to display the bar series of id "${seriesId}".`);
-        }
-        if (xAxis[xAxisKey].data === undefined) {
-          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property.`);
-        }
-        baseScaleConfig = xAxisConfig;
-        if (isBandScaleConfig(yAxisConfig) || isPointScaleConfig(yAxisConfig)) {
-          throw new Error(`MUI X Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} should be a continuous type to display the bar series of id "${seriesId}".`);
-        }
-      } else {
-        if (!isBandScaleConfig(yAxisConfig)) {
-          throw new Error(`MUI X Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} should be of type "band" to display the bar series of id "${seriesId}".`);
-        }
-        if (yAxis[yAxisKey].data === undefined) {
-          throw new Error(`MUI X Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} should have data property.`);
-        }
-        baseScaleConfig = yAxisConfig;
-        if (isBandScaleConfig(xAxisConfig) || isPointScaleConfig(xAxisConfig)) {
-          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should be a continuous type to display the bar series of id "${seriesId}".`);
-        }
-      }
+      checkScaleErrors(verticalLayout, seriesId, xAxisKey, xAxis, yAxisKey, yAxis);
+      const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
       const xScale = xAxisConfig.scale;
       const yScale = yAxisConfig.scale;
       const colorGetter = getColor(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
@@ -127,7 +105,6 @@ const useAggregatedData = () => {
           height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
           width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
           color: colorGetter(dataIndex),
-          highlightScope: series[seriesId].highlightScope,
           value: series[seriesId].data[dataIndex],
           maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
         };
@@ -211,7 +188,8 @@ function BarPlot(props) {
   const {
       skipAnimation,
       onItemClick,
-      borderRadius
+      borderRadius,
+      barLabel
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const transition = useTransition(completedData, {
@@ -249,14 +227,12 @@ function BarPlot(props) {
       seriesId,
       dataIndex,
       color,
-      highlightScope,
       maskId
     }) => {
       const barElement = /*#__PURE__*/_jsx(BarElement, _extends({
         id: seriesId,
         dataIndex: dataIndex,
-        color: color,
-        highlightScope: highlightScope
+        color: color
       }, other, {
         onClick: onItemClick && (event => {
           onItemClick(event, {
@@ -274,14 +250,26 @@ function BarPlot(props) {
         clipPath: `url(#${maskId})`,
         children: barElement
       });
-    })]
+    }), barLabel && /*#__PURE__*/_jsx(BarLabelPlot, _extends({
+      bars: completedData,
+      skipAnimation: skipAnimation,
+      barLabel: barLabel
+    }, other))]
   });
 }
 process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * If provided, the function will be used to format the label of the bar.
+   * It can be set to 'value' to display the current value.
+   * @param {BarItem} item The item to format.
+   * @param {BarLabelContext} context data about the bar.
+   * @returns {string} The formatted label.
+   */
+  barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]),
   /**
    * Defines the border radius of the bar element.
    */

package/modern/BarChart/checkScaleErrors.js

@@ -0,0 +1,27 @@
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
+import { isBandScaleConfig, isPointScaleConfig } from '../models/axis';
+const getAxisMessage = (axisDirection, axisKey) => {
+  const axisName = `${axisDirection}-axis`;
+  const axisKeyName = `${axisDirection}Axis`;
+  const axisDefaultKey = axisDirection === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
+  return axisKey === axisDefaultKey ? `The first \`${axisKeyName}\`` : `The ${axisName} with id "${axisKey}"`;
+};
+export function checkScaleErrors(verticalLayout, seriesId, xAxisKey, xAxis, yAxisKey, yAxis) {
+  const xAxisConfig = xAxis[xAxisKey];
+  const yAxisConfig = yAxis[yAxisKey];
+  const discreteAxisConfig = verticalLayout ? xAxisConfig : yAxisConfig;
+  const continuousAxisConfig = verticalLayout ? yAxisConfig : xAxisConfig;
+  const discreteAxisKey = verticalLayout ? xAxisKey : yAxisKey;
+  const continuousAxisKey = verticalLayout ? yAxisKey : xAxisKey;
+  const discreteAxisDirection = verticalLayout ? 'x' : 'y';
+  const continuousAxisDirection = verticalLayout ? 'y' : 'x';
+  if (!isBandScaleConfig(discreteAxisConfig)) {
+    throw new Error(`MUI X Charts: ${getAxisMessage(discreteAxisDirection, discreteAxisKey)} should be of type "band" to display the bar series of id "${seriesId}".`);
+  }
+  if (discreteAxisConfig.data === undefined) {
+    throw new Error(`MUI X Charts: ${getAxisMessage(discreteAxisDirection, discreteAxisKey)} should have data property.`);
+  }
+  if (isBandScaleConfig(continuousAxisConfig) || isPointScaleConfig(continuousAxisConfig)) {
+    throw new Error(`MUI X Charts: ${getAxisMessage(continuousAxisDirection, continuousAxisKey)} should be a continuous type to display the bar series of id "${seriesId}".`);
+  }
+}

package/modern/BarChart/index.js

@@ -1,3 +1,4 @@
 export * from './BarChart';
 export * from './BarPlot';
-export * from './BarElement';
+export * from './BarElement';
+export * from './BarLabel';

package/modern/ChartContainer/ChartContainer.js

@@ -7,8 +7,8 @@ import { InteractionProvider } from '../context/InteractionProvider';
 import { useReducedMotion } from '../hooks/useReducedMotion';
 import { ChartsSurface } from '../ChartsSurface';
 import { CartesianContextProvider } from '../context/CartesianContextProvider';
-import { HighlightProvider } from '../context/HighlightProvider';
 import { ChartsAxesGradients } from '../internals/components/ChartsAxesGradients';
+import { HighlightedProvider } from '../context';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
@@ -24,6 +24,8 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
     title,
     desc,
     disableAxisListener,
+    highlightedItem,
+    onHighlightChange,
     children
   } = props;
   const svgRef = React.useRef(null);
@@ -44,7 +46,9 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
         yAxis: yAxis,
         dataset: dataset,
         children: /*#__PURE__*/_jsx(InteractionProvider, {
-          children: /*#__PURE__*/_jsx(HighlightProvider, {
+          children: /*#__PURE__*/_jsx(HighlightedProvider, {
+            highlightedItem: highlightedItem,
+            onHighlightChange: onHighlightChange,
             children: /*#__PURE__*/_jsxs(ChartsSurface, {
               width: width,
               height: height,
@@ -64,7 +68,7 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
 process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
   className: PropTypes.string,
@@ -88,6 +92,13 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * The height of the chart in px.
    */
   height: PropTypes.number.isRequired,
+  /**
+   * The item currently highlighted. Turns highlighting into a controlled prop.
+   */
+  highlightedItem: PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  }),
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
@@ -100,6 +111,12 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   }),
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: PropTypes.func,
   /**
    * The array of series to display.
    * Each type of series has its own specificity.

package/modern/ChartsAxis/ChartsAxis.js

@@ -91,7 +91,7 @@ function ChartsAxis(props) {
 process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Indicate which axis to display the bottom of the charts.

package/modern/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -97,7 +97,7 @@ function ChartsAxisHighlight(props) {
 process.env.NODE_ENV !== "production" ? ChartsAxisHighlight.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   x: PropTypes.oneOf(['band', 'line', 'none']),
   y: PropTypes.oneOf(['band', 'line', 'none'])

package/modern/ChartsClipPath/ChartsClipPath.js

@@ -38,7 +38,7 @@ function ChartsClipPath(props) {
 process.env.NODE_ENV !== "production" ? ChartsClipPath.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   id: PropTypes.string.isRequired,
   offset: PropTypes.shape({

package/modern/ChartsGrid/ChartsGrid.js

@@ -113,7 +113,7 @@ function ChartsGrid(props) {
 process.env.NODE_ENV !== "production" ? ChartsGrid.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Override or extend the styles applied to the component.

package/modern/ChartsLegend/ChartsLegend.js

@@ -69,7 +69,7 @@ function ChartsLegend(inProps) {
 process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Override or extend the styles applied to the component.

package/modern/ChartsLegend/DefaultChartsLegend.js

@@ -204,7 +204,7 @@ function DefaultChartsLegend(props) {
 process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Override or extend the styles applied to the component.

package/modern/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -62,7 +62,7 @@ function ChartsOnAxisClickHandler(props) {
 process.env.NODE_ENV !== "production" ? ChartsOnAxisClickHandler.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The function called for onClick events.

package/modern/ChartsReferenceLine/ChartsReferenceLine.js

@@ -23,7 +23,7 @@ function ChartsReferenceLine(props) {
 process.env.NODE_ENV !== "production" ? ChartsReferenceLine.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The id of the axis used for the reference value.

package/modern/ChartsSurface.js

@@ -44,7 +44,7 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props
 process.env.NODE_ENV !== "production" ? ChartsSurface.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
   className: PropTypes.string,

package/modern/ChartsText/ChartsText.js

@@ -70,7 +70,7 @@ function ChartsText(props) {
 process.env.NODE_ENV !== "production" ? ChartsText.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Height of a text line (in `em`).

package/modern/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -80,7 +80,7 @@ function ChartsAxisTooltipContent(props) {
 process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   axisData: PropTypes.shape({
     x: PropTypes.shape({

package/modern/ChartsTooltip/ChartsItemTooltipContent.js

@@ -60,7 +60,7 @@ function ChartsItemTooltipContent(props) {
 process.env.NODE_ENV !== "production" ? ChartsItemTooltipContent.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   classes: PropTypes.object.isRequired,
   content: PropTypes.elementType,

package/modern/ChartsTooltip/ChartsTooltip.js

@@ -110,7 +110,7 @@ function ChartsTooltip(props) {
 process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Component to override the tooltip content when trigger is set to 'axis'.

package/modern/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -80,7 +80,7 @@ function DefaultChartsAxisTooltipContent(props) {
 process.env.NODE_ENV !== "production" ? DefaultChartsAxisTooltipContent.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The properties of the triggered axis.

package/modern/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -61,7 +61,7 @@ function DefaultChartsItemTooltipContent(props) {
 process.env.NODE_ENV !== "production" ? DefaultChartsItemTooltipContent.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Override or extend the styles applied to the component.

package/modern/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -8,6 +8,7 @@ import { SeriesContext } from '../context/SeriesContextProvider';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { getSVGPoint } from '../internals/utils';
 import { useDrawingArea, useSvgRef } from '../hooks';
+import { useHighlighted } from '../context';
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsVoronoiHandler(props) {
   const {
@@ -36,6 +37,10 @@ function ChartsVoronoiHandler(props) {
   } = React.useContext(SeriesContext).scatter ?? {};
   const voronoiRef = React.useRef({});
   const delauneyRef = React.useRef(undefined);
+  const {
+    setHighlighted,
+    clearHighlighted
+  } = useHighlighted();
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   useEnhancedEffect(() => {
@@ -129,6 +134,7 @@ function ChartsVoronoiHandler(props) {
       dispatch({
         type: 'exitChart'
       });
+      clearHighlighted();
     };
     const handleMouseMove = event => {
       const closestPoint = getClosestPoint(event);
@@ -136,6 +142,7 @@ function ChartsVoronoiHandler(props) {
         dispatch({
           type: 'exitChart'
         });
+        clearHighlighted();
         return;
       }
       if (closestPoint === 'outside-voronoi-max-radius' || closestPoint === 'no-point-found') {
@@ -145,6 +152,7 @@ function ChartsVoronoiHandler(props) {
             type: 'scatter'
           }
         });
+        clearHighlighted();
         return;
       }
       const {
@@ -159,6 +167,10 @@ function ChartsVoronoiHandler(props) {
           dataIndex
         }
       });
+      setHighlighted({
+        seriesId,
+        dataIndex
+      });
     };
     const handleMouseClick = event => {
       if (!onItemClick) {
@@ -187,7 +199,7 @@ function ChartsVoronoiHandler(props) {
       element.removeEventListener('mousemove', handleMouseMove);
       element.removeEventListener('click', handleMouseClick);
     };
-  }, [svgRef, dispatch, left, width, top, height, yAxis, xAxis, voronoiMaxRadius, onItemClick]);
+  }, [svgRef, dispatch, left, width, top, height, yAxis, xAxis, voronoiMaxRadius, onItemClick, setHighlighted, clearHighlighted]);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return /*#__PURE__*/_jsx(React.Fragment, {});
@@ -195,7 +207,7 @@ function ChartsVoronoiHandler(props) {
 process.env.NODE_ENV !== "production" ? ChartsVoronoiHandler.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Callback fired when clicking on a scatter item.

package/modern/ChartsXAxis/ChartsXAxis.js

@@ -248,7 +248,7 @@ function ChartsXAxis(inProps) {
 process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The id of the axis to render.

package/modern/ChartsYAxis/ChartsYAxis.js

@@ -184,7 +184,7 @@ function ChartsYAxis(inProps) {
 process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The id of the axis to render.

package/modern/Gauge/Gauge.js

@@ -44,7 +44,7 @@ function Gauge(props) {
 process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
   classes: PropTypes.object,

package/modern/Gauge/GaugeContainer.js

@@ -106,7 +106,7 @@ const GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(pro
 process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
   className: PropTypes.string,

package/modern/Gauge/GaugeValueText.js

@@ -48,7 +48,7 @@ function GaugeValueText(props) {
 process.env.NODE_ENV !== "production" ? GaugeValueText.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Height of a text line (in `em`).