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

package/node/context/SizeProvider/SizeContext.js

@@ -10,7 +10,9 @@ const SizeContext = exports.SizeContext = /*#__PURE__*/React.createContext({
   isInitialized: false,
   data: {
     hasIntrinsicSize: false,
-    containerRef: null,
+    svgRef: {
+      current: null
+    },
     height: 0,
     width: 0
   }

package/node/context/SizeProvider/useChartContainerDimensions.js

@@ -27,6 +27,10 @@ const useChartContainerDimensions = (inWidth, inHeight) => {
   const computeSize = React.useCallback(() => {
     const mainEl = rootRef?.current;
     if (!mainEl) {
+      if (process.env.NODE_ENV !== 'production') {
+        // This is mostly for internal use.
+        throw new Error([`MUI X: ChartContainer does not have a valid reference to the <svg /> element.`, 'This may be caused by a ref forwarding issue.', 'Make sure that the ref from SizedProvider is forwarded correctly.'].join('\n'));
+      }
       return {};
     }
     const win = (0, _ownerWindow.default)(mainEl);
@@ -101,7 +105,7 @@ const useChartContainerDimensions = (inWidth, inHeight) => {
   const finalWidth = inWidth ?? width;
   const finalHeight = inHeight ?? height;
   return {
-    containerRef: rootRef,
+    svgRef: rootRef,
     width: finalWidth,
     height: finalHeight,
     hasIntrinsicSize: finalWidth > 0 && finalHeight > 0,

package/node/hooks/useAxisEvents.js

@@ -14,7 +14,7 @@ var _isBandScale = require("../internals/isBandScale");
 var _getSVGPoint = require("../internals/getSVGPoint");
 var _useSvgRef = require("./useSvgRef");
 var _useDrawingArea = require("./useDrawingArea");
-var _useStore = require("../internals/useStore");
+var _useStore = require("../internals/store/useStore");
 function getAsANumber(value) {
   return value instanceof Date ? value.getTime() : value;
 }

package/node/hooks/useChartId.js

@@ -1,16 +1,14 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useChartId = useChartId;
-var React = _interopRequireWildcard(require("react"));
-var _DrawingAreaProvider = require("../context/DrawingAreaProvider");
+var _useStore = require("../internals/store/useStore");
+var _useSelector = require("../internals/store/useSelector");
+var _useChartId = require("../internals/plugins/corePlugins/useChartId/useChartId.selectors");
 function useChartId() {
-  const {
-    chartId
-  } = React.useContext(_DrawingAreaProvider.DrawingAreaContext);
-  return React.useMemo(() => chartId, [chartId]);
+  const store = (0, _useStore.useStore)();
+  return (0, _useSelector.useSelector)(store, _useChartId.selectorChartId);
 }

package/node/hooks/useInteractionItemProps.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useInteractionItemProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _context = require("../context");
-var _useStore = require("../internals/useStore");
+var _useStore = require("../internals/store/useStore");
 const useInteractionItemProps = skip => {
   const store = (0, _useStore.useStore)();
   const {
@@ -36,7 +36,9 @@ const useInteractionItemProps = skip => {
       });
     };
     const onPointerLeave = event => {
-      event.currentTarget.releasePointerCapture(event.pointerId);
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
       store.update(prev => {
         const prevItem = prev.interaction.item;
         if (prevItem === null || Object.keys(data).some(key => data[key] !== prevItem[key])) {

package/node/hooks/useSvgRef.js

@@ -1,20 +1,15 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSvgRef = useSvgRef;
-var React = _interopRequireWildcard(require("react"));
-var _SvgRefProvider = require("../context/SvgRefProvider");
+var _ChartProvider = require("../context/ChartProvider");
 function useSvgRef() {
-  const {
-    isInitialized,
-    data
-  } = React.useContext(_SvgRefProvider.SvgRefContext);
-  if (!isInitialized) {
+  const context = (0, _ChartProvider.useChartContext)();
+  if (!context) {
     throw new Error(['MUI X: Could not find the svg ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
   }
-  return data.svgRef;
+  return context.svgRef;
 }

package/node/index.js

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

package/node/internals/components/ChartsAxesGradients/ChartsAxesGradients.js

@@ -9,15 +9,12 @@ exports.ChartsAxesGradients = ChartsAxesGradients;
 exports.useChartGradient = useChartGradient;
 var React = _interopRequireWildcard(require("react"));
 var _CartesianProvider = require("../../../context/CartesianProvider");
-var _DrawingAreaProvider = require("../../../context/DrawingAreaProvider");
 var _hooks = require("../../../hooks");
 var _ChartsPiecewiseGradient = _interopRequireDefault(require("./ChartsPiecewiseGradient"));
 var _ChartsContinuousGradient = _interopRequireDefault(require("./ChartsContinuousGradient"));
 var _jsxRuntime = require("react/jsx-runtime");
 function useChartGradient() {
-  const {
-    chartId
-  } = React.useContext(_DrawingAreaProvider.DrawingAreaContext);
+  const chartId = (0, _hooks.useChartId)();
   return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}`, [chartId]);
 }
 function ChartsAxesGradients() {

package/node/internals/index.js

@@ -73,18 +73,6 @@ Object.keys(_ChartsAxesGradients).forEach(function (key) {
     }
   });
 });
-var _ResizableContainer = require("../ChartContainer/ResizableContainer");
-Object.keys(_ResizableContainer).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _ResizableContainer[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ResizableContainer[key];
-    }
-  });
-});
 var _useSeries = require("../hooks/useSeries");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useDrawingArea = require("../hooks/useDrawingArea");
@@ -224,18 +212,6 @@ Object.keys(_DrawingAreaProvider).forEach(function (key) {
     }
   });
 });
-var _InteractionProvider = require("../context/InteractionProvider");
-Object.keys(_InteractionProvider).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _InteractionProvider[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _InteractionProvider[key];
-    }
-  });
-});
 var _SeriesProvider = require("../context/SeriesProvider");
 Object.keys(_SeriesProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -309,15 +285,15 @@ Object.keys(_SizeProvider).forEach(function (key) {
     }
   });
 });
-var _SvgRefProvider = require("../context/SvgRefProvider");
-Object.keys(_SvgRefProvider).forEach(function (key) {
+var _ChartProvider = require("../context/ChartProvider");
+Object.keys(_ChartProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _SvgRefProvider[key]) return;
+  if (key in exports && exports[key] === _ChartProvider[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _SvgRefProvider[key];
+      return _ChartProvider[key];
     }
   });
 });

package/node/internals/plugins/allPlugins.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ALL_PLUGINS = void 0;
+var _useChartInteraction = require("./featurePlugins/useChartInteraction");
+// This file should be removed after creating all plugins  in favor of a file per chart type.
+
+const ALL_PLUGINS = exports.ALL_PLUGINS = [_useChartInteraction.useChartInteraction];

package/node/internals/plugins/corePlugins/corePlugins.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CHART_CORE_PLUGINS = void 0;
+var _useChartId = require("./useChartId");
+/**
+ * Internal plugins that create the tools used by the other plugins.
+ * These plugins are used by the Charts components.
+ */
+const CHART_CORE_PLUGINS = exports.CHART_CORE_PLUGINS = [_useChartId.useChartId];

package/node/internals/plugins/corePlugins/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CHART_CORE_PLUGINS", {
+  enumerable: true,
+  get: function () {
+    return _corePlugins.CHART_CORE_PLUGINS;
+  }
+});
+var _corePlugins = require("./corePlugins");

package/node/internals/plugins/corePlugins/useChartId/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useChartId", {
+  enumerable: true,
+  get: function () {
+    return _useChartId.useChartId;
+  }
+});
+var _useChartId = require("./useChartId");

package/node/internals/plugins/corePlugins/useChartId/useChartId.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartId = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useChartId = require("./useChartId.utils");
+const useChartId = ({
+  params,
+  store
+}) => {
+  React.useEffect(() => {
+    store.update(prevState => {
+      if (params.id === prevState.id.providedChartId && prevState.id.chartId !== undefined) {
+        return prevState;
+      }
+      return (0, _extends2.default)({}, prevState, {
+        id: (0, _extends2.default)({}, prevState.id, {
+          chartId: params.id ?? (0, _useChartId.createChartDefaultId)()
+        })
+      });
+    });
+  }, [store, params.id]);
+  return {};
+};
+exports.useChartId = useChartId;
+useChartId.params = {
+  id: true
+};
+useChartId.getInitialState = ({
+  id
+}) => ({
+  id: {
+    chartId: (0, _useChartId.createChartDefaultId)(),
+    providedChartId: id
+  }
+});

package/node/internals/plugins/corePlugins/useChartId/useChartId.selectors.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorChartId = void 0;
+var _selectors = require("../../utils/selectors");
+const selectorChartIdState = state => state.id;
+
+/**
+ * Get the id attribute of the chart.
+ * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
+ * @returns {string} The id attribute of the chart.
+ */
+const selectorChartId = exports.selectorChartId = (0, _selectors.createSelector)(selectorChartIdState, idState => idState.chartId);

package/node/internals/plugins/corePlugins/useChartId/useChartId.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/internals/plugins/corePlugins/useChartId/useChartId.utils.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createChartDefaultId = void 0;
+let globalChartDefaultId = 0;
+const createChartDefaultId = () => {
+  globalChartDefaultId += 1;
+  return `mui-chart-${globalChartDefaultId}`;
+};
+exports.createChartDefaultId = createChartDefaultId;

package/node/internals/plugins/featurePlugins/useChartInteraction/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useChartInteraction: true
+};
+Object.defineProperty(exports, "useChartInteraction", {
+  enumerable: true,
+  get: function () {
+    return _useChartInteraction.useChartInteraction;
+  }
+});
+var _useChartInteraction = require("./useChartInteraction");
+var _useChartInteraction2 = require("./useChartInteraction.selectors");
+Object.keys(_useChartInteraction2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartInteraction2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartInteraction2[key];
+    }
+  });
+});

package/node/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartInteraction = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+const useChartInteraction = ({
+  store
+}) => {
+  const cleanInteraction = (0, _useEventCallback.default)(() => {
+    store.update(prev => (0, _extends2.default)({}, prev, {
+      interaction: (0, _extends2.default)({}, prev.interaction, {
+        axis: {
+          x: null,
+          y: null
+        },
+        item: null
+      })
+    }));
+  });
+  const setItemInteraction = (0, _useEventCallback.default)(newItem => {
+    store.update(prev => (0, _extends2.default)({}, prev, {
+      interaction: (0, _extends2.default)({}, prev.interaction, {
+        item: newItem
+      })
+    }));
+  });
+  const setAxisInteraction = (0, _useEventCallback.default)(({
+    x: newStateX,
+    y: newStateY
+  }) => {
+    store.update(prev => (0, _extends2.default)({}, prev, {
+      interaction: (0, _extends2.default)({}, prev.interaction, {
+        axis: (0, _extends2.default)({}, prev.interaction.axis, prev.interaction.axis.x?.index !== newStateX?.index || prev.interaction.axis.x?.value !== newStateX?.value ? {
+          x: newStateX
+        } : {}, prev.interaction.axis.y?.index !== newStateY?.index || prev.interaction.axis.y?.value !== newStateY?.value ? {
+          y: newStateY
+        } : {})
+      })
+    }));
+  });
+  const enableVoronoid = (0, _useEventCallback.default)(() => {
+    store.update(prev => (0, _extends2.default)({}, prev, {
+      interaction: (0, _extends2.default)({}, prev.interaction, {
+        isVoronoiEnabled: true
+      })
+    }));
+  });
+  const disableVoronoid = (0, _useEventCallback.default)(() => {
+    store.update(prev => (0, _extends2.default)({}, prev, {
+      interaction: (0, _extends2.default)({}, prev.interaction, {
+        isVoronoiEnabled: false
+      })
+    }));
+  });
+  return {
+    params: {},
+    instance: {
+      cleanInteraction,
+      setItemInteraction,
+      setAxisInteraction,
+      enableVoronoid,
+      disableVoronoid
+    }
+  };
+};
+exports.useChartInteraction = useChartInteraction;
+useChartInteraction.getInitialState = () => ({
+  interaction: {
+    item: null,
+    axis: {
+      x: null,
+      y: null
+    },
+    isVoronoiEnabled: false
+  }
+});
+useChartInteraction.params = {};

package/node/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorChartsInteractionYAxisIsDefined = exports.selectorChartsInteractionYAxis = exports.selectorChartsInteractionXAxisIsDefined = exports.selectorChartsInteractionXAxis = exports.selectorChartsInteractionItemIsDefined = exports.selectorChartsInteractionItem = exports.selectorChartsInteractionIsVoronoiEnabled = exports.selectorChartsInteractionAxis = void 0;
+var _selectors = require("../../utils/selectors");
+const selectInteraction = state => state.interaction;
+const selectorChartsInteractionItem = exports.selectorChartsInteractionItem = (0, _selectors.createSelector)(selectInteraction, interaction => interaction.item);
+const selectorChartsInteractionAxis = exports.selectorChartsInteractionAxis = (0, _selectors.createSelector)(selectInteraction, interaction => interaction.axis);
+const selectorChartsInteractionXAxis = exports.selectorChartsInteractionXAxis = (0, _selectors.createSelector)(selectInteraction, interaction => interaction.axis.x);
+const selectorChartsInteractionYAxis = exports.selectorChartsInteractionYAxis = (0, _selectors.createSelector)(selectInteraction, interaction => interaction.axis.y);
+const selectorChartsInteractionItemIsDefined = exports.selectorChartsInteractionItemIsDefined = (0, _selectors.createSelector)(selectorChartsInteractionItem, item => item !== null);
+const selectorChartsInteractionXAxisIsDefined = exports.selectorChartsInteractionXAxisIsDefined = (0, _selectors.createSelector)(selectorChartsInteractionXAxis, x => x !== null);
+const selectorChartsInteractionYAxisIsDefined = exports.selectorChartsInteractionYAxisIsDefined = (0, _selectors.createSelector)(selectorChartsInteractionYAxis, y => y !== null);
+const selectorChartsInteractionIsVoronoiEnabled = exports.selectorChartsInteractionIsVoronoiEnabled = (0, _selectors.createSelector)(selectInteraction, interaction => interaction.isVoronoiEnabled);

package/node/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/internals/plugins/models/chart.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/internals/plugins/models/helpers.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/internals/plugins/models/index.js

@@ -2,4 +2,37 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
+});
+var _helpers = require("./helpers");
+Object.keys(_helpers).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _helpers[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _helpers[key];
+    }
+  });
+});
+var _plugin = require("./plugin");
+Object.keys(_plugin).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _plugin[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _plugin[key];
+    }
+  });
+});
+var _chart = require("./chart");
+Object.keys(_chart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _chart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _chart[key];
+    }
+  });
 });

package/node/internals/plugins/models/plugin.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/internals/plugins/utils/ChartStore.js

@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartStore = void 0;
-// For now this is fixed. Will need to support generic if we add plugins
-
 class ChartStore {
   constructor(value) {
     this.value = void 0;

package/node/internals/store/useCharts.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartApiInitialization = useChartApiInitialization;
+exports.useCharts = useCharts;
+var React = _interopRequireWildcard(require("react"));
+var _ChartStore = require("../plugins/utils/ChartStore");
+var _corePlugins = require("../plugins/corePlugins");
+function useChartApiInitialization(inputApiRef) {
+  const fallbackPublicApiRef = React.useRef({});
+  if (inputApiRef) {
+    if (inputApiRef.current == null) {
+      // eslint-disable-next-line react-compiler/react-compiler
+      inputApiRef.current = {};
+    }
+    return inputApiRef.current;
+  }
+  return fallbackPublicApiRef.current;
+}
+let globalId = 0;
+function useCharts(inPlugins, props) {
+  const plugins = React.useMemo(() => [..._corePlugins.CHART_CORE_PLUGINS, ...inPlugins], [inPlugins]);
+  const pluginParams = {}; // To generate when plugins use params.
+  const instanceRef = React.useRef({});
+  const instance = instanceRef.current;
+  const publicAPI = useChartApiInitialization(props.apiRef);
+  const innerSvgRef = React.useRef(null);
+  const storeRef = React.useRef(null);
+  if (storeRef.current == null) {
+    // eslint-disable-next-line react-compiler/react-compiler
+    globalId += 1;
+    const initialState = {
+      // TODO remove when the interaction moves to plugin
+      interaction: {
+        item: null,
+        axis: {
+          x: null,
+          y: null
+        }
+      },
+      cacheKey: {
+        id: globalId
+      }
+    };
+    plugins.forEach(plugin => {
+      if (plugin.getInitialState) {
+        Object.assign(initialState, plugin.getInitialState({}));
+      }
+    });
+    storeRef.current = new _ChartStore.ChartStore(initialState);
+  }
+  const runPlugin = plugin => {
+    const pluginResponse = plugin({
+      instance,
+      params: pluginParams,
+      plugins: plugins,
+      store: storeRef.current,
+      svgRef: innerSvgRef
+    });
+    if (pluginResponse.publicAPI) {
+      Object.assign(publicAPI, pluginResponse.publicAPI);
+    }
+    if (pluginResponse.instance) {
+      Object.assign(instance, pluginResponse.instance);
+    }
+  };
+  plugins.forEach(runPlugin);
+  const contextValue = React.useMemo(() => ({
+    store: storeRef.current,
+    publicAPI,
+    instance,
+    svgRef: innerSvgRef
+  }), [instance, publicAPI]);
+  return {
+    contextValue
+  };
+}

package/node/internals/store/useCharts.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/internals/{useStore.js → store/useStore.js}

@@ -1,24 +1,23 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStore = useStore;
-var React = _interopRequireWildcard(require("react"));
-var _InteractionProvider = require("../context/InteractionProvider");
+var _ChartProvider = require("../../context/ChartProvider");
+// This hook should be removed because user and us should not interact with the store directly, but with public/private APIs
 function useStore(skipError) {
-  const charts = React.useContext(_InteractionProvider.ChartsContext);
+  const context = (0, _ChartProvider.useChartContext)();
   if (skipError) {
     // TODO: Remove once store is used by all charts.
     // This line is only for `useAxisEvents` which is in the surface of the Gauge.
     // But the Gauge don't have store yet because it does not need the interaction provider.
     // Will be fixed when every thing move to the store since every component will have access to it.
     // @ts-ignore
-    return charts?.store;
+    return context?.store;
   }
-  if (!charts) {
+  if (!context) {
     throw new Error(['MUI X: Could not find the charts context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
   }
-  return charts.store;
+  return context.store;
 }