@mui/x-charts 7.14.0 → 7.15.0

package/{esm → node}/context/CartesianProvider/computeValue.js

@@ -1,25 +1,32 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { scaleBand, scalePoint, scaleTime } from '@mui/x-charts-vendor/d3-scale';
-import { isBandScaleConfig, isPointScaleConfig } from '../../models/axis';
-import { getColorScale, getOrdinalColorScale } from '../../internals/colorScale';
-import { getTickNumber } from '../../hooks/useTicks';
-import { getScale } from '../../internals/getScale';
-import { zoomScaleRange } from './zoom';
-import { getAxisExtremum } from './getAxisExtremum';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.computeValue = computeValue;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _d3Scale = require("@mui/x-charts-vendor/d3-scale");
+var _axis = require("../../models/axis");
+var _colorScale = require("../../internals/colorScale");
+var _useTicks = require("../../hooks/useTicks");
+var _getScale = require("../../internals/getScale");
+var _zoom = require("./zoom");
+var _getAxisExtremum = require("./getAxisExtremum");
 const getRange = (drawingArea, axisDirection, isReverse) => {
   const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
   return isReverse ? range.reverse() : range;
 };
 const isDateData = data => data?.[0] instanceof Date;
 function createDateFormatter(axis, range) {
-  const timeScale = scaleTime(axis.data, range);
+  const timeScale = (0, _d3Scale.scaleTime)(axis.data, range);
   return (v, {
     location
   }) => location === 'tick' ? timeScale.tickFormat(axis.tickNumber)(v) : `${v.toLocaleString()}`;
 }
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
-export function computeValue({
+function computeValue({
   drawingArea,
   formattedSeries,
   axis: allAxis,
@@ -39,41 +46,41 @@ export function computeValue({
     }) => axisId === axis.id);
     const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
     const range = getRange(drawingArea, axisDirection, axis.reverse);
-    const [minData, maxData] = getAxisExtremum(axis, extremumGetters, isDefaultAxis, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined // Do not apply filtering if zoom is already defined.
+    const [minData, maxData] = (0, _getAxisExtremum.getAxisExtremum)(axis, extremumGetters, isDefaultAxis, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined // Do not apply filtering if zoom is already defined.
     );
     const data = axis.data ?? [];
-    if (isBandScaleConfig(axis)) {
+    if ((0, _axis.isBandScaleConfig)(axis)) {
       const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
       const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
       // Reverse range because ordinal scales are presented from top to bottom on y-axis
       const scaleRange = axisDirection === 'x' ? range : [range[1], range[0]];
-      const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
-      completeAxis[axis.id] = _extends({
+      const zoomedRange = (0, _zoom.zoomScaleRange)(scaleRange, zoomRange);
+      completeAxis[axis.id] = (0, _extends2.default)({
         categoryGapRatio,
         barGapRatio
       }, axis, {
         data,
-        scale: scaleBand(axis.data, zoomedRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
+        scale: (0, _d3Scale.scaleBand)(axis.data, zoomedRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
         tickNumber: axis.data.length,
-        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
+        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? (0, _colorScale.getOrdinalColorScale)((0, _extends2.default)({
           values: axis.data
-        }, axis.colorMap)) : getColorScale(axis.colorMap))
+        }, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
       });
       if (isDateData(axis.data)) {
         const dateFormatter = createDateFormatter(axis, scaleRange);
         completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
       }
     }
-    if (isPointScaleConfig(axis)) {
+    if ((0, _axis.isPointScaleConfig)(axis)) {
       const scaleRange = axisDirection === 'x' ? range : [...range].reverse();
-      const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
-      completeAxis[axis.id] = _extends({}, axis, {
+      const zoomedRange = (0, _zoom.zoomScaleRange)(scaleRange, zoomRange);
+      completeAxis[axis.id] = (0, _extends2.default)({}, axis, {
         data,
-        scale: scalePoint(axis.data, zoomedRange),
+        scale: (0, _d3Scale.scalePoint)(axis.data, zoomedRange),
         tickNumber: axis.data.length,
-        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
+        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? (0, _colorScale.getOrdinalColorScale)((0, _extends2.default)({
           values: axis.data
-        }, axis.colorMap)) : getColorScale(axis.colorMap))
+        }, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
       });
       if (isDateData(axis.data)) {
         const dateFormatter = createDateFormatter(axis, scaleRange);
@@ -86,23 +93,23 @@ export function computeValue({
     }
     const scaleType = axis.scaleType ?? 'linear';
     const axisExtremums = [axis.min ?? minData, axis.max ?? maxData];
-    const rawTickNumber = getTickNumber(_extends({}, axis, {
+    const rawTickNumber = (0, _useTicks.getTickNumber)((0, _extends2.default)({}, axis, {
       range,
       domain: axisExtremums
     }));
     const tickNumber = rawTickNumber / ((zoomRange[1] - zoomRange[0]) / 100);
-    const zoomedRange = zoomScaleRange(range, zoomRange);
+    const zoomedRange = (0, _zoom.zoomScaleRange)(range, zoomRange);
 
     // TODO: move nice to prop? Disable when there is zoom?
-    const scale = getScale(scaleType, axisExtremums, zoomedRange).nice(rawTickNumber);
+    const scale = (0, _getScale.getScale)(scaleType, axisExtremums, zoomedRange).nice(rawTickNumber);
     const [minDomain, maxDomain] = scale.domain();
     const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
-    completeAxis[axis.id] = _extends({}, axis, {
+    completeAxis[axis.id] = (0, _extends2.default)({}, axis, {
       data,
       scaleType: scaleType,
       scale: scale.domain(domain),
       tickNumber,
-      colorScale: axis.colorMap && getColorScale(axis.colorMap)
+      colorScale: axis.colorMap && (0, _colorScale.getColorScale)(axis.colorMap)
     });
   });
   return {

package/node/context/CartesianProvider/defaultizeAxis.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultizeAxis = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _constants = require("../../constants");
+const defaultizeAxis = (inAxis, axisName) => {
+  const DEFAULT_AXIS_KEY = axisName === 'x' ? _constants.DEFAULT_X_AXIS_KEY : _constants.DEFAULT_Y_AXIS_KEY;
+  return [...(inAxis?.map((axis, index) => (0, _extends2.default)({
+    id: `defaultized-${axisName}-axis-${index}`
+  }, axis)) ?? []), ...(inAxis === undefined || inAxis.findIndex(({
+    id
+  }) => id === DEFAULT_AXIS_KEY) === -1 ? [{
+    id: DEFAULT_AXIS_KEY,
+    scaleType: 'linear'
+  }] : [])];
+};
+exports.defaultizeAxis = defaultizeAxis;

package/{esm → node}/context/CartesianProvider/getAxisExtremum.js

@@ -1,3 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAxisExtremum = void 0;
 const axisExtremumCallback = (acc, chartType, axis, getters, isDefaultAxis, formattedSeries, getFilters) => {
   const getter = getters[chartType];
   const series = formattedSeries[chartType]?.series ?? {};
@@ -10,11 +16,12 @@ const axisExtremumCallback = (acc, chartType, axis, getters, isDefaultAxis, form
   const [minData, maxData] = acc;
   return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
 };
-export const getAxisExtremum = (axis, getters, isDefaultAxis, formattedSeries, getFilters) => {
+const getAxisExtremum = (axis, getters, isDefaultAxis, formattedSeries, getFilters) => {
   const charTypes = Object.keys(getters);
   const extremums = charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, isDefaultAxis, formattedSeries, getFilters), [Infinity, -Infinity]);
   if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
     return [Infinity, -Infinity];
   }
   return extremums;
-};
+};
+exports.getAxisExtremum = getAxisExtremum;

package/node/context/CartesianProvider/index.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  cartesianProviderUtils: true
+};
+exports.cartesianProviderUtils = void 0;
+var _computeValue = require("./computeValue");
+var _CartesianProvider = require("./CartesianProvider");
+Object.keys(_CartesianProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CartesianProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CartesianProvider[key];
+    }
+  });
+});
+var _CartesianContext = require("./CartesianContext");
+Object.keys(_CartesianContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CartesianContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CartesianContext[key];
+    }
+  });
+});
+var _useCartesianContext = require("./useCartesianContext");
+Object.keys(_useCartesianContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useCartesianContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useCartesianContext[key];
+    }
+  });
+});
+var _Cartesian = require("./Cartesian.types");
+Object.keys(_Cartesian).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Cartesian[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Cartesian[key];
+    }
+  });
+});
+const cartesianProviderUtils = exports.cartesianProviderUtils = {
+  computeValue: _computeValue.computeValue
+};

package/node/context/CartesianProvider/useCartesianContext.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCartesianContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _CartesianContext = require("./CartesianContext");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useCartesianContext = () => {
+  const {
+    data
+  } = React.useContext(_CartesianContext.CartesianContext);
+  return data;
+};
+exports.useCartesianContext = useCartesianContext;

package/{esm → node}/context/CartesianProvider/zoom.js

@@ -1,3 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.zoomScaleRange = void 0;
 /**
  * Applies the zoom into the scale range.
  * It changes the screen coordinates that the scale covers.
@@ -7,7 +13,7 @@
  * @param zoomRange the zoom range in percentage.
  * @returns zoomed range in real screen coordinates.
  */
-export const zoomScaleRange = (scaleRange, zoomRange) => {
+const zoomScaleRange = (scaleRange, zoomRange) => {
   const rangeGap = scaleRange[1] - scaleRange[0];
   const zoomGap = zoomRange[1] - zoomRange[0];
 
@@ -16,4 +22,5 @@ export const zoomScaleRange = (scaleRange, zoomRange) => {
   const min = scaleRange[0] - zoomRange[0] * rangeGap / zoomGap;
   const max = scaleRange[1] + (100 - zoomRange[1]) * rangeGap / zoomGap;
   return [min, max];
-};
+};
+exports.zoomScaleRange = zoomScaleRange;

package/node/context/DrawingProvider.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawingContext = void 0;
+exports.DrawingProvider = DrawingProvider;
+exports.SvgContext = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _useChartDimensions = _interopRequireDefault(require("../hooks/useChartDimensions"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * Defines the area in which it is possible to draw the charts.
+ */
+
+const DrawingContext = exports.DrawingContext = /*#__PURE__*/React.createContext({
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  height: 300,
+  width: 400,
+  chartId: '',
+  isPointInside: () => false
+});
+if (process.env.NODE_ENV !== 'production') {
+  DrawingContext.displayName = 'DrawingContext';
+}
+const SvgContext = exports.SvgContext = /*#__PURE__*/React.createContext({
+  isInitialized: false,
+  data: {
+    current: null
+  }
+});
+if (process.env.NODE_ENV !== 'production') {
+  SvgContext.displayName = 'SvgContext';
+}
+function DrawingProvider(props) {
+  const {
+    width,
+    height,
+    margin,
+    svgRef,
+    children
+  } = props;
+  const drawingArea = (0, _useChartDimensions.default)(width, height, margin);
+  const chartId = (0, _useId.default)();
+  const isPointInside = React.useCallback(({
+    x,
+    y
+  }, options) => {
+    // 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]')) {
+      return true;
+    }
+    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;
+  }, [drawingArea]);
+  const value = React.useMemo(() => (0, _extends2.default)({
+    chartId: chartId ?? ''
+  }, drawingArea, {
+    isPointInside
+  }), [chartId, drawingArea, isPointInside]);
+  const refValue = React.useMemo(() => ({
+    isInitialized: true,
+    data: svgRef
+  }), [svgRef]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SvgContext.Provider, {
+    value: refValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawingContext.Provider, {
+      value: value,
+      children: children
+    })
+  });
+}

package/node/context/HighlightedProvider/HighlightedContext.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HighlightedContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * The data of the highlighted item.
+ * To highlight an item, you need to provide the series id and the item id.
+ * If targeting the whole series, you can omit the item id.
+ * To clear the highlight, set the value to an empty object.
+ *
+ * @example
+ * // Highlight the item with the series id 'london' and the item id 0.
+ * { seriesId: 'london', dataIndex: 0 }
+ *
+ * // Highlight the whole series with the series id 'london'.
+ * { seriesId: 'london' }
+ *
+ * // Clear the highlight.
+ * {}
+ */
+
+const HighlightedContext = exports.HighlightedContext = /*#__PURE__*/React.createContext({
+  isInitialized: false,
+  data: {
+    highlightedItem: null,
+    setHighlighted: () => {},
+    clearHighlighted: () => {},
+    isHighlighted: () => false,
+    isFaded: () => false
+  }
+});
+if (process.env.NODE_ENV !== 'production') {
+  HighlightedContext.displayName = 'HighlightedContext';
+}

package/node/context/HighlightedProvider/HighlightedProvider.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HighlightedProvider = HighlightedProvider;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
+var _HighlightedContext = require("./HighlightedContext");
+var _createIsFaded = require("./createIsFaded");
+var _createIsHighlighted = require("./createIsHighlighted");
+var _useSeries = require("../../hooks/useSeries");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["highlighted", "faded"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const mergeDeprecatedOptions = options => {
+  const _ref = options ?? {},
+    {
+      highlighted,
+      faded
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  return (0, _extends2.default)({
+    highlight: highlighted,
+    fade: faded
+  }, other);
+};
+function HighlightedProvider({
+  children,
+  highlightedItem: highlightedItemProps,
+  onHighlightChange
+}) {
+  const [highlightedItem, setHighlightedItem] = (0, _useControlled.default)({
+    controlled: highlightedItemProps,
+    default: null,
+    name: 'HighlightedProvider',
+    state: 'highlightedItem'
+  });
+  const series = (0, _useSeries.useSeries)();
+  const seriesById = React.useMemo(() => {
+    const map = new Map();
+    Object.keys(series).forEach(seriesType => {
+      const seriesData = series[seriesType];
+      Object.keys(seriesData?.series ?? {}).forEach(seriesId => {
+        const seriesItem = seriesData?.series[seriesId];
+        map.set(seriesId, mergeDeprecatedOptions(seriesItem?.highlightScope));
+      });
+    });
+    return map;
+  }, [series]);
+  const highlightScope = highlightedItem && highlightedItem.seriesId ? seriesById.get(highlightedItem.seriesId) ?? undefined : undefined;
+  const providerValue = React.useMemo(() => {
+    return {
+      isInitialized: true,
+      data: {
+        highlightScope,
+        highlightedItem,
+        setHighlighted: itemData => {
+          setHighlightedItem(itemData);
+          onHighlightChange?.(itemData);
+        },
+        clearHighlighted: () => {
+          setHighlightedItem(null);
+          onHighlightChange?.(null);
+        },
+        isHighlighted: (0, _createIsHighlighted.createIsHighlighted)(highlightScope, highlightedItem),
+        isFaded: (0, _createIsFaded.createIsFaded)(highlightScope, highlightedItem)
+      }
+    };
+  }, [highlightedItem, highlightScope, setHighlightedItem, onHighlightChange]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightedContext.HighlightedContext.Provider, {
+    value: providerValue,
+    children: children
+  });
+}
+process.env.NODE_ENV !== "production" ? HighlightedProvider.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  children: _propTypes.default.node,
+  /**
+   * The item currently highlighted. Turns highlighting into a controlled prop.
+   */
+  highlightedItem: _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+  }),
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: _propTypes.default.func
+} : void 0;

package/{esm → node}/context/HighlightedProvider/createIsFaded.js

@@ -1,4 +1,10 @@
-export const createIsFaded = (highlightScope, highlightedItem) => input => {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createIsFaded = void 0;
+const createIsFaded = (highlightScope, highlightedItem) => input => {
   if (!highlightScope) {
     return false;
   }
@@ -9,4 +15,5 @@ export const createIsFaded = (highlightScope, highlightedItem) => input => {
     return input.seriesId !== highlightedItem?.seriesId || input.dataIndex !== highlightedItem?.dataIndex;
   }
   return false;
-};
+};
+exports.createIsFaded = createIsFaded;

package/{esm → node}/context/HighlightedProvider/createIsHighlighted.js

@@ -1,4 +1,10 @@
-export const createIsHighlighted = (highlightScope, highlightedItem) => input => {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createIsHighlighted = void 0;
+const createIsHighlighted = (highlightScope, highlightedItem) => input => {
   if (!highlightScope) {
     return false;
   }
@@ -9,4 +15,5 @@ export const createIsHighlighted = (highlightScope, highlightedItem) => input =>
     return input.dataIndex === highlightedItem?.dataIndex && input.seriesId === highlightedItem?.seriesId;
   }
   return false;
-};
+};
+exports.createIsHighlighted = createIsHighlighted;

package/node/context/HighlightedProvider/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _HighlightedProvider = require("./HighlightedProvider");
+Object.keys(_HighlightedProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _HighlightedProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _HighlightedProvider[key];
+    }
+  });
+});
+var _HighlightedContext = require("./HighlightedContext");
+Object.keys(_HighlightedContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _HighlightedContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _HighlightedContext[key];
+    }
+  });
+});
+var _useHighlighted = require("./useHighlighted");
+Object.keys(_useHighlighted).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useHighlighted[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useHighlighted[key];
+    }
+  });
+});
+var _useItemHighlighted = require("./useItemHighlighted");
+Object.keys(_useItemHighlighted).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useItemHighlighted[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useItemHighlighted[key];
+    }
+  });
+});

package/node/context/HighlightedProvider/useHighlighted.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHighlighted = useHighlighted;
+var React = _interopRequireWildcard(require("react"));
+var _HighlightedContext = require("./HighlightedContext");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * A hook to get the highlighted state of the chart.
+ *
+ * Please consider using the `useItemHighlighted` hook if you need to check the state of a specific item.
+ *
+ * @returns {HighlightedState} the state of the chart
+ */
+function useHighlighted() {
+  const {
+    isInitialized,
+    data
+  } = React.useContext(_HighlightedContext.HighlightedContext);
+  if (!isInitialized) {
+    throw new Error(['MUI X: Could not find the highlighted ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+  }
+  return data;
+}

package/{esm → node}/context/HighlightedProvider/useItemHighlighted.js

@@ -1,4 +1,10 @@
-import { useHighlighted } from './useHighlighted';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useItemHighlighted = useItemHighlighted;
+var _useHighlighted = require("./useHighlighted");
 /**
  * A hook to check the highlighted state of the item.
  * This function already calculates that an item is not faded if it is highlighted.
@@ -8,8 +14,8 @@ import { useHighlighted } from './useHighlighted';
  * @param {HighlightItemData} item is the item to check
  * @returns {ItemHighlightedState} the state of the item
  */
-export function useItemHighlighted(item) {
-  const highlighted = useHighlighted();
+function useItemHighlighted(item) {
+  const highlighted = (0, _useHighlighted.useHighlighted)();
   if (!item) {
     return {
       isHighlighted: false,