@dynatrace/strato-components 3.2.1 → 3.3.1

package/esm/charts/xy-chart/components/legend/XYLegend/xy-legend.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/legend/XYLegend/xy-legend.css.ts"],
-  "sourcesContent": ["import './xy-legend.css';\nexport var shapeIconWrapper = '_1lwufqz0-3-2-1';"],
+  "sourcesContent": ["import './xy-legend.css';\nexport var shapeIconWrapper = '_1lwufqz0-3-3-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;",
   "names": []
 }

package/esm/charts/xy-chart/components/overlay/XYChartOverlay.js

@@ -4,25 +4,25 @@ import { useEffect, useRef } from "react";
 import { XYChartSynchronizedCrosshair } from "./XYChartSynchronizedCrosshair.js";
 import { useGridPlotSize } from "../../../core/components/chart-grid/hooks/useGridPlotSize.js";
 import { InteractionsOverlay } from "../../../core/components/interactions-overlay/InteractionsOverlay.js";
-import { reduceExploreCancelTooltip } from "../../../core/components/interactions-state-helpers/reducers/explore-reducers.js";
-import { XYChartOverlayRefContext } from "../../context/XYChartOverlayRef.context.js";
+import { useOverlay } from "../../../core/components/overlay-tooltip/contexts/OverlayContext.js";
 import {
   useInteractionModeState,
-  usePinnedState,
   useSelectState,
   useSetState,
-  useVisibleState,
   useZoomState
 } from "../../store/selectors.js";
 import { XYChartSelectionArea } from "../selection/XYChartSelectionArea.js";
 import { XYChartToolbar } from "../toolbar/XYChartToolbar.js";
-import { XYChartTooltip } from "../tooltip/XYChartTooltip.js";
+import { XYChartOverlayTooltip } from "../tooltip/XYChartOverlayTooltip.js";
 import { XYChartCrosshair } from "./explore/XYChartCrosshair.js";
 import { XYChartLinearPoint } from "./explore/XYChartLinearPoint.js";
 import { XYChartRectanglePoint } from "./explore/XYChartRectanglePoint.js";
 import { useOverlayEvents } from "./hooks/useOverlayEvents.js";
-import { useResetOnResize } from "./hooks/useResetOnResize.js";
 import { isOwnEvent } from "../../../core/components/interactions-overlay/utils/is-own-event.js";
+import {
+  useSelector,
+  useTooltipSnapshot
+} from "../../../core/components/overlay-tooltip/selectors.js";
 import { SynchronizedSelectionArea } from "../../../core/components/shared-chart-interactions/components/SynchronizedSelectionArea.js";
 import { useSynchronizedSelection } from "../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js";
 import { useToolbarHandlerRef } from "../../../core/components/toolbar/hooks/useToolbarHandlerRef.js";
@@ -34,11 +34,11 @@ import { useXYChartId } from "../../hooks/useXYChartId.js";
 const XYChartOverlay = () => {
   const setState = useSetState();
   const handlerRef = useToolbarHandlerRef();
-  const chartRef = useRef(null);
+  const overlay = useOverlay();
   const selectionRef = useRef(null);
   const { width, height } = useGridPlotSize();
-  const visible = useVisibleState();
-  const pinned = usePinnedState();
+  useSelector(({ inBounds: inBounds2, pinned: pinned2 }) => `${inBounds2}-${pinned2}`);
+  const { inBounds, pinned } = useTooltipSnapshot();
   const {
     handleModeChange,
     handleHover,
@@ -49,7 +49,8 @@ const XYChartOverlay = () => {
     handleSelectChange,
     handleSelectEnd,
     handleZoomChange,
-    handleSelectStart
+    handleSelectStart,
+    resetTooltip
   } = useOverlayEvents();
   const mode = useInteractionModeState();
   const selectState = useSelectState();
@@ -74,7 +75,6 @@ const XYChartOverlay = () => {
       synchronizedSelection.resetSelectionState?.();
     }
   }, [!!selectState]);
-  useResetOnResize();
   const showHighlightedData = selectState === void 0 || selectState?.variant === "select";
   const handleFocus = (event) => {
     if (!event || event.cancelable) {
@@ -84,14 +84,14 @@ const XYChartOverlay = () => {
       handlerRef.current.handleFocus();
     }
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     InteractionsOverlay,
     {
       style: {
         zIndex: zIndicesXYChartAreas.overlays,
         userSelect: selectState?.finished === false ? "none" : "auto"
       },
-      ref: chartRef,
+      ref: overlay.overlayRef,
       mode,
       pinned,
       selectionArea: selectState ? [selectState?.start, selectState?.end] : void 0,
@@ -111,35 +111,22 @@ const XYChartOverlay = () => {
       isZoomDisabled,
       isZoomXDisabled: isZoomDisabled,
       isPanDisabled,
-      children: /* @__PURE__ */ jsxs(XYChartOverlayRefContext.Provider, { value: chartRef, children: [
-        (visible || pinned || selectState) && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(XYChartTooltip, {}, "XYChartTooltip"),
-          /* @__PURE__ */ jsx(
-            XYChartCrosshair,
-            {
-              chartRef,
-              pinned
-            },
-            "XYChartCrosshair"
-          ),
+      children: [
+        (inBounds || pinned || selectState) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(XYChartOverlayTooltip, {}),
+          /* @__PURE__ */ jsx(XYChartCrosshair, { chartRef: overlay.overlayRef }),
           showHighlightedData && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(XYChartRectanglePoint, {}, "XYChartRectanglePoint"),
-            /* @__PURE__ */ jsx(XYChartLinearPoint, {}, "XYChartLinearPoint")
+            /* @__PURE__ */ jsx(XYChartRectanglePoint, {}),
+            /* @__PURE__ */ jsx(XYChartLinearPoint, {})
           ] })
         ] }),
         /* @__PURE__ */ jsx(XYChartSynchronizedCrosshair, {}),
         /* @__PURE__ */ jsxs(XYChartSelectionAreaRefContext.Provider, { value: selectionRef, children: [
-          /* @__PURE__ */ jsx(
-            XYChartToolbar,
-            {
-              onMouseEnter: () => setState(reduceExploreCancelTooltip),
-              handlerRef
-            }
-          ),
+          /* @__PURE__ */ jsx(XYChartToolbar, { onMouseEnter: resetTooltip, handlerRef }),
           /* @__PURE__ */ jsx(XYChartSelectionArea, {})
         ] }),
         synchronizedSelection.selectedChartId && synchronizedSelection.selectedChartId !== chartId && syncedXScale && /* @__PURE__ */ jsx(SynchronizedSelectionArea, { scale: syncedXScale })
-      ] })
+      ]
     }
   );
 };

package/esm/charts/xy-chart/components/overlay/XYChartOverlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/overlay/XYChartOverlay.tsx"],
-  "sourcesContent": ["import { every } from 'lodash-es';\nimport { useEffect, useRef, type FocusEvent } from 'react';\n\nimport { XYChartSynchronizedCrosshair } from './XYChartSynchronizedCrosshair.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { InteractionsOverlay } from '../../../core/components/interactions-overlay/InteractionsOverlay.js';\nimport { reduceExploreCancelTooltip } from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport { XYChartOverlayRefContext } from '../../context/XYChartOverlayRef.context.js';\nimport {\n  useInteractionModeState,\n  usePinnedState,\n  useSelectState,\n  useSetState,\n  useVisibleState,\n  useZoomState,\n} from '../../store/selectors.js';\nimport { XYChartSelectionArea } from '../selection/XYChartSelectionArea.js';\nimport { XYChartToolbar } from '../toolbar/XYChartToolbar.js';\nimport { XYChartTooltip } from '../tooltip/XYChartTooltip.js';\nimport { XYChartCrosshair } from './explore/XYChartCrosshair.js';\nimport { XYChartLinearPoint } from './explore/XYChartLinearPoint.js';\nimport { XYChartRectanglePoint } from './explore/XYChartRectanglePoint.js';\nimport { useOverlayEvents } from './hooks/useOverlayEvents.js';\nimport { useResetOnResize } from './hooks/useResetOnResize.js';\nimport { isOwnEvent } from '../../../core/components/interactions-overlay/utils/is-own-event.js';\nimport type { _SelectionRef } from '../../../core/components/selection-area/types.js';\nimport { SynchronizedSelectionArea } from '../../../core/components/shared-chart-interactions/components/SynchronizedSelectionArea.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { useToolbarHandlerRef } from '../../../core/components/toolbar/hooks/useToolbarHandlerRef.js';\nimport { zIndicesXYChartAreas } from '../../constants/xy-chart-z-index-areas.js';\nimport { XYChartSelectionAreaRefContext } from '../../context/XYChartSelectionAreaRef.context.js';\nimport { useSyncedXScaleByPriority } from '../../hooks/useSyncedXScaleByPriority.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartId } from '../../hooks/useXYChartId.js';\n\nexport const XYChartOverlay = () => {\n  const setState = useSetState();\n  const handlerRef = useToolbarHandlerRef();\n  const chartRef = useRef<HTMLDivElement>(null);\n  const selectionRef = useRef<_SelectionRef>(null);\n  const { width, height } = useGridPlotSize();\n  const visible = useVisibleState();\n  const pinned = usePinnedState();\n  const {\n    handleModeChange,\n    handleHover,\n    handleTogglePin,\n    handleReset,\n    handleLeave,\n    handlePanChange,\n    handleSelectChange,\n    handleSelectEnd,\n    handleZoomChange,\n    handleSelectStart,\n  } = useOverlayEvents();\n  const mode = useInteractionModeState();\n  const selectState = useSelectState();\n  const synchronizedSelection = useSynchronizedSelection();\n  const chartId = useXYChartId();\n  const syncedXScale = useSyncedXScaleByPriority();\n  const { axesMetadata } = useXYChartData();\n  const { zoomOutEnabled } = useZoomState();\n  const isZoomDisabled = !axesMetadata.isZoomEnabled;\n  const isPanDisabled = !(axesMetadata.isPanEnabled && zoomOutEnabled);\n\n  useEffect(() => {\n    if (\n      every([\n        selectState,\n        !synchronizedSelection.selectedChartId,\n        !synchronizedSelection?.disabled,\n      ])\n    ) {\n      // clear current chart selection if the shared selection was removed\n      setState((s) => ({ ...s, select: undefined }));\n    }\n  }, [synchronizedSelection.selectedChartId]);\n\n  useEffect(() => {\n    if (synchronizedSelection.selectedChartId === chartId && !selectState) {\n      // clear shared chart selection if the current selection was removed\n      synchronizedSelection.resetSelectionState?.();\n    }\n  }, [!!selectState]);\n\n  useResetOnResize();\n\n  const showHighlightedData =\n    selectState === undefined || selectState?.variant === 'select';\n  const handleFocus = (event?: FocusEvent) => {\n    if (!event || event.cancelable) {\n      return;\n    }\n    if (isOwnEvent(event)) {\n      handlerRef.current.handleFocus();\n    }\n  };\n  return (\n    <InteractionsOverlay\n      style={{\n        zIndex: zIndicesXYChartAreas.overlays,\n        userSelect: selectState?.finished === false ? 'none' : 'auto',\n      }}\n      ref={chartRef}\n      mode={mode}\n      pinned={pinned}\n      selectionArea={\n        selectState ? [selectState?.start, selectState?.end] : undefined\n      }\n      width={width}\n      height={height}\n      onModeChange={handleModeChange}\n      onReset={handleReset}\n      onLeave={handleLeave}\n      onPanChange={handlePanChange}\n      onHover={handleHover}\n      onFocus={handleFocus}\n      onTogglePin={({ pin, position }) => handleTogglePin(pin, position)}\n      onSelectStart={handleSelectStart}\n      onSelectChange={handleSelectChange}\n      onSelectEnd={(event) => handleSelectEnd(event, selectionRef)}\n      onZoomChange={handleZoomChange}\n      isZoomDisabled={isZoomDisabled}\n      isZoomXDisabled={isZoomDisabled}\n      isPanDisabled={isPanDisabled}\n    >\n      <XYChartOverlayRefContext.Provider value={chartRef}>\n        {(visible || pinned || selectState) && (\n          <>\n            <XYChartTooltip key=\"XYChartTooltip\" />\n            <XYChartCrosshair\n              key=\"XYChartCrosshair\"\n              chartRef={chartRef}\n              pinned={pinned}\n            />\n            {showHighlightedData && (\n              <>\n                <XYChartRectanglePoint key=\"XYChartRectanglePoint\" />\n                <XYChartLinearPoint key=\"XYChartLinearPoint\" />\n              </>\n            )}\n          </>\n        )}\n        <XYChartSynchronizedCrosshair />\n        <XYChartSelectionAreaRefContext.Provider value={selectionRef}>\n          <XYChartToolbar\n            onMouseEnter={() => setState(reduceExploreCancelTooltip)}\n            handlerRef={handlerRef}\n          />\n          <XYChartSelectionArea />\n        </XYChartSelectionAreaRefContext.Provider>\n        {synchronizedSelection.selectedChartId &&\n          synchronizedSelection.selectedChartId !== chartId &&\n          syncedXScale && <SynchronizedSelectionArea scale={syncedXScale} />}\n      </XYChartOverlayRefContext.Provider>\n    </InteractionsOverlay>\n  );\n};\n\nXYChartOverlay['displayName'] = 'XYChartOverlay';\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import { every } from 'lodash-es';\nimport { useEffect, useRef, type FocusEvent } from 'react';\n\nimport { XYChartSynchronizedCrosshair } from './XYChartSynchronizedCrosshair.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { InteractionsOverlay } from '../../../core/components/interactions-overlay/InteractionsOverlay.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport {\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n  useZoomState,\n} from '../../store/selectors.js';\nimport { XYChartSelectionArea } from '../selection/XYChartSelectionArea.js';\nimport { XYChartToolbar } from '../toolbar/XYChartToolbar.js';\nimport { XYChartOverlayTooltip } from '../tooltip/XYChartOverlayTooltip.js';\nimport { XYChartCrosshair } from './explore/XYChartCrosshair.js';\nimport { XYChartLinearPoint } from './explore/XYChartLinearPoint.js';\nimport { XYChartRectanglePoint } from './explore/XYChartRectanglePoint.js';\nimport { useOverlayEvents } from './hooks/useOverlayEvents.js';\nimport { isOwnEvent } from '../../../core/components/interactions-overlay/utils/is-own-event.js';\nimport {\n  useSelector,\n  useTooltipSnapshot,\n} from '../../../core/components/overlay-tooltip/selectors.js';\nimport type { _SelectionRef } from '../../../core/components/selection-area/types.js';\nimport { SynchronizedSelectionArea } from '../../../core/components/shared-chart-interactions/components/SynchronizedSelectionArea.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { useToolbarHandlerRef } from '../../../core/components/toolbar/hooks/useToolbarHandlerRef.js';\nimport { zIndicesXYChartAreas } from '../../constants/xy-chart-z-index-areas.js';\nimport { XYChartSelectionAreaRefContext } from '../../context/XYChartSelectionAreaRef.context.js';\nimport { useSyncedXScaleByPriority } from '../../hooks/useSyncedXScaleByPriority.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartId } from '../../hooks/useXYChartId.js';\n\nexport const XYChartOverlay = () => {\n  const setState = useSetState();\n  const handlerRef = useToolbarHandlerRef();\n  const overlay = useOverlay();\n  const selectionRef = useRef<_SelectionRef>(null);\n  const { width, height } = useGridPlotSize();\n  useSelector(({ inBounds, pinned }) => `${inBounds}-${pinned}`);\n  const { inBounds, pinned } = useTooltipSnapshot();\n  const {\n    handleModeChange,\n    handleHover,\n    handleTogglePin,\n    handleReset,\n    handleLeave,\n    handlePanChange,\n    handleSelectChange,\n    handleSelectEnd,\n    handleZoomChange,\n    handleSelectStart,\n    resetTooltip,\n  } = useOverlayEvents();\n  const mode = useInteractionModeState();\n  const selectState = useSelectState();\n  const synchronizedSelection = useSynchronizedSelection();\n  const chartId = useXYChartId();\n  const syncedXScale = useSyncedXScaleByPriority();\n  const { axesMetadata } = useXYChartData();\n  const { zoomOutEnabled } = useZoomState();\n  const isZoomDisabled = !axesMetadata.isZoomEnabled;\n  const isPanDisabled = !(axesMetadata.isPanEnabled && zoomOutEnabled);\n\n  useEffect(() => {\n    if (\n      every([\n        selectState,\n        !synchronizedSelection.selectedChartId,\n        !synchronizedSelection?.disabled,\n      ])\n    ) {\n      // clear current chart selection if the shared selection was removed\n      setState((s) => ({ ...s, select: undefined }));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [synchronizedSelection.selectedChartId]);\n\n  useEffect(() => {\n    if (synchronizedSelection.selectedChartId === chartId && !selectState) {\n      // clear shared chart selection if the current selection was removed\n      synchronizedSelection.resetSelectionState?.();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [!!selectState]);\n\n  const showHighlightedData =\n    selectState === undefined || selectState?.variant === 'select';\n  const handleFocus = (event?: FocusEvent) => {\n    if (!event || event.cancelable) {\n      return;\n    }\n    if (isOwnEvent(event)) {\n      handlerRef.current.handleFocus();\n    }\n  };\n  return (\n    <InteractionsOverlay\n      style={{\n        zIndex: zIndicesXYChartAreas.overlays,\n        userSelect: selectState?.finished === false ? 'none' : 'auto',\n      }}\n      ref={overlay.overlayRef}\n      mode={mode}\n      pinned={pinned}\n      selectionArea={\n        selectState ? [selectState?.start, selectState?.end] : undefined\n      }\n      width={width}\n      height={height}\n      onModeChange={handleModeChange}\n      onReset={handleReset}\n      onLeave={handleLeave}\n      onPanChange={handlePanChange}\n      onHover={handleHover}\n      onFocus={handleFocus}\n      onTogglePin={({ pin, position }) => handleTogglePin(pin, position)}\n      onSelectStart={handleSelectStart}\n      onSelectChange={handleSelectChange}\n      onSelectEnd={(event) => handleSelectEnd(event, selectionRef)}\n      onZoomChange={handleZoomChange}\n      isZoomDisabled={isZoomDisabled}\n      isZoomXDisabled={isZoomDisabled}\n      isPanDisabled={isPanDisabled}\n    >\n      {(inBounds || pinned || selectState) && (\n        <>\n          <XYChartOverlayTooltip />\n          <XYChartCrosshair chartRef={overlay.overlayRef} />\n          {showHighlightedData && (\n            <>\n              <XYChartRectanglePoint />\n              <XYChartLinearPoint />\n            </>\n          )}\n        </>\n      )}\n      <XYChartSynchronizedCrosshair />\n      <XYChartSelectionAreaRefContext.Provider value={selectionRef}>\n        <XYChartToolbar onMouseEnter={resetTooltip} handlerRef={handlerRef} />\n        <XYChartSelectionArea />\n      </XYChartSelectionAreaRefContext.Provider>\n      {synchronizedSelection.selectedChartId &&\n        synchronizedSelection.selectedChartId !== chartId &&\n        syncedXScale && <SynchronizedSelectionArea scale={syncedXScale} />}\n    </InteractionsOverlay>\n  );\n};\n\nXYChartOverlay['displayName'] = 'XYChartOverlay';\n"],
+  "mappings": "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",
+  "names": ["inBounds", "pinned"]
 }

package/esm/charts/xy-chart/components/overlay/explore/XYChartCrosshair.css

@@ -1,4 +1,4 @@
-._1bbe5uo0-3-2-1 {
+._1bbe5uo0-3-3-1 {
   overflow: visible;
   cursor: crosshair;
   z-index: 1;

package/esm/charts/xy-chart/components/overlay/explore/XYChartCrosshair.js

@@ -6,7 +6,11 @@ import { plotLayout } from "../../../../core/components/chart-grid/ChartGrid.sty
 import { useGridPlotSize } from "../../../../core/components/chart-grid/hooks/useGridPlotSize.js";
 import { HorizontalCrosshair } from "../../../../core/components/crosshair/HorizontalCrosshair.js";
 import { VerticalCrosshair } from "../../../../core/components/crosshair/VerticalCrosshair.js";
-import { reduceResetExploreVisible } from "../../../../core/components/interactions-state-helpers/reducers/reset-reducers.js";
+import {
+  useSelector,
+  useTooltipSnapshot
+} from "../../../../core/components/overlay-tooltip/selectors.js";
+import { useTooltipReducer } from "../../../../core/components/overlay-tooltip/useTooltipReducer.js";
 import { useApplyCallbackOnScroll } from "../../../../core/hooks/useApplyCallbackOnScroll.js";
 import { useAxesFormatter } from "../../../hooks/useAxesFormatter.js";
 import { useGetThresholds } from "../../../hooks/useGetThresholds.js";
@@ -14,11 +18,7 @@ import { useVisibleAxesConfig } from "../../../hooks/useVisibleAxesConfig.js";
 import { useVisibleAxesScales } from "../../../hooks/useVisibleAxesScales.js";
 import { useXYChartData } from "../../../hooks/useXYChartData.js";
 import { useXYChartScales } from "../../../hooks/useXYChartScales.js";
-import {
-  useContentState,
-  usePositionState,
-  useSetState
-} from "../../../store/selectors.js";
+import { UndefinedContent } from "../../../types/state.js";
 import {
   isAreaTooltipContent,
   isDotTooltipContent,
@@ -28,10 +28,14 @@ import { relAccessor } from "../../../utils/value-representation.js";
 import { calculateCrosshairCoordinates } from "../utils/calculate-crosshair-coordinates.js";
 import { chartCrosshairDataTransformer as transformer } from "../utils/chartCrosshairDataTransformer.js";
 function XYChartCrosshair({
-  pinned,
   chartRef
 }) {
-  const { relative: position } = usePositionState() ?? {};
+  const dispatch = useTooltipReducer();
+  useSelector(
+    ({ relativeX: relativeX2, relativeY: relativeY2, pinned: pinned2 }) => `${relativeX2}-${relativeY2}-${pinned2}`
+  );
+  const { relativeX, relativeY, pinned, data } = useTooltipSnapshot();
+  const position = relativeX !== null && relativeY !== null ? { x: relativeX, y: relativeY } : void 0;
   const axesScale = useVisibleAxesScales();
   const axesConfig = useVisibleAxesConfig();
   const axesIdToFormatter = useAxesFormatter();
@@ -39,11 +43,9 @@ function XYChartCrosshair({
   const { offset: thresholdOffset } = useGetThresholds();
   const { axisIdToScaleDomain, seriesToMetadata, datapointMetadataMap } = useXYChartData();
   const chartBounds = chartRef.current?.getBoundingClientRect();
-  const tooltipContent = useContentState();
+  const tooltipContent = data.metadata || UndefinedContent;
   const axisIdToScales = useXYChartScales();
-  const setState = useSetState();
-  const onScrollCallback = () => setState(reduceResetExploreVisible);
-  useApplyCallbackOnScroll(pinned, onScrollCallback);
+  useApplyCallbackOnScroll(pinned, dispatch({ type: "RESET_TOOLTIP" }));
   const { xAxis, yAxis, variant, orientation, isStacked } = seriesToMetadata.get(tooltipContent?.series) ?? {};
   const isArea = isAreaTooltipContent(tooltipContent);
   const isHorizontal = orientation === "horizontal";

package/esm/charts/xy-chart/components/overlay/explore/XYChartCrosshair.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/XYChartCrosshair.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type RefObject, useMemo } from 'react';\n\nimport { crosshair } from './XYChartCrosshair.sty.js';\nimport { plotLayout } from '../../../../core/components/chart-grid/ChartGrid.sty.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { HorizontalCrosshair } from '../../../../core/components/crosshair/HorizontalCrosshair.js';\nimport { VerticalCrosshair } from '../../../../core/components/crosshair/VerticalCrosshair.js';\nimport { reduceResetExploreVisible } from '../../../../core/components/interactions-state-helpers/reducers/reset-reducers.js';\nimport { useApplyCallbackOnScroll } from '../../../../core/hooks/useApplyCallbackOnScroll.js';\nimport { useAxesFormatter } from '../../../hooks/useAxesFormatter.js';\nimport { useGetThresholds } from '../../../hooks/useGetThresholds.js';\nimport { useVisibleAxesConfig } from '../../../hooks/useVisibleAxesConfig.js';\nimport { useVisibleAxesScales } from '../../../hooks/useVisibleAxesScales.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport {\n  useContentState,\n  usePositionState,\n  useSetState,\n} from '../../../store/selectors.js';\nimport {\n  isAreaTooltipContent,\n  isDotTooltipContent,\n  isLineTooltipContent,\n} from '../../../utils/type-guards.js';\nimport { relAccessor } from '../../../utils/value-representation.js';\nimport { calculateCrosshairCoordinates } from '../utils/calculate-crosshair-coordinates.js';\nimport { chartCrosshairDataTransformer as transformer } from '../utils/chartCrosshairDataTransformer.js';\n\nexport function XYChartCrosshair({\n  pinned,\n  chartRef,\n}: Readonly<{\n  chartRef: RefObject<HTMLDivElement | null>;\n  pinned: boolean;\n}>) {\n  const { relative: position } = usePositionState() ?? {};\n  const axesScale = useVisibleAxesScales();\n  const axesConfig = useVisibleAxesConfig();\n  const axesIdToFormatter = useAxesFormatter();\n  const { width, height } = useGridPlotSize();\n  const { offset: thresholdOffset } = useGetThresholds();\n  const { axisIdToScaleDomain, seriesToMetadata, datapointMetadataMap } =\n    useXYChartData();\n\n  const chartBounds = chartRef.current?.getBoundingClientRect();\n  const tooltipContent = useContentState();\n  const axisIdToScales = useXYChartScales();\n\n  const setState = useSetState();\n  const onScrollCallback = () => setState(reduceResetExploreVisible);\n\n  useApplyCallbackOnScroll(pinned, onScrollCallback);\n\n  const { xAxis, yAxis, variant, orientation, isStacked } =\n    seriesToMetadata.get(tooltipContent?.series) ?? {};\n\n  const isArea = isAreaTooltipContent(tooltipContent);\n  const isHorizontal = orientation === 'horizontal';\n\n  const calculatedCoordinates = useMemo(() => {\n    const tooltipContentHasCenteredCrosshair =\n      isDotTooltipContent(tooltipContent) ||\n      isLineTooltipContent(tooltipContent) ||\n      isAreaTooltipContent(tooltipContent);\n\n    if (\n      !pinned ||\n      !tooltipContentHasCenteredCrosshair ||\n      !tooltipContent.series ||\n      !tooltipContent.datapoint\n    ) {\n      return null;\n    }\n\n    const xRelAccessor = xAxis\n      ? relAccessor(xAxis, axisIdToScaleDomain)\n      : undefined;\n    const yRelAccessor = yAxis\n      ? relAccessor(yAxis, axisIdToScaleDomain)\n      : undefined;\n\n    return calculateCrosshairCoordinates({\n      pinned,\n      tooltipContentHasCenteredCrosshair,\n      tooltipContentSeries: tooltipContent.series,\n      datapoint: tooltipContent.datapoint,\n      axisIdToScales,\n      datapointMetadataMap,\n      xRelAccessor,\n      yRelAccessor,\n      isArea,\n      isHorizontal,\n      isStacked,\n    });\n  }, [\n    tooltipContent,\n    xAxis,\n    yAxis,\n    axisIdToScaleDomain,\n    pinned,\n    axisIdToScales,\n    datapointMetadataMap,\n    isArea,\n    isHorizontal,\n    isStacked,\n  ]);\n\n  const coordinates = calculatedCoordinates ?? position ?? { x: 0, y: 0 };\n\n  if (!position) {\n    return null;\n  }\n\n  const { labels } = transformer({\n    position,\n    pinned,\n    axesScale,\n    axesIdToFormatter,\n    axesConfig,\n    width,\n  });\n\n  const isBottomLabelRotated =\n    axesConfig['bottom']?.tickLabelLayout === 'vertical';\n  const isTopLabelRotated = axesConfig['top']?.tickLabelLayout === 'vertical';\n\n  const leftOffset = labels.left ? thresholdOffset.left : 0;\n  const rightOffset = labels.right ? thresholdOffset.right : 0;\n  const widthWithOffset = width + leftOffset + rightOffset;\n\n  const isBand = variant === 'band';\n  const showHorizontalCrosshair = !isBand || isHorizontal || !pinned;\n  const showVerticalCrosshair = !isBand || !isHorizontal || !pinned;\n\n  return (\n    <svg className={clsx(plotLayout, crosshair)}>\n      {showHorizontalCrosshair && (\n        <HorizontalCrosshair\n          dashed={!pinned}\n          leftLabel={labels.left}\n          rightLabel={labels.right}\n          y={coordinates.y}\n          width={widthWithOffset}\n          height={height}\n          chartBounds={chartBounds}\n          leftOffset={leftOffset}\n          rightOffset={rightOffset}\n        />\n      )}\n      {showVerticalCrosshair && (\n        <VerticalCrosshair\n          dashed={!pinned}\n          bottomLabel={labels.bottom}\n          topLabel={labels.top}\n          isBottomLabelRotated={isBottomLabelRotated}\n          isTopLabelRotated={isTopLabelRotated}\n          x={coordinates.x}\n          height={height}\n          width={widthWithOffset}\n          chartBounds={chartBounds}\n        />\n      )}\n    </svg>\n  );\n}\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type RefObject, useMemo } from 'react';\n\nimport { crosshair } from './XYChartCrosshair.sty.js';\nimport { plotLayout } from '../../../../core/components/chart-grid/ChartGrid.sty.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { HorizontalCrosshair } from '../../../../core/components/crosshair/HorizontalCrosshair.js';\nimport { VerticalCrosshair } from '../../../../core/components/crosshair/VerticalCrosshair.js';\nimport {\n  useSelector,\n  useTooltipSnapshot,\n} from '../../../../core/components/overlay-tooltip/selectors.js';\nimport { useTooltipReducer } from '../../../../core/components/overlay-tooltip/useTooltipReducer.js';\nimport { useApplyCallbackOnScroll } from '../../../../core/hooks/useApplyCallbackOnScroll.js';\nimport { useAxesFormatter } from '../../../hooks/useAxesFormatter.js';\nimport { useGetThresholds } from '../../../hooks/useGetThresholds.js';\nimport { useVisibleAxesConfig } from '../../../hooks/useVisibleAxesConfig.js';\nimport { useVisibleAxesScales } from '../../../hooks/useVisibleAxesScales.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { UndefinedContent, type TooltipContent } from '../../../types/state.js';\nimport {\n  isAreaTooltipContent,\n  isDotTooltipContent,\n  isLineTooltipContent,\n} from '../../../utils/type-guards.js';\nimport { relAccessor } from '../../../utils/value-representation.js';\nimport { calculateCrosshairCoordinates } from '../utils/calculate-crosshair-coordinates.js';\nimport { chartCrosshairDataTransformer as transformer } from '../utils/chartCrosshairDataTransformer.js';\n\nexport function XYChartCrosshair({\n  chartRef,\n}: Readonly<{\n  chartRef: RefObject<HTMLDivElement | null>;\n}>) {\n  const dispatch = useTooltipReducer();\n  useSelector(\n    ({ relativeX, relativeY, pinned }) => `${relativeX}-${relativeY}-${pinned}`,\n  );\n  const { relativeX, relativeY, pinned, data } = useTooltipSnapshot();\n  const position =\n    relativeX !== null && relativeY !== null\n      ? { x: relativeX, y: relativeY }\n      : undefined;\n\n  const axesScale = useVisibleAxesScales();\n  const axesConfig = useVisibleAxesConfig();\n  const axesIdToFormatter = useAxesFormatter();\n  const { width, height } = useGridPlotSize();\n  const { offset: thresholdOffset } = useGetThresholds();\n  const { axisIdToScaleDomain, seriesToMetadata, datapointMetadataMap } =\n    useXYChartData();\n\n  const chartBounds = chartRef.current?.getBoundingClientRect();\n  const tooltipContent = (data.metadata as TooltipContent) || UndefinedContent;\n  const axisIdToScales = useXYChartScales();\n  useApplyCallbackOnScroll(pinned, dispatch({ type: 'RESET_TOOLTIP' }));\n\n  const { xAxis, yAxis, variant, orientation, isStacked } =\n    seriesToMetadata.get(tooltipContent?.series) ?? {};\n\n  const isArea = isAreaTooltipContent(tooltipContent);\n  const isHorizontal = orientation === 'horizontal';\n\n  const calculatedCoordinates = useMemo(() => {\n    const tooltipContentHasCenteredCrosshair =\n      isDotTooltipContent(tooltipContent) ||\n      isLineTooltipContent(tooltipContent) ||\n      isAreaTooltipContent(tooltipContent);\n\n    if (\n      !pinned ||\n      !tooltipContentHasCenteredCrosshair ||\n      !tooltipContent.series ||\n      !tooltipContent.datapoint\n    ) {\n      return null;\n    }\n\n    const xRelAccessor = xAxis\n      ? relAccessor(xAxis, axisIdToScaleDomain)\n      : undefined;\n    const yRelAccessor = yAxis\n      ? relAccessor(yAxis, axisIdToScaleDomain)\n      : undefined;\n\n    return calculateCrosshairCoordinates({\n      pinned,\n      tooltipContentHasCenteredCrosshair,\n      tooltipContentSeries: tooltipContent.series,\n      datapoint: tooltipContent.datapoint,\n      axisIdToScales,\n      datapointMetadataMap,\n      xRelAccessor,\n      yRelAccessor,\n      isArea,\n      isHorizontal,\n      isStacked,\n    });\n  }, [\n    tooltipContent,\n    xAxis,\n    yAxis,\n    axisIdToScaleDomain,\n    pinned,\n    axisIdToScales,\n    datapointMetadataMap,\n    isArea,\n    isHorizontal,\n    isStacked,\n  ]);\n\n  const coordinates = calculatedCoordinates ?? position ?? { x: 0, y: 0 };\n\n  if (!position) {\n    return null;\n  }\n\n  const { labels } = transformer({\n    position,\n    pinned,\n    axesScale,\n    axesIdToFormatter,\n    axesConfig,\n    width,\n  });\n\n  const isBottomLabelRotated =\n    axesConfig['bottom']?.tickLabelLayout === 'vertical';\n  const isTopLabelRotated = axesConfig['top']?.tickLabelLayout === 'vertical';\n\n  const leftOffset = labels.left ? thresholdOffset.left : 0;\n  const rightOffset = labels.right ? thresholdOffset.right : 0;\n  const widthWithOffset = width + leftOffset + rightOffset;\n\n  const isBand = variant === 'band';\n  const showHorizontalCrosshair = !isBand || isHorizontal || !pinned;\n  const showVerticalCrosshair = !isBand || !isHorizontal || !pinned;\n\n  return (\n    <svg className={clsx(plotLayout, crosshair)}>\n      {showHorizontalCrosshair && (\n        <HorizontalCrosshair\n          dashed={!pinned}\n          leftLabel={labels.left}\n          rightLabel={labels.right}\n          y={coordinates.y}\n          width={widthWithOffset}\n          height={height}\n          chartBounds={chartBounds}\n          leftOffset={leftOffset}\n          rightOffset={rightOffset}\n        />\n      )}\n      {showVerticalCrosshair && (\n        <VerticalCrosshair\n          dashed={!pinned}\n          bottomLabel={labels.bottom}\n          topLabel={labels.top}\n          isBottomLabelRotated={isBottomLabelRotated}\n          isTopLabelRotated={isTopLabelRotated}\n          x={coordinates.x}\n          height={height}\n          width={widthWithOffset}\n          chartBounds={chartBounds}\n        />\n      )}\n    </svg>\n  );\n}\n"],
+  "mappings": "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",
+  "names": ["relativeX", "relativeY", "pinned"]
 }

package/esm/charts/xy-chart/components/overlay/explore/XYChartCrosshair.sty.js

@@ -1,5 +1,5 @@
 import "./XYChartCrosshair.css";
-var crosshair = "_1bbe5uo0-3-2-1";
+var crosshair = "_1bbe5uo0-3-3-1";
 export {
   crosshair
 };

package/esm/charts/xy-chart/components/overlay/explore/XYChartCrosshair.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/XYChartCrosshair.css.ts"],
-  "sourcesContent": ["import './XYChartCrosshair.css';\nexport var crosshair = '_1bbe5uo0-3-2-1';"],
+  "sourcesContent": ["import './XYChartCrosshair.css';\nexport var crosshair = '_1bbe5uo0-3-3-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/charts/xy-chart/components/overlay/explore/XYChartExplore.css

@@ -1,4 +1,4 @@
-._cd1yys0-3-2-1 {
+._cd1yys0-3-3-1 {
   top: -11px;
   left: -11px;
   width: calc(100% + 22px);
@@ -6,7 +6,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._cd1yys1-3-2-1 {
+._cd1yys1-3-3-1 {
   top: 0px;
   left: 0px;
   width: calc(100% + 1px);

package/esm/charts/xy-chart/components/overlay/explore/XYChartExplore.sty.js

@@ -1,7 +1,7 @@
 import "../../../../core/components/chart-grid/ChartGrid.css";
 import "./XYChartExplore.css";
-var datapointIndicatorLayout = "_cd1yys1-3-2-1 _13lzg4k0-3-2-1";
-var datapointIndicatorShiftedLayout = "_cd1yys0-3-2-1 _13lzg4k0-3-2-1";
+var datapointIndicatorLayout = "_cd1yys1-3-3-1 _13lzg4k0-3-3-1";
+var datapointIndicatorShiftedLayout = "_cd1yys0-3-3-1 _13lzg4k0-3-3-1";
 export {
   datapointIndicatorLayout,
   datapointIndicatorShiftedLayout

package/esm/charts/xy-chart/components/overlay/explore/XYChartExplore.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/XYChartExplore.css.ts"],
-  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartExplore.css';\nexport var datapointIndicatorLayout = '_cd1yys1-3-2-1 _13lzg4k0-3-2-1';\nexport var datapointIndicatorShiftedLayout = '_cd1yys0-3-2-1 _13lzg4k0-3-2-1';"],
+  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartExplore.css';\nexport var datapointIndicatorLayout = '_cd1yys1-3-3-1 _13lzg4k0-3-3-1';\nexport var datapointIndicatorShiftedLayout = '_cd1yys0-3-3-1 _13lzg4k0-3-3-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,2BAA2B;AAC/B,IAAI,kCAAkC;",
   "names": []
 }

package/esm/charts/xy-chart/components/overlay/explore/XYChartLinearPoint.js

@@ -12,14 +12,15 @@ import { useLineData } from "../../../hooks/useLineData.js";
 import { useXYChartData } from "../../../hooks/useXYChartData.js";
 import { useXYChartLinearSelection } from "../../../hooks/useXYChartLinearSelection.js";
 import { useXYChartScales } from "../../../hooks/useXYChartScales.js";
-import { useContentState, useSelectState } from "../../../store/selectors.js";
+import { useSelectState } from "../../../store/selectors.js";
+import { useTooltipMetadata } from "../hooks/useTooltipMetadata.js";
 import {
   buildContentHighlightedPoint,
   buildSelectionHighlightedPoints,
   hasLinearContentPoint
 } from "../utils/get-selected-datapoints.js";
 const XYChartLinearPoint = memo(() => {
-  const contentState = useContentState();
+  const contentState = useTooltipMetadata("linear");
   const selectState = useSelectState();
   const { width, height } = useGridPlotSize();
   const axisIdToScales = useXYChartScales();

package/esm/charts/xy-chart/components/overlay/explore/XYChartLinearPoint.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/XYChartLinearPoint.tsx"],
-  "sourcesContent": ["import { memo, type MutableRefObject } from 'react';\n\nimport { HighlightedPointCanvas } from './HighlightedPointCanvas.js';\nimport { datapointIndicatorShiftedLayout } from './XYChartExplore.sty.js';\nimport { Canvas } from '../../../../core/components/canvas/Canvas.js';\nimport { CanvasContext } from '../../../../core/components/canvas/CanvasContext.js';\nimport type { CanvasShape } from '../../../../core/components/canvas/types/canvas-shape.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { POINT_OVERLAY_PADDING } from '../../../../core/components/data-point/constants.js';\nimport { useAreaData } from '../../../hooks/useAreaData.js';\nimport { useDotData } from '../../../hooks/useDotData.js';\nimport { useLineData } from '../../../hooks/useLineData.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartLinearSelection } from '../../../hooks/useXYChartLinearSelection.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { useContentState, useSelectState } from '../../../store/selectors.js';\nimport { type HighlightedLinearPoint } from '../../../types/xy-chart-internals.js';\nimport {\n  buildContentHighlightedPoint,\n  buildSelectionHighlightedPoints,\n  hasLinearContentPoint,\n} from '../utils/get-selected-datapoints.js';\n\nexport const XYChartLinearPoint = memo(() => {\n  const contentState = useContentState();\n  const selectState = useSelectState();\n  const { width, height } = useGridPlotSize();\n  const axisIdToScales = useXYChartScales();\n  const linearSelection = useXYChartLinearSelection();\n  const { axisIdToScaleDomain } = useXYChartData();\n  const { axes, datapointMetadataMap } = useXYChartData();\n\n  const {\n    seriesToMetadata: dotSeriesMeta,\n    filteredSeriesWithDatapoints: dotSeriesWithDatapoints,\n  } = useDotData();\n  const {\n    seriesToMetadata: lineSeriesMeta,\n    filteredSeriesWithDatapoints: lineSeriesWithDatapoints,\n  } = useLineData();\n  const {\n    seriesToMetadata: areaSeriesMeta,\n    filteredSeriesWithDatapoints: areaSeriesWithDatapoints,\n  } = useAreaData();\n\n  const showContentPoint = hasLinearContentPoint(contentState);\n\n  const showPoint =\n    !showContentPoint &&\n    (!selectState || linearSelection.selectionConfigByAxisId.size === 0);\n\n  if (showPoint) {\n    return null;\n  }\n\n  const selectionPoints = buildSelectionHighlightedPoints({\n    selectState,\n    linearSelection,\n    width,\n    axisIdToScales,\n    dotSeriesWithDatapoints,\n    lineSeriesWithDatapoints,\n    areaSeriesWithDatapoints,\n    dotSeriesMeta,\n    lineSeriesMeta,\n    areaSeriesMeta,\n    axisIdToScaleDomain,\n    axes,\n    datapointMetadataMap,\n  });\n\n  const contentPoints = showContentPoint\n    ? buildContentHighlightedPoint({\n        contentState,\n        axisIdToScales,\n        dotSeriesMeta,\n        lineSeriesMeta,\n        areaSeriesMeta,\n        axisIdToScaleDomain,\n        datapointMetadataMap,\n      })\n    : [];\n\n  const highlightedPoints: HighlightedLinearPoint[] = [\n    ...selectionPoints,\n    ...contentPoints,\n  ];\n\n  if (!highlightedPoints.length) {\n    return null;\n  }\n\n  return (\n    <div className={datapointIndicatorShiftedLayout}>\n      <CanvasContext.Provider\n        value={{\n          shapeRefs: new Map<string, MutableRefObject<CanvasShape>>(),\n        }}\n      >\n        <Canvas\n          width={width + 2 * POINT_OVERLAY_PADDING}\n          height={height + 2 * POINT_OVERLAY_PADDING}\n        >\n          <HighlightedPointCanvas points={highlightedPoints} />\n        </Canvas>\n      </CanvasContext.Provider>\n    </div>\n  );\n});\n\nXYChartLinearPoint['displayName'] = 'XYChartLinearPoint';\n"],
-  "mappings": "AAuGU;AAvGV,SAAS,YAAmC;AAE5C,SAAS,8BAA8B;AACvC,SAAS,uCAAuC;AAChD,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,iCAAiC;AAC1C,SAAS,wBAAwB;AACjC,SAAS,iBAAiB,sBAAsB;AAEhD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,qBAAqB,KAAK,MAAM;AAC3C,QAAM,eAAe,gBAAgB;AACrC,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,OAAO,OAAO,IAAI,gBAAgB;AAC1C,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,kBAAkB,0BAA0B;AAClD,QAAM,EAAE,oBAAoB,IAAI,eAAe;AAC/C,QAAM,EAAE,MAAM,qBAAqB,IAAI,eAAe;AAEtD,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,WAAW;AACf,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,YAAY;AAChB,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,YAAY;AAEhB,QAAM,mBAAmB,sBAAsB,YAAY;AAE3D,QAAM,YACJ,CAAC,qBACA,CAAC,eAAe,gBAAgB,wBAAwB,SAAS;AAEpE,MAAI,WAAW;AACb,WAAO;AAAA,EACT;AAEA,QAAM,kBAAkB,gCAAgC;AAAA,IACtD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,mBAClB,6BAA6B;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,IACD,CAAC;AAEL,QAAM,oBAA8C;AAAA,IAClD,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,MAAI,CAAC,kBAAkB,QAAQ;AAC7B,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,SAAI,WAAW,iCACd;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,WAAW,oBAAI,IAA2C;AAAA,MAC5D;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,QAAQ,IAAI;AAAA,UACnB,QAAQ,SAAS,IAAI;AAAA,UAErB,8BAAC,0BAAuB,QAAQ,mBAAmB;AAAA;AAAA,MACrD;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;AAED,mBAAmB,aAAa,IAAI;",
+  "sourcesContent": ["import { memo, type MutableRefObject } from 'react';\n\nimport { HighlightedPointCanvas } from './HighlightedPointCanvas.js';\nimport { datapointIndicatorShiftedLayout } from './XYChartExplore.sty.js';\nimport { Canvas } from '../../../../core/components/canvas/Canvas.js';\nimport { CanvasContext } from '../../../../core/components/canvas/CanvasContext.js';\nimport type { CanvasShape } from '../../../../core/components/canvas/types/canvas-shape.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { POINT_OVERLAY_PADDING } from '../../../../core/components/data-point/constants.js';\nimport { useAreaData } from '../../../hooks/useAreaData.js';\nimport { useDotData } from '../../../hooks/useDotData.js';\nimport { useLineData } from '../../../hooks/useLineData.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartLinearSelection } from '../../../hooks/useXYChartLinearSelection.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { useSelectState } from '../../../store/selectors.js';\nimport { type HighlightedLinearPoint } from '../../../types/xy-chart-internals.js';\nimport { useTooltipMetadata } from '../hooks/useTooltipMetadata.js';\nimport {\n  buildContentHighlightedPoint,\n  buildSelectionHighlightedPoints,\n  hasLinearContentPoint,\n} from '../utils/get-selected-datapoints.js';\n\nexport const XYChartLinearPoint = memo(() => {\n  const contentState = useTooltipMetadata('linear');\n  const selectState = useSelectState();\n  const { width, height } = useGridPlotSize();\n  const axisIdToScales = useXYChartScales();\n  const linearSelection = useXYChartLinearSelection();\n  const { axisIdToScaleDomain } = useXYChartData();\n  const { axes, datapointMetadataMap } = useXYChartData();\n\n  const {\n    seriesToMetadata: dotSeriesMeta,\n    filteredSeriesWithDatapoints: dotSeriesWithDatapoints,\n  } = useDotData();\n  const {\n    seriesToMetadata: lineSeriesMeta,\n    filteredSeriesWithDatapoints: lineSeriesWithDatapoints,\n  } = useLineData();\n  const {\n    seriesToMetadata: areaSeriesMeta,\n    filteredSeriesWithDatapoints: areaSeriesWithDatapoints,\n  } = useAreaData();\n\n  const showContentPoint = hasLinearContentPoint(contentState);\n\n  const showPoint =\n    !showContentPoint &&\n    (!selectState || linearSelection.selectionConfigByAxisId.size === 0);\n\n  if (showPoint) {\n    return null;\n  }\n\n  const selectionPoints = buildSelectionHighlightedPoints({\n    selectState,\n    linearSelection,\n    width,\n    axisIdToScales,\n    dotSeriesWithDatapoints,\n    lineSeriesWithDatapoints,\n    areaSeriesWithDatapoints,\n    dotSeriesMeta,\n    lineSeriesMeta,\n    areaSeriesMeta,\n    axisIdToScaleDomain,\n    axes,\n    datapointMetadataMap,\n  });\n\n  const contentPoints = showContentPoint\n    ? buildContentHighlightedPoint({\n        contentState,\n        axisIdToScales,\n        dotSeriesMeta,\n        lineSeriesMeta,\n        areaSeriesMeta,\n        axisIdToScaleDomain,\n        datapointMetadataMap,\n      })\n    : [];\n\n  const highlightedPoints: HighlightedLinearPoint[] = [\n    ...selectionPoints,\n    ...contentPoints,\n  ];\n\n  if (!highlightedPoints.length) {\n    return null;\n  }\n\n  return (\n    <div className={datapointIndicatorShiftedLayout}>\n      <CanvasContext.Provider\n        value={{\n          shapeRefs: new Map<string, MutableRefObject<CanvasShape>>(),\n        }}\n      >\n        <Canvas\n          width={width + 2 * POINT_OVERLAY_PADDING}\n          height={height + 2 * POINT_OVERLAY_PADDING}\n        >\n          <HighlightedPointCanvas points={highlightedPoints} />\n        </Canvas>\n      </CanvasContext.Provider>\n    </div>\n  );\n});\n\nXYChartLinearPoint['displayName'] = 'XYChartLinearPoint';\n"],
+  "mappings": "AAwGU;AAxGV,SAAS,YAAmC;AAE5C,SAAS,8BAA8B;AACvC,SAAS,uCAAuC;AAChD,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,iCAAiC;AAC1C,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAE/B,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,qBAAqB,KAAK,MAAM;AAC3C,QAAM,eAAe,mBAAmB,QAAQ;AAChD,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,OAAO,OAAO,IAAI,gBAAgB;AAC1C,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,kBAAkB,0BAA0B;AAClD,QAAM,EAAE,oBAAoB,IAAI,eAAe;AAC/C,QAAM,EAAE,MAAM,qBAAqB,IAAI,eAAe;AAEtD,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,WAAW;AACf,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,YAAY;AAChB,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,YAAY;AAEhB,QAAM,mBAAmB,sBAAsB,YAAY;AAE3D,QAAM,YACJ,CAAC,qBACA,CAAC,eAAe,gBAAgB,wBAAwB,SAAS;AAEpE,MAAI,WAAW;AACb,WAAO;AAAA,EACT;AAEA,QAAM,kBAAkB,gCAAgC;AAAA,IACtD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,mBAClB,6BAA6B;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,IACD,CAAC;AAEL,QAAM,oBAA8C;AAAA,IAClD,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,MAAI,CAAC,kBAAkB,QAAQ;AAC7B,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,SAAI,WAAW,iCACd;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,WAAW,oBAAI,IAA2C;AAAA,MAC5D;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,QAAQ,IAAI;AAAA,UACnB,QAAQ,SAAS,IAAI;AAAA,UAErB,8BAAC,0BAAuB,QAAQ,mBAAmB;AAAA;AAAA,MACrD;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;AAED,mBAAmB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/xy-chart/components/overlay/explore/XYChartRectanglePoint.js

@@ -11,10 +11,11 @@ import { useRectData } from "../../../hooks/useRectData.js";
 import { useXYChartData } from "../../../hooks/useXYChartData.js";
 import { useXYChartRectSelection } from "../../../hooks/useXYChartRectSelection.js";
 import { useXYChartScales } from "../../../hooks/useXYChartScales.js";
-import { useContentState, useSelectState } from "../../../store/selectors.js";
+import { useSelectState } from "../../../store/selectors.js";
+import { useTooltipMetadata } from "../hooks/useTooltipMetadata.js";
 import { buildRectangleHighlightedPoints } from "../utils/get-selected-datapoints.js";
 const XYChartRectanglePoint = memo(() => {
-  const contentState = useContentState();
+  const contentState = useTooltipMetadata("rectangle");
   const selectState = useSelectState();
   const { width, height } = useGridPlotSize();
   const axisIdToScales = useXYChartScales();

package/esm/charts/xy-chart/components/overlay/explore/XYChartRectanglePoint.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/XYChartRectanglePoint.tsx"],
-  "sourcesContent": ["import { memo, type MutableRefObject } from 'react';\n\nimport { HighlightedRectangleCanvas } from './HighlightedRectangleCanvas.js';\nimport { datapointIndicatorLayout } from './XYChartExplore.sty.js';\nimport { Canvas } from '../../../../core/components/canvas/Canvas.js';\nimport { CanvasContext } from '../../../../core/components/canvas/CanvasContext.js';\nimport type { CanvasShape } from '../../../../core/components/canvas/types/canvas-shape.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { RECT_STROKE_WIDTH } from '../../../constants/defaults.js';\nimport { useBarData } from '../../../hooks/useBarData.js';\nimport { useRectData } from '../../../hooks/useRectData.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartRectSelection } from '../../../hooks/useXYChartRectSelection.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { useContentState, useSelectState } from '../../../store/selectors.js';\nimport { buildRectangleHighlightedPoints } from '../utils/get-selected-datapoints.js';\n\nexport const XYChartRectanglePoint = memo(() => {\n  const contentState = useContentState();\n  const selectState = useSelectState();\n  const { width, height } = useGridPlotSize();\n  const axisIdToScales = useXYChartScales();\n  const rectSelection = useXYChartRectSelection();\n  const { datapointMetadataMap } = useXYChartData();\n  const { axisIdToScaleDomain, axes } = useXYChartData();\n\n  const {\n    seriesToMetadata: barSeriesMeta,\n    filteredSeriesWithDatapoints: barSeriesWithDatapoints,\n  } = useBarData();\n  const {\n    seriesToMetadata: rectSeriesMeta,\n    filteredSeriesWithDatapoints: rectSeriesWithDatapoints,\n  } = useRectData();\n\n  const highlightedRects = buildRectangleHighlightedPoints({\n    contentState,\n    selectState,\n    rectSelection,\n    width,\n    rectSeriesWithDatapoints,\n    barSeriesWithDatapoints,\n    axisIdToScales,\n    barSeriesMeta,\n    rectSeriesMeta,\n    datapointMetadataMap,\n    axisIdToScaleDomain,\n    axes,\n  });\n\n  if (!highlightedRects.length) {\n    return null;\n  }\n\n  return (\n    <div className={datapointIndicatorLayout}>\n      <CanvasContext.Provider\n        value={{\n          shapeRefs: new Map<string, MutableRefObject<CanvasShape>>(),\n        }}\n      >\n        <Canvas\n          width={width + RECT_STROKE_WIDTH}\n          height={height + RECT_STROKE_WIDTH}\n        >\n          <HighlightedRectangleCanvas points={highlightedRects} />\n        </Canvas>\n      </CanvasContext.Provider>\n    </div>\n  );\n});\n\nXYChartRectanglePoint.displayName = 'XYChartRectanglePoint';\n"],
-  "mappings": "AAiEU;AAjEV,SAAS,YAAmC;AAE5C,SAAS,kCAAkC;AAC3C,SAAS,gCAAgC;AACzC,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,+BAA+B;AACxC,SAAS,wBAAwB;AACjC,SAAS,iBAAiB,sBAAsB;AAChD,SAAS,uCAAuC;AAEzC,MAAM,wBAAwB,KAAK,MAAM;AAC9C,QAAM,eAAe,gBAAgB;AACrC,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,OAAO,OAAO,IAAI,gBAAgB;AAC1C,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,gBAAgB,wBAAwB;AAC9C,QAAM,EAAE,qBAAqB,IAAI,eAAe;AAChD,QAAM,EAAE,qBAAqB,KAAK,IAAI,eAAe;AAErD,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,WAAW;AACf,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,YAAY;AAEhB,QAAM,mBAAmB,gCAAgC;AAAA,IACvD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI,CAAC,iBAAiB,QAAQ;AAC5B,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,SAAI,WAAW,0BACd;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,WAAW,oBAAI,IAA2C;AAAA,MAC5D;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,QAAQ;AAAA,UACf,QAAQ,SAAS;AAAA,UAEjB,8BAAC,8BAA2B,QAAQ,kBAAkB;AAAA;AAAA,MACxD;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;AAED,sBAAsB,cAAc;",
+  "sourcesContent": ["import { memo, type MutableRefObject } from 'react';\n\nimport { HighlightedRectangleCanvas } from './HighlightedRectangleCanvas.js';\nimport { datapointIndicatorLayout } from './XYChartExplore.sty.js';\nimport { Canvas } from '../../../../core/components/canvas/Canvas.js';\nimport { CanvasContext } from '../../../../core/components/canvas/CanvasContext.js';\nimport type { CanvasShape } from '../../../../core/components/canvas/types/canvas-shape.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { RECT_STROKE_WIDTH } from '../../../constants/defaults.js';\nimport { useBarData } from '../../../hooks/useBarData.js';\nimport { useRectData } from '../../../hooks/useRectData.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartRectSelection } from '../../../hooks/useXYChartRectSelection.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { useSelectState } from '../../../store/selectors.js';\nimport { useTooltipMetadata } from '../hooks/useTooltipMetadata.js';\nimport { buildRectangleHighlightedPoints } from '../utils/get-selected-datapoints.js';\n\nexport const XYChartRectanglePoint = memo(() => {\n  const contentState = useTooltipMetadata('rectangle');\n  const selectState = useSelectState();\n  const { width, height } = useGridPlotSize();\n  const axisIdToScales = useXYChartScales();\n  const rectSelection = useXYChartRectSelection();\n  const { datapointMetadataMap } = useXYChartData();\n  const { axisIdToScaleDomain, axes } = useXYChartData();\n\n  const {\n    seriesToMetadata: barSeriesMeta,\n    filteredSeriesWithDatapoints: barSeriesWithDatapoints,\n  } = useBarData();\n  const {\n    seriesToMetadata: rectSeriesMeta,\n    filteredSeriesWithDatapoints: rectSeriesWithDatapoints,\n  } = useRectData();\n\n  const highlightedRects = buildRectangleHighlightedPoints({\n    contentState,\n    selectState,\n    rectSelection,\n    width,\n    rectSeriesWithDatapoints,\n    barSeriesWithDatapoints,\n    axisIdToScales,\n    barSeriesMeta,\n    rectSeriesMeta,\n    datapointMetadataMap,\n    axisIdToScaleDomain,\n    axes,\n  });\n\n  if (!highlightedRects.length) {\n    return null;\n  }\n\n  return (\n    <div className={datapointIndicatorLayout}>\n      <CanvasContext.Provider\n        value={{\n          shapeRefs: new Map<string, MutableRefObject<CanvasShape>>(),\n        }}\n      >\n        <Canvas\n          width={width + RECT_STROKE_WIDTH}\n          height={height + RECT_STROKE_WIDTH}\n        >\n          <HighlightedRectangleCanvas points={highlightedRects} />\n        </Canvas>\n      </CanvasContext.Provider>\n    </div>\n  );\n});\n\nXYChartRectanglePoint.displayName = 'XYChartRectanglePoint';\n"],
+  "mappings": "AAkEU;AAlEV,SAAS,YAAmC;AAE5C,SAAS,kCAAkC;AAC3C,SAAS,gCAAgC;AACzC,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,+BAA+B;AACxC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,uCAAuC;AAEzC,MAAM,wBAAwB,KAAK,MAAM;AAC9C,QAAM,eAAe,mBAAmB,WAAW;AACnD,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,OAAO,OAAO,IAAI,gBAAgB;AAC1C,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,gBAAgB,wBAAwB;AAC9C,QAAM,EAAE,qBAAqB,IAAI,eAAe;AAChD,QAAM,EAAE,qBAAqB,KAAK,IAAI,eAAe;AAErD,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,WAAW;AACf,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,YAAY;AAEhB,QAAM,mBAAmB,gCAAgC;AAAA,IACvD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI,CAAC,iBAAiB,QAAQ;AAC5B,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,SAAI,WAAW,0BACd;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,WAAW,oBAAI,IAA2C;AAAA,MAC5D;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,QAAQ;AAAA,UACf,QAAQ,SAAS;AAAA,UAEjB,8BAAC,8BAA2B,QAAQ,kBAAkB;AAAA;AAAA,MACxD;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;AAED,sBAAsB,cAAc;",
   "names": []
 }

package/esm/charts/xy-chart/components/overlay/hooks/useApplyPanDelta.js

@@ -1,3 +1,4 @@
+import { useTooltipReducer } from "../../../../core/components/overlay-tooltip/useTooltipReducer.js";
 import { useSynchronizedSelection } from "../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js";
 import { getNextPanDomain } from "../../../../core/components/zoom/utils/get-next-pan-domain.js";
 import { ZOOM_CHANGE_TYPE } from "../../../../core/types/zoom.js";
@@ -17,6 +18,7 @@ const useApplyPanDelta = () => {
   const axisIdToScales = useXYChartScales();
   const { axes } = useXYChartData();
   const { resetSelectionState } = useSynchronizedSelection();
+  const dispatch = useTooltipReducer();
   return (delta) => {
     const newCurrentDomain = /* @__PURE__ */ new Map();
     const allAxesHaveInfiniteZoom = axes.filter((axis) => isZoomEnabledFor(axis) && isPanEnabledFor(axis)).every(isInfiniteZoomEnabledFor);
@@ -44,6 +46,7 @@ const useApplyPanDelta = () => {
     }
     resetSelectionState?.();
     setState(reducePanDomain(newCurrentDomain));
+    dispatch({ type: "RESET_TOOLTIP" })();
   };
 };
 export {

package/esm/charts/xy-chart/components/overlay/hooks/useApplyPanDelta.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/hooks/useApplyPanDelta.ts"],
-  "sourcesContent": ["import { useSynchronizedSelection } from '../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { getNextPanDomain } from '../../../../core/components/zoom/utils/get-next-pan-domain.js';\nimport type { AnyNumberScale } from '../../../../core/types/scales.js';\nimport { ZOOM_CHANGE_TYPE } from '../../../../core/types/zoom.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { reducePanDomain } from '../../../store/reducer-pan.js';\nimport { useSetState } from '../../../store/selectors.js';\nimport { type XYChartState } from '../../../types/state.js';\nimport {\n  isInfiniteZoomEnabledFor,\n  isPanEnabledFor,\n  isZoomEnabledFor,\n} from '../../../utils/axis-interactions.js';\nimport { getCurrentScale, getInitialScale } from '../../../utils/get-scale.js';\nimport { handleZoomChange } from '../utils/zoom-change-handler.js';\n\n/**\n * Returns a callback which given a delta in pixels, will apply the pan interaction and update the state accordingly\n */\nexport const useApplyPanDelta = () => {\n  const setState = useSetState();\n  const axisIdToScales = useXYChartScales();\n  const { axes } = useXYChartData();\n  const { resetSelectionState } = useSynchronizedSelection();\n\n  return (delta: number) => {\n    const newCurrentDomain: XYChartState['currentDomain'] = new Map();\n\n    const allAxesHaveInfiniteZoom = axes\n      .filter((axis) => isZoomEnabledFor(axis) && isPanEnabledFor(axis))\n      .every(isInfiniteZoomEnabledFor);\n\n    for (const axis of axes) {\n      let nextDomain;\n      const currentScale = getCurrentScale(axisIdToScales, axis.id);\n      if (isPanEnabledFor(axis)) {\n        const initialScale = getInitialScale(axisIdToScales, axis.id);\n        const initialDomain = initialScale.domain();\n\n        const [min, max] = getNextPanDomain(\n          [+initialDomain[0], +initialDomain[1]],\n          currentScale as AnyNumberScale,\n          -delta,\n          false,\n          allAxesHaveInfiniteZoom,\n        );\n\n        nextDomain = [min, max];\n\n        handleZoomChange(axis, min, max, ZOOM_CHANGE_TYPE.Panning);\n      }\n\n      const currentDomain = currentScale.domain();\n\n      newCurrentDomain.set(\n        axis.id,\n        nextDomain\n          ? { min: nextDomain[0], max: nextDomain[1] }\n          : { min: +currentDomain[0], max: +currentDomain[1] },\n      );\n    }\n\n    resetSelectionState?.();\n    setState(reducePanDomain(newCurrentDomain));\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AAEjC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAE5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,wBAAwB;AAK1B,MAAM,mBAAmB,MAAM;AACpC,QAAM,WAAW,YAAY;AAC7B,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,EAAE,KAAK,IAAI,eAAe;AAChC,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AAEzD,SAAO,CAAC,UAAkB;AACxB,UAAM,mBAAkD,oBAAI,IAAI;AAEhE,UAAM,0BAA0B,KAC7B,OAAO,CAAC,SAAS,iBAAiB,IAAI,KAAK,gBAAgB,IAAI,CAAC,EAChE,MAAM,wBAAwB;AAEjC,eAAW,QAAQ,MAAM;AACvB,UAAI;AACJ,YAAM,eAAe,gBAAgB,gBAAgB,KAAK,EAAE;AAC5D,UAAI,gBAAgB,IAAI,GAAG;AACzB,cAAM,eAAe,gBAAgB,gBAAgB,KAAK,EAAE;AAC5D,cAAM,gBAAgB,aAAa,OAAO;AAE1C,cAAM,CAAC,KAAK,GAAG,IAAI;AAAA,UACjB,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;AAAA,UACrC;AAAA,UACA,CAAC;AAAA,UACD;AAAA,UACA;AAAA,QACF;AAEA,qBAAa,CAAC,KAAK,GAAG;AAEtB,yBAAiB,MAAM,KAAK,KAAK,iBAAiB,OAAO;AAAA,MAC3D;AAEA,YAAM,gBAAgB,aAAa,OAAO;AAE1C,uBAAiB;AAAA,QACf,KAAK;AAAA,QACL,aACI,EAAE,KAAK,WAAW,CAAC,GAAG,KAAK,WAAW,CAAC,EAAE,IACzC,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,EAAE;AAAA,MACvD;AAAA,IACF;AAEA,0BAAsB;AACtB,aAAS,gBAAgB,gBAAgB,CAAC;AAAA,EAC5C;AACF;",
+  "sourcesContent": ["import { useTooltipReducer } from '../../../../core/components/overlay-tooltip/useTooltipReducer.js';\nimport { useSynchronizedSelection } from '../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { getNextPanDomain } from '../../../../core/components/zoom/utils/get-next-pan-domain.js';\nimport type { AnyNumberScale } from '../../../../core/types/scales.js';\nimport { ZOOM_CHANGE_TYPE } from '../../../../core/types/zoom.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { reducePanDomain } from '../../../store/reducer-pan.js';\nimport { useSetState } from '../../../store/selectors.js';\nimport { type XYChartState } from '../../../types/state.js';\nimport {\n  isInfiniteZoomEnabledFor,\n  isPanEnabledFor,\n  isZoomEnabledFor,\n} from '../../../utils/axis-interactions.js';\nimport { getCurrentScale, getInitialScale } from '../../../utils/get-scale.js';\nimport { handleZoomChange } from '../utils/zoom-change-handler.js';\n\n/**\n * Returns a callback which given a delta in pixels, will apply the pan interaction and update the state accordingly\n */\nexport const useApplyPanDelta = () => {\n  const setState = useSetState();\n  const axisIdToScales = useXYChartScales();\n  const { axes } = useXYChartData();\n  const { resetSelectionState } = useSynchronizedSelection();\n  const dispatch = useTooltipReducer();\n\n  return (delta: number) => {\n    const newCurrentDomain: XYChartState['currentDomain'] = new Map();\n\n    const allAxesHaveInfiniteZoom = axes\n      .filter((axis) => isZoomEnabledFor(axis) && isPanEnabledFor(axis))\n      .every(isInfiniteZoomEnabledFor);\n\n    for (const axis of axes) {\n      let nextDomain;\n      const currentScale = getCurrentScale(axisIdToScales, axis.id);\n      if (isPanEnabledFor(axis)) {\n        const initialScale = getInitialScale(axisIdToScales, axis.id);\n        const initialDomain = initialScale.domain();\n\n        const [min, max] = getNextPanDomain(\n          [+initialDomain[0], +initialDomain[1]],\n          currentScale as AnyNumberScale,\n          -delta,\n          false,\n          allAxesHaveInfiniteZoom,\n        );\n\n        nextDomain = [min, max];\n\n        handleZoomChange(axis, min, max, ZOOM_CHANGE_TYPE.Panning);\n      }\n\n      const currentDomain = currentScale.domain();\n\n      newCurrentDomain.set(\n        axis.id,\n        nextDomain\n          ? { min: nextDomain[0], max: nextDomain[1] }\n          : { min: +currentDomain[0], max: +currentDomain[1] },\n      );\n    }\n\n    resetSelectionState?.();\n    setState(reducePanDomain(newCurrentDomain));\n    dispatch({ type: 'RESET_TOOLTIP' })();\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AAEjC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAE5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,wBAAwB;AAK1B,MAAM,mBAAmB,MAAM;AACpC,QAAM,WAAW,YAAY;AAC7B,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,EAAE,KAAK,IAAI,eAAe;AAChC,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AACzD,QAAM,WAAW,kBAAkB;AAEnC,SAAO,CAAC,UAAkB;AACxB,UAAM,mBAAkD,oBAAI,IAAI;AAEhE,UAAM,0BAA0B,KAC7B,OAAO,CAAC,SAAS,iBAAiB,IAAI,KAAK,gBAAgB,IAAI,CAAC,EAChE,MAAM,wBAAwB;AAEjC,eAAW,QAAQ,MAAM;AACvB,UAAI;AACJ,YAAM,eAAe,gBAAgB,gBAAgB,KAAK,EAAE;AAC5D,UAAI,gBAAgB,IAAI,GAAG;AACzB,cAAM,eAAe,gBAAgB,gBAAgB,KAAK,EAAE;AAC5D,cAAM,gBAAgB,aAAa,OAAO;AAE1C,cAAM,CAAC,KAAK,GAAG,IAAI;AAAA,UACjB,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;AAAA,UACrC;AAAA,UACA,CAAC;AAAA,UACD;AAAA,UACA;AAAA,QACF;AAEA,qBAAa,CAAC,KAAK,GAAG;AAEtB,yBAAiB,MAAM,KAAK,KAAK,iBAAiB,OAAO;AAAA,MAC3D;AAEA,YAAM,gBAAgB,aAAa,OAAO;AAE1C,uBAAiB;AAAA,QACf,KAAK;AAAA,QACL,aACI,EAAE,KAAK,WAAW,CAAC,GAAG,KAAK,WAAW,CAAC,EAAE,IACzC,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,EAAE;AAAA,MACvD;AAAA,IACF;AAEA,0BAAsB;AACtB,aAAS,gBAAgB,gBAAgB,CAAC;AAC1C,aAAS,EAAE,MAAM,gBAAgB,CAAC,EAAE;AAAA,EACtC;AACF;",
   "names": []
 }

package/esm/charts/xy-chart/components/overlay/hooks/useApplyZoomDelta.js

@@ -1,3 +1,4 @@
+import { useTooltipReducer } from "../../../../core/components/overlay-tooltip/useTooltipReducer.js";
 import { useSynchronizedSelection } from "../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js";
 import { getZoomStep } from "../../../../core/components/zoom/utils/get-zoom-step.js";
 import { useXYChartData } from "../../../hooks/useXYChartData.js";
@@ -15,6 +16,7 @@ const useApplyZoomDelta = () => {
   const axisIdToScales = useXYChartScales();
   const { axes } = useXYChartData();
   const { resetSelectionState } = useSynchronizedSelection();
+  const dispatch = useTooltipReducer();
   return (deltaStart, deltaEnd, type) => {
     const newCurrentDomain = /* @__PURE__ */ new Map();
     let zoomInEnabled = false;
@@ -47,6 +49,7 @@ const useApplyZoomDelta = () => {
     }
     resetSelectionState?.();
     setState(reduceZoomDomain(newCurrentDomain, zoomInEnabled, zoomOutEnabled));
+    dispatch({ type: "RESET_TOOLTIP" })();
   };
 };
 export {

package/esm/charts/xy-chart/components/overlay/hooks/useApplyZoomDelta.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/hooks/useApplyZoomDelta.ts"],
-  "sourcesContent": ["import { useSynchronizedSelection } from '../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { getZoomStep } from '../../../../core/components/zoom/utils/get-zoom-step.js';\nimport type { AnyNumberScale } from '../../../../core/types/scales.js';\nimport type { ZoomChangeType } from '../../../../core/types/zoom.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { reduceZoomDomain } from '../../../store/reducer-zoom.js';\nimport { useSetState } from '../../../store/selectors.js';\nimport type { XYChartState } from '../../../types/state.js';\nimport {\n  isInfiniteZoomEnabledFor,\n  isZoomEnabledFor,\n} from '../../../utils/axis-interactions.js';\nimport { getCurrentScale, getInitialScale } from '../../../utils/get-scale.js';\nimport { handleZoomChange } from '../utils/zoom-change-handler.js';\n\n/**\n * Returns a callback which given a delta in pixels, will apply the zoom interaction and update the state accordingly\n */\nexport const useApplyZoomDelta = () => {\n  const setState = useSetState();\n  const axisIdToScales = useXYChartScales();\n  const { axes } = useXYChartData();\n  const { resetSelectionState } = useSynchronizedSelection();\n\n  return (deltaStart: number, deltaEnd: number, type: ZoomChangeType) => {\n    const newCurrentDomain: XYChartState['currentDomain'] = new Map();\n\n    let zoomInEnabled = false;\n    let zoomOutEnabled = false;\n\n    const allAxesHaveInfiniteZoom = axes\n      .filter(isZoomEnabledFor)\n      .every((axis) => isInfiniteZoomEnabledFor(axis));\n\n    for (const axis of axes) {\n      if (isZoomEnabledFor(axis)) {\n        const currentScale = getCurrentScale(axisIdToScales, axis.id);\n        const initialScale = getInitialScale(axisIdToScales, axis.id);\n\n        const initialDomain = initialScale.domain();\n\n        const {\n          nextDomain,\n          zoomInEnabled: inEnabled,\n          zoomOutEnabled: outEnabled,\n        } = getZoomStep(\n          currentScale as AnyNumberScale,\n          [+initialDomain[0], +initialDomain[1]],\n          allAxesHaveInfiniteZoom,\n          deltaStart,\n          deltaEnd,\n        );\n\n        zoomInEnabled ||= inEnabled;\n        zoomOutEnabled ||= outEnabled;\n\n        newCurrentDomain.set(\n          axis.id,\n          nextDomain\n            ? { min: nextDomain[0].valueOf(), max: nextDomain[1].valueOf() }\n            : undefined,\n        );\n\n        handleZoomChange(axis, nextDomain[0], nextDomain[1], type);\n      }\n    }\n    resetSelectionState?.();\n    setState(reduceZoomDomain(newCurrentDomain, zoomInEnabled, zoomOutEnabled));\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,gCAAgC;AACzC,SAAS,mBAAmB;AAG5B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAE5B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,wBAAwB;AAK1B,MAAM,oBAAoB,MAAM;AACrC,QAAM,WAAW,YAAY;AAC7B,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,EAAE,KAAK,IAAI,eAAe;AAChC,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AAEzD,SAAO,CAAC,YAAoB,UAAkB,SAAyB;AACrE,UAAM,mBAAkD,oBAAI,IAAI;AAEhE,QAAI,gBAAgB;AACpB,QAAI,iBAAiB;AAErB,UAAM,0BAA0B,KAC7B,OAAO,gBAAgB,EACvB,MAAM,CAAC,SAAS,yBAAyB,IAAI,CAAC;AAEjD,eAAW,QAAQ,MAAM;AACvB,UAAI,iBAAiB,IAAI,GAAG;AAC1B,cAAM,eAAe,gBAAgB,gBAAgB,KAAK,EAAE;AAC5D,cAAM,eAAe,gBAAgB,gBAAgB,KAAK,EAAE;AAE5D,cAAM,gBAAgB,aAAa,OAAO;AAE1C,cAAM;AAAA,UACJ;AAAA,UACA,eAAe;AAAA,UACf,gBAAgB;AAAA,QAClB,IAAI;AAAA,UACF;AAAA,UACA,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;AAAA,UACrC;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAEA,0BAAkB;AAClB,2BAAmB;AAEnB,yBAAiB;AAAA,UACf,KAAK;AAAA,UACL,aACI,EAAE,KAAK,WAAW,CAAC,EAAE,QAAQ,GAAG,KAAK,WAAW,CAAC,EAAE,QAAQ,EAAE,IAC7D;AAAA,QACN;AAEA,yBAAiB,MAAM,WAAW,CAAC,GAAG,WAAW,CAAC,GAAG,IAAI;AAAA,MAC3D;AAAA,IACF;AACA,0BAAsB;AACtB,aAAS,iBAAiB,kBAAkB,eAAe,cAAc,CAAC;AAAA,EAC5E;AACF;",
+  "sourcesContent": ["import { useTooltipReducer } from '../../../../core/components/overlay-tooltip/useTooltipReducer.js';\nimport { useSynchronizedSelection } from '../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { getZoomStep } from '../../../../core/components/zoom/utils/get-zoom-step.js';\nimport type { AnyNumberScale } from '../../../../core/types/scales.js';\nimport type { ZoomChangeType } from '../../../../core/types/zoom.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { reduceZoomDomain } from '../../../store/reducer-zoom.js';\nimport { useSetState } from '../../../store/selectors.js';\nimport type { XYChartState } from '../../../types/state.js';\nimport {\n  isInfiniteZoomEnabledFor,\n  isZoomEnabledFor,\n} from '../../../utils/axis-interactions.js';\nimport { getCurrentScale, getInitialScale } from '../../../utils/get-scale.js';\nimport { handleZoomChange } from '../utils/zoom-change-handler.js';\n\n/**\n * Returns a callback which given a delta in pixels, will apply the zoom interaction and update the state accordingly\n */\nexport const useApplyZoomDelta = () => {\n  const setState = useSetState();\n  const axisIdToScales = useXYChartScales();\n  const { axes } = useXYChartData();\n  const { resetSelectionState } = useSynchronizedSelection();\n  const dispatch = useTooltipReducer();\n\n  return (deltaStart: number, deltaEnd: number, type: ZoomChangeType) => {\n    const newCurrentDomain: XYChartState['currentDomain'] = new Map();\n\n    let zoomInEnabled = false;\n    let zoomOutEnabled = false;\n\n    const allAxesHaveInfiniteZoom = axes\n      .filter(isZoomEnabledFor)\n      .every((axis) => isInfiniteZoomEnabledFor(axis));\n\n    for (const axis of axes) {\n      if (isZoomEnabledFor(axis)) {\n        const currentScale = getCurrentScale(axisIdToScales, axis.id);\n        const initialScale = getInitialScale(axisIdToScales, axis.id);\n\n        const initialDomain = initialScale.domain();\n\n        const {\n          nextDomain,\n          zoomInEnabled: inEnabled,\n          zoomOutEnabled: outEnabled,\n        } = getZoomStep(\n          currentScale as AnyNumberScale,\n          [+initialDomain[0], +initialDomain[1]],\n          allAxesHaveInfiniteZoom,\n          deltaStart,\n          deltaEnd,\n        );\n\n        zoomInEnabled ||= inEnabled;\n        zoomOutEnabled ||= outEnabled;\n\n        newCurrentDomain.set(\n          axis.id,\n          nextDomain\n            ? { min: nextDomain[0].valueOf(), max: nextDomain[1].valueOf() }\n            : undefined,\n        );\n\n        handleZoomChange(axis, nextDomain[0], nextDomain[1], type);\n      }\n    }\n    resetSelectionState?.();\n    setState(reduceZoomDomain(newCurrentDomain, zoomInEnabled, zoomOutEnabled));\n    dispatch({ type: 'RESET_TOOLTIP' })();\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AACzC,SAAS,mBAAmB;AAG5B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAE5B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,wBAAwB;AAK1B,MAAM,oBAAoB,MAAM;AACrC,QAAM,WAAW,YAAY;AAC7B,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,EAAE,KAAK,IAAI,eAAe;AAChC,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AACzD,QAAM,WAAW,kBAAkB;AAEnC,SAAO,CAAC,YAAoB,UAAkB,SAAyB;AACrE,UAAM,mBAAkD,oBAAI,IAAI;AAEhE,QAAI,gBAAgB;AACpB,QAAI,iBAAiB;AAErB,UAAM,0BAA0B,KAC7B,OAAO,gBAAgB,EACvB,MAAM,CAAC,SAAS,yBAAyB,IAAI,CAAC;AAEjD,eAAW,QAAQ,MAAM;AACvB,UAAI,iBAAiB,IAAI,GAAG;AAC1B,cAAM,eAAe,gBAAgB,gBAAgB,KAAK,EAAE;AAC5D,cAAM,eAAe,gBAAgB,gBAAgB,KAAK,EAAE;AAE5D,cAAM,gBAAgB,aAAa,OAAO;AAE1C,cAAM;AAAA,UACJ;AAAA,UACA,eAAe;AAAA,UACf,gBAAgB;AAAA,QAClB,IAAI;AAAA,UACF;AAAA,UACA,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;AAAA,UACrC;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAEA,0BAAkB;AAClB,2BAAmB;AAEnB,yBAAiB;AAAA,UACf,KAAK;AAAA,UACL,aACI,EAAE,KAAK,WAAW,CAAC,EAAE,QAAQ,GAAG,KAAK,WAAW,CAAC,EAAE,QAAQ,EAAE,IAC7D;AAAA,QACN;AAEA,yBAAiB,MAAM,WAAW,CAAC,GAAG,WAAW,CAAC,GAAG,IAAI;AAAA,MAC3D;AAAA,IACF;AACA,0BAAsB;AACtB,aAAS,iBAAiB,kBAAkB,eAAe,cAAc,CAAC;AAC1E,aAAS,EAAE,MAAM,gBAAgB,CAAC,EAAE;AAAA,EACtC;AACF;",
   "names": []
 }