@mui/x-charts 8.5.2 → 8.6.0

package/esm/hooks/useItemHighlighted.js

@@ -14,8 +14,8 @@ import { selectorChartsIsFaded, selectorChartsIsHighlighted } from "../internals
  */
 export function useItemHighlighted(item) {
   const store = useStore();
-  const isHighlighted = useSelector(store, selectorChartsIsHighlighted, item);
-  const isFaded = useSelector(store, selectorChartsIsFaded, item);
+  const isHighlighted = useSelector(store, selectorChartsIsHighlighted, [item]);
+  const isFaded = useSelector(store, selectorChartsIsFaded, [item]);
   return {
     isHighlighted,
     isFaded: !isHighlighted && isFaded

package/esm/index.js

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

package/esm/internals/components/NotRendered.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+/**
+ * This component is used to assert that a certain component should not be rendered.
+ * It is used in cases where we want to apply styles to a component that is not rendered because we use the `as` prop (introduced by `styled`) to replace the rendered component.
+ * We need it because we don't know the component that will be rendered at the time of writing the styles.
+ *
+ * @param _props Not used
+ */
+export declare function NotRendered<T>(_props: T): React.ReactNode;

package/esm/internals/components/NotRendered.js

@@ -0,0 +1,10 @@
+/**
+ * This component is used to assert that a certain component should not be rendered.
+ * It is used in cases where we want to apply styles to a component that is not rendered because we use the `as` prop (introduced by `styled`) to replace the rendered component.
+ * We need it because we don't know the component that will be rendered at the time of writing the styles.
+ *
+ * @param _props Not used
+ */
+export function NotRendered(_props) {
+  throw new Error('Failed assertion: should not be rendered');
+}

package/esm/internals/createSeriesSelectorOfType.js

@@ -31,11 +31,11 @@ export function createSeriesSelectorsOfType(seriesType) {
   });
   return ids => {
     const store = useStore();
-    return useSelector(store, selectorSeriesWithIds, ids, fastArrayCompare);
+    return useSelector(store, selectorSeriesWithIds, [ids], fastArrayCompare);
   };
 }
 export function createAllSeriesSelectorOfType(seriesType) {
-  const selectorSeries = createSelector(selectorChartSeriesProcessed, processedSeries => processedSeries[seriesType]);
+  const selectorSeries = createSelector([selectorChartSeriesProcessed], processedSeries => processedSeries[seriesType]);
   return () => {
     const store = useStore();
     return useSelector(store, selectorSeries);

package/esm/internals/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./components/ChartsAxesGradients/index.js";
 export * from "./components/ChartsWrapper/index.js";
 export * from "../ChartsLabel/ChartsLabelMark.js";
+export * from "./components/NotRendered.js";
 export { useSeries } from "../hooks/useSeries.js";
 export { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 export { useDrawingArea } from "../hooks/useDrawingArea.js";

package/esm/internals/index.js

@@ -2,6 +2,7 @@
 export * from "./components/ChartsAxesGradients/index.js";
 export * from "./components/ChartsWrapper/index.js";
 export * from "../ChartsLabel/ChartsLabelMark.js";
+export * from "./components/NotRendered.js";
 
 // hooks
 export { useSeries } from "../hooks/useSeries.js";

package/esm/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.selectors.d.ts

@@ -1,31 +1,5 @@
-import { ChartRootSelector } from "../../utils/selectors.js";
-import type { UseChartAnimationSignature } from "./useChartAnimation.types.js";
-export declare const selectorChartSkipAnimation: ((state: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("./useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+export declare const selectorChartSkipAnimation: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("./useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => boolean) & {
-  clearCache: () => void;
-  resultsCount: () => number;
-  resetResultsCount: () => void;
 } & {
-  resultFunc: (resultFuncArgs_0: {
-    skip: boolean;
-    skipAnimationRequests: number;
-  }) => boolean;
-  memoizedResultFunc: ((resultFuncArgs_0: {
-    skip: boolean;
-    skipAnimationRequests: number;
-  }) => boolean) & {
-    clearCache: () => void;
-    resultsCount: () => number;
-    resetResultsCount: () => void;
-  };
-  lastResult: () => boolean;
-  dependencies: [ChartRootSelector<UseChartAnimationSignature>];
-  recomputations: () => number;
-  resetRecomputations: () => void;
-  dependencyRecomputations: () => number;
-  resetDependencyRecomputations: () => void;
-} & {
-  memoize: typeof import("reselect").weakMapMemoize;
-  argsMemoize: typeof import("reselect").weakMapMemoize;
-};
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, boolean, any[]>;

package/esm/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.selectors.js

@@ -1,3 +1,3 @@
 import { createSelector } from "../../utils/selectors.js";
 const selectorChartAnimationState = state => state.animation;
-export const selectorChartSkipAnimation = createSelector(selectorChartAnimationState, state => state.skip || state.skipAnimationRequests > 0);
+export const selectorChartSkipAnimation = createSelector([selectorChartAnimationState], state => state.skip || state.skipAnimationRequests > 0);

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

@@ -8,6 +8,7 @@ import { useSelector } from "../../../store/useSelector.js";
 import { DEFAULT_MARGINS } from "../../../../constants/index.js";
 import { selectorChartDrawingArea } from "./useChartDimensions.selectors.js";
 import { defaultizeMargin } from "../../../defaultizeMargin.js";
+import { getSVGPoint } from "../../../getSVGPoint.js";
 const MAX_COMPUTE_RUN = 10;
 export const useChartDimensions = ({
   params,
@@ -149,16 +150,43 @@ export const useChartDimensions = ({
   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 (targetElement && targetElement.closest('[data-drawing-container]')) {
+    if (targetElement && 'closest' in targetElement && targetElement.closest('[data-drawing-container]')) {
       return true;
     }
     return isXInside(x) && isYInside(y);
   }, [isXInside, isYInside]);
+  const isElementInside = React.useCallback(element => {
+    const svgElement = svgRef.current;
+    if (!element || !(element instanceof Element) || !svgElement) {
+      return false;
+    }
+    // For element allowed to overflow, wrapping them in <g data-drawing-container /> make them fully part of the drawing area.
+    if (element.closest('[data-drawing-container]')) {
+      return true;
+    }
+    const rect = element.getBoundingClientRect();
+    const {
+      x: left,
+      y: top
+    } = getSVGPoint(svgElement, {
+      clientX: rect.left,
+      clientY: rect.top
+    });
+    const {
+      x: right,
+      y: bottom
+    } = getSVGPoint(svgElement, {
+      clientX: rect.right,
+      clientY: rect.bottom
+    });
+    return isXInside(left) && isXInside(right) && isYInside(top) && isYInside(bottom);
+  }, [isXInside, isYInside, svgRef]);
   return {
     instance: {
       isPointInside,
       isXInside,
-      isYInside
+      isYInside,
+      isElementInside
     }
   };
 };