@mui/x-charts-pro 9.8.0 → 9.9.0

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreviewContent.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { AxisId, SeriesId } from '@mui/x-charts/internals';
 export interface ChartsAxisZoomSliderPreviewContentProps {
   axisId: AxisId;
@@ -10,4 +11,4 @@ export interface ChartsAxisZoomSliderPreviewContentProps {
    */
   seriesIds?: SeriesId[];
 }
-export declare function ChartsAxisZoomSliderPreviewContent(props: ChartsAxisZoomSliderPreviewContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartsAxisZoomSliderPreviewContent(props: ChartsAxisZoomSliderPreviewContentProps): React.JSX.Element;

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreviewContent.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { AxisId, SeriesId } from '@mui/x-charts/internals';
 export interface ChartsAxisZoomSliderPreviewContentProps {
   axisId: AxisId;
@@ -10,4 +11,4 @@ export interface ChartsAxisZoomSliderPreviewContentProps {
    */
   seriesIds?: SeriesId[];
 }
-export declare function ChartsAxisZoomSliderPreviewContent(props: ChartsAxisZoomSliderPreviewContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartsAxisZoomSliderPreviewContent(props: ChartsAxisZoomSliderPreviewContentProps): React.JSX.Element;

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderTrack.d.mts

@@ -14,5 +14,5 @@ export declare function ChartsAxisZoomSliderTrack({
   onSelectStart,
   onSelectEnd,
   ...other
-}: ChartsAxisZoomSliderTrackProps): import("react/jsx-runtime").JSX.Element;
+}: ChartsAxisZoomSliderTrackProps): React.JSX.Element;
 export {};

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderTrack.d.ts

@@ -14,5 +14,5 @@ export declare function ChartsAxisZoomSliderTrack({
   onSelectStart,
   onSelectEnd,
   ...other
-}: ChartsAxisZoomSliderTrackProps): import("react/jsx-runtime").JSX.Element;
+}: ChartsAxisZoomSliderTrackProps): React.JSX.Element;
 export {};

package/ChartsZoomSlider/internals/ChartsTooltipZoomSliderValue.d.mts

@@ -7,5 +7,5 @@ export declare function ChartsTooltipZoomSliderValue({
   placement,
   modifiers,
   children
-}: ChartsTooltipZoomSliderValueProps): import("react/jsx-runtime").JSX.Element;
+}: ChartsTooltipZoomSliderValueProps): React.JSX.Element;
 export {};

package/ChartsZoomSlider/internals/ChartsTooltipZoomSliderValue.d.ts

@@ -7,5 +7,5 @@ export declare function ChartsTooltipZoomSliderValue({
   placement,
   modifiers,
   children
-}: ChartsTooltipZoomSliderValueProps): import("react/jsx-runtime").JSX.Element;
+}: ChartsTooltipZoomSliderValueProps): React.JSX.Element;
 export {};

package/ChartsZoomSlider/internals/previews/AreaPreviewPlot.d.mts

@@ -5,7 +5,7 @@ interface AreaPreviewPlotProps extends Pick<PreviewPlotProps, 'axisId' | 'series
 export declare function AreaPreviewPlot({
   axisId,
   seriesIds
-}: AreaPreviewPlotProps): import("react/jsx-runtime").JSX.Element;
+}: AreaPreviewPlotProps): React.JSX.Element;
 export interface PreviewAreaElementProps extends Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
   seriesId: SeriesId;
   gradientId?: string;

package/ChartsZoomSlider/internals/previews/AreaPreviewPlot.d.ts

@@ -5,7 +5,7 @@ interface AreaPreviewPlotProps extends Pick<PreviewPlotProps, 'axisId' | 'series
 export declare function AreaPreviewPlot({
   axisId,
   seriesIds
-}: AreaPreviewPlotProps): import("react/jsx-runtime").JSX.Element;
+}: AreaPreviewPlotProps): React.JSX.Element;
 export interface PreviewAreaElementProps extends Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
   seriesId: SeriesId;
   gradientId?: string;

package/ChartsZoomSlider/internals/previews/BarPreviewPlot.d.mts

@@ -5,5 +5,5 @@ interface BarPreviewPlotProps extends PreviewPlotProps {
   height: number;
   width: number;
 }
-export declare function BarPreviewPlot(props: BarPreviewPlotProps): import("react/jsx-runtime").JSX.Element;
+export declare function BarPreviewPlot(props: BarPreviewPlotProps): import("react").JSX.Element;
 export {};

package/ChartsZoomSlider/internals/previews/BarPreviewPlot.d.ts

@@ -5,5 +5,5 @@ interface BarPreviewPlotProps extends PreviewPlotProps {
   height: number;
   width: number;
 }
-export declare function BarPreviewPlot(props: BarPreviewPlotProps): import("react/jsx-runtime").JSX.Element;
+export declare function BarPreviewPlot(props: BarPreviewPlotProps): import("react").JSX.Element;
 export {};

package/ChartsZoomSlider/internals/previews/LineAreaPreviewPlot.d.mts

@@ -1,5 +1,6 @@
+import * as React from 'react';
 import type { PreviewPlotProps } from "./PreviewPlot.types.mjs";
 export declare function LineAreaPreviewPlot({
   axisId,
   seriesIds
-}: PreviewPlotProps): import("react/jsx-runtime").JSX.Element;
+}: PreviewPlotProps): React.JSX.Element;

package/ChartsZoomSlider/internals/previews/LineAreaPreviewPlot.d.ts

@@ -1,5 +1,6 @@
+import * as React from 'react';
 import type { PreviewPlotProps } from "./PreviewPlot.types.js";
 export declare function LineAreaPreviewPlot({
   axisId,
   seriesIds
-}: PreviewPlotProps): import("react/jsx-runtime").JSX.Element;
+}: PreviewPlotProps): React.JSX.Element;

package/ChartsZoomSlider/internals/previews/LinePreviewPlot.d.mts

@@ -5,7 +5,7 @@ interface LinePreviewPlotProps extends Pick<PreviewPlotProps, 'axisId' | 'series
 export declare function LinePreviewPlot({
   axisId,
   seriesIds
-}: LinePreviewPlotProps): import("react/jsx-runtime").JSX.Element;
+}: LinePreviewPlotProps): React.JSX.Element;
 export interface PreviewLineElementProps extends Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
   seriesId: SeriesId;
   gradientId?: string;

package/ChartsZoomSlider/internals/previews/LinePreviewPlot.d.ts

@@ -5,7 +5,7 @@ interface LinePreviewPlotProps extends Pick<PreviewPlotProps, 'axisId' | 'series
 export declare function LinePreviewPlot({
   axisId,
   seriesIds
-}: LinePreviewPlotProps): import("react/jsx-runtime").JSX.Element;
+}: LinePreviewPlotProps): React.JSX.Element;
 export interface PreviewLineElementProps extends Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
   seriesId: SeriesId;
   gradientId?: string;

package/ChartsZoomSlider/internals/previews/LinePreviewPlot.js

@@ -60,5 +60,20 @@ function useLinePreviewData(axisId) {
   const store = (0, _internals.useStore)();
   const xAxes = store.use(_internals.selectorChartPreviewComputedXAxis, axisId);
   const yAxes = store.use(_internals.selectorChartPreviewComputedYAxis, axisId);
-  return (0, _internals.useLinePlotData)(xAxes, yAxes);
+  const zoomOptions = store.use(_internals.selectorChartAxisZoomOptionsLookup, axisId);
+
+  // The preview is a full-range overview, so sample against its own range and width rather than the
+  // active zoom — otherwise the main chart's zoom would change the preview's point density.
+  const samplingOverride = React.useMemo(() => {
+    const range = xAxes[axisId]?.scale.range() ?? [0, 0];
+    return {
+      zoomMap: new Map([[axisId, {
+        axisId,
+        start: zoomOptions.minStart,
+        end: zoomOptions.maxEnd
+      }]]),
+      availableSize: Math.abs(range[range.length - 1] - range[0])
+    };
+  }, [xAxes, axisId, zoomOptions.minStart, zoomOptions.maxEnd]);
+  return (0, _internals.useLinePlotData)(xAxes, yAxes, samplingOverride);
 }

package/ChartsZoomSlider/internals/previews/LinePreviewPlot.mjs

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["seriesId", "color", "gradientId", "onClick"];
 import * as React from 'react';
-import { useStore, useLinePlotData, selectorChartPreviewComputedXAxis, selectorChartPreviewComputedYAxis } from '@mui/x-charts/internals';
+import { useStore, useLinePlotData, selectorChartPreviewComputedXAxis, selectorChartPreviewComputedYAxis, selectorChartAxisZoomOptionsLookup } from '@mui/x-charts/internals';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function LinePreviewPlot({
   axisId,
@@ -52,5 +52,20 @@ function useLinePreviewData(axisId) {
   const store = useStore();
   const xAxes = store.use(selectorChartPreviewComputedXAxis, axisId);
   const yAxes = store.use(selectorChartPreviewComputedYAxis, axisId);
-  return useLinePlotData(xAxes, yAxes);
+  const zoomOptions = store.use(selectorChartAxisZoomOptionsLookup, axisId);
+
+  // The preview is a full-range overview, so sample against its own range and width rather than the
+  // active zoom — otherwise the main chart's zoom would change the preview's point density.
+  const samplingOverride = React.useMemo(() => {
+    const range = xAxes[axisId]?.scale.range() ?? [0, 0];
+    return {
+      zoomMap: new Map([[axisId, {
+        axisId,
+        start: zoomOptions.minStart,
+        end: zoomOptions.maxEnd
+      }]]),
+      availableSize: Math.abs(range[range.length - 1] - range[0])
+    };
+  }, [xAxes, axisId, zoomOptions.minStart, zoomOptions.maxEnd]);
+  return useLinePlotData(xAxes, yAxes, samplingOverride);
 }

package/ChartsZoomSlider/internals/previews/ScatterPreviewPlot.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { PreviewPlotProps } from "./PreviewPlot.types.mjs";
 interface ScatterPreviewPlotProps extends PreviewPlotProps {
   x: number;
@@ -12,5 +13,5 @@ export declare function ScatterPreviewPlot({
   height,
   width,
   seriesIds
-}: ScatterPreviewPlotProps): import("react/jsx-runtime").JSX.Element | null;
+}: ScatterPreviewPlotProps): React.JSX.Element | null;
 export {};

package/ChartsZoomSlider/internals/previews/ScatterPreviewPlot.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { PreviewPlotProps } from "./PreviewPlot.types.js";
 interface ScatterPreviewPlotProps extends PreviewPlotProps {
   x: number;
@@ -12,5 +13,5 @@ export declare function ScatterPreviewPlot({
   height,
   width,
   seriesIds
-}: ScatterPreviewPlotProps): import("react/jsx-runtime").JSX.Element | null;
+}: ScatterPreviewPlotProps): React.JSX.Element | null;
 export {};

package/FunnelChart/FocusedFunnelSection.d.mts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare function FocusedFunnelSection(props: React.SVGAttributes<SVGRectElement>): import("react/jsx-runtime").JSX.Element | null;
+export declare function FocusedFunnelSection(props: React.SVGAttributes<SVGRectElement>): React.JSX.Element | null;

package/FunnelChart/FocusedFunnelSection.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare function FocusedFunnelSection(props: React.SVGAttributes<SVGRectElement>): import("react/jsx-runtime").JSX.Element | null;
+export declare function FocusedFunnelSection(props: React.SVGAttributes<SVGRectElement>): React.JSX.Element | null;

package/FunnelChart/FunnelPlot.d.mts

@@ -13,7 +13,7 @@ export interface FunnelPlotProps extends FunnelPlotSlotExtension {
    */
   onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, funnelItemIdentifier: FunnelItemIdentifier) => void;
 }
-declare function FunnelPlot(props: FunnelPlotProps): import("react/jsx-runtime").JSX.Element;
+declare function FunnelPlot(props: FunnelPlotProps): React.JSX.Element;
 declare namespace FunnelPlot {
   var propTypes: any;
 }

package/FunnelChart/FunnelPlot.d.ts

@@ -13,7 +13,7 @@ export interface FunnelPlotProps extends FunnelPlotSlotExtension {
    */
   onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, funnelItemIdentifier: FunnelItemIdentifier) => void;
 }
-declare function FunnelPlot(props: FunnelPlotProps): import("react/jsx-runtime").JSX.Element;
+declare function FunnelPlot(props: FunnelPlotProps): React.JSX.Element;
 declare namespace FunnelPlot {
   var propTypes: any;
 }

package/FunnelChart/seriesConfig/index.js

@@ -12,7 +12,7 @@ var _getColor = _interopRequireDefault(require("./getColor"));
 var _legend = _interopRequireDefault(require("./legend"));
 var _tooltip = _interopRequireDefault(require("./tooltip"));
 var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWithDefaultValues"));
-var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
+var _tooltipPosition = require("./tooltipPosition");
 var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
 var _descriptionGetter = _interopRequireDefault(require("./descriptionGetter"));
 const funnelSeriesConfig = exports.funnelSeriesConfig = {
@@ -20,7 +20,7 @@ const funnelSeriesConfig = exports.funnelSeriesConfig = {
   colorProcessor: _getColor.default,
   legendGetter: _legend.default,
   tooltipGetter: _tooltip.default,
-  tooltipItemPositionGetter: _tooltipPosition.default,
+  selectorTooltipItemPosition: _tooltipPosition.selectorTooltipItemPosition,
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,

package/FunnelChart/seriesConfig/index.mjs

@@ -5,7 +5,7 @@ import getColor from "./getColor.mjs";
 import legendGetter from "./legend.mjs";
 import tooltipGetter from "./tooltip.mjs";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.mjs";
-import tooltipItemPositionGetter from "./tooltipPosition.mjs";
+import { selectorTooltipItemPosition } from "./tooltipPosition.mjs";
 import keyboardFocusHandler from "./keyboardFocusHandler.mjs";
 import descriptionGetter from "./descriptionGetter.mjs";
 export const funnelSeriesConfig = {
@@ -13,7 +13,7 @@ export const funnelSeriesConfig = {
   colorProcessor: getColor,
   legendGetter,
   tooltipGetter,
-  tooltipItemPositionGetter,
+  selectorTooltipItemPosition,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
   getSeriesWithDefaultValues,

package/FunnelChart/seriesConfig/tooltipPosition.d.mts

@@ -1,3 +1,2 @@
-import type { TooltipItemPositionGetter } from '@mui/x-charts/internals';
-declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'funnel'>;
-export default tooltipItemPositionGetter;
+import type { TooltipItemPositionSelector } from '@mui/x-charts/internals';
+export declare const selectorTooltipItemPosition: TooltipItemPositionSelector<'funnel'>;

package/FunnelChart/seriesConfig/tooltipPosition.d.ts

@@ -1,3 +1,2 @@
-import type { TooltipItemPositionGetter } from '@mui/x-charts/internals';
-declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'funnel'>;
-export default tooltipItemPositionGetter;
+import type { TooltipItemPositionSelector } from '@mui/x-charts/internals';
+export declare const selectorTooltipItemPosition: TooltipItemPositionSelector<'funnel'>;

package/FunnelChart/seriesConfig/tooltipPosition.js

@@ -3,34 +3,31 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.selectorTooltipItemPosition = void 0;
+var _store = require("@mui/x-internals/store");
 var _internals = require("@mui/x-charts/internals");
 var _coordinateMapper = require("../coordinateMapper");
-const tooltipItemPositionGetter = params => {
-  const {
-    series,
-    identifier,
-    axesConfig,
-    placement
-  } = params;
-  if (!identifier || identifier.dataIndex === undefined) {
+const selectorTooltipItemPosition = exports.selectorTooltipItemPosition = (0, _store.createSelectorMemoized)(_internals.selectorChartsTooltipItem, _internals.selectorChartSeriesProcessed, _internals.selectorChartXAxis, _internals.selectorChartYAxis, (identifier, series, xAxes, yAxes, placement) => {
+  if (!identifier || identifier.type !== 'funnel' || identifier.dataIndex === undefined) {
     return null;
   }
   const itemSeries = series.funnel?.series[identifier.seriesId];
   if (itemSeries == null) {
     return null;
   }
-  if (axesConfig.x === undefined || axesConfig.y === undefined) {
+  const xAxis = xAxes.axis[itemSeries.xAxisId ?? xAxes.axisIds[0]];
+  const yAxis = yAxes.axis[itemSeries.yAxisId ?? yAxes.axisIds[0]];
+  if (xAxis === undefined || yAxis === undefined) {
     return null;
   }
   const isHorizontal = itemSeries.layout === 'horizontal';
-  const baseScaleConfig = isHorizontal ? axesConfig.x : axesConfig.y;
+  const baseScaleConfig = isHorizontal ? xAxis : yAxis;
 
   // FIXME gap should be obtained from the store.
   // Maybe moving it to the series would be a good idea similar to what we do with bar charts and their stackingGroups
   const gap = 0;
-  const xPosition = (0, _coordinateMapper.createPositionGetter)(axesConfig.x.scale, isHorizontal, gap, baseScaleConfig.data);
-  const yPosition = (0, _coordinateMapper.createPositionGetter)(axesConfig.y.scale, !isHorizontal, gap, baseScaleConfig.data);
+  const xPosition = (0, _coordinateMapper.createPositionGetter)(xAxis.scale, isHorizontal, gap, baseScaleConfig.data);
+  const yPosition = (0, _coordinateMapper.createPositionGetter)(yAxis.scale, !isHorizontal, gap, baseScaleConfig.data);
   const allY = itemSeries.dataPoints[identifier.dataIndex].map(v => yPosition(v.y, identifier.dataIndex, v.stackOffset, v.useBandWidth));
   const allX = itemSeries.dataPoints[identifier.dataIndex].map(v => xPosition(v.x, identifier.dataIndex, v.stackOffset, v.useBandWidth));
   const [x0, x1] = (0, _internals.findMinMax)(allX);
@@ -58,5 +55,4 @@ const tooltipItemPositionGetter = params => {
         y: y0
       };
   }
-};
-var _default = exports.default = tooltipItemPositionGetter;
+});

package/FunnelChart/seriesConfig/tooltipPosition.mjs

@@ -1,30 +1,27 @@
-import { findMinMax } from '@mui/x-charts/internals';
+import { createSelectorMemoized } from '@mui/x-internals/store';
+import { findMinMax, selectorChartsTooltipItem, selectorChartSeriesProcessed, selectorChartXAxis, selectorChartYAxis } from '@mui/x-charts/internals';
 import { createPositionGetter } from "../coordinateMapper.mjs";
-const tooltipItemPositionGetter = params => {
-  const {
-    series,
-    identifier,
-    axesConfig,
-    placement
-  } = params;
-  if (!identifier || identifier.dataIndex === undefined) {
+export const selectorTooltipItemPosition = createSelectorMemoized(selectorChartsTooltipItem, selectorChartSeriesProcessed, selectorChartXAxis, selectorChartYAxis, (identifier, series, xAxes, yAxes, placement) => {
+  if (!identifier || identifier.type !== 'funnel' || identifier.dataIndex === undefined) {
     return null;
   }
   const itemSeries = series.funnel?.series[identifier.seriesId];
   if (itemSeries == null) {
     return null;
   }
-  if (axesConfig.x === undefined || axesConfig.y === undefined) {
+  const xAxis = xAxes.axis[itemSeries.xAxisId ?? xAxes.axisIds[0]];
+  const yAxis = yAxes.axis[itemSeries.yAxisId ?? yAxes.axisIds[0]];
+  if (xAxis === undefined || yAxis === undefined) {
     return null;
   }
   const isHorizontal = itemSeries.layout === 'horizontal';
-  const baseScaleConfig = isHorizontal ? axesConfig.x : axesConfig.y;
+  const baseScaleConfig = isHorizontal ? xAxis : yAxis;
 
   // FIXME gap should be obtained from the store.
   // Maybe moving it to the series would be a good idea similar to what we do with bar charts and their stackingGroups
   const gap = 0;
-  const xPosition = createPositionGetter(axesConfig.x.scale, isHorizontal, gap, baseScaleConfig.data);
-  const yPosition = createPositionGetter(axesConfig.y.scale, !isHorizontal, gap, baseScaleConfig.data);
+  const xPosition = createPositionGetter(xAxis.scale, isHorizontal, gap, baseScaleConfig.data);
+  const yPosition = createPositionGetter(yAxis.scale, !isHorizontal, gap, baseScaleConfig.data);
   const allY = itemSeries.dataPoints[identifier.dataIndex].map(v => yPosition(v.y, identifier.dataIndex, v.stackOffset, v.useBandWidth));
   const allX = itemSeries.dataPoints[identifier.dataIndex].map(v => xPosition(v.x, identifier.dataIndex, v.stackOffset, v.useBandWidth));
   const [x0, x1] = findMinMax(allX);
@@ -52,5 +49,4 @@ const tooltipItemPositionGetter = params => {
         y: y0
       };
   }
-};
-export default tooltipItemPositionGetter;
+});

package/Heatmap/FocusedHeatmapCell.d.mts

@@ -1 +1 @@
-export declare function FocusedHeatmapCell(props: React.SVGAttributes<SVGRectElement>): import("react/jsx-runtime").JSX.Element | null;
+export declare function FocusedHeatmapCell(props: React.SVGAttributes<SVGRectElement>): import("react").JSX.Element | null;

package/Heatmap/FocusedHeatmapCell.d.ts

@@ -1 +1 @@
-export declare function FocusedHeatmapCell(props: React.SVGAttributes<SVGRectElement>): import("react/jsx-runtime").JSX.Element | null;
+export declare function FocusedHeatmapCell(props: React.SVGAttributes<SVGRectElement>): import("react").JSX.Element | null;

package/Heatmap/HeatmapItem.d.mts

@@ -42,7 +42,7 @@ export interface HeatmapItemProps {
 /**
  * @ignore - internal component.
  */
-declare function HeatmapItem(props: HeatmapItemProps): import("react/jsx-runtime").JSX.Element;
+declare function HeatmapItem(props: HeatmapItemProps): React.JSX.Element;
 declare namespace HeatmapItem {
   var propTypes: any;
 }

package/Heatmap/HeatmapItem.d.ts

@@ -42,7 +42,7 @@ export interface HeatmapItemProps {
 /**
  * @ignore - internal component.
  */
-declare function HeatmapItem(props: HeatmapItemProps): import("react/jsx-runtime").JSX.Element;
+declare function HeatmapItem(props: HeatmapItemProps): React.JSX.Element;
 declare namespace HeatmapItem {
   var propTypes: any;
 }

package/Heatmap/HeatmapSVGPlot.d.mts

@@ -1,2 +1,3 @@
+import * as React from 'react';
 import type { HeatmapRendererPlotProps } from "./Heatmap.types.mjs";
-export declare function HeatmapSVGPlot(props: HeatmapRendererPlotProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function HeatmapSVGPlot(props: HeatmapRendererPlotProps): React.JSX.Element | null;

package/Heatmap/HeatmapSVGPlot.d.ts

@@ -1,2 +1,3 @@
+import * as React from 'react';
 import type { HeatmapRendererPlotProps } from "./Heatmap.types.js";
-export declare function HeatmapSVGPlot(props: HeatmapRendererPlotProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function HeatmapSVGPlot(props: HeatmapRendererPlotProps): React.JSX.Element | null;

package/Heatmap/HeatmapTooltip/HeatmapTooltip.d.mts

@@ -1,5 +1,5 @@
 import type { HeatmapTooltipProps } from "./HeatmapTooltip.types.mjs";
-declare function HeatmapTooltip(props: HeatmapTooltipProps): import("react/jsx-runtime").JSX.Element;
+declare function HeatmapTooltip(props: HeatmapTooltipProps): import("react").JSX.Element;
 declare namespace HeatmapTooltip {
   var propTypes: any;
 }

package/Heatmap/HeatmapTooltip/HeatmapTooltip.d.ts

@@ -1,5 +1,5 @@
 import type { HeatmapTooltipProps } from "./HeatmapTooltip.types.js";
-declare function HeatmapTooltip(props: HeatmapTooltipProps): import("react/jsx-runtime").JSX.Element;
+declare function HeatmapTooltip(props: HeatmapTooltipProps): import("react").JSX.Element;
 declare namespace HeatmapTooltip {
   var propTypes: any;
 }

package/Heatmap/HeatmapTooltip/HeatmapTooltipContent.d.mts

@@ -1,6 +1,6 @@
 import type { HeatmapTooltipProps } from "./HeatmapTooltip.types.mjs";
 export interface HeatmapTooltipContentProps extends Pick<HeatmapTooltipProps, 'classes'> {}
-export declare function HeatmapTooltipContent(props: HeatmapTooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function HeatmapTooltipContent(props: HeatmapTooltipContentProps): import("react").JSX.Element | null;
 export declare namespace HeatmapTooltipContent {
   var propTypes: any;
 }

package/Heatmap/HeatmapTooltip/HeatmapTooltipContent.d.ts

@@ -1,6 +1,6 @@
 import type { HeatmapTooltipProps } from "./HeatmapTooltip.types.js";
 export interface HeatmapTooltipContentProps extends Pick<HeatmapTooltipProps, 'classes'> {}
-export declare function HeatmapTooltipContent(props: HeatmapTooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function HeatmapTooltipContent(props: HeatmapTooltipContentProps): import("react").JSX.Element | null;
 export declare namespace HeatmapTooltipContent {
   var propTypes: any;
 }

package/Heatmap/seriesConfig/index.js

@@ -11,7 +11,7 @@ var _seriesProcessor = _interopRequireDefault(require("./seriesProcessor"));
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _tooltip = _interopRequireDefault(require("./tooltip"));
 var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWithDefaultValues"));
-var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
+var _tooltipPosition = require("./tooltipPosition");
 var _getItemAtPosition = _interopRequireDefault(require("./getItemAtPosition"));
 var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
 var _highlight = require("./highlight");
@@ -24,7 +24,7 @@ const heatmapSeriesConfig = exports.heatmapSeriesConfig = {
   colorProcessor: _getColor.default,
   legendGetter: () => [],
   tooltipGetter: _tooltip.default,
-  tooltipItemPositionGetter: _tooltipPosition.default,
+  selectorTooltipItemPosition: _tooltipPosition.selectorTooltipItemPosition,
   xExtremumGetter: _extremums.getBaseExtremum,
   yExtremumGetter: _extremums.getBaseExtremum,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,

package/Heatmap/seriesConfig/index.mjs

@@ -4,7 +4,7 @@ import seriesProcessor from "./seriesProcessor.mjs";
 import getColor from "./getColor.mjs";
 import tooltipGetter from "./tooltip.mjs";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.mjs";
-import tooltipItemPositionGetter from "./tooltipPosition.mjs";
+import { selectorTooltipItemPosition } from "./tooltipPosition.mjs";
 import getItemAtPosition from "./getItemAtPosition.mjs";
 import keyboardFocusHandler from "./keyboardFocusHandler.mjs";
 import { createIsFaded, createIsHighlighted } from "./highlight.mjs";
@@ -17,7 +17,7 @@ export const heatmapSeriesConfig = {
   colorProcessor: getColor,
   legendGetter: () => [],
   tooltipGetter,
-  tooltipItemPositionGetter,
+  selectorTooltipItemPosition,
   xExtremumGetter: getBaseExtremum,
   yExtremumGetter: getBaseExtremum,
   getSeriesWithDefaultValues,

package/Heatmap/seriesConfig/tooltipPosition.d.mts

@@ -1,3 +1,2 @@
-import type { TooltipItemPositionGetter } from '@mui/x-charts/internals';
-declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'heatmap'>;
-export default tooltipItemPositionGetter;
+import type { TooltipItemPositionSelector } from '@mui/x-charts/internals';
+export declare const selectorTooltipItemPosition: TooltipItemPositionSelector<'heatmap'>;

package/Heatmap/seriesConfig/tooltipPosition.d.ts

@@ -1,3 +1,2 @@
-import type { TooltipItemPositionGetter } from '@mui/x-charts/internals';
-declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'heatmap'>;
-export default tooltipItemPositionGetter;
+import type { TooltipItemPositionSelector } from '@mui/x-charts/internals';
+export declare const selectorTooltipItemPosition: TooltipItemPositionSelector<'heatmap'>;

package/Heatmap/seriesConfig/tooltipPosition.js

@@ -3,32 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.selectorTooltipItemPosition = void 0;
+var _store = require("@mui/x-internals/store");
 var _internals = require("@mui/x-charts/internals");
-const tooltipItemPositionGetter = params => {
-  const {
-    series,
-    identifier,
-    axesConfig,
-    placement
-  } = params;
-  if (!identifier) {
+const selectorTooltipItemPosition = exports.selectorTooltipItemPosition = (0, _store.createSelectorMemoized)(_internals.selectorChartsTooltipItem, _internals.selectorChartSeriesProcessed, _internals.selectorChartXAxis, _internals.selectorChartYAxis, function selectorTooltipItemPosition(identifier, series, xAxes, yAxes, placement) {
+  if (!identifier || identifier.type !== 'heatmap') {
     return null;
   }
   const itemSeries = series.heatmap?.series[identifier.seriesId];
   if (itemSeries == null) {
     return null;
   }
-  if (axesConfig.x === undefined || axesConfig.y === undefined || !(0, _internals.isBandScaleConfig)(axesConfig.x) || !(0, _internals.isBandScaleConfig)(axesConfig.y)) {
+  const xAxis = xAxes.axis[itemSeries.xAxisId ?? xAxes.axisIds[0]];
+  const yAxis = yAxes.axis[itemSeries.yAxisId ?? yAxes.axisIds[0]];
+  if (xAxis === undefined || yAxis === undefined || !(0, _internals.isBandScaleConfig)(xAxis) || !(0, _internals.isBandScaleConfig)(yAxis)) {
     return null;
   }
-  const x = axesConfig.x.scale(axesConfig.x.scale.domain()[identifier.xIndex]);
-  const y = axesConfig.y.scale(axesConfig.y.scale.domain()[identifier.yIndex]);
+  const x = xAxis.scale(xAxis.scale.domain()[identifier.xIndex]);
+  const y = yAxis.scale(yAxis.scale.domain()[identifier.yIndex]);
   if (x === undefined || y === undefined) {
     return null;
   }
-  const width = axesConfig.x.scale.bandwidth();
-  const height = axesConfig.y.scale.bandwidth();
+  const width = xAxis.scale.bandwidth();
+  const height = yAxis.scale.bandwidth();
   switch (placement) {
     case 'bottom':
       return {
@@ -52,5 +49,4 @@ const tooltipItemPositionGetter = params => {
         y
       };
   }
-};
-var _default = exports.default = tooltipItemPositionGetter;
+});