@mui/x-charts 8.5.2 → 8.6.0

package/esm/internals/plugins/featurePlugins/useChartVoronoi/useChartVoronoi.selectors.d.ts

@@ -1,29 +1,5 @@
-import { ChartRootSelector } from "../../utils/selectors.js";
-import { UseChartVoronoiSignature } from "./useChartVoronoi.types.js";
-export declare const selectorChartsVoronoiIsVoronoiEnabled: ((state: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("./useChartVoronoi.types.js").UseChartVoronoiState & Partial<{}> & {
+export declare const selectorChartsVoronoiIsVoronoiEnabled: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("./useChartVoronoi.types.js").UseChartVoronoiState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => boolean | undefined) & {
-  clearCache: () => void;
-  resultsCount: () => number;
-  resetResultsCount: () => void;
 } & {
-  resultFunc: (resultFuncArgs_0: {
-    isVoronoiEnabled?: boolean;
-  }) => boolean | undefined;
-  memoizedResultFunc: ((resultFuncArgs_0: {
-    isVoronoiEnabled?: boolean;
-  }) => boolean | undefined) & {
-    clearCache: () => void;
-    resultsCount: () => number;
-    resetResultsCount: () => void;
-  };
-  lastResult: () => boolean | undefined;
-  dependencies: [ChartRootSelector<UseChartVoronoiSignature>];
-  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 | undefined, any[]>;

package/esm/internals/plugins/featurePlugins/useChartVoronoi/useChartVoronoi.selectors.js

@@ -1,3 +1,3 @@
 import { createSelector } from "../../utils/selectors.js";
 const selectVoronoi = state => state.voronoi;
-export const selectorChartsVoronoiIsVoronoiEnabled = createSelector(selectVoronoi, voronoi => voronoi?.isVoronoiEnabled);
+export const selectorChartsVoronoiIsVoronoiEnabled = createSelector([selectVoronoi], voronoi => voronoi?.isVoronoiEnabled);

package/esm/internals/plugins/featurePlugins/useChartZAxis/useChartZAxis.selectors.d.ts

@@ -1,45 +1,10 @@
-import { ChartState } from "../../models/chart.js";
-import { UseChartZAxisSignature } from "./useChartZAxis.types.js";
-export declare const selectorChartZAxis: ((state: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("./useChartZAxis.types.js").UseChartZAxisState & Partial<{}> & {
+export declare const selectorChartZAxis: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("./useChartZAxis.types.js").UseChartZAxisState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => {
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, {
   axis: {
     [axisId: string]: import("../../../index.js").ZAxisDefaultized;
   };
   axisIds: import("../../../index.js").AxisId[];
-}) & {
-  clearCache: () => void;
-  resultsCount: () => number;
-  resetResultsCount: () => void;
-} & {
-  resultFunc: (resultFuncArgs_0: ChartState<[UseChartZAxisSignature]>) => {
-    axis: {
-      [axisId: string]: import("../../../index.js").ZAxisDefaultized;
-    };
-    axisIds: import("../../../index.js").AxisId[];
-  };
-  memoizedResultFunc: ((resultFuncArgs_0: ChartState<[UseChartZAxisSignature]>) => {
-    axis: {
-      [axisId: string]: import("../../../index.js").ZAxisDefaultized;
-    };
-    axisIds: import("../../../index.js").AxisId[];
-  }) & {
-    clearCache: () => void;
-    resultsCount: () => number;
-    resetResultsCount: () => void;
-  };
-  lastResult: () => {
-    axis: {
-      [axisId: string]: import("../../../index.js").ZAxisDefaultized;
-    };
-    axisIds: import("../../../index.js").AxisId[];
-  };
-  dependencies: [(state: ChartState<[UseChartZAxisSignature]>) => ChartState<[UseChartZAxisSignature]>];
-  recomputations: () => number;
-  resetRecomputations: () => void;
-  dependencyRecomputations: () => number;
-  resetDependencyRecomputations: () => void;
-} & {
-  memoize: typeof import("reselect").weakMapMemoize;
-  argsMemoize: typeof import("reselect").weakMapMemoize;
-};
+}, []>;

package/esm/internals/plugins/utils/selectors.d.ts

@@ -1,10 +1,22 @@
-import { CreateSelectorFunction } from 'reselect';
-import { ChartAnyPluginSignature, ChartState } from "../models/index.js";
-export type ChartRootSelector<TSignature extends ChartAnyPluginSignature> = <TSignatures extends [TSignature]>(state: ChartState<TSignatures>) => TSignature['state'][keyof TSignature['state']];
-export type ChartOptionalRootSelector<TSignature extends ChartAnyPluginSignature> = <TSignatures extends [TSignature]>(state: ChartState<[], TSignatures>) => TSignature['state'][keyof TSignature['state']] | undefined;
-export type ChartsSelector<TState, TArgs, TResult> = (state: TState, args: TArgs) => TResult;
+import { SelectorArray, Combiner, Selector, GetStateFromSelectors, GetParamsFromSelectors, CreateSelectorOptions } from 'reselect';
+import { ChartAnyPluginSignature, ChartState, ChartStateCacheKey } from "../models/index.js";
+export type ChartRootSelector<TSignature extends ChartAnyPluginSignature> = Selector<ChartState<[TSignature]>, TSignature['state'][keyof TSignature['state']]>;
+export type ChartOptionalRootSelector<TSignature extends ChartAnyPluginSignature> = Selector<ChartState<[], [TSignature]>, TSignature['state'][keyof TSignature['state']] | undefined>;
+export type ChartsSelector<Signatures extends readonly ChartAnyPluginSignature[] = [], OptionalSignatures extends readonly ChartAnyPluginSignature[] = [], Result = unknown, Args extends readonly any[] = []> = Selector<ChartState<Signatures, OptionalSignatures>, Result, Args>;
+type InterruptRecursion = NonNullable<unknown>;
+type AnyFunction = (...args: any[]) => any;
+export type Simplify<T> = T extends AnyFunction ? T : { [KeyType in keyof T]: T[KeyType] } & NonNullable<unknown>;
 /**
  * Method wrapping reselect's createSelector to provide caching for chart instances.
  *
  */
-export declare const createSelector: CreateSelectorFunction;
+export declare const createSelector: <InputSelectors extends SelectorArray<any>, Result>(...createSelectorArgs: [inputSelectors: [...InputSelectors], combiner: Combiner<InputSelectors, Result>, createSelectorOptions?: Simplify<CreateSelectorOptions<any,
+// MemoizeFunction,
+any,
+// ArgsMemoizeFunction,
+any,
+// OverrideMemoizeFunction,
+any>>]) => Selector<GetStateFromSelectors<InputSelectors> & {
+  cacheKey: ChartStateCacheKey;
+}, Result, GetParamsFromSelectors<InputSelectors> & InterruptRecursion>;
+export {};

package/esm/internals/plugins/utils/selectors.js

@@ -12,7 +12,7 @@ const cache = new WeakMap();
  *
  */
 export const createSelector = (...createSelectorArgs) => {
-  const selector = (state, selectorArgs) => {
+  const selector = (state, ...selectorArgs) => {
     const cacheKey = state.cacheKey;
 
     // If there is no cache for the current chart instance, create one.
@@ -25,13 +25,13 @@ export const createSelector = (...createSelectorArgs) => {
     // If there is a cached selector, execute it.
     const cachedSelector = cacheForCurrentChartInstance.get(createSelectorArgs);
     if (cachedSelector) {
-      return cachedSelector(state, selectorArgs);
+      return cachedSelector(state, ...selectorArgs);
     }
 
     // Otherwise, create a new selector and cache it and execute it.
     const fn = reselectCreateSelector(...createSelectorArgs);
     cacheForCurrentChartInstance.set(createSelectorArgs, fn);
-    return fn(state, selectorArgs);
+    return fn(state, ...selectorArgs);
   };
   return selector;
 };

package/esm/internals/store/useSelector.d.ts

@@ -1,4 +1,4 @@
-import { ChartAnyPluginSignature, ChartState } from "../plugins/models/index.js";
+import { ChartAnyPluginSignature } from "../plugins/models/index.js";
 import { ChartsSelector } from "../plugins/utils/selectors.js";
 import { ChartStore } from "../plugins/utils/ChartStore.js";
-export declare const useSelector: <TSignatures extends readonly ChartAnyPluginSignature[], TOptionalSignatures extends readonly ChartAnyPluginSignature[], TArgs, TValue>(store: ChartStore<TSignatures, TOptionalSignatures>, selector: ChartsSelector<ChartState<TSignatures, TOptionalSignatures>, TArgs, TValue>, args?: TArgs, equals?: (a: TValue, b: TValue) => boolean) => TValue;
+export declare const useSelector: <TSignatures extends readonly ChartAnyPluginSignature[], TOptionalSignatures extends readonly ChartAnyPluginSignature[], TArgs extends readonly any[], TResult = unknown>(store: ChartStore<TSignatures, TOptionalSignatures>, selector: ChartsSelector<TSignatures, TOptionalSignatures, TResult, TArgs>, args?: [TArgs] extends [never] ? [] : TArgs, equals?: (a: TResult, b: TResult) => boolean) => TResult;

package/esm/internals/store/useSelector.js

@@ -2,7 +2,7 @@
  * More info: https://github.com/mui/mui-x/issues/18303#issuecomment-2958392341 */
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 const defaultCompare = Object.is;
-export const useSelector = (store, selector, args = undefined, equals = defaultCompare) => {
-  const selectorWithArgs = state => selector(state, args);
+export const useSelector = (store, selector, args = [], equals = defaultCompare) => {
+  const selectorWithArgs = state => selector(state, ...args);
   return useSyncExternalStoreWithSelector(store.subscribe, store.getSnapshot, store.getSnapshot, selectorWithArgs, equals);
 };

package/esm/locales/enUS.d.ts

@@ -10,6 +10,9 @@ export declare const enUS: {
           noData?: string | undefined;
           zoomIn?: string | undefined;
           zoomOut?: string | undefined;
+          toolbarExport?: string | undefined;
+          toolbarExportPrint?: string | undefined;
+          toolbarExportImage?: ((mimeType: import("./utils/imageMimeTypes.js").ChartImageExportMimeType | (string & {})) => string) | undefined;
         };
       };
     };

package/esm/locales/enUS.js

@@ -1,13 +1,19 @@
+import { imageMimeTypes } from "./utils/imageMimeTypes.js";
 import { getChartsLocalization } from "./utils/getChartsLocalization.js";
 
 // This object is not Partial<ChartsLocaleText> because it is the default values
 
 export const enUSLocaleText = {
-  // Overlay
+  /* Overlay */
   loading: 'Loading data…',
   noData: 'No data to display',
+  /* Toolbar */
   zoomIn: 'Zoom in',
-  zoomOut: 'Zoom out'
+  zoomOut: 'Zoom out',
+  toolbarExport: 'Export',
+  /* Toolbar Export Menu */
+  toolbarExportPrint: 'Print',
+  toolbarExportImage: mimeType => `Export as ${imageMimeTypes[mimeType] ?? mimeType}`
 };
 export const DEFAULT_LOCALE = enUSLocaleText;
 export const enUS = getChartsLocalization(enUSLocaleText);

package/esm/locales/frFR.d.ts

@@ -9,6 +9,9 @@ export declare const frFR: {
           noData?: string | undefined;
           zoomIn?: string | undefined;
           zoomOut?: string | undefined;
+          toolbarExport?: string | undefined;
+          toolbarExportPrint?: string | undefined;
+          toolbarExportImage?: ((mimeType: import("./utils/imageMimeTypes.js").ChartImageExportMimeType | (string & {})) => string) | undefined;
         };
       };
     };

package/esm/locales/frFR.js

@@ -3,7 +3,14 @@ export const frFRLocalText = {
   // Overlay
   loading: 'Chargement…',
   noData: 'Pas de données'
+
+  // Toolbar
   // zoomIn: 'Zoom in',
   // zoomOut: 'Zoom out',
+  // toolbarExport: 'Export',
+
+  // Toolbar Export Menu
+  // toolbarExportPrint: 'Print',
+  // toolbarExportImage: mimeType => `Export as ${imageMimeTypes[mimeType] ?? mimeType}`,
 };
 export const frFR = getChartsLocalization(frFRLocalText);

package/esm/locales/ptBR.d.ts

@@ -9,6 +9,9 @@ export declare const ptBR: {
           noData?: string | undefined;
           zoomIn?: string | undefined;
           zoomOut?: string | undefined;
+          toolbarExport?: string | undefined;
+          toolbarExportPrint?: string | undefined;
+          toolbarExportImage?: ((mimeType: import("./utils/imageMimeTypes.js").ChartImageExportMimeType | (string & {})) => string) | undefined;
         };
       };
     };

package/esm/locales/ptBR.js

@@ -1,9 +1,15 @@
+import { imageMimeTypes } from "./utils/imageMimeTypes.js";
 import { getChartsLocalization } from "./utils/getChartsLocalization.js";
 export const ptBRLocaleText = {
   // Overlay
   loading: 'Carregando dados…',
   noData: 'Sem dados para exibir',
+  // Toolbar
   zoomIn: 'Aumentar zoom',
-  zoomOut: 'Diminuir zoom'
+  zoomOut: 'Diminuir zoom',
+  toolbarExport: 'Exportar',
+  // Toolbar Export Menu
+  toolbarExportPrint: 'Imprimir',
+  toolbarExportImage: mimeType => `Exportar como ${imageMimeTypes[mimeType] ?? mimeType}`
 };
 export const ptBR = getChartsLocalization(ptBRLocaleText);

package/esm/locales/ptPT.d.ts

@@ -9,6 +9,9 @@ export declare const ptPT: {
           noData?: string | undefined;
           zoomIn?: string | undefined;
           zoomOut?: string | undefined;
+          toolbarExport?: string | undefined;
+          toolbarExportPrint?: string | undefined;
+          toolbarExportImage?: ((mimeType: import("./utils/imageMimeTypes.js").ChartImageExportMimeType | (string & {})) => string) | undefined;
         };
       };
     };

package/esm/locales/ptPT.js

@@ -1,9 +1,15 @@
+import { imageMimeTypes } from "./utils/imageMimeTypes.js";
 import { getChartsLocalization } from "./utils/getChartsLocalization.js";
 export const ptPTLocaleText = {
   // Overlay
   loading: 'Carregando dados…',
   noData: 'Sem dados para mostrar',
+  // Toolbar
   zoomIn: 'Aumentar zoom',
-  zoomOut: 'Diminuir zoom'
+  zoomOut: 'Diminuir zoom',
+  toolbarExport: 'Exportar',
+  // Toolbar Export Menu
+  toolbarExportPrint: 'Imprimir',
+  toolbarExportImage: mimeType => `Exportar como ${imageMimeTypes[mimeType] ?? mimeType}`
 };
 export const ptPT = getChartsLocalization(ptPTLocaleText);

package/esm/locales/utils/chartsLocaleTextApi.d.ts

@@ -1,3 +1,4 @@
+import { ChartImageExportMimeType } from "./imageMimeTypes.js";
 export interface ChartsLocaleText {
   /**
    * Title displayed in the overlay if `loading` is `true`.
@@ -15,5 +16,21 @@ export interface ChartsLocaleText {
    * Tooltip text shown when hovering over the zoom out button.
    */
   zoomOut: string;
+  /**
+   * Text for the export button tooltip in the toolbar.
+   */
+  toolbarExport: string;
+  /**
+   * Text for the print button in the toolbar's export menu.
+   */
+  toolbarExportPrint: string;
+  /**
+   * Text for an "Export as {image type}" button in the toolbar's export menu.
+   * The only format supported in all browsers is 'image/png'.
+   *
+   * @param {string} mimeType The MIME type of the image to export, e.g., 'image/png'.
+   * @returns {string} The localized string for an export image button.
+   */
+  toolbarExportImage: (mimeType: ChartImageExportMimeType | (string & {})) => string;
 }
 export type ChartsTranslationKeys = keyof ChartsLocaleText;

package/esm/locales/utils/getChartsLocalization.d.ts

@@ -13,6 +13,9 @@ export declare const getChartsLocalization: (chartsTranslations: Partial<ChartsL
           noData?: string | undefined;
           zoomIn?: string | undefined;
           zoomOut?: string | undefined;
+          toolbarExport?: string | undefined;
+          toolbarExportPrint?: string | undefined;
+          toolbarExportImage?: ((mimeType: import("./imageMimeTypes.js").ChartImageExportMimeType | (string & {})) => string) | undefined;
         };
       };
     };

package/esm/locales/utils/imageMimeTypes.d.ts

@@ -0,0 +1,2 @@
+export declare const imageMimeTypes: Record<string, string | undefined>;
+export type ChartImageExportMimeType = 'image/png' | 'image/jpeg' | 'image/webp';

package/esm/locales/utils/imageMimeTypes.js

@@ -0,0 +1,5 @@
+export const imageMimeTypes = {
+  'image/png': 'PNG',
+  'image/jpeg': 'JPEG',
+  'image/webp': 'WebP'
+};

package/esm/models/slots/chartsBaseSlotProps.d.ts

@@ -7,14 +7,18 @@ export type ChartBaseCommonProps<T = HTMLElement> = React.DOMAttributes<T> & {
 };
 export type ChartBaseIconProps = ChartBaseCommonProps<SVGSVGElement> & {
   titleAccess?: string;
+  fontSize?: 'small' | 'medium' | 'large' | 'inherit';
 };
 export type ChartBaseButtonProps = ChartBaseCommonProps & {
   ref?: React.Ref<HTMLButtonElement>;
+  id?: string;
   disabled?: boolean;
   tabIndex?: number;
 };
 export type ChartBaseIconButtonProps = ChartBaseCommonProps & {
   ref?: React.Ref<HTMLButtonElement>;
+  id?: string;
   disabled?: boolean;
   tabIndex?: number;
+  size?: 'small' | 'medium' | 'large';
 };

package/hooks/useItemHighlighted.js

@@ -19,8 +19,8 @@ var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHi
  */
 function useItemHighlighted(item) {
   const store = (0, _useStore.useStore)();
-  const isHighlighted = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartsIsHighlighted, item);
-  const isFaded = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartsIsFaded, item);
+  const isHighlighted = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartsIsHighlighted, [item]);
+  const isFaded = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartsIsFaded, [item]);
   return {
     isHighlighted,
     isFaded: !isHighlighted && isFaded

package/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/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/internals/components/NotRendered.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NotRendered = NotRendered;
+/**
+ * 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
+ */
+function NotRendered(_props) {
+  throw new Error('Failed assertion: should not be rendered');
+}

package/internals/createSeriesSelectorOfType.js

@@ -38,11 +38,11 @@ function createSeriesSelectorsOfType(seriesType) {
   });
   return ids => {
     const store = (0, _useStore.useStore)();
-    return (0, _useSelector.useSelector)(store, selectorSeriesWithIds, ids, _fastArrayCompare.fastArrayCompare);
+    return (0, _useSelector.useSelector)(store, selectorSeriesWithIds, [ids], _fastArrayCompare.fastArrayCompare);
   };
 }
 function createAllSeriesSelectorOfType(seriesType) {
-  const selectorSeries = (0, _selectors.createSelector)(_useChartSeries.selectorChartSeriesProcessed, processedSeries => processedSeries[seriesType]);
+  const selectorSeries = (0, _selectors.createSelector)([_useChartSeries.selectorChartSeriesProcessed], processedSeries => processedSeries[seriesType]);
   return () => {
     const store = (0, _useStore.useStore)();
     return (0, _useSelector.useSelector)(store, selectorSeries);

package/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/internals/index.js

@@ -111,6 +111,18 @@ Object.keys(_ChartsLabelMark).forEach(function (key) {
     }
   });
 });
+var _NotRendered = require("./components/NotRendered");
+Object.keys(_NotRendered).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _NotRendered[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _NotRendered[key];
+    }
+  });
+});
 var _useSeries = require("../hooks/useSeries");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useDrawingArea = require("../hooks/useDrawingArea");

package/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/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.selectors.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.selectorChartSkipAnimation = void 0;
 var _selectors = require("../../utils/selectors");
 const selectorChartAnimationState = state => state.animation;
-const selectorChartSkipAnimation = exports.selectorChartSkipAnimation = (0, _selectors.createSelector)(selectorChartAnimationState, state => state.skip || state.skipAnimationRequests > 0);
+const selectorChartSkipAnimation = exports.selectorChartSkipAnimation = (0, _selectors.createSelector)([selectorChartAnimationState], state => state.skip || state.skipAnimationRequests > 0);

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

@@ -15,6 +15,7 @@ var _useSelector = require("../../../store/useSelector");
 var _constants = require("../../../../constants");
 var _useChartDimensions = require("./useChartDimensions.selectors");
 var _defaultizeMargin = require("../../../defaultizeMargin");
+var _getSVGPoint = require("../../../getSVGPoint");
 const MAX_COMPUTE_RUN = 10;
 const useChartDimensions = ({
   params,
@@ -156,16 +157,43 @@ 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
+    } = (0, _getSVGPoint.getSVGPoint)(svgElement, {
+      clientX: rect.left,
+      clientY: rect.top
+    });
+    const {
+      x: right,
+      y: bottom
+    } = (0, _getSVGPoint.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
     }
   };
 };